odd_job_applet/pages/mall/mall.vue

<template>
	<view>

		<scroll-view scroll-x class="bg-white nav text-center solid-bottom echo-fixed-top">
			<view class="cu-item" :class="0==cateid && userid==0?'text-blue cur':''" @tap="tabSelect" data-id="0" data-userid="0"> 全部 </view>
			<view class="cu-item" v-if="userinfo!=false" :class="0==cateid && userid==userinfo.id?'text-green cur':''" @tap="tabSelect" data-id="0" :data-userid="userinfo.id"> 我可兑购的 </view>
			<view class="cu-item" :class="item.id==cateid && userid==0?'text-blue cur':''" v-for="(item, index) in allcate" :key="item.id" @tap="tabSelect" :data-id="item.id" data-userid="0">
				{{item.title}}
			</view>
		</scroll-view>
		<view class="echo-fixed-top-empty"></view>

		<view class="padding-sm bg-white">
			<view class="echo-img-card">
				<block v-for="(item,index) in plist" :key="index">
					<navigator class="item" :url="'/pages/mall/detail?goodsid='+item.id">
						<image :src="item.tilpic" mode="aspectFill"></image>
						<view class="title">{{item.title}}</view>
						<view class="price">{{item.integral}}积分 + ￥{{item.paymoney}}</view>
					</navigator>
				</block>
			</view>
		</view>
		<uni-load-more :status="pstatus"></uni-load-more>
		
		<button class="cu-btn bg-blue lg shadow echo-gomyorder" @tap="goMyOrder"> 我的订单 </button>

	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				userinfo: false,
				cateid: 0,
				userid: 0,
				allcate: [],

				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: []
			};
		},
		onLoad: function(option) {
			_this = this;
			_this.cateid = option.cateid || 0;
			_this.userid = option.userid || 0;
			_this.userinfo = uni.getStorageSync('userinfo') || false;
			_this.$req.ajax({
				path: "mall/allcate",
			}).then((data) => {
				_this.allcate = data.allcate;
				_this.getMore();
			}).catch((err) => {
				uni.showModal({
					title: '信息提示',
					content: err,
					showCancel: false
				});
			});
		},
		onShareAppMessage: function(res) {
			return {
				title: "积分商城",
				path: "/pages/mall/mall"
			}
		},
		onPullDownRefresh: function() {
			_this.ppage = 1;
			_this.pstatus = 'more';
			_this.plist = [];
			_this.getMore();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			goMyOrder: function() {
				uni.navigateTo({
					url: "/pages/mall/myorder"
				});
			},
			tabSelect: function(e) {
				_this.cateid = e.currentTarget.dataset.id;
				_this.userid = e.currentTarget.dataset.userid;
				_this.pageRefresh();
			},
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			getMore: function() {
				_this.$req.ajax({
					path: "mall/listgoods",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						cateid: _this.cateid,
						userid: _this.userid
					}
				}).then((data) => {
					_this.pstatus = data.pstatus;
					_this.plist = _this.plist.concat(data.plist);
					_this.ppage += 1;
					uni.stopPullDownRefresh();
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			goDetail: function(goodsid) {
				uni.navigateTo({
					url: '/pages/mall/detail?goodsid=' + goodsid
				});
			}
		}
	}
</script>

<style>
	.echo-img-card {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.echo-img-card>.item {
		width: 340rpx;
		margin: 15rpx 0rpx 30rpx 0rpx;
		overflow: hidden;
		font-size: 0;
		position: relative;
	}

	.echo-img-card>.item>image {
		width: 340rpx;
		height: 340rpx;
	}

	.echo-img-card>.item>.title {
		width: 100%;
		font-size: 28rpx;
		margin-top: 3px;
		height: 80rpx;
		line-height: 40rpx;
		overflow: hidden;
		color: #333333;
	}

	.echo-img-card>.item>.price {
		line-height: 46rpx;
		color: #FF0036;
		font-size: 32rpx;
	}
</style>