LocalLivingServicesUniapp/pages/order/record.vue

<template>
	<view class="record">
		<view class="top">
		</view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				协商记录
			</view>
		</view>
		<view class="product">
			<view class="img">
				<image :src="list.productImage" mode=""></image>
			</view>
			<view class="name">
				{{list.productName}}
				<view class="price">
					退款金额：{{list.orderPrice}}
				</view>
			</view>
		</view>
		<view class="history">
			<view class="client"  v-for="(item,index) in list.afterSaleReasonVo" :key="index">
				<view class="title">
					<view class="img" v-if="item.refundType == 0">
						<image :src="item.userAvatar" alt="" />
					</view>
					<view class="img" v-else>
						<image :src="item.logo" alt="" />
					</view>
					<view class="message"  v-if="item.refundType == 0">
						{{item.nickName}}<br />
						<span>{{item.createTime}}</span>
					</view>
					<view class="message" v-else>
						{{item.corporateName}}<br />
						<span>{{item.rejectionTime}}</span>
					</view>
				</view>
				<!-- 用户提交 -->
				<view class="" v-if="item.refundType == 0">
					<view class="information">
						退款金额：¥ {{item.refundPrice}}
					</view>
					<view class="information">
						联系方式：{{item.phone}}
					</view>
					<view class="information">
						申请原因：{{item.reason}}
					</view>
					<view class="information">
						补充说明：{{item.reasonReasonExplain}}
					</view>
				</view>
				<!-- 商家拒绝 -->
				<view class="" v-if="item.refundType == 1">
				<view class="information" >
					拒绝原因：{{item.refuseReason}}
				</view>
				<view class="information">
					补充说明：{{item.refuseReasonExplain}}
				</view>
					</view>
				<!-- 商家同意 -->
				<!-- <view class="information" v-if="item.refundType == 0">
					您已同意退货退款，平台会将退款原路退回。
				</view> -->
				<view class="request" v-if="item.auditType ==0 && item.orderType != 4 ">
					<view class="btn" @click="reject(item)">拒绝</view>
					<view class="btn" @click="agree(item)">同意</view>
				</view>
			</view>
		</view>
		<!-- 拒绝原因弹窗 -->
		<view class="popup" v-if="isRefuse">
			<view class="content">
				<view class="title">
					<span>拒绝原因 </span>
					<image src="/static/index/cut.png" alt="" @click="cutPopup" />
				</view>
				<view class="popup_title">
					拒绝原因
				</view>
				<view class="item" v-for="(item,index) in reasonList" :key="index" @click="selectReason(item,index)">
					{{item.text}}
					<image v-if="item.check" src="/static/product/select.png" mode=""></image>
					<image v-else src="/static/product/round.png" mode=""></image>
				</view>
				<view class="popup_title">
					补充说明（选填）
					<view class="input">
						<textarea v-model="rejectData.refuseReasonExplain" type="textarea" :maxlength="500" rows="3" />
						<span>{{ rejectData.refuseReasonExplain.length }}/500</span>
					</view>
				</view>
				<view class="submit">
					<view class="cancel_btn" @click="cutPopup">
						取消
					</view>
					<view class="submit_btn" @click="refusalRefund">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				orderNo: '',
				reOrderId:'',
				reasonList: [{
						name: '商品已使用',
						check: false,
					},
					{
						name: '服务已核销',
						check: false,
					}
				],
				isRefuse: false,
				rejectData: {
					id: '',
					reOrderId: '',
					refuseReason: '',
					refuseReasonExplain: ''
				}
			}
		},
		methods: {
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getRecord() {
				let data = {
					orderNo: this.orderNo
				}
				this.$http.get("/app/order/locaOrder/afterSaleDetails?orderNo=" + this.orderNo).then(res => {
					if (res.data.code == 200) {
						this.list = res.data.result
						console.log(this.list)
					}
				})
			},
			selectReason(item, index) {
				console.log(item)
				this.reasonList.forEach(reason => {
					reason.check = false;
				});
				this.reasonList[index].check = true
				this.rejectData.refuseReason = item.value
			},
			cutPopup() {
				this.isRefuse = false
			},
			reject(item) {
				console.log(item)
				
				this.isRefuse = true
				this.rejectData.id = item.id
				this.rejectData.reOrderId = item.reOrderId
			},
			//提交拒绝
			refusalRefund() {
				if(this.rejectData.refuseReason==''){
					uni.showToast({
						icon: 'none',
						title: '选择拒绝原因'
					})
					return
				}else{
					this.$http.post("/app/order/locaOrder/refusalRefund", this.rejectData).then(res => {
						if (res.data.code == 200) {
							console.log(res)
							uni.showToast({
								icon: 'none',
								title: '拒绝成功'
							})
							this.isRefuse = false
							this.getRecord()
							// this.list = res.data.result
						}
					})
				}

			},
			getCodeList() {
				this.$http.get("/sys/api/getManyDictItems?dictCodeList=" + 'reason_refusal').then(res => {
					if (res.statusCode == 200) {
						// 
						res.data.reason_refusal.forEach(item => {
							item.check = false
						})
						this.reasonList = res.data.reason_refusal
					}
				})
			},
			// 同意退款
			agree(item){
				let data = {
					reOrderId:this.reOrderId
				}
				this.$http.post("/app/order/locaOrder/agreeRefund",data).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '商家已同意退款'
						})
						this.getRecord()
					}
					else{
						uni.showToast({
							icon: 'none',
							title: res.data.message
						})
					}
				})
				
			}
		},
		mounted() {
			this.getRecord()
			this.getCodeList()
		},
		onLoad(options) {
			this.orderNo = options.orderId
			this.reOrderId = options.orderId
		}
	}
