shoplist.vue 3.9 KB
<template>
	<view class="content">
		<view class="tapnav flextwo">
			<view class="tapnavitem" :class="order==1?'tapnavactive':''" @click="orderrange" :data-id="1">综合</view>
			<view class="tapnavitem" :class="order==2?'tapnavactive':''" @click="orderrange" :data-id="2">最新</view>
			<view class="tapnavitem" :class="order==3?'tapnavactive':''" @click="orderrange" :data-id="3">销量</view>
			<view class="tapnavitem flexone">
				<view class="tapprice" :class="order==4||order==5?'tapnavactive':''" @click="selprice">价格</view>
				<view class="tapbox flexfour">
					
					<view class="tapboxtop">
						<image src="../../static/shangsan.png" mode="" v-if="order==4"></image>
						<image src="../../static/toprow.png" mode="" v-else></image>
					</view>
					<view class="tapboxtop">
						<image src="../../static/xiasan.png" mode="" v-if="order==5"></image>
						<image src="../../static/xiarow.png" mode="" v-else></image>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata" v-if="shoplist.length==0">暂无数据</view>
		<view class="homeshoplist flexone goodboxlist" v-else>
			<view class="homeshopitem goodboxitem" v-for="(item,index) in shoplist" :key="index" @click="goodtail" :data-id="item.id">
				<view class="gooditemimg goodboximg">
					<image :src="item.image" mode="aspectFill"></image>
					<!-- <view class="sale boxsale">已售{{item.sale}}件</view> -->
				</view>
				<view class="goodname hidden boxgoodname">{{item.name}}</view>
				<view class="saleprice">¥{{item.goods_price}}</view>
				<view class="flextwo" style="padding-right: 32rpx;box-sizing: border-box;">
					<view class="huiyuanprice dikou">会员价:¥{{item.vip_price}}</view>
					<view class="goodshou">已售{{item.sales}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	    export default {
	        data() {
	            return {
	                keyword: '',
					order:'',
					page:1,
					price:false,
					shoplist:[],
					type:'',
					nomore:false
	            }
	        },
	        onLoad(options) {
				this.type=options.type
				// 获取商品列表
				this.getfoodlist()
	        },
	        methods: {
				// 排序
				orderrange(e){
					this.order=e.currentTarget.dataset.id;
					this.shoplist=[],
					this.page=1;
					this.getfoodlist()
				},
				selprice(){
					this.price=!this.price;
					if(this.price==true){
						this.order=4
					}else{
						this.order=5
					}
					this.shoplist=[],
					this.page=1;
					this.getfoodlist()
				},
	           // 获取面访商品列表
	           getfoodlist() {
	           	let that = this;
	           	var url = 'flour_goods/get_flour_goods';
	           	var params = {
	           		keyword: that.keyword,
	           		order: that.order,
	           		page: that.page,
	           		pageNum: 10,
					type:that.type
	           	}
				console.log('7766554',params)
	           	app.post(url, params).then((res) => {
	           		console.log(res);
	           		that.shoplist=that.shoplist.concat(res.data.data);
					if(that.page>1){
						if(res.data.data.length==0){
							uni.showToast({
								title:'没有更多了~',
								icon:"none"
							})
							that.nomore=true
						}
					}
					console.log('888',that.shoplist)
	           	}).catch((err) => {
	           
	           	})
	           },
			   
			   goodtail(e){
				   let id=e.currentTarget.dataset.id;
				   console.log(id)
				   // type 1 面访商品
				   uni.navigateTo({
				   	url:'/pages/nearshop/goodtail?id='+id+'&type='+1
				   })
			   }
	      
	        },
			onReachBottom() {
				
				let newpage=this.page;
				newpage++;
				this.page=newpage;
				if(this.nomore==false){
					this.getfoodlist()
				}
			
				
			}
	
	    }
	
	
	
</script>

<style>
	.huiyuanprice {
		color: #FF9417;
		font-size: 22rpx;
	}
	
	.goodboxitem{
		width:345rpx;
	}
	.homeshopitem:nth-child(2n){
		margin-right:0;
	}
	
</style>