flavorOfTimeSz/subPackages/activity/xinjiang.vue

<template>
	<view class="bg">
		<image v-if="headImg" :src="showImg(headImg)" class="topImg" mode="widthFix"></image>
		<view class="main-container">
			<view class="flex flex-between">
				<view class="main-title">
					<view class="header-left-line" style="width: 6rpx;height: 20rpx;"></view>
					商品列表
				</view>
				<view class="sort-area">
					<view :class="['sort-item',search==0?'active':'']" @click="changeSearch(0)">综合</view>
					<view :class="['sort-item',search==2?'active':'']" @click="changeSearch(2)">销量</view>
					<view :class="['sort-item',(search==3||search==4)?'active':'']" class="sort-item" @click="changeSearch(search==3?4:3)">
						<text>价格{{search==3?"从低到高":search==4?"从高到低":""}}</text>
						<view class="search-item">
							<view class="rotate-90">
								<uni-icons type="left" size="11" :color="search==3?'#71873D':'#A0A0A0'"></uni-icons>
							</view>
							<view class="rotate-90">
								<uni-icons type="right" size="11" :color="search==4?'#71873D':'#A0A0A0'"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="product-container flex-between" style="align-items: flex-start;">
				<view v-for="(column, indexs) in 2" :key="indexs">
					<view class="column-product" v-if="index % 2 == indexs"  @click="gotoDetailByType(item)" :key="index"
						v-for="(item,index) in list">
						<image class="img" :src="showImg(item.headimg)" mode="aspectFill"></image>
						<view class="content flex-column">
							<view class="title">{{item.title}}</view>
							<view class="tags no-scrollbar" v-if="item.display_tags">
								<view class="tag-item" v-for="(tag,tagIndex) in item.display_tags.split(',')">{{tag}}</view>
							</view>
							<view class="flex-between" style="margin-top: 17rpx;">
								<view v-html="formatePrice(item.price/100)"></view>
								<view class="btn">已售{{item.sales_number}}件</view>
							</view>
						</view>
					</view>
				</view>
				
				</view>
<!-- 			<image @click="returnTop" v-show="showGoTop" class="back-img" 
			src="https://static.ticket.sz-trip.com/uploads/20251015/82d48498bdf14ded3061bec9defa5138.png"></image> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				headImg: '',
				finish:false, 
				list: [],
				showGoTop: false,
				
				search: 0,
				
			}
		},
		onLoad(option) {
			this.getHeadImg(2406)
			this.getGoods()
		},
		onReady() {
		},
		methods: {
			productInit () {
				let _this = this
				let typeList = [650,651,647,649,653,654,656]
				// 获取所有农产品子类目 pid_type 20
				Promise.all(
					typeList.map(x=>_this.Post({pid:x},'/api/product/tag_list'))
				).then(typeRes => {
					typeRes.forEach(type => {
						if (type.data.length>0) {
							typeList = typeList.concat(type.data.map(x=>x.id))
						}
					})
					this.typeList = typeList
					this.getGoods()
				})
			},

			getHeadImg (id) {
				this.Post({id},'/api/multimedia/detail').then(res => {
					this.headImg = res.data.head_img
					uni.setNavigationBarTitle({
						title:res.data.title
					})
				});	
			},
			// 产品列表
			getGoods() {
				let param = {}
				// if (search == 1) { param = {order: 'asc',sort:'sales_number'} }
				if (this.search == 2) { param = {order: 'desc',sort:'p.sales_number'} }
				if (this.search == 3) { param = {order: 'asc',sort:'p.price'} }
				if (this.search == 4) { param = {order: 'desc',sort:'p.price'} }
				
				this.Post({
					// tag_id: 119,
					tag_id: 120,
					offset: this.list.length,
				    limit: 4,
					...param,
				},'/api/product/get_product_by_tag_subject').then(res => {
					if (res.data.list.length < 4) {
						this.finish = true
					}
					this.list = this.list.concat(res.data.list||[])
				})
			},
			
			changeSearch (value) {
				this.search = value
				this.list = []
				this.getGoods()
			},
			
			returnTop(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200,
				})
			},
		},
		onPageScroll(res) {
			this.showGoTop = res.scrollTop > 200 ? true : false;
		},
		onReachBottom() {
			setTimeout(()=>{
				if(!this.finish) this.getGoods()
			},500)
		},
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 750rpx;
		min-height: 100vh;
		overflow-x: hidden;
	}
	
	.topImg {
		width: 100%;
	}

	.main-container{
		width: 100%;
		margin-top: -100rpx;
		padding: 0 26rpx 60rpx;
		position: relative;
		.main-title{
			font-weight: 500;
			font-size: 29rpx;
			color: #363636;
			display: flex;
			align-items: center;
		}
		.sort-area{
			display: flex;
			font-weight: 400;
			font-size: 25rpx;
			color: #A0A0A0;
			.sort-item{
				padding-left: 32rpx;
				display: flex;
				align-items: center;
			}
			.sort-item.active{
				color: #71873D;
			}
			
			.search-item{
				padding-left: 9rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				line-height: 0.6;
			}
		}
	}


	.product-container{
		padding:18rpx 0  0;
	}
	
	.column-product{
		width: 339rpx;
		background: #FFFFFF;
		border-radius: 21rpx;
		overflow: hidden;
		margin-bottom: 21rpx;
		.img{
			width: 339rpx;
			height: 339rpx;
			border-radius: 21rpx 21rpx 0rpx 0rpx;
		}
		.title{
			font-weight: 400;
			font-size: 27rpx;
			color: #393939;
		}
		.content{
			width: 100%;
			flex: 1;
			height: fit-content;
			padding: 0rpx 15rpx 15rpx;
		}
		.price{
			font-weight: 500;
			font-size: 34rpx;
			color: #FF0000;
			&::before{
				content: "￥";
				font-size: 24rpx;
			}
		}
		
		.btn{
			font-weight: 400;
			font-size: 21rpx;
			color: #A0A0A0;
			.sale-num{
				
			}
		}
	}
	
	.tags{
		display: flex;
		margin-top: 17rpx;
		overflow-x: auto;
		overflow-y: hidden;
		.tag-item{
			border-radius: 3rpx 3rpx 3rpx 3rpx;
			border: 1rpx solid #798B41;
			font-weight: 400;
			font-size: 21rpx;
			color: #798B41;
			padding: 4rpx 10rpx;
			margin-right: 8rpx;
			flex-shrink: 0;
		}
	}
	
	.bottom-img{
		width: 123.95rpx;
		height: 103.06rpx;
		margin: 74rpx auto 0;
		display: block;
	}
	.back-img{
		position: fixed;
		width: 66rpx;
		height: 66rpx;
		bottom: 66rpx;
		right: 26rpx;
	}
	.rotate-90 {
		transform: rotate(90deg);
	}

</style>