</script>

<style lang="scss" scoped>
	.record {
		width: 100vw;
		height: 100vh;
		background: #F7F8FC;
		display: flex;
		flex-direction: column;
		/*#ifdef APP-PLUS*/
		.top {
			width: 100%;
			height: var(--status-bar-height);
			background: #FFFFFF;
		}

		/*#endif*/
		.head {
			width: 100%;
			height: 112rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			position: relative;

			.cuIcon-back {
				font-size: 40rpx;
				margin-right: 40rpx;
			}

			.case {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		.product {
			
			display: flex;
			border-radius: 16rpx;
			padding: 20rpx 24rpx;
			background-color: #FFFFFF;
			border-top: 1px solid #eeeeee;

			.img {
				width: 132rpx;
				height: 132rpx;
				border-radius: 12rpx;
				overflow: hidden;
				margin-right: 16rpx;

				image {
					width: 132rpx;
					height: 132rpx;
				}
			}

			.name {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 28rpx;
				color: #000000;
				line-height: 35rpx;

				.price {
					font-size: 26rpx;
					color: #666666;
					display: flex;
					align-items: center;
					justify-content: space-between;

					span {
						color: #666666;
					}
				}
			}
		}

		.history {
			flex: 1;
			overflow-y: auto;
			padding: 0px 24rpx;
			margin-top: 18rpx;

			.client {
				background-color: #FFFFFF;
				padding: 20rpx 16rpx;
				box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
				border-radius: 16rpx;
				margin-bottom: 20rpx;

				.title {
					display: flex;
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 16rpx;
					margin-bottom: 16rpx;

					.img {
						width: 80rpx;
						height: 80rpx;
						margin-right: 12rpx;
						border-radius: 8rpx;
						overflow: hidden;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}

					.message {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						font-size: 28rpx;
						color: #000000;

						span {
							font-size: 24rpx;
							color: #999999;
						}
					}
				}

				.information {
					font-size: 26rpx;
					color: #333333;
					margin-bottom: 10rpx;
					word-wrap: break-word;
				}

				.request {
					display: flex;
					align-items: center;
					justify-content: end;
					margin-top: 16rpx;

					.btn {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 112rpx;
						height: 47rpx;
						border-radius: 47rpx;
						border: 1px solid #449AFF;
						font-size: 24rpx;
						color: #449AFF;
						margin-left: 24rpx;
					}
				}
			}
		}

		.popup {
			width: 100vw;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.4);

			.content {
				width: 100%;
				background: #FFFFFF;
				border-radius: 20rpx 20rpx 0rpx 0px;
				padding: 20rpx 24rpx;
				padding-bottom: 16rpx;
				position: absolute;
				bottom: 0;
				left: 0;

				.title {
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 20rpx;
					font-weight: 600;

					image {
						width: 37rpx;
						height: 37rpx;
						position: absolute;
						right: 0;
					}
				}

				.popup_title {
					font-size: 30rpx;
					color: #333333;
					margin-top: 20rpx;
					font-weight: 600;

					.input {
						width: 100%;
						// min-height: 196rpx;
						margin-top: 15rpx;
						padding: 16rpx 16rpx;
						background: #F1F1F2;
						border-radius: 4rpx;
						overflow-y: auto;
						font-weight: normal;

						textarea {
							width: 100%;
							height: 196rpx;
						}

						span {
							display: block;
							text-align: right;
						}
					}
				}

				.item {
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #EEEEEE;

					image {
						width: 28rpx;
						height: 28rpx;
					}
				}

				.submit {
					height: 112rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
					border-top: 1px solid #eeeeee;
					margin-top: 20rpx;

					.cancel_btn {
						width: 324rpx;
						height: 76rpx;
						border-radius: 54rpx;
						border: 1px solid #CCCCCC;
						font-size: 28rpx;
						color: #999999;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.submit_btn {
						width: 324rpx;
						height: 76rpx;
						border-radius: 54rpx;
						background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
						border: 1px solid #CCCCCC;
						font-size: 28rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>