odd_job_applet/pages/mall/myorder.vue

<template>
	<view>

		<scroll-view scroll-x class="bg-white nav text-center solid-bottom echo-fixed-top">
			<view class="cu-item flex-sub" data-status="0" :class="status=='0'?'text-orange cur':''" @tap="tabSelect">全部</view>
			<view class="cu-item flex-sub" data-status="2" :class="status=='2'?'text-orange cur':''" @tap="tabSelect">待支付</view>
			<view class="cu-item flex-sub" data-status="3" :class="status=='3'?'text-orange cur':''" @tap="tabSelect">已支付</view>
			<view class="cu-item flex-sub" data-status="4" :class="status=='4'?'text-orange cur':''" @tap="tabSelect">已完成</view>
			<view class="cu-item flex-sub" data-status="5" :class="status=='5'?'text-orange cur':''" @tap="tabSelect">已退单</view>
			<view class="cu-item flex-sub" data-status="1" :class="status=='1'?'text-orange cur':''" @tap="tabSelect">已取消</view>
		</scroll-view>
		<view class="echo-fixed-top-empty"></view>

		<block v-for="(item,index) in plist" :key="item.id">
			<view class="cu-item bg-white margin-top-sm">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar lg" :style="'background-image:url('+ item.tilpic +');'"></view>
						<view class="content echo-order-venue">
							<view class="text-grey">
								<text class="text-cut">{{item.title}}</text>
							</view>
							<view class="text-gray text-sm flex">
								<view class="text-cut">
									订单号：{{item.ordersn}}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="cu-list menu sm-border solid-bottom" style="margin-top: 0rpx;">
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">订单状态</text>
						</view>
						<view class="action">
							<text class="text-lg text-right basis-sm text-grey" v-if="item.status==1">已取消</text>
							<text class="text-lg text-right basis-sm text-red" v-if="item.status==2">待支付</text>
							<text class="text-lg text-right basis-sm text-green" v-if="item.status==3">已支付</text>
							<text class="text-lg text-right basis-sm text-green" v-if="item.status==4">已完成</text>
							<text class="text-lg text-right basis-sm text-orange" v-if="item.status==5">已退单</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">兑购数量</text>
						</view>
						<view class="action">
							<text class="text-lg">{{item.buynumber}} 件</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-grey">积分&金额</text>
						</view>
						<view class="action">
							<text class="text-lg">{{item.integral}}积分 + ￥{{item.paymoney}}</text>
						</view>
					</view>
				</view>
				<view class="solid-top grid text-center col-2" v-if="item.status==1">
					<view class="padding-tb text-grey solid-right" @tap="deleteOrder(item.id)">删除订单</view>
					<view class="padding-tb" @tap="goPage('/pages/mall/order?orderid='+item.id)">订单详情</view>
				</view>
				<view class="solid-top grid text-center col-2" v-else-if="item.status==2">
					<view class="padding-tb text-grey solid-right" @tap="closeOrder(item.id)">取消订单</view>
					<view class="padding-tb text-red" @tap="goPage('/pages/mall/order?orderid='+item.id)">立即支付</view>
				</view>
				<view class="solid-top grid text-center col-1" v-else>
					<view class="padding-tb" @tap="goPage('/pages/mall/order?orderid='+item.id)">订单详情</view>
				</view>
			</view>
		</block>
		<uni-load-more :status="pstatus"></uni-load-more>

	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
	var _this;
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				userinfo: false,
				status: 0,
				pstatus: 'more',
				ppage: 1,
				psize: 20,
				plist: []
			};
		},
		onLoad: function(option) {
			_this = this;
			var userinfo = uni.getStorageSync('userinfo') || false;
			if (userinfo == false) {
				uni.redirectTo({
					url: '/pages/login/login'
				});
				return false;
			}
			_this.userinfo = userinfo;
			_this.getMore();
		},
		onPullDownRefresh: function() {
			_this.ppage = 1;
			_this.pstatus = 'more';
			_this.plist = [];
			_this.getMore();
		},
		onReachBottom: function() {
			if (_this.pstatus !== 'more') {
				return;
			}
			_this.getMore();
		},
		methods: {
			closeOrder: function(orderid) {
				_this.$req.ajax({
					path: "mall/closeorder",
					data: {
						orderid: orderid,
						userid: _this.userinfo.id
					}
				}).then((data) => {
					uni.showModal({
						title: '信息提示',
						content: '订单取消成功。',
						showCancel: false,
						success: function(res) {
							_this.pageRefresh();
						}
					});
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			deleteOrder: function(orderid) {
				_this.$req.ajax({
					path: "mall/deleteorder",
					data: {
						orderid: orderid,
						userid: _this.userinfo.id
					}
				}).then((data) => {
					uni.showModal({
						title: '信息提示',
						content: '订单删除成功。',
						showCancel: false,
						success: function(res) {
							_this.pageRefresh();
						}
					});
				}).catch((err) => {
					uni.showModal({
						title: '信息提示',
						content: err,
						showCancel: false
					});
				});
			},
			getMore: function() {
				_this.$req.ajax({
					path: "mall/listorder",
					data: {
						ppage: _this.ppage,
						psize: _this.psize,
						userid: _this.userinfo.id,
						status: _this.status
					}
				}).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
					});
				});
			},
			tabSelect: function(e) {
				_this.status = e.currentTarget.dataset.status;
				_this.pageRefresh();
			},
			pageRefresh: function() {
				_this.pstatus = 'more';
				_this.ppage = 1;
				_this.plist = [];
				_this.getMore();
			},
			goPage: function(pageurl) {
				uni.navigateTo({
					url: pageurl
				});
			}
		}
	}
</script>

<style>
	.cu-list.menu-avatar>.cu-item .content {
		width: calc(100% - 96rpx - 60rpx - 20rpx) !important;
	}
</style>