lipin/pages/users/order/index.vue

<template>
	<view>
		<view class='my-order'>
			<view class='header bg-color'>
				<view class='picTxt acea-row row-between-wrapper'>
					<view class='text'>
						<view class='name'>订单信息</view>
						<!-- <view>总金额：￥{{orderData.total || 0}} 总子订单数：{{orderData.subOrder || 0}}</view> -->
					</view>
					<view class='pictrue'>
						<image src='../../../static/images/orderTime.png'></image>
					</view>
				</view>
			</view>
			<view class='nav acea-row row-around'>
				<view class='item' :class='orderType==0 ? "on": ""' @click="statusClick(0)">
					<view>待支付</view>
					<view class='num'>{{orderData.unpaid || 0}}</view>
				</view>
				<view class='item' :class='orderType==1 ? "on": ""' @click="statusClick(1)">
					<view>打单中</view>
					<view class='num'>{{orderData.inorder || 0}}</view>
				</view>
				<view class='item' :class='orderType==2 ? "on": ""' @click="statusClick(2)">
					<view>已出单</view>
					<view class='num '>{{orderData.sendOrder || 0}}</view>
				</view>
				<view class='item' :class='orderType==9 ? "on": ""' @click="statusClick(9)">
					<view>异常</view>
					<view class='num'>{{orderData.abnormalOrder || 0}}</view>
				</view>
				<view class='item' :class='orderType==-2 ? "on": ""' @click="statusClick(-2)">
					<view>退货</view>
					<view class='num'>{{orderData.refundOrder || 0}}</view>
				</view>
			</view>
			<view class='list'>
				<view class='item' v-for="(item,index) in orderList" :key="index">
					<view class='title acea-row row-between-wrapper'>
						<view class="acea-row row-middle">
							<view>{{item.time}}</view>
						</view>
						<view v-if="item.status == 0" class='font-color'>未支付</view>
						<view v-if="item.status == 1" class='font-color'>打单中</view>
						<view v-if="item.status == 2" class='font-color'>已出单</view>
						<view v-if="item.status == 9" class='font-color'>异常</view>
						<view v-if="item.status == -2" class='font-color'>已退款</view>
					</view>
					<view class='item-info acea-row row-between row-top'>
						<view class='pictrue'>
							<image :src='item.pro_img'></image>
						</view>
						<view class='text acea-row row-between'>
							<view class='name line2'>{{item.pro_title}}</view>
							<view class='money'>
								<view>{{item.platfrom_name}}</view>
								<view>x{{item.order_count}}</view>
							</view>
						</view>
					</view>
					<view class='totalPrice'>付款金额
						<text class='money font-color'>￥{{item.all_price}}</text>
					</view>
					<view class='bottom acea-row row-right row-middle'>
						<view class='bnt bg-color' v-if="item.status == 0" @click='pay(item.order_id)'>支付</view>
						<view class='bnt cancelBnt' v-if="item.status == 0" @click='cancel(index,item.id)'>取消</view>						
						<view :class='item.status == 0 ? "bnt cancelBnt" : "bnt bg-color"' @click='detail(item.id)'>查看</view>
					</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper' v-if="orderList.length>0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage title="暂无订单~"></emptyPage>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		getOrder,
		getOrderList,
		balancePay,
		cancelOrder
	} from '@/api/api.js';
	import emptyPage from '@/components/emptyPage.vue';
	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				orderList: [], //订单数组
				orderData: {}, //订单详细统计
				orderType: '0', //订单状态
				page: 1,
				limit: 20
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad: function(options) {
			if (options.status) this.orderType = options.status;
			if (this.isLogin) {
				this.getOrderData();
				this.getOrderList();
			} else {
				toLogin();
			}
		},
		methods: {
			//获取订单统计数据
			getOrderData: function() {
				let that = this;
				getOrder().then(res => {
					that.$set(that, 'orderData', res.data);
				})
			},
			//切换类型
			statusClick: function(status) {
				if (status == this.orderType) return;
				this.orderType = status;
				this.loadend = false;
				this.page = 1;
				this.$set(this, 'orderList', []);
				this.getOrderList();
			},
			//获取订单列表
			getOrderList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = "加载更多";
				getOrderList({
					orderType: that.orderType,
					page: that.page,
					limit: that.limit,
				}).then(res => {
					let list = res.data.list || [];
					let loadend = list.length < that.limit;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, 'orderList', that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "没有更多了" : '加载更多';
					that.page = that.page + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = "加载更多";
				})
			},
			pay: function(order_id) {
				let that = this;
				balancePay({'order_id':order_id}).then(res => {
					return that.$util.Tips({
						title: res.data.msg,
						icon: 'success'
					}, () => {
						this.loadend = false;
						this.page = 1;
						this.$set(this, 'orderList', []);
						this.getOrderData();
						this.getOrderList();
					});
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			},
			cancel: function(index, id) {
				let that = this;
				if (!id) return that.$util.Tips({
					title: '缺少订单号无法取消订单'
				});
				cancelOrder({'id':id}).then(res => {
					return that.$util.Tips({
						title: res.data.msg,
						icon: 'success'
					}, function() {
						that.orderList.splice(index, 1);
						that.getOrderData();
					});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				});
			},
			detail: function(id) {
				uni.navigateTo({
					url: '/pages/users/order/detail?id='+id
				})
			}
		},
		onReachBottom: function() {
			this.getOrderList();
		}
	}
