junzitang/pagesT/order/order.vue

<template>
	<view :class="['qn-page-' + theme]" style="height: 100vh">
		<view class="content">
			<view class="navbar">
				<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="[tabCurrentIndex === index ? 'current' : '']" @click="tabClick(item, index)">
					{{ item.text }}
					<view class="current-line primary-btn"></view>
				</view>
			</view>

			<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
				<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
					<scroll-view @scrolltolower="scrollBootom" scroll-y="true" style="height:100%">
						<Aempty text="您还没有相关订单" src="https://onlineimg.qianniao.vip/order.png" v-if="orderList.length === 0"></Aempty>
						<view v-for="(item, index) in orderList" :key="index" class="order-item">
							<view class="clearfix order-no-view" @click="goPage(`/pagesT/order/orderDetail?id=` + item.id)">
								<text class="float_left order-no-text">{{ $_utils.formatDate(item.createTime) }}</text>
								<text class="float_right order-status-text">
									{{
										item.orderStatus === 1
											? '待付款'
											: item.orderStatus === 2
											? '待付款'
											: item.orderStatus === 3
											? '待发货'
											: item.orderStatus === 4
											? '待收货'
											: item.orderStatus === 5
											? '已完成'
											: item.orderStatus === 6
											? '已关闭'
											: item.orderStatus === 7
											? '取消审核中'
											: ''
									}}
								</text>
								<text v-if="item.deliveryTypeMsg === '上门自提'" class="float_right order-status-text" style="font-weight: bold;margin-right: 20rpx;">
									自提码：{{ item.verifyCode }}
								</text>
							</view>
							<view class="goods-ul" @click="goPage(`/pagesT/order/orderDetail?id=` + item.id)">
								<block v-for="(it, gindex) in item.goodsData" :key="gindex">
									<view class="goods-li clearfix" v-if="gindex <= 4">
										<image class="goods-img float_left" :src="it.images && it.images.length ? it.images[0] : ''" mode="aspectFill"></image>
										<view class="buyNum">x{{ it.isEq === 5 ? it.extends.u_1_buy : it.buyNum }}</view>
										<!-- <view class="float_right goods-right">
											<view class="goods-name">{{ it.goodsName }}</view>
											<view class="goods-descrip">
												规格：{{ it.unitName }};
												<text v-for="(ip, indexSp) in it.specGroup" :key="indexSp">{{ ip.specValueName }};</text>
											</view>
											<view class="goods-price clearfix">
												<view class="float_left primary-color">¥{{ it.price }}</view>
												<view class="float_right">*{{ it.buyNum }}</view>
											</view>
										</view> -->
									</view>
								</block>
								<view class="goods-li" style="font-size: 20rpx;color: #666;">查看明细</view>
							</view>
							<view class="money-view">
								共{{ item.goodsNum || 0 }}件商品，总价:￥{{ item.totalMoney || '0.00' }}
								<!-- <view class="price">
									实付款:
									<text style="font-size: 20rpx;">¥</text>
									<view style="display: inline-block;font-size: 32rpx;"><rich-text :nodes="$_utils.splitPrice(item.payAmount)"></rich-text></view>
								</view> -->
							</view>
							<view class="middle clearfix" v-if="[1, 2, 3, 4, 5].includes(item.orderStatus)">
								<!-- #ifdef APP-PLUS||MP-WEIXIN -->
								<!-- （未付款||部分付款）&&订单状态不为已完成&&付款方式不为银行付款 -->
								<view
									class="btnSAdd float_right primary-btn"
									@click="goPay(item)"
									v-if="(parseInt(item.payStatus) === 4 || parseInt(item.payStatus) === 3) && item.orderStatus !== 5 && item.payType.indexOf('4') === -1"
								>
									去付款
								</view>
								<!-- #endif -->
								<!-- 出库状态等于5 的时候可以确认收货 以及出库状态等于6加上退款状态等于5的状态可以确认收货 -->
								<view
									class="btnSAdd float_right primary-btn"
									v-if="(item.orderStatus === 4 && item.outStatus === 5) || (item.orderStatus === 4 && item.outStatus === 6 && item.isRet === 5)"
									@click="confirmOrder(item.id)"
								>
									确认收货
								</view>
								<view @click="goPage('/pagesT/order/orderLogistics?id=' + item.id)" v-if="item.orderStatus > 3 && item.deliveryType === 1" class="btnS float_right">
									查看物流
								</view>
								<view v-if="item.orderStatus === 5" class="btnSAdd float_right primary-btn" @click="againPay(item)">再次购买</view>
								<view v-if="item.payType.indexOf('4') > -1 && [1, 2].includes(item.orderStatus)" class="btnSAdd float_right primary-btn" @click="upBankPic(item)">
									上传凭证
								</view>
								<view
									@click="cancelOrder(item)"
									v-if="[1, 2].includes(item.orderStatus) || (item.orderStatus === 3 && isCancelOrder === 5)"
									class="btnS float_right"
								>
									取消订单
								</view>
							</view>
						</view>
						<u-loadmore margin-top="20" v-if="orderList.length" :status="loading_status" />
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<CancelOrder
			@confirm="cancelOrderConfirm"
			:payStatus="pay_status"
			:cancelbeforeOrderStatus="order_status"
			:orderId="order_id"
			@close="closeCancel"
			:show="cancel_show"
		></CancelOrder>
	</view>
