junzitang/pagesT/Distribution/DorderDetail.vue

<template>
	<view style="height: 100%;">
		<u-navbar v-if="navFixed" title="订单详情" title-color="#ffffff" back-icon-color="#ffffff" :border-bottom="false" :background="{ backgroundImage: primaryJb }"></u-navbar>
		<view class="box" v-if="order_detail.orderStatus">
			<view class="top-view primary-btn">
				<uniStatusBar/>
				<view class="nav-bar">
					<image @click="backPage" class="nv-back" src="https://onlineimg.qianniao.vip/ic-back-fff.png" mode="aspectFit"></image>
					<text class="title-text">订单详情</text>
				</view>
				<view class="order-status-view clearfix">
					<view class="float_left">
						<view class="order-status-text">
							<text>
								{{
									order_detail.orderStatus === 1
										? '待付款'
										: order_detail.orderStatus === 2
										? '待付款'
										: order_detail.orderStatus === 3
										? '待发货'
										: order_detail.orderStatus === 4
										? '待收货'
										: order_detail.orderStatus === 5
										? '已完成'
										: order_detail.orderStatus === 6
										? '已关闭'
										: ''
								}}
							</text>
							<view class="children-order-status">
								{{
									order_detail.orderStatus === 1
										? '请尽快付款，宝贝才能快些到您身边哦'
										: order_detail.orderStatus === 2
										? '请尽快付款，宝贝才能快些到您身边哦'
										: order_detail.orderStatus === 3
										? '正在为您紧急备货中……'
										: order_detail.orderStatus === 4
										? '确认宝贝无误后再签收哦！'
										: order_detail.orderStatus === 5
										? '本次交易已完成'
										: order_detail.orderStatus === 6
										? '本次交易已关闭'
										: ''
								}}
							</view>
						</view>
					</view>
					<view class="float_right">
						<text
							class="ibonfont order-icon"
							:class="[
								order_detail.orderStatus === 1
									? 'ibondaifukuan1'
									: order_detail.orderStatus === 2
									? 'ibondaifukuan1'
									: order_detail.orderStatus === 3
									? 'ibondaifahuo1'
									: order_detail.orderStatus === 4
									? 'ibondaishouhuo'
									: order_detail.orderStatus === 5
									? 'ibonyiwancheng'
									: order_detail.orderStatus === 6
									? 'ibonjiaoyiguanbix'
									: ''
							]"
						></text>
					</view>
				</view>
			</view>
			<view class="address-view view-main clearfix">
				<view class="vip-info">
					<text class="vip-i-label">会员：</text>
					<image class="customerAvatar" :src="order_detail.customerAvatar" mode="aspectFill"></image>
					<text>{{ order_detail.customerName }}</text>
				</view>
				<view class="vip-info">
					<text class="vip-i-label">分销层级：</text>
					<text>{{ order_detail.retLevelMsg }}</text>
				</view>
			</view>
			<view class="goods-view view-main">
				<block v-for="(it, gindex) in order_detail.orderGoods" :key="gindex">
					<view class="goods-li clearfix" @click="goPage(`/pagesT/product/product?id=${it.goodsId}`)">
						<image class="goods-img float_left" :src="it.goodsImages" mode="aspectFit"></image>
						<view class="float_right goods-right">
							<view class="goods-name">{{ it.goodsName }}</view>
							<view class="goods-descrip">
								规格：
								<text style="padding-right: 6upx;">{{ it.unitName }}</text>
								<block v-for="(ip, indexSP) in it.specGroup" :key="indexSP">
									<text v-if="indexSP > 0">-</text>
									<text>{{ ip.specValueName }}</text>
								</block>
							</view>
							<view class="goods-price clearfix">
								<view class="float_left">
									<text class="price primary-color">¥{{ it.price }}</text>
								</view>
								<view class="float_right">
									<text class="icon-jia">*</text>
									<text class="goods-num">{{ it.buyNum }}</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="view-main order-info-view">
				<view class="order-info-tit">订单信息</view>
				<view class="order-info-cont">
					<view class="order-info-li">
						<view class="clearfix info-item">
							<text class="subtitle float_left">订单编号：</text>
							<text class="titledetail float_right">{{ order_detail.orderNo || '--' }}</text>
						</view>
						<view class="clearfix info-item">
							<text class="subtitle float_left">下单时间：</text>
							<text class="titledetail float_right">{{ $_utils.formatDate(order_detail.createTime) || '--' }}</text>
						</view>
					</view>

					<view class="order-info-li order-money-view">
						<view class="clearfix info-item">
							<text class="subtitle float_left">支付方式</text>
							<text class="money-val float_right">{{ order_detail.payTypeMsg }}</text>
						</view>
						<view class="clearfix info-item">
							<text class="subtitle float_left">配送方式</text>
							<text class="money-val float_right">{{ order_detail.deliveryMsg || '--' }}</text>
						</view>
					</view>
				</view>
				<view class="order-price-view clearfix">
					<view class="float_left">
						<span>{{ text_set.commission || '佣金' }}：</span>
						<span class="price primary-color">¥{{ order_detail.retMoney }}</span>
					</view>
					<view class="float_right">
						<span>实付款：</span>
						<span class="price primary-color">¥{{ order_detail.payAmount }}</span>
					</view>
				</view>
			</view>
		</view>

		<view class="clearfix botton-btn-view" v-if="[1, 2, 4, 5].includes(order_detail.orderStatus)">
			<!-- #ifdef APP-PLUS||MP-WEIXIN -->
			<BtnView @click="gopay" class=" float_right" v-if="order_detail.orderStatus === 1 || order_detail.orderStatus === 2"><view class="btnS">去付款</view></BtnView>
			<!-- #endif -->
			<BtnView class="float_right" v-if="order_detail.orderStatus === 4" @click="confirmOrder"><view class="btnS">确认收货</view></BtnView>
			<BtnView class="float_right" v-if="order_detail.orderStatus === 5" @click="againPay"><view class="btnS">再次购买</view></BtnView>
			<span @click="cancelOrder" class="clearBtnS float_right" v-if="order_detail.orderStatus === 1 || order_detail.orderStatus === 2">取消订单</span>
		</view>

	</view>
