ppl/pages/shop/duihuan.vue

<template>
	<view>
		<view class="top">
			<view :class="xz=='全部'?'xuanzhong':'wxz'" @click="change('全部')">全部</view>
			<view :class="xz==item?'xuanzhong':'wxz'" @click="change(item)" v-for="(item, index) in classlist">{{item}}</view>
		</view>
		<view class="list">
			<view class="item" v-for="(item, index) in data" :key="index" @click="duihuan(item)">
				<image :src="item.litpic" style="width: 100%;" mode="widthFix"></image>
				<view class="btn">{{item.proname}}</view>
				<view class="btn">复销：￥{{item.price}}</view>
			</view>
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				classlist:[],
				xz:'全部'
			}
		},
		methods: {
			change(zt){
				this.xz=zt;
				this.getlist();
			},
			getlist() {
				var data = new Object();
				data.class=this.xz
				data.lx=1
				// console.log(this.xz)
				this.$api
					.MhGetModel(data, 'shop/list')
					.then(res => {
						this.data = res.data.data;
						this.classlist = res.data.class;
					})
					.catch(err => {
						// console.log('request fail', JSON.stringify(err));
					});
			},
			duihuan(item){
				//手动预约的  要求输入数量
				uni.navigateTo({
					url: 'dhtj?id='+item.id+'&cpmc='+item.proname+'&price='+item.price+'&lx=1'
				});
			},	
		},		
		onLoad() {
			this.getlist()
		}
	}
</script>

<style>
	page {
		padding: 15rpx;
		background:   #98a737;
		background-attachment: fixed !important;
		background-repeat: no-repeat !important;
	}
   .btn{line-height: 200%;}
	.b1 {
		overflow: hidden;
		padding: 10rpx 15rpx;
		color: #f1a325;
		background: #fff0d5;
		border: 1rpx solid #ffdcbc;
	}

	.list {
		display: table;
		justify-content: space-between;
		padding: 20rpx 0;
		width:100%;
	}

	.item {
		display: inline-block;
		background: #f1a325;width: calc(50% - 20rpx);
		border-radius: 10rpx;
		font-size: 28rpx;overflow: hidden;
		color: #fff;
		text-align: center;
		padding-bottom: 10rpx;margin-bottom: 20rpx;
		float: left;
	}
	.list .item:nth-child(even){margin-left: 20rpx;}
	.top{display: flex;justify-content: left;border-bottom: #fff solid 1rpx;line-height: 60rpx;padding-bottom: 10rpx;}
	.xuanzhong{color: #fff;background: #8a9e0a;display: inline-block;text-align: center;padding: 0 10rpx;font-size: 28rpx;}
	.wxz{color: #fff;display: inline-block;text-align: center;margin: 0 10rpx;padding: 0 10rpx;font-size: 28rpx;}
</style>