</template>

<script>
import CancelOrder from './CancelOrder.vue';
export default {
	components: {
		CancelOrder
	},
	data() {
		return {
			order_id: 0,
			order_status: '',
			pay_status: '',
			cancel_show: false,
			orderList: [],
			tabCurrentIndex: 0,
			state: 1,
			loading_status: 'loadmore',
			navList: [
				{
					state: 0,
					text: '全部'
				},
				{
					state: 2,
					text: '待付款'
				},
				{
					state: 3,
					text: '待发货'
				},
				{
					state: 4,
					text: '待收货'
				},
				{
					state: 5,
					text: '已完成'
				}
				// {
				// 	state: 6,
				// 	text: '已关闭',
				// }
			],
			page: 1,
			pageSize: 10,
			pageTotal: 0,
			tmplIds: []
		};
	},
	computed: {
		// 是否在发货前可以取消订单
		isCancelOrder() {
			return this.$store.state.baseSet.cancelOrder || 5;
		}
	},
	onLoad(options) {
		this.tabCurrentIndex = +options.state;
		switch (this.tabCurrentIndex) {
			case 0:
				this.state = 0;
				break;
			case 1:
				this.state = 2;
				break;
			case 2:
				this.state = 3;
				break;
			case 3:
				this.state = 4;
				break;
			case 4:
				this.state = 5;
				break;
			case 5:
				this.state = 6;
				break;
		}
		// #ifdef MP-WEIXIN
		this.getSettingDataByMessageId();
		// #endif
	},
	onShow() {
		this.getOrderSelect();
	},
	methods: {
		closeCancel() {
			this.cancel_show = false;
		},
		// 上传打款凭证
		upBankPic(item) {
			const payAmount = item.payStatus === 3 ? item.notPayMoney : item.payAmount;
			this.goPage(`/pagesT/money/BankPay?orderId=${item.id}&payAmount=${payAmount}`, 'redirectTo');
		},
		// 再次购买
		againPay(row) {
			// if (this.$store.state.baseSet.personnelReview === 5) {
			// 验证账户状态
			this.userAudit();
			if (!this.isUserAudit) {
				return;
			}
			// }
			const goodsData = row.goodsData.map(item => {
				let obj = {};
				if (item.isEq === 5) {
					obj = {
						goodsId: item.goodsId,
						buyNum: item.extends.u_1_buy,
						shopId: item.shopId,
						skuId: item.extends.uId_1,
						source: this.$common.source(),
						goodsBasicId: item.goodsBasicId
					};
				} else {
					obj = {
						goodsId: item.goodsId,
						buyNum: item.buyNum,
						shopId: item.shopId,
						skuId: item.skuId,
						source: this.$common.source(),
						goodsBasicId: item.goodsBasicId
					};
				}

				return obj;
			});
			this.$u.api
				.addCart({
					goodsData: goodsData
				})
				.then(res => {
					this.goPage('/pages/cart/cart', 'switchTab');
				});
		},
		// 点击支付
		goPay(item) {
			const price = item.payStatus === 3 ? item.notPayMoney : item.payAmount;
			uni.navigateTo({
				url: `/pagesT/money/pay?id=${item.id}&price=${price}&no=${item.no}&payType=${item.payType}`
			});
		},
		scrollBootom() {
			if (this.pageTotal / this.pageSize > this.page) {
				this.page += 1;
				this.getOrderSelect();
			}
		},
		// 获取订单列表
		getOrderSelect() {
			const params = {
				page: this.page,
				pageSize: this.pageSize
			};
			if (this.state) {
				params.orderStatus = this.state;
			}
			this.loading_status = 'loading';
			this.$u.api
				.getOrderSelect({
					...params
				})
				.then(res => {
					if (this.page === 1) {
						this.orderList = res.data;
					} else {
						this.orderList = this.orderList.concat(res.data);
					}
					this.pageTotal = res.pageTotal;
					this.loading_status = this.$_utils.loadStatus(this.page, this.pageSize, this.pageTotal);
				});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.page = 1;
			switch (this.tabCurrentIndex) {
				case 0:
					this.state = 0;
					break;
				case 1:
					this.state = 2;
					break;
				case 2:
					this.state = 3;
					break;
				case 3:
					this.state = 4;
					break;
			}
			this.orderList = [];
			this.getOrderSelect();
		},
		//顶部tab点击
		tabClick(item, index) {
			this.tabCurrentIndex = index;
			this.state = item.state;
			// this.getOrderSelect()
		},
		//取消订单
		cancelOrder(row) {
			this.cancelHandel(row);
			// #ifdef MP-WEIXIN
			if (this.tmplIds.length) {
				uni.requestSubscribeMessage({
					tmplIds: this.tmplIds,
					success: res => {
						this.cancelHandel(row);
					},
					fail: res => {
						console.log(res);
						this.cancelHandel(row);
					}
				});
			} else {
				this.cancelHandel(row);
			}
			// #endif
			// #ifdef APP-PLUS
			this.cancelHandel(row);
			// #endif
		},
		cancelHandel(row) {
			this.order_id = row.id;
			this.order_status = row.orderStatus;
			this.pay_status = row.payStatus;
			this.cancel_show = true;
		},
		cancelOrderConfirm() {
			this.getOrderSelect();
		},
		// 确认收货
		confirmOrder(id) {
			uni.showModal({
				title: '提示',
				content: '确定要确认收货吗？',
				success: res => {
					if (res.confirm) {
						this.$u.api
							.updateOrderStatus(id, {
								orderStatus: 5
							})
							.then(data => {
								this.$api.msg('操作成功');
								this.getOrderSelect();
							});
					}
				}
			});
		},
		// 获取消息模版ID 后台取消订单， 退款通知
		getSettingDataByMessageId() {
			this.$u.api
				.getSettingDataByMessageId({
					id: [5, 7]
				})
				.then(res => {
					if (res.data.length > 0) {
						this.tmplIds = res.data.map(item => {
							return item.weixinTemplateId;
						});
					}
				});
		}
	}
};
</script>