</template>

<script>
import uniStatusBar from '@/components/uni-status-bar/uni-status-bar.vue';
export default {
	components: {
		uniStatusBar
	},
	data() {
		return {
			navFixed: false,
			order_id: 0,
			price: '',
			order_detail: {
				receiveData: {
					area: {}
				},
				deliveryMsg: ''
			},
			no: '',
			// 再次购买的goodsData
			goodsData: [],
			Dorder_id: 0,
			text_set: {}
		};
	},
	onLoad(options) {
		this.Dorder_id = options.id;
		this.text_set = this.$store.state.distributionTextSet;
	},
	onShow() {
		this.getOrderInfoById();
	},
	onPageScroll(val) {
		this.navFixed = val.scrollTop > 5;
	},
	methods: {
		// 再次购买
		 againPay() {
			// if (this.$store.state.baseSet.personnelReview === 5) {
			// 验证账户状态
			this.userAudit();
			if (!this.isUserAudit) {
				return;
			}
			// }
			this.goodsData = this.order_detail.goodsData.map(item => {
				return {
					goodsId: item.goodsId,
					buyNum: item.buyNum,
					shopId: item.shopId,
					skuId: item.skuId,
					source: this.$common.source(),
					goodsBasicId: item.goodsBasicId
				};
			});
			this.$u.api.addCart({
				goodsData: this.goodsData
			}).then(res=>{
				this.goPage('/pages/cart/cart', 'switchTab');
			});
		},
		// 获取订单详情
		 getOrderInfoById() {
			this.$u.api.getCommissionOrderInfo(this.Dorder_id).then(data=>{
				this.order_detail = data.data;
				this.price = this.order_detail.totalMoney;
				this.no = this.order_detail.no;
				this.order_id = data.data.orderId;
			});
		},
		// 去支付
		gopay() {
			uni.navigateTo({
				url: `/pagesT/money/pay?id=${this.order_id}&price=${this.price}&no=${this.no}&payType=${this.order_detail.payType}`
			});
		},
		//取消订单
		cancelOrder() {
			uni.showModal({
				title: '提示',
				content: '确定要取消该订单吗？',
				success: res => {
					if (res.confirm) {
						this.$u.api.updateOrderStatus(this.order_id, {
							orderStatus: 6
						}).then(res=>{
							this.$api.msg('取消成功');
							this.getOrderInfoById();
						});
					}
				}
			});
		},
		confirmOrder() {
			uni.showModal({
				title: '提示',
				content: '确定要确认收货吗？',
				success:  res => {
					if (res.confirm) {
						this.$u.api.updateOrderStatus(this.order_id, {
							orderStatus: 5
						}).then(res=>{
							this.$api.msg('操作成功');
							this.getOrderInfoById();
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
body {
	background: $page-color-base;
}
.top-view {
	background: $base-btn-bg;
	.nav-bar {
		padding: 24upx 0;
		position: relative;
		.nv-back {
			position: absolute;
			top: 24upx;
			left: 24upx;
		}
		.title-text {
			font-size: 32upx;
			color: #fff;
			display: inline-block;
			width: 100%;
			text-align: center;
			height: 40upx;
		}
	}

	.order-status-view {
		color: #fff;
		font-size: 36upx;
		padding: 40upx;
		.order-icon {
			margin-right: 10upx;
			font-size: 80upx;
			opacity: 0.9;
		}
		.children-order-status {
			font-size: 24upx;
			font-weight: 300;
			padding-top: 10upx;
		}
	}
}

.box {
	width: 100%;
	// overflow-y: scroll;
	padding-bottom: 140upx;
	// height: 100%;
	// margin-bottom: 130upx;
	background: $page-color-base;

	.view-main {
		margin-bottom: 24upx;
		background: #fff;
		// border-radius: 12upx;
		padding: 24upx;
	}

	.goods-view {
		padding: 24upx 0;
		.shop-name {
			color: #333;
			font-weight: bold;
			font-size: 24upx;
			padding: 0 24upx 24upx;
			line-height: 30upx;
			.shop-logo {
				width: 30upx;
				height: 30upx;
				vertical-align: middle;
				margin-right: 10upx;
			}
			.order-status {
				color: $uni-color-primary;
			}
		}

		.goods-li:last-child {
			margin-bottom: 0;
		}
		.goods-li {
			background: #fafafa;
			padding: 30upx 20upx;
			margin-bottom: 20upx;
			.goods-img {
				width: 180upx;
				height: 180upx;
			}
			.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;
					}
					.icon-jia {
						color: #666;
						font-size: 24upx;
					}
					.goods-num {
						font-size: 24upx;
					}
				}
			}
		}
	}
}

.address-view {
	font-size: 28upx;
	.vip-info {
		padding-bottom: 20upx;
		.vip-i-label {
			font-size: 24upx;
			color: #666;
		}
		.customerAvatar {
			width: 50upx;
			height: 50upx;
			border-radius: 100%;
			margin-right: 20upx;
			vertical-align: middle;
		}
	}
}

.order-info-view {
	// font-size: 24upx;
	color: #3c3c3c;
	.order-info-tit {
		font-size: 28upx;
		padding-bottom: 20upx;
	}
	.order-info-cont {
		font-size: 24upx;

		.info-item {
			padding-bottom: 10upx;
			.subtitle {
				color: #666;
			}
		}
	}
	.order-info-li {
		border-bottom: 1upx solid #eee;
		padding-bottom: 24upx;
		margin-bottom: 24upx;
		.info-item {
			padding-bottom: 10upx;
			.subtitle {
				color: #666;
				font-weight: 300;
			}
		}
	}

	.order-price-view {
		text-align: right;
		font-size: 26upx;
		.price {
			color: $price-color;
			padding-left: 6upx;
			font-size: 32upx;
			font-weight: 600;
		}
	}
}

.botton-btn-view {
	background: #fff;
	position: fixed;
	box-shadow: 0upx -2upx 10upx 0upx rgba(136, 136, 136, 0.24);
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 20upx;
	font-size: 28upx;

	.btnS {
		width: 240upx;
		line-height: 64upx;
		color: #ffffff;
		text-align: center;
		height: 64upx;
		// background: $base-btn-bg;
		// box-shadow: 0px 2upx 14upx 0upx rgba(116, 190, 66, 0.4);
		border-radius: 40upx;
	}

	.clearBtnS {
		width: 240upx;
		line-height: 64upx;
		color: #6e6e6e;
		text-align: center;
		margin-right: 10upx;
		height: 64upx;
		background: rgba(241, 241, 241, 1);
		border-radius: 40upx;
	}
}

.circleSty {
	display: inline-block;
	background-color: #9e9e9e;
	width: 20upx;
	height: 20upx;
	border-radius: 50%;
	margin-left: 20upx;
}

.subOrder {
	position: absolute;
	top: -10upx;
	left: 60upx;
}
</style>