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

<template>
	<view class="app-container">
		<view class="tab-container">
			<view class="item" :class="tabCurrent === 100 ? 'current':''" @tap="changeTab(100)">全部</view>
			<view class="item" :class="tabCurrent === 1 ? 'current':''" @tap="changeTab(1)">待审核</view>
			<view class="item" :class="tabCurrent === 2 ? 'current':''" @tap="changeTab(2)">已通过</view>
			<view class="item" :class="tabCurrent === 3 ? 'current':''" @tap="changeTab(3)">已驳回</view>
		</view>
		
		<view class="list-container">
			<block v-for="(item, index) in dataList" :key='index'>
				<view class="item" @tap="toOrderDetail(item.orderId, item.orderRefundId)">
					
					<view class="user-info">
						<view class="left">
							<image :src="configInfo.minLogo3" mode="aspectFill" class="head"></image>
							<view class="user">
								<view>{{item.userName}}</view>
								<view>{{item.phone}}</view>
							</view>
						</view>
						<view class="right">{{item.orderStatus | statusFilter}}</view>
					</view>
					
					<view class="goods_list">
						<block v-for="(goodsItem, goodsIndex) in item.orderDetails" :key='goodsIndex'>
							<view class="goods" :class="'goods'+goodsIndex">
								<image :src="goodsItem.imgUrl" mode="aspectFill"></image>
								<view class="main">
									<view class="row1">
										<view class="name ellipsis-2">{{goodsItem.goodsName}}</view>
										<view class="price">￥{{goodsItem.price}}</view>
									</view>
									<view class="row2">
										<view>{{goodsItem.goodsSpecValue}}</view>
										<view>x{{goodsItem.num}}</view>
									</view>
								</view>
							</view>
						</block>
					</view>
					
					<view class="user-info2" v-if="item.promotionApplyStatus > 0">
						<view class="left">
							<view class="label">业务员：</view>
							<view class="value">{{item.workerName}}/{{item.workerPhone}}</view>
						</view>
						<view class="right">{{item.promotionApplyStatus | statusFilter2}}</view>
					</view>
					
					<view class="data">
						<view class="row">
							<view class="label">订单号：</view>
							<view class="value">{{item.orderId}}</view>
						</view>
						<view class="row">
							<view class="label">订单金额：</view>
							<view class="value">¥{{((item.promotionApplyAmount*100 + item.promotionApplyPayAmount*100))/100 | numToFixed}}</view>
						</view>
						<view class="row">
							<view class="label">减免金额：</view>
							<view class="value">¥{{item.promotionApplyAmount | numToFixed}}</view>
						</view>
						<view class="row">
							<view class="label">应付金额：</view>
							<view class="value">¥{{item.promotionApplyPayAmount | numToFixed}}</view>
						</view>
					</view>
					
					<template v-if="item.promotionApplyStatus > 0">
						<view class="remark" v-if="item.promotionApplyStatus === 4">
							<view class="label">备注：</view>
							<view class="value">在业务员可优惠折扣设置值内，自动审核通过。</view>
						</view>
						
						<view class="remark" v-if="item.promotionApplyRemark">
							<view class="label">申请备注：</view>
							<view class="value">{{item.promotionApplyRemark}}</view>
						</view>
						
						<view class="remark" v-if="item.promotionApplyStatus === 3 && item.promotionApplyRejectRemark">
							<view class="label">驳回备注：</view>
							<view class="value">{{item.promotionApplyRejectRemark}}</view>
						</view>
					</template>
					
					<!-- 业务员端：未申请且待支付 -->
					<view class="btn-group" v-if="!isExamineUser && item.promotionApplyStatus === 0 && item.orderStatus === 'NOPAY'">
						<div class="button red" @tap.stop="toApply(item)">申请减免金额</div>
					</view>
					
					<!-- 业务员端：已驳回 -->
					<view class="btn-group" v-if="!isExamineUser && item.promotionApplyStatus === 3">
						<div class="button red" @tap.stop="toApply(item)">重新申请优惠</div>
					</view>
					
					<!-- 审核端：待审核 -->
					<view class="btn-group" v-if="isExamineUser && item.promotionApplyStatus === 1">
						<div class="button white" @tap.stop="toExamine(item, false)">不同意</div>
						<div class="button red" @tap.stop="toExamine(item, true)">同意</div>
					</view>
					
					<!-- 审核端：已通过未付款 -->
					<view class="btn-group" v-if="isExamineUser && item.promotionApplyStatus === 2 && item.orderStatus === 'NOPAY'">
						<div class="button red" @tap.stop="toExamine(item, false)">驳回</div>
					</view>
				</view>
			</block>
		</view>
		<no-data v-if="!dataList.length" :showText="'空空如也'"></no-data>
		<loading-text v-if="dataList.length"  :loading="loading" :noMore="noMore" ></loading-text>
		
		<view class="apply-dialog" v-show="isApplyDialog">
			<view class="dialog">
				<view class="title">减免金额申请</view>
				<view class="content">
					<view class="row">
						<text>订单金额：¥{{applyItem.payAmount | numToFixed}}</text>
					</view>
					<view class="row">
						<text>减免金额：</text><input type="digit" v-model="applyForm.amount" /><text></text>
					</view>
					<view class="row">
						<text>应付金额：¥{{((applyItem.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>订单金额：¥{{examineItem.payAmount | numToFixed}}</text>
					</view>
					<view class="row">
						<text>减免金额：¥{{examineItem.promotionApplyAmount | numToFixed}}</text>
					</view>
					<view class="row">
						<text>应付金额：¥{{examineItem.promotionApplyPayAmount | numToFixed}}</text>
					</view>
					<view class="row">
						<text>申请备注：{{examineItem.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';
		
	export default {
		filters: {
			statusFilter(val) {
				const statusMap = {
					NOPAY: '待付款',
					DFH: '待发货',
					YFH: '待收货',
					OVER: '已完成',
					CLOSE: '已关闭',
					REFUND: '售后中',
					TIMEOUT: '超时未支付'
				 }
				 return statusMap[val]
			},
			statusFilter2(val) {
				const statusMap = {
					0: '未申请',
					1: '待审核',
					2: '已通过',
					3: '已驳回',
					4: '自动审核通过',
				 }
				 return statusMap[val]
			},
		},
		data() {
			return {
				configInfo: uni.getStorageSync('configInfo'),
				tabCurrent: 100, // 当前选择值
				dataList: [], // 优惠券列表
				pageNum: 1,
				pageSize: 8,
				noMore: false,
				loading: false,
				
				isApplyDialog: false,
				applyItem: {},
				applyForm: {
					amount: '',
					remark: '',
				},
				
				isExamineDialog: false,
				examineItem: {},
				examineForm: {
					status: true,
					remark: '',
				},
			}
		},
		
		computed:{
			...mapState(['userInfo', 'isLogin', 'userId']),
			
			isExamineUser() { // 是否审核人员
				return this.userInfo.promotionApplyExamineby;
			},
		},
		
		onLoad() {
			this.getList();
			uni.setNavigationBarTitle({
			　　title: '用户减免金额' + (this.isExamineUser ? '审核':'申请')
			})
		},
		
		// 下拉刷新
		onPullDownRefresh() {
			this.pageNum = 1;
			this.getList();
		},
		
		// 上拉加载
		onReachBottom() {
			this.getList(1);
		},
		
		methods: {
			getList(loadMore) {
				if(this.noMore && loadMore)return;
				this.noMore = false
				if(!loadMore){
					this.pageNum = 1;
				}else{
					this.loading = true;
				}
				this.$axios({
					url: '/order/my/order',
					method: 'get',
					params: {
						pageNo: this.pageNum,
						pageSize: this.pageSize,
						promotionApplyStatus: this.tabCurrent,
						userId: this.userId
					},
					isLoading: !loadMore
				}).then(res => { 
					let _list = res.data.records;
					let pageTotal = res.data.pages;
					if(this.pageNum >= pageTotal){
						this.noMore = true;
					}
					if (_list.length) {
						this.pageNum += 1
					}
					if (loadMore) {
						this.dataList = this.dataList.concat(_list);
						this.loading = false;
					} else {
						this.dataList = _list;
					}
					
					uni.stopPullDownRefresh();
				})
			},
			
			changeTab(tab) {
				this.tabCurrent = tab;
				this.getList();
			},
			
			// 去订单详情
			toOrderDetail(orderId, orderRefundId) {
				uni.navigateTo({
					url:'/pages/mine/discount/detail?orderId=' + orderId + '&orderRefundId=' + orderRefundId
				})
			},
			
			toApply(item) {
				this.applyItem = item;
				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.applyItem.orderId,
						applyAmount: this.applyForm.amount,
						applyRemark: this.applyForm.remark,
					},
					isLoading: 1
				}).then(res => {
					this.$successToast('提交成功');
					this.cancelApplyForm();
					this.getList();
				})
			},
			
			toExamine(item, status) {
				this.examineForm.status = status;
				this.examineItem = item;
				this.isExamineDialog = true;
			},
			
			// 取消表单
			cancelExamineForm() {
				this.examineForm.remark = '';
				this.isExamineDialog = false;
			},
			
			// 提交表单
			confirmExamineForm() {
				this.$axios({
					url: '/promotion/apply/examine',
					method: 'post',
					params: {
						orderId: this.examineItem.orderId,
						examineReuslt: this.examineForm.status,
						promotionApplyRejectRemmark: this.examineForm.remark,
					},
					isLoading: 1
				}).then(res => {
					this.$successToast('提交成功');
					this.cancelExamineForm();
					this.getList();
				})
			},
		}
	}
</script>

<style lang="scss">
	.app-container {
		background: #F4F2F2;
		padding: 108rpx 20rpx 0;
		box-sizing: border-box;
	}
	.tab-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		background: #FFFFFF;
		.item {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			&.current {
				color: #FF3F42;
				&::after {
					content: '';
					display: block;
					width: 80rpx;
					height: 6rpx;
					background: #FF3F42;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -40rpx;
				}
			}
		}
	}
	.list-container {
		.item {
			margin-bottom: 20rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 20rpx 10rpx;
			.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;
				}
			}
			.goods_list {
				border-top: 1px solid #eaeaea;
				border-bottom: 1px solid #eaeaea;
				padding: 10rpx 0;
				margin-bottom: 10rpx;
			}
			.goods {
				display: flex;
				justify-content: space-between;
				padding: 10rpx 0;
				image {
					width: 140rpx;
					height: 140rpx;
					display: block;
					flex-shrink: 0;
					margin-right: 20rpx;
				}
				.main {
					width: 510rpx;
					.row1 {
						display: flex;
						justify-content: space-between;
						.name {
							font-size: 28rpx;
							line-height: 36rpx;
						}
						.price {
							font-size: 28rpx;
							margin-left: 20rpx;
							color: #666666;
						}
					}
					.row2 {
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						color: #999999;
						margin-top: 10rpx;
					}
				}
			}
			.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;
				}
			}
			.btn-group {
				height: 68rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				&.btn-group2 {
					justify-content: space-between;
					.tips {
						font-size: 28rpx;
						color: #FF3F42;
					}
					.btns {
						display: flex;
					}
				}
				.button {
					height: 48rpx;
					border-radius: 48rpx;
					text-align: center;
					line-height: 48rpx;
					font-size: 24rpx;
					margin-left: 20rpx;
					flex-shrink: 0;
					padding: 0 20rpx;
					min-width: 76rpx;
					&: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>