wx-qhb/pageA/subsidy.vue

<template>
	<!-- 百万补贴 -->
	<view style="position: relative;">
		<image src="static/images/back.png"
			style="width: 750rpx;height: 468rpx;position: absolute;top: 0;left: 0;z-index: -1;" mode=""></image>
		<u-navbar :safeAreaInsetTop="true" bgColor="rgba(0,0,0,0)" :placeholder='true'>
			<view class="u-nav-slot u-flex" slot="left">
				<u-icon @click="retur" name="arrow-left" size="19" color='rgba(253, 252, 251, 1)'></u-icon>
				<view class="input" style="width: 400rpx;">
					<u-icon name="search" color="rgba(153, 153, 153, 1)" size="32"></u-icon>
					<input type="text" :placeholder="i18n.Pleaseproductname" v-model="keyword" @input="search" />
				</view>
			</view>
		</u-navbar>
		<!-- 标签 -->
		<view class=" u-row-center" style="margin-top: 52rpx;display: flex;flex-direction: column;align-items: center;">
			<image v-if="show==1" src="static/images/img1.png" style="width: 484rpx;height: 52rpx;" mode=""></image>
			<image v-if="show==2" src="static/images/img2.png" style="width: 346rpx;height: 64rpx;" mode=""></image>
			<image v-if="show==3" src="static/images/goshop.png" style="width: 382rpx;height: 52rpx;" mode=""></image>
			<!-- 			<image src="static/images/img1.png" style="width: 484rpx;height: 52rpx;" mode=""></image> -->
			<view class="biaopqian" style="margin-top: 20rpx;">
				<text>{{i18n.Goodgoods}}</text>
				<text style='margin-left:20rpx;margin-right:20rpx'>|</text>
				<text>{{i18n.Saveeverything}}</text>
				<text style='margin-left:20rpx;margin-right:20rpx'>|</text>
				<text>{{i18n.willpay}}</text>
			</view>
		</view>
		<!-- 商品 -->
		<view class="box">
			<view class="" style="margin-left: -22rpx;">
				<u-tabs :activeStyle="{
            color: 'rgba(248, 53, 39, 1)',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :list="list1" lineColor='rgba(248, 53, 39, 1)' @change='changetab'></u-tabs>
			</view>
			<view class="item u-flex" v-for="(child,index) in list" @click="todetail(child.id)">
				<image :src="child.image" style="width: 232rpx;height: 232rpx;" mode=""></image>
				<view class="u-row-between"
					style="height: 232rpx;display: flex;flex-direction: column;margin-left: 20rpx;">
					<view class="">
						<view class="titl" v-if="language =='zh-CN'">
							{{child.name_cn}}
						</view>
						<view class="titl" v-if="language =='en-US'">
							{{child.name_en}}
						</view>
						<view class="titl" v-if="language =='es-ES'">
							{{child.name_es}}
						</view>
						<view class="titl" v-if="language =='it-IT'">
							{{child.name_ita}}
						</view>
						<view class="u-flex" style="margin-top: 18rpx;column-gap: 18rpx;">
							<text v-if="language =='zh-CN'" class="tabs" v-for="(item,idx) in child.label_arr"
								:key="idx">
								{{item.name_cn}}
							</text>
							<text v-if="language =='en-US'" class="tabs" v-for="(item,idx) in child.label_arr"
								:key="idx">
								{{item.name_en}}
							</text>
							<text v-if="language =='es-ES'" class="tabs" v-for="(item,idx) in child.label_arr"
								:key="idx">
								{{item.name_es}}
							</text>
							<text v-if="language =='it-IT'" class="tabs" v-for="(item,idx) in child.label_arr"
								:key="idx">
								{{item.name_ita}}
							</text>
						</view>
					</view>
					<view class="backimg" style="position: relative;">
						<image src="./static/images/tab.png"
							style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 0;" mode="">
						</image>
						<view v-if="show==1" class="u-flex u-row-between"
							style="position: relative;z-index: 1;padding:0 24rpx ;text-align: center;line-height: 68rpx;">
							<view class="">
								<text class="textone">{{i18n.Subsidized}}</text>
								<text class='texttwo' style="margin-left: 12rpx;">¥</text>
								<text class='texttwo' style="font-size: 40rpx;">{{child.price.slice(0,-3)}}</text>
								<text class='texttwo'>{{child.price.slice(-3)}}</text>
							</view>
							<view class="">
								<text class="textthree">{{i18n.fill}}</text>
								<text class='textfour' style="margin-left: 8rpx;">¥</text>
								<text class='textfour'
									style="font-size:  28rpx;">{{(child.price*1000 - child.discount_price*1000)/1000}}</text>
							</view>
						</view>
						<view v-if="show==2 || show==3" class="u-flex u-row-between"
							style="position: relative;z-index: 1;padding:0 60rpx 0 24rpx ;text-align: center;line-height: 68rpx;">
							<view class="">
								<text v-if="show==2" class="textone">{{i18n.Subsidized}}</text>
								<text v-if="show==3" class="textone">{{i18n.postage}}</text>
								<text class='texttwo' style="margin-left: 12rpx;">¥</text>
								<text class='texttwo' style="font-size: 40rpx;">{{child.price.slice(0,-3)}}</text>
								<text class='texttwo'>{{child.price.slice(-3)}}</text>
							</view>
							<view class="u-flex">
								<image src="static/images/qiang.png" style="width: 48rpx;height: 38rpx;" mode="">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				show: 1,
				list: [], //数据
				Pleaseproductname: '', //搜索内容
				language: 'zh-CN', //语言
				keyword: '',
				parent_id: '',
				page: 1,
				limit: 10,
				last_page: 1,
			};
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				// if (this.current != 0) {
				this.page++
				if (this.show == 1) {
					this.subsid() //百万补贴
				}
				if (this.show == 2) {
					this.pack() //拼包好物
				}
				if (this.show == 3) {
					this.shipp() //海外包邮
				}
				// }
			} else {
				this.$u.toast('已无更多数据')
			}
		},
		computed: {
			i18n() {
				return this.$t('index')
			}
		},
		onLoad(options) {
			this.show = options.show
		},
		onShow() {
			if (uni.getStorageSync('language') != '') {
				this.language = uni.getStorageSync('language')
			}
			if (this.show == 1) {
				this.subsid('') //百万补贴
			}
			if (this.show == 2) {
				this.pack('') //拼包好物
			}
			if (this.show == 3) {
				this.shipp('') //海外包邮
			}
			this.category()
		},
		methods: {
			retur() {
				uni.navigateBack()
			},
			//跳转详情
			todetail(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pageA/productdetails?id=' + id
				})
			},
			//标签切换
			changetab(e) {
				this.parent_id = e.id
				if (this.show == 1) {
					this.subsid(e.id) //百万补贴
				}
				if (this.show == 2) {
					this.pack(e.id) //拼包好物
				}
				if (this.show == 3) {
					this.shipp(e.id) //海外包邮
				}
			},
			search(e) {
				if (this.show == 1) {
					this.subsid(this.parent_id) //百万补贴
				}
				if (this.show == 2) {
					this.pack(this.parent_id) //拼包好物
				}
				if (this.show == 3) {
					this.shipp(this.parent_id) //海外包邮
				}
			},
			//商品分类列表
			category() {
				uni.$u.http.get('/api/goods/category', {
					params: {
						parent_id: 0
					}
				}).then((res) => {
					const categoryArr = res
					this.list1 = [{
						name: '',
						category_id: ''
					}]
					if (this.language == 'en-US') {
						categoryArr.forEach(item => {
							item.name = item.name_en
						})
						this.list1[0].name = 'selection'
					}
					if (this.language == 'es-ES') {
						categoryArr.forEach(item => {
							item.name = item.name_es
						})
						this.list1[0].name = 'Una selección de'
					}
					if (this.language == 'it-IT') {
						categoryArr.forEach(item => {
							item.name = item.name_ita
						})
						this.list1[0].name = 'selezionate'
					}

					if (this.language == 'zh-CN') {
						categoryArr.forEach(item => {
							item.name = item.name_cn
						})
						this.list1[0].name = '精选'
					}
					this.list1 = this.list1.concat(categoryArr)
					console.log(this.list1);
				}).catch(() => {

				})
			},
			//海外包邮接口
			shipp(id) {
				uni.$u.http.post('api/goods/shipping', {
					page: this.page,
					limit: this.limit,
					parent_id: id,
					keyword: this.keyword
				}).then((res) => {
					this.last_page = res.last_page
					if (this.page == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}
				}).catch(() => {

				})
			},
			//拼包好物接口
			pack(id) {
				uni.$u.http.post('/api/goods/pack', {
					page: this.page,
					limit: this.limit,
					parent_id: id,
					keyword: this.keyword
				}).then((res) => {
					this.last_page = res.last_page
					if (this.page == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}
				}).catch(() => {

				})
			},
			//百万补贴接口
			subsid(id) {
				uni.$u.http.post('/api/goods/subsidy', {
					page: this.page,
					limit: this.limit,
					parent_id: id,
					keyword: this.keyword
				}).then((res) => {
					this.last_page = res.last_page
					if (this.page == 1) {
						this.list = res.data
					} else {
						this.list = this.list.concat(res.data)
					}
				}).catch(() => {

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.titl {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #444444;
		line-height: 42rpx;
		text-align: left;
		font-style: normal;
		width: 400rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.box {
		width: 750rpx;
		height: 1266rpx;
		background: #F4F4F4;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin-top: 36rpx;
		padding: 32rpx;
		box-sizing: border-box;

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

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

		.texttwo {
			font-family: HarmonyOS_Sans_Medium;
			font-size: 24rpx;
			color: #F83224;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
		}

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

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

		.backimg {
			width: 418rpx;
			height: 68rpx;
		}

		.item {
			margin-top: 36rpx;
			background: #FDFCFB;
			border-radius: 16rpx;
			width: 702rpx;
			padding: 28rpx 16rpx;
			box-sizing: border-box;
			// height: 256rpx;
		}

		.tabs {
			padding: 0 8rpx;
			height: 32rpx;
			border-radius: 4rpx;
			border: 1rpx solid #E5BC78;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #D48700;
			line-height: 28rpx;
			text-align: center;
			font-style: normal;
		}
	}

	.input {
		width: 458rpx;
		height: 64rpx;
		background: #FDFCFB;
		border-radius: 36rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		margin-left: 16rpx;
		display: flex;
		align-items: center;
	}

	.biaopqian {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
	}
</style>