</script>

<style scoped lang="scss">
	.bg-color {
	    background-color: #ff5c00!important;
	}
	.my-order .header {
		height: 260rpx;
		padding: 0 30rpx;
	}

	.my-order .header .picTxt {
		height: 190rpx;
	}

	.my-order .header .picTxt .text {
		color: rgba(255, 255, 255, 0.8);
		font-size: 26rpx;
		font-family: 'Guildford Pro';
	}

	.my-order .header .picTxt .text .name {
		font-size: 34rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20rpx;
	}

	.my-order .header .picTxt .pictrue {
		width: 122rpx;
		height: 109rpx;
	}

	.my-order .header .picTxt .pictrue image {
		width: 100%;
		height: 100%;
	}

	.my-order .nav {
		background-color: #fff;
		width: 690rpx;
		height: 140rpx;
		border-radius: 6rpx;
		margin: -73rpx auto 0 auto;
	}

	.my-order .nav .item {
		text-align: center;
		font-size: 26rpx;
		color: #282828;
		padding: 29rpx 0;
	}

	.my-order .nav .item.on {
		font-weight: bold;
		border-bottom: 5rpx solid #ff5c00;
	}

	.my-order .nav .item .num {
		margin-top: 18rpx;
	}

	.my-order .list {
		width: 690rpx;
		margin: 14rpx auto 0 auto;
	}

	.my-order .list .item {
		background-color: #fff;
		border-radius: 6rpx;
		margin-bottom: 14rpx;
	}

	.my-order .list .item .title {
		height: 84rpx;
		padding: 0 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 28rpx;
		color: #282828;
	}

	.my-order .list .item .title .sign {
		font-size: 24rpx;
		padding: 0 7rpx;
		height: 36rpx;
		margin-right: 15rpx;
	}

	.my-order .list .item .item-info {
		padding: 0 30rpx;
		margin-top: 22rpx;
	}

	.my-order .list .item .item-info .pictrue {
		width: 120rpx;
		height: 120rpx;
	}

	.my-order .list .item .item-info .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.my-order .list .item .item-info .text {
		width: 486rpx;
		font-size: 28rpx;
		color: #999;
		margin-top: 6rpx;
	}

	.my-order .list .item .item-info .text .name {
		width: 306rpx;
		color: #282828;
	}

	.my-order .list .item .item-info .text .money {
		text-align: right;
	}

	.my-order .list .item .totalPrice {
		font-size: 26rpx;
		color: #282828;
		text-align: right;
		margin: 27rpx 0 0 30rpx;
		padding: 0 30rpx 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.my-order .list .item .totalPrice .money {
		font-size: 28rpx;
		font-weight: bold;
	}

	.my-order .list .item .bottom {
		height: 107rpx;
		padding: 0 30rpx;
	}

	.my-order .list .item .bottom .bnt {
		width: 176rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		border-radius: 50rpx;
		font-size: 27rpx;
	}

	.my-order .list .item .bottom .bnt.cancelBnt {
		border: 1rpx solid #ddd;
		color: #aaa;
	}
	
	.my-order .list .item .bottom .bnt{
		width: 80px;
	}

	.my-order .list .item .bottom .bnt~.bnt {
		margin-left: 17rpx;
	}

	.noCart {
		margin-top: 171rpx;
		padding-top: 0.1rpx;
	}

	.noCart .pictrue {
		width: 414rpx;
		height: 336rpx;
		margin: 78rpx auto 56rpx auto;
	}

	.noCart .pictrue image {
		width: 100%;
		height: 100%;
	}
</style>