LocalLivingServicesUniapp/pages/groupMeal/orders/refund.vue

<template>
	<view class="record">
		<u-navbar title="协商记录" :autoBack="true" :placeholder="true" :border-bottom="true"></u-navbar>
		<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">
					<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: {
				productImage: '/static/banner/banner1.png',
				productName: 'productName',
				orderPrice: 'orderPrice',
				afterSaleReasonVo: [
					{refundType: 0, auditType: 0, nickName: 'nickName', createTime: 'createTime', corporateName: 'corporateName', rejectionTime: 'rejectionTime'},
					{refundType: 0, nickName: 'nickName', createTime: 'createTime', corporateName: 'corporateName', rejectionTime: 'rejectionTime'},
					{refundType: 1, nickName: 'nickName', createTime: 'createTime', corporateName: 'corporateName', rejectionTime: 'rejectionTime'},
				]
			},
			orderNo: '',
			reasonList: [{
					name: '商品已使用',
					check: false,
				},
				{
					name: '服务已核销',
					check: false,
				}
			],
			isRefuse: false,
			rejectData: {
				id: '',
				reOrderId: '',
				refuseReason: '',
				refuseReasonExplain: ''
			}
		}
	},
	mounted() {
		// this.getRecord()
		// this.getCodeList()
	},
	onLoad(query) {
		this.orderNo = query.orderId;
	},
	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
				}
			})
		},
		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.orderNo
			}
			this.$http.post("/app/order/locaOrder/agreeRefund",data).then(res => {
				if (res.statusCode == 200) {
					uni.showToast({
						icon: 'none',
						title: '商家已同意退款'
					})
					this.getRecord()
				}
			})
			
		}
	}
}
</script>

<style lang="scss" scoped>
	.record {
		width: 100vw;
		height: 100vh;
		background: #F7F8FC;
		display: flex;
		flex-direction: column;

		.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>