<style lang="scss">
.order-item {
	margin: 24upx 0;
	padding-bottom: 24rpx;
	background-color: #fff;

	.order-no-view {
		font-size: 24upx;
		padding: 24upx 30upx;
		color: #666;
		font-weight: 300;
		border-bottom: 1upx solid #eee;
		.order-status-text {
			font-weight: 500;
		}
	}

	.goods-li:last-child {
		margin-bottom: 0;
	}
	.goods-ul {
		padding: 20rpx 10rpx 0;
		.goods-li {
			margin: 0 10rpx;
			display: inline-block;
			text-align: center;
			line-height: 100rpx;
			background: #eeeeee;
			border-radius: 16rpx;
			overflow: hidden;
			width: 100upx;
			height: 100upx;
			.goods-img {
				width: 100%;
				height: 100%;
			}
			position: relative;
			.buyNum {
				position: absolute;
				font-size: 20rpx;
				color: #ffffff;
				line-height: 32rpx;
				background-color: rgba($color: #000000, $alpha: 0.6);
				padding: 0 10rpx;
				right: 0;
				bottom: 0;
			}
		}
	}

	.goods-li {
		// background: #fafafa;
		// padding: 30upx 20upx;
		// margin-bottom: 20upx;
		// margin-right: 10rpx;

		.goods-right {
			width: 500upx;
			margin-left: 20upx;

			.goods-name {
				color: #333;
				font-size: 32upx;
				margin-bottom: 19upx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.goods-descrip {
				font-size: 22upx;
				color: #999;
				margin-bottom: 28upx;
				// font-weight: 300;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.goods-price {
				.price {
					color: $price-color;
					font-size: 40upx;
				}

				.sku {
					font-size: 22upx;
					font-weight: 300;
					color: #666;
				}
				.float_right {
					font-size: 24upx;
				}
			}
		}
	}
}

.money-view {
	color: #666666;
	text-align: right;
	font-size: 24upx;
	padding: 24upx 30upx;
	.price {
		font-size: 24upx;
		font-weight: bold;
		color: #000000;
		margin-left: 10rpx;
		display: inline-block;
	}
}
.middle {
	font-size: 24upx;
	position: relative;
	padding: 0 30upx;
}

.btnS {
	padding: 0 20upx;
	line-height: 50upx;
	color: #6e6e6e;
	font-size: 24upx;
	text-align: center;
	margin-left: 20upx;
	height: 50upx;
	background: rgba(241, 241, 241, 1);
	// box-shadow: 0px 2upx 14upx 0px rgba(0, 0, 0, 0.1);
	border-radius: 8upx;
}

.btnSAdd {
	padding: 0 20upx;
	line-height: 50upx;
	color: #ffffff;
	font-size: 24upx;
	text-align: center;
	height: 50upx;
	border-radius: 8upx;
	margin-left: 20rpx;
}
.content {
	background: $page-color-base;
	height: 100vh;
}

.swiper-box {
	height: calc(100% - 80upx);
}

.list-scroll-content {
	height: 100%;
}

.navbar {
	display: flex;
	height: 88upx;
	background: #fff;
	position: relative;
	z-index: 10;
	border-bottom: 1upx solid #eee;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #666666;
		position: relative;
		font-weight: 300;

		&.current {
			font-weight: 500;
			.current-line {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 10upx;
				transform: translateX(-50%);
				width: 40upx;
				height: 6upx;
				background: $base-btn-bg;
				border-radius: 6upx;
				/*border-bottom: 2px solid #F53C28;*/
			}
		}
	}
}
</style>