ppl/pages/shop/shop.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.jflist" :key="index">
				<image :src="item.litpic" style="width: 100%;" mode="widthFix"></image>
				<view>{{item.proname}}</view>
				<view class="btn">{{item.price}}积分</view>
			</view>
		</view>
		
		<view class="list">
			<view class="item" v-for="(item, index) in data.lplist" :key="index">
				<image :src="item.litpic" style="width: 100%;" mode="widthFix"></image>
				<view>{{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
				// 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));
					});
			}
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style>
	page {
		padding: 15rpx;
		background:   #98a737;
		background-attachment: fixed !important;
		background-repeat: no-repeat !important;
	}

	.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% - 10rpx);
		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>