guanmao-wxapp/pages/mine/discount/detail.vue

<template>
	<view class="app-container">
		<no-data v-if="isLoading" :showText="'加载中'"></no-data>
		<no-data v-if="!isLoading && noData" :showText="'加载失败'"></no-data>
		<block v-if="!isLoading && !noData">
			<view class="status-container" v-if="detail.orderStatus == 'NOPAY'">待付款，30分钟内未付款将会关闭订单</view>
			<view class="status-container" v-if="detail.orderStatus == 'DFH'">买家已付款，待卖家发货</view>
			<view class="status-container" v-if="detail.orderStatus == 'YFH'">卖家已发货，已签收状态将在签收7日后自动确认</view>
			<view class="status-container" v-if="detail.orderStatus == 'OVER'">已确定收货，7日后将关闭退款通道</view>
			<view class="status-container" v-if="detail.orderStatus == 'CLOSE'">订单已关闭</view>
			<view class="status-container" v-if="detail.orderStatus == 'REFUND'">订单售后中</view>
			<view class="status-container" v-if="detail.orderStatus == 'TIMEOUT'">订单超时未支付</view>
			
			<view class="main-container">
				<view class="address-container card">
					<view class="icon"><image src="@/static/icon/address.png"></image></view>
					<view class="right">
						<view class="name">{{detail.receUserName}}<text>{{detail.recePhone}}</text></view>
						<view class="address ellipsis-2">{{detail.province}}{{detail.city}}{{detail.area}}{{detail.street}}{{detail.receAddress}}{{detail.houseNo ? detail.houseNo : ''}}</view>
					</view>
				</view>
				
				<view class="goods-container card">
					<view class="title">商品信息</view>
					<block v-for="(item, index) in detail.orderDetails" :key='index'>
						<view class="item" @tap="toGoodsDetail(item.goodsId)">
							<image :src="item.imgUrl" mode="aspectFill"></image>
							<view class="right">
								<view class="top">
									<view class="name ellipsis-2">{{item.goodsName}}</view>
									<view class="des">{{item.goodsSpecValue}}</view>
								</view>
								<view class="bottom">
									<view class="price">￥{{item.price | numToFixed}}</view>
									<view class="num">x{{item.num}}</view>
								</view>
							</view>
						</view>
					</block>
					
				</view>
				
				<view class="peisong-container card">
					<view class="top">
						<view class="left">配送方式</view>
						<view class="right" v-if="detail.freight == 0">快递包邮</view>
						<view class="right" v-if="detail.freight != 0">快递自费</view>
					</view>
					<view class="bottom">
						<view class="left">买家留言</view>
						<view class="right">{{detail.buyerMsg}}</view>
					</view>
				</view>
				
				<view class="peisong-container card">
					<view class="top">
						<view class="left">商品金额</view>
						<view class="right">￥{{detail.totalProductAmount | numToFixed}}</view>
					</view>
					<view class="top">
						<view class="left">运费</view>
						<view class="right">￥{{detail.freight | numToFixed}}</view>
					</view>
					<view class="top">
						<view class="left">优惠券</view>
						<view class="right">-￥{{detail.couponValue | numToFixed}}</view>
					</view>
					<view class="top" v-if="detail.promotionDiscountRate">
						<view class="left">折扣优惠</view>
						<view class="right">-¥{{detail.promotionDiscountAmount | numToFixed}}({{detail.promotionDiscountRate*10}}折)</view>
					</view>
				</view>
				
				<view class="apply-container">
					<view class="user-info2">
						<view class="left">
							<view class="label">业务员：</view>
							<view class="value">{{detail.workerName}}/{{detail.workerPhone}}</view>
						</view>
						<view class="right">{{detail.promotionApplyStatus | statusFilter2}}</view>
					</view>
					
					<view class="data">
						<view class="row">
							<view class="label">订单号：</view>
							<view class="value">{{detail.orderId}}</view>
						</view>
						<view class="row">
							<view class="label">订单金额：</view>
							<view class="value">¥{{((detail.promotionApplyAmount*100 + detail.promotionApplyPayAmount*100))/100 | numToFixed}}</view>
						</view>
						<view class="row">
							<view class="label">减免金额：</view>
							<view class="value">¥{{detail.promotionApplyAmount | numToFixed}}</view>
						</view>
						<view class="row">
							<view class="label">应付金额：</view>
							<view class="value">¥{{detail.promotionApplyPayAmount | numToFixed}}</view>
						</view>
					</view>
					
					<template v-if="detail.promotionApplyStatus > 0">
						<view class="remark" v-if="detail.promotionApplyStatus === 4">
							<view class="label">备注：</view>
							<view class="value">在业务员可优惠折扣设置值内，自动审核通过。</view>
						</view>
						
						<view class="remark" v-if="detail.promotionApplyRemark">
							<view class="label">申请备注：</view>
							<view class="value">{{detail.promotionApplyRemark}}</view>
						</view>
						
						<view class="remark" v-if="detail.promotionApplyStatus === 3 && detail.promotionApplyRejectRemark">
							<view class="label">驳回备注：</view>
							<view class="value">{{detail.promotionApplyRejectRemark}}</view>
						</view>
					</template>
				</view>
				
				<!-- 业务员端：未申请且待支付 -->
				<view class="bottom-container" v-if="!isExamineUser && detail.promotionApplyStatus === 0 && detail.orderStatus === 'NOPAY'">
					<div class="button red" @tap.stop="toApply()">申请减免金额</div>
				</view>
				
				<!-- 业务员端：已驳回 -->
				<view class="bottom-container" v-if="!isExamineUser && detail.promotionApplyStatus === 3">
					<div class="button red" @tap.stop="toApply()">重新申请优惠</div>
				</view>
				
				<!-- 审核端：待审核-->
				<view class="bottom-container" v-if="isExamineUser && detail.promotionApplyStatus === 1">
					<div class="button white" @tap.stop="toExamine(false)">不同意</div>
					<div class="button red" @tap.stop="toExamine(true)">同意</div>
				</view>
				
				<!-- 审核端：已通过未付款 -->
				<view class="bottom-container" v-if="isExamineUser && detail.promotionApplyStatus === 2 && detail.orderStatus === 'NOPAY'">
					<view class="button red" @tap="toExamine(false)">驳回</view>
				</view>
			</view>
		</block>
		
		<view class="apply-dialog" v-show="isApplyDialog">
			<view class="dialog">
				<view class="title">减免金额申请</view>
				<view class="content">
					<view class="row">
						<text>订单金额：¥{{detail.payAmount | numToFixed}}</text>
					</view>
					<view class="row">
						<text>减免金额：</text><input type="digit" v-model="applyForm.amount" /><text></text>
					</view>
					<view class="row">
						<text>应付金额：¥{{((detail.payAmount*100 - applyForm.amount*100)/100) | numToFixed}}</text>
					</view>
					<view class="row">
						<text>备注：</text><input type="text" v-model="applyForm.remark" /><text></text>
					</view>
				</view>
				<view class="btn">
					<view class="left" @tap="cancelApplyForm">取消</view>
					<view class="right" @tap="confirmApplyForm">提交</view>
				</view>
			</view>
		</view>
		
		<view class="apply-dialog" v-show="isExamineDialog">
			<view class="dialog">
				<view class="title">减免金额审核</view>
				<view class="content">
					<view class="row">
						<text>订单金额：¥{{detail.payAmount | numToFixed}}</text>
					</view>
					<view class="row">
						<text>减免金额：¥{{detail.promotionApplyAmount | numToFixed}}</text>
					</view>
					<view class="row">
						<text>应付金额：¥{{detail.promotionApplyPayAmount | numToFixed}}</text>
					</view>
					<view class="row">
						<text>申请备注：{{detail.promotionApplyRemark}}</text>
					</view>
					<view class="row">
						<text>审核备注：</text><input type="text" v-model="examineForm.remark" />
					</view>
				</view>
				<view class="btn">
					<view class="left" @tap="cancelExamineForm">取消</view>
					<view class="right" @tap="confirmExamineForm">提交</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import modalDialog from '@/components/modalDialog.vue';
	
	export default {
		components:{
			modalDialog
		},
		filters: {
			statusFilter2(val) {
				const statusMap = {
					0: '未申请',
					1: '待审核',
					2: '已通过',
					3: '已驳回',
					4: '自动审核通过',
				 }
				 return statusMap[val]
			},
		},
		data() {
			return {
				configInfo: uni.getStorageSync('configInfo'),
				isLoading: true,
				noData: true,
				orderId: null, // 订单id
				orderRefundId: null, // 售后订单id
				isReturnOrder: false, // 是否售后订单
				detail: {}, // 订单详情
				
				isApplyDialog: false,
				applyForm: {
					amount: '',
					remark: '',
				},
				
				isExamineDialog: false,
				examineForm: {
					status: true,
					remark: '',
				},
			}
		},
		
		computed:{
			...mapState(['userInfo', 'isLogin', 'userId']),
			
			isExamineUser() { // 是否审核人员
				return this.userInfo.promotionApplyExamineby;
			},
		},
		
		onLoad({orderId, orderRefundId}) {
			this.orderId = orderId;
			if(orderRefundId != 'undefined') {
				this.isReturnOrder = true;
				this.orderRefundId = orderRefundId;
			}
			this.getOrderDetail();
			
			uni.$on('refreshOrderDetail',(data) => {
				if(data) {
					this.isReturnOrder = true;
					this.orderRefundId = data;
				}else {
					this.isReturnOrder = false;
					this.orderRefundId = null;
				}
				this.getOrderDetail();
			})
		},
		
		methods: {
			getOrderDetail() {
				let url = '', params = {};
				if(this.isReturnOrder) {
					url = '/order/refund/detail';
					params = {
						orderRefundId: this.orderRefundId
					}
				}else {
					url = '/order/detail';
					params = {
						orderId: this.orderId
					}
				}
				this.$axios({
					url,
					method: 'get',
					params
				}).then(res => {
					this.noData = false;
					this.isLoading = false;
					this.detail = res.data;
				}).catch(res => {
					this.noData = true;
					this.isLoading = false;
				})
			},
			
			// 去商品详情
			toGoodsDetail(id) {
				uni.navigateTo({
					url: '/packageGoods/pages/detail?id=' + id
				})
			},
			
			toApply() {
				this.isApplyDialog = true;
			},
			
			// 取消表单
			cancelApplyForm() {
				this.applyForm.amount = '';
				this.isApplyDialog = false;
			},
			
			// 提交表单
			confirmApplyForm() {
				if(!this.applyForm.amount) {
					return this.$toast('请填写优惠金额');
				}
				this.$axios({
					url: '/promotion/apply/apply',
					method: 'post',
					type: 'application/json',
					params: {
						orderId: this.detail.orderId,
						applyAmount: this.applyForm.amount,
						applyRemark: this.applyForm.remark,
					},
					isLoading: 1
				}).then(res => {
					this.$successToast('提交成功');
					this.cancelApplyForm();
					this.getOrderDetail();
				})
			},
			
			toExamine(status) {
				this.examineForm.status = status;
				this.isExamineDialog = true;
			},
			
			// 取消表单
			cancelExamineForm() {
				this.examineForm.remark = '';
				this.isExamineDialog = false;
			},
			
			// 提交表单
			confirmExamineForm() {
				this.$axios({
					url: '/promotion/apply/examine',
					method: 'post',
					params: {
						orderId: this.detail.orderId,
						examineReuslt: this.examineForm.status,
						promotionApplyRejectRemmark: this.examineForm.remark,
					},
					isLoading: 1
				}).then(res => {
					this.$successToast('提交成功');
					this.cancelExamineForm();
					this.getOrderDetail();
				})
			},
			
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		box-sizing: border-box;
	}
	.status-container {
		background: #FE781F;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.main-container {
		padding: 20rpx 20rpx 120rpx;
	}
	.address-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 150rpx;
		padding: 0 20rpx;
		.icon {
			width: 52rpx;
			height: 52rpx;
			border-radius: 50%;
			background: linear-gradient(-90deg,#ff4042 0%, #fe781f 100%);
			display: flex;
			flex-shrink: 0;
			justify-content: center;
			align-items: center;
			margin-right: 20rpx;
			image {
				width: 28rpx;
				height: 36rpx;
			}
		}
		.right {
			width: 600rpx;
			.name {
				font-size: 32rpx;
				color: #333333;
				text {
					font-size: 28rpx;
					color: #999999;
					margin-left: 16rpx;
				}
			}
			.address {
				font-size: 28rpx;
				color: #666666;
				line-height: 34rpx;
				margin-top: 10rpx;
			}
		}
	}
	.goods-container {
		padding: 0 20rpx;
		.title {
			font-size: 32rpx;
			color: #333333;
			line-height: 32rpx;
			padding-top: 20rpx;
		}
		.item {
			padding: 20rpx 0;
			border-bottom: 1px solid #eaeaea;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child {
				border: none;
			}
			image {
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}
			.right {
				width: 470rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.top {
					.name {
						font-size: 28rpx;
						color: #333333;
						line-height: 36rpx;
					}
					.des {
						font-size: 28rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price {
						font-size: 28rpx;
						color: #FF3F42;
						line-height: 28rpx;
					}
					.num {
						font-size: 28rpx;
						color: #333333;
						line-height: 28rpx;
					}
				}
			}
		}
	}
	.peisong-container {
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 88rpx;
			border-bottom: 1px solid #eaeaea;
		}
		.bottom {
			display: flex;
			align-items: center;
			min-height: 88rpx;
			.left {
				margin-right: 40rpx;
				flex-shrink: 0;
			}
			.right {
				padding: 10rpx 0;
				line-height: 32rpx;
			}
		}
	}
	.apply-container {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 20rpx;
		.user-info {
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			.left {
				display: flex;
				align-items: center;
				.head {
					display: block;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
				.user {
					font-size: 24rpx;
					color: #333333;
					line-height: 30rpx;
					margin-left: 10rpx;
				}
			}
			.right {
				font-size: 28rpx;
				color: #FE781F;
			}
		}
		.user-info2 {
			height: 48rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left {
				display: flex;
				align-items: center;
				line-height: 48rpx;
				.label {
					width: 128rpx;
					font-size: 26rpx;
					color: #999999;
				}
				.value {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}
			}
			.right {
				font-size: 28rpx;
				color: #FE781F;
			}
		}
		.data {
			.row {
				display: flex;
				align-items: center;
				line-height: 48rpx;
				.label {
					width: 128rpx;
					font-size: 26rpx;
					color: #999999;
				}
				.value {
					flex: 1;
					font-size: 28rpx;
					color: #666666;
				}
			}
		}
		.remark	{
			font-size: 26rpx;
			color: #999999;
			display: flex;
			padding: 6rpx 0;
			.label {
				flex-shrink: 0;
				line-height: 36rpx;
			}
			.value {
				flex: 1;
				line-height: 36rpx;
			}
		}
	}
	.bottom-container {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background: #FFFFFF;
		border-top: 1px solid #F4F2F2;
		.button {
			width: 150rpx;
			height: 56rpx;
			border-radius: 56rpx;
			text-align: center;
			line-height: 56rpx;
			font-size: 28rpx;
			margin-left: 15rpx;
			&:first-child {
				margin-left: 0;
			}
			&.gray {
				color: #999999;
				border: 1px solid #999999;
			}
			&.white {
				color: #FF3F42;
				border: 1px solid #FF3F42;
			}
			&.red {
				color: #FFFFFF;
				border: 1px solid #FF3F42;
				background: #FF3F42;
			}
		}
	}
	.apply-dialog {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		align-items: center;
		justify-content: center;
		.dialog {
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			.title {
				font-size: 36rpx;
				font-weight: 500;
				text-align: center;
				line-height: 100rpx;
				padding-bottom: 10rpx;
			}
			.content {
				padding: 0 40rpx 30rpx;
				.row {
					height: 50rpx;
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color: #333333;
					input {
						flex: 1;
						height: 50rpx;
						border: 1px solid #E5E5E5;
						margin-right: 16rpx;
						padding: 0 12rpx;
						font-size: 28rpx;
					}
				}
			}
			.btn {
				border-top: 1px solid #eaeaea;
				display: flex;
				&> view {
					flex: 1;
					text-align: center;
					line-height: 100rpx;
					font-size: 32rpx;
					&.left {
						color: #666666;
					}
					&.right {
						color: #FFFFFF;
						background: #FF3F42;
					}
				}
			}
		}
		
	}
</style>