wx-qhb/pages/index/index.vue

<template>
	<!-- 商城 -->
	<view class="">
		<!-- <view class="index-navbar"> -->
		<view style="position: relative;">
			<!-- 自定义导航栏 -->
			<image src="../../static/images/index/back.png"
				style="width: 750rpx;height: 1200rpx;position: absolute;top: 0;z-index: -1;" mode=""></image>
			<u-navbar bgColor='rgba(255, 215,215, 1)' :placeholder='true' :fixed='true'>
				<view class="u-nav-slot" slot="left" style="display: flex;">
					<image @click="tochat" src="../../static/images/index/xiaoxi.png" mode=""
						style="width: 40rpx;height: 40rpx;">
					</image>
					<image @click="counter" src="../../static/images/index/compile.png" mode=""
						style="width: 40rpx;height: 40rpx;margin-left: 22rpx;"></image>
					<image src="../../static/images/index/dianhua.png" mode=""
						style="width: 40rpx;height: 40rpx;margin-left: 22rpx;"></image>
				</view>
				<view class="u-nav-slot" slot="center" style="width: 226rpx;">
					<u-subsection bgColor='rgba(248, 50, 36, 0.1)' activeColor='#F83224' inactiveColor='#222'
						:list="list" :current="current" @change="sectionChange"></u-subsection>
				</view>
			</u-navbar>
			<view class="" style="margin-top: 30rpx;padding:0 24rpx;">
				<!-- 搜索 -->
				<view class="search">
					<view class="u-flex">
						<u-icon name="search" size='32'></u-icon>
						<input type="text" v-model="keyword" :placeholder="i18n.Searchcon" />
					</view>
					<view class="right" @click="search">
						{{i18n.search}}
					</view>
				</view>
				<!-- tabs -->
				<view class=""
					style="display: flex;margin-top: 20rpx;align-items: center;justify-content: space-between;">
					<u-tabs :list="list1" @change='changetab'></u-tabs>
					<view class="border">
					</view>
					<view class="u-flex" style="margin-left: 24rpx;width: 100rpx;" @click="shoptype">
						<image src="../../static/images/index/fenlei.png" style="width: 24rpx;height: 24rpx;;" mode="">
						</image>
						<text class="fenlei">{{i18n.sort}}</text>
					</view>
				</view>
				<!-- 轮播图 -->
				<view class="" style="margin-top: 20rpx;">
					<u-swiper radius='10' :indicator='true' :list="banner"></u-swiper>
				</view>
			</view>
		</view>
		<view class="shopback">
			<view class="u-flex u-row-between">
				<!-- 百亿补贴 -->
				<view class="bigbox" @click="subsidy(1)">
					<view class="u-flex">
						<image src="../../static/images/index/butie.png" style="width: 104rpx;height: 26rpx;" mode="">
						</image>
						<view class="biaoqian" style="background: #F35D22;">{{i18n.expensive}}</view>
					</view>
					<view class="u-flex" style="flex-wrap: wrap;justify-content: space-between;">
						<view v-for="(item,idx) in subsidylist" class="ssbox  " style="margin-top: 16rpx;">
							<view class="" style="position: relative">
								<image :src="item.image" style="width: 144rpx;height: 144rpx;" mode=""></image>
								<view class="u-flex u-row-center"
									style="position: absolute;bottom: 10rpx;width: 144rpx;">
									<view class="u-flex">
										<view class="tag u-flex" style="background: rgba(243, 93, 34, 1);">
											<image src="../../static/images/index/down.png"
												style="width: 28rpx;height: 28rpx;position: relative;z-index: 3;"
												mode="">
											</image>
											<text>{{(item.price*1000 - item.discount_price*1000)/1000 + i18n.RMB}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="money" style="text-align: center;">
								￥{{item.discount_price}}
							</view>
						</view>
					</view>
				</view>
				<!-- 拼包好物 -->
				<view class="">
					<view class="smallbox" @click="subsidy(2)">
						<view class="u-flex">
							<image src="../../static/images/index/pinbao.png" style="width: 164rpx;height: 26rpx;"
								mode=""></image>
							<view class="biaoqian" style="background: rgba(255, 148, 21, 1);">{{i18n.expensive}}
							</view>
						</view>
						<view class="u-flex" style="flex-wrap: wrap;justify-content: space-between;">
							<view v-for="(item,idx) in packlist" class="ssbox  " style="margin-top: 16rpx;">
								<view class="" style="position: relative">
									<image :src="item.image" style=";width: 144rpx;height: 144rpx;" mode=""></image>
									<view class="u-flex u-row-center"
										style="position: absolute;bottom: 10rpx;width: 144rpx;">
										<view class="u-flex">
											<!-- 												<image src="../../static/images/index/label.png"
													style="width: 28rpx;height: 28rpx;position: relative;z-index: 3;"
													mode="">
												</image> -->
											<view v-if="item.is_discount==0" class="tag u-flex"
												style="background-color: rgba(251, 73, 70, 1);">
												<image src="../../static/images/index/down.png"
													style="width: 28rpx;height: 28rpx;position: relative;z-index: 3;"
													mode="">
												</image>
												<text>{{(item.price*1000 - item.discount_price*1000)/1000 + i18n.RMB}}</text>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="smallbox" @click="subsidy(3)">
						<view class="u-flex">
							<image src="../../static/images/index/postage.png" style="width: 116rpx;height: 26rpx;"
								mode=""></image>
							<view class="biaoqian" style="background:rgba(248, 50, 36, 1)">{{i18n.Something}}</view>
						</view>
						<view class="u-flex" style="flex-wrap: wrap;justify-content: space-between;">
							<view v-for="(item,idx) in shippList" class="ssbox  " style="margin-top: 8rpx;">
								<view class="" style="position: relative">
									<image :src="item.image" style="width: 124rpx;height: 124rpx;" mode=""></image>
									<view class="shopname" v-if="language =='zh-CN'">
										{{item.name_cn}}
									</view>
									<view class="shopname" v-if="language =='en-US'">
										{{item.name_en}}
									</view>
									<view class="shopname" v-if="language =='es-ES'">
										{{item.name_es}}
									</view>
									<view class="shopname" v-if="language =='it-IT'">
										{{item.name_ita}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="u-flex u-row-between" style="flex-wrap: wrap;">
				<view class="bigbox" v-for="(item,index) in recomlist" style="position: relative;"
					@click="todetail(item.id)">
					<image v-if="item.is_discount==0" src="../../static/images/index/discount.png"
						style="width: 60rpx;height: 36rpx;position: absolute;left: 12rpx;top: 12rpx;z-index: 10;"
						mode="">
					</image>
					<image :src="item.image"
						style="width: 340rpx;height: 340rpx;;margin-left: -20rpx;margin-top: -18rpx;" mode=""></image>
					<view class="title" v-if="language =='zh-CN'">
						{{item.name_cn}}
					</view>
					<view class="title" v-if="language =='en-US'">
						{{item.name_en}}
					</view>
					<view class="title" v-if="language =='es-ES'">
						{{item.name_es}}
					</view>
					<view class="title" v-if="language =='it-IT'">
						{{item.name_ita}}
					</view>
					<view class="">
						<text class="money">
							¥{{item.price}}
						</text>
						<text class="weight">
							¥{{item.weight}}kg
						</text>
					</view>
					<view class="u-flex" style="flex-wrap: wrap;margin-top: 18rpx;column-gap: 12px;overflow: hidden;">
						<view v-if="item.is_shipping == 0" class="taber"
							style="border: 1rpx solid #E5BC78;color: #E5BC78;">{{i18n.postage}}
						</view>
						<view class="taber" style="border: 1rpx solid rgba(237, 9, 9, 1);color: rgba(237, 9, 9, 1);">
							{{i18n.Trade}}
						</view>
						<!-- <view class="taber" style="border: 1rpx solid #E5BC78;color: #E5BC78;">以旧换新</view> -->
					</view>
				</view>
			</view>
		</view>

		<u-popup :show="show" mode='center' :round='16' bgColor='transparent'>
			<view style="position: relative;">
				<image src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
					style="width: 570rpx;height: 764rpx;border-radius: 16rpx;" mode=""></image>
				<view class="" style="text-align: center;" @click='show=false'>
					<image src="../../static/images/index/close.png" mode="" style="width: 70rpx;height: 70rpx;">
					</image>
				</view>
			</view>
		</u-popup>
		<!-- <view class="" style="height: 160rpx;" v-if="recomlist.length >3"></view> -->
		<kj-tabbar :value1=1></kj-tabbar>
	</view>
</template>

<script>
	import {
		recom
	} from "../../network/shopApi.js";
	export default {
		data() {
			return {
				recomlist: [], //推荐列表
				//顶部分段器
				list: [],
				current: 1,
				//tabs
				list1: [{
					name: '推荐',
				}],
				//轮播图
				banner: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				show: true,
				timer: '',
				language: 'zh-CN',
				subsidylist: [], //百万补贴
				packlist: [], //拼包好物
				shippList: [], //海外包邮
				keyword: '',
				page: 1,
				index:0,
				parent_id:'',
				last_page:''
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onReachBottom() {
			if(this.page == this.last_page) {
				this.$u.toast('已无更多数据')
			} else {
				this.page ++ 
				this.goods(this.parent_id)
			}
		},
		onLoad(options) {
			this.list = [this.i18n.border, this.i18n.shop]
			// this.seater()
			if (options.current) {
				this.current = options.current
			}
			//商品推荐
			this.recommend()
		},
		onShow() {
			// tabs列表
			this.category()
			//百万补贴
			this.subsid()
			//拼包好物
			this.pack()
			//海外包邮
			this.shipp()
			if (uni.getStorageSync('language') != '') {
				this.language = uni.getStorageSync('language')
			}
		},
		methods: {
			//海外包邮接口
			shipp() {
				uni.$u.http.post('api/goods/shipping').then((res) => {
					this.shippList = res.splice(0, 2)
				}).catch(() => {

				})
			},
			//拼包好物接口
			pack() {
				uni.$u.http.post('/api/goods/pack').then((res) => {
					this.packlist = res.splice(0, 2)
				}).catch(() => {

				})
			},
			//百万补贴接口
			subsid() {
				uni.$u.http.post('/api/goods/subsidy').then((res) => {
					this.subsidylist = res.splice(0, 4)
				}).catch(() => {

				})
			},
			//标签切换
			changetab(e) {
				this.index = e.index
				this.parent_id = e.id
				if (this.index == 0) {
					this.recommend()
				} else {
					this.recomlist = []
					this.goods(this.parent_id)
				}
			},
			search(){
				if (this.index == 0) {
					this.recommend()
				} else {
					this.recomlist = []
					this.goods(this.parent_id)
				}
			},
			//商品推荐
			recommend() {
				uni.$u.http.post('/api/goods/recommend',{keyword:this.keyword}).then((res) => {
					this.recomlist = res
				}).catch(() => {

				})
			},
			//商品分类列表
			category() {
				uni.$u.http.get('/api/goods/category', {
					params: {
						parent_id: 0
					}
				}).then((res) => {
					const categoryArr = res
					this.list1 = [{
						name: ''
					}]
					if (this.language == 'en-US') {
						categoryArr.forEach(item => {
							item.name = item.name_en
						})
						this.list1[0].name = 'recommend'
					}
					if (this.language == 'es-ES') {
						categoryArr.forEach(item => {
							item.name = item.name_es
						})
						this.list1[0].name = 'recomendación'
					}
					if (this.language == 'it-IT') {
						categoryArr.forEach(item => {
							item.name = item.name_ita
						})
						this.list1[0].name = 'raccomandata'
					}

					if (this.language == 'zh-CN') {
						categoryArr.forEach(item => {
							item.name = item.name_cn
						})
						this.list1[0].name = '推荐'
					}
					this.list1 = this.list1.concat(categoryArr)
				}).catch(() => {

				})
			},
			//商品列表
			goods(id) {
				uni.$u.http.get('/api/goods', {
					params: {
						parent_id: id,
						limit: 10,
						page: this.page,
						keyword: this.keyword
					}
				}).then((res) => {
					this.recomlist = this.recomlist.concat(res.data) 
					this.last_page = res.last_page
				}).catch(() => {

				})
			},
			//百万补贴跳转
			subsidy(item) {
				uni.navigateTo({
					url: '/pageA/subsidy?show=' + item
				})
			},
			//物流计算器
			counter() {
				uni.navigateTo({
					url: '/pageA/counter'
				})
			},
			//消息
			tochat() {
				uni.navigateTo({
					url: '/pageA/chat/news'
				})
			},
			//商品分类
			shoptype() {
				uni.navigateTo({
					url: '/pageA/shoptype'
				})
			},
			//分段器切换
			sectionChange(index) {
				this.current = index;
				console.log(index);
				if (this.current == 0) {
					uni.switchTab({
						url: '/pages/express/express?current=0'
					})
					this.current = 1
				}
			},
			//详情
			todetail(id) {
				uni.navigateTo({
					url: '/pageA/productdetails?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: rgba(0, 0, 0, 0)
	}

	.index-navbar {
		position: sticky;
		top: 0;
		left: 0;
		width: 750rpx;
		z-index: 100;
	}

	::v-deep .u-tabs {
		width: 560rpx;
	}

	.taber {
		border-radius: 4rpx;
		padding: 4rpx 8rpx;
		margin-bottom: 10rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #D48700;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.title {
		font-family: SFPro, SFPro;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		width: 300rpx;
		height: 72rpx;
	}

	.weight {
		font-family: SFPro, SFPro;
		font-weight: 400;
		font-size: 20rpx;
		color: #888888;
		line-height: 24rpx;
		text-align: left;
		font-style: normal;
		margin-left: 12rpx;
	}

	.shopname {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #666666;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}

	.money {
		font-family: HarmonyOS_Sans_Medium;
		font-size: 28rpx;
		color: #F83224;
		line-height: 38rpx;
		text-align: right;
		font-style: normal;
	}

	.biaoqian {
		height: 28rpx;
		border-radius: 6rpx;
		padding: 6rpx;
		margin-left: 8rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: center;
	}

	.tag {
		// height: 28rpx;
		border-radius: 14rpx 14rpx 14rpx 0rpx;
		border: 1rpx solid #FFFFFF;
		padding: 6rpx;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		box-sizing: border-box;
		// margin-left: -15rpx;
	}

	.bigbox {
		width: 340rpx;
		// height: 468rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #FFFFFF;
		margin-bottom: 22rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
	}

	.smallbox {
		width: 340rpx;
		height: 226rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #FFFFFF;
		margin-bottom: 22rpx;
		padding: 18rpx 20rpx;
		box-sizing: border-box;
	}

	.shopback {
		width: 750rpx;
		min-height: 1216rpx;
		background: #F4F4F4;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 26rpx 24rpx;
		box-sizing: border-box;

	}

	.fenlei {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		line-height: 40rpx;
		text-align: right;
		font-style: normal;
		margin-left: 8rpx;
	}

	.search {
		width: 702rpx;
		height: 68rpx;
		background: #FFFFFF;
		border-radius: 34rpx;
		padding: 6rpx 6rpx 6rpx 36rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;


		.right {
			width: 100rpx;
			height: 56rpx;
			background: #ED0909;
			border-radius: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 56rpx;
			text-align: center;
		}
	}

	.border {
		width: 2rpx;
		height: 24rpx;
		border: 2rpx solid #979797;
		opacity: 0.2;
		background-color: #979797;
	}

	// ::v-deep .u-navbar__content.data-v-1194bf80 {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	// ::v-deep .u-status-bar.data-v-13f16680 {
	// 	background-color: rgba(0, 0, 0, 0) !important;
	// }

	::v-deep .u-subsection--button.data-v-b14d3440 {
		/* padding: 6rpx 34rpx !important; */
		border-radius: 64rpx !important;
	}

	::v-deep .u-subsection--button__bar.data-v-b14d3440 {
		border-radius: 32rpx !important;
	}
</style>