pet_server/pages/refund/refund.vue

<template>
	<view class="content">
		<view class="noOrder" v-if="dataList.length <1">
			暂无数据～～
		</view>
		<view class="card" v-for="(item,index) in dataList" :key="index">
			<!-- 1 -->
			<view class="row" v-if="type === 1">
				<view class="col-name">取宠代理</view>
				<view class="col-money">{{item.senders[0].user.name}}</view>
			</view>
			<view class="row" v-if="type === 1">
				<view class="col-name">派送代理</view>
				<view class="col-money">{{item.senders[1].user.name}}</view>
			</view>
			<view class="row" v-if="type === 1">
				<view class="col-name">结算金额</view>
				<view class="col-money">{{item.settle_amount}}</view>
			</view>
			<view class="row" v-if="type === 1">
				<view class="col-name">订单金额</view>
				<view class="col-money">{{item.real_amount}}</view>
			</view>
			<view class="row" v-if="type === 1">
				<view class="col-name">订单编号</view>
				<view class="col-money">{{item.no}}</view>
			</view>
			<view class="row" v-if="type === 1">
				<view class="col-name">提交时间</view>
				<view class="col-money">
					{{item.settle_submit_at?$u.timeFormat(item.settle_submit_at, 'yyyy年mm月dd日 hh时MM分'):"-"}}
				</view>
			</view>
			<view class="btn" v-if="type === 1">
				<view class="btn-dom" @click="settlement(item.id)">
					结算
				</view>
			</view>
			<!-- 2 -->
			<view class="row" v-if="type === 2">
				<view class="col-name">反馈者昵称</view>
				<view class="col-money">{{item.user.nickname}}</view>
			</view>
			<view class="row" v-if="type === 2">
				<view class="col-name">反馈者手机号</view>
				<view class="col-money">{{item.user.mobile}}</view>
			</view>
			<view class="row" v-if="type === 2">
				<view class="col-name">反馈时间</view>
				<view class="col-money">{{item.created_at_text}}</view>
			</view>
			<view class="row" v-if="type === 2">
				<view class="col-name">反馈内容</view>
				<view class="col-money">{{item.body}}</view>
			</view>
			<view class="btn" v-if="type === 2">
				<view class="btn-dom" @click="feedback(item.id)">
					已处理
				</view>
			</view>

			<!-- 处理弹窗 -->
			<u-modal v-model="showfeedback" cancel-text="取消" confirm-text="确定" show-cancel-button="true"
				@cancel="feedbackcancel" @confirm="feedbackconfirm">
				<view class="feedbackconent">
					<textarea v-model="feedbackconent" placeholder="请输入反馈信息" class="feedbackconent-input" />
				</view>
			</u-modal>

			<!-- 3 -->
			<view class="row" v-if="type === 3">
				<view class="col-name">退款账号</view>
				<view class="col-money">{{item.user.username}}</view>
			</view>
			<view class="row" v-if="type === 3">
				<view class="col-name">退款金额</view>
				<view class="col-money">{{item.refund_amount}}</view>
			</view>
			<view class="row" v-if="type === 3">
				<view class="col-name">订单金额</view>
				<view class="col-money">{{item.real_amount}}</view>
			</view>
			<view class="row" v-if="type === 3">
				<view class="col-name">订单编号</view>
				<view class="col-money">{{item.id}}</view>
			</view>
			<view class="row" v-if="type === 3">
				<view class="col-name">退款时间</view>
				<view class="col-money">{{item.refund_apply_at}}</view>
			</view>
			<view class="row" v-if="type === 3">
				<view class="col-name">退款原因</view>
				<view class="col-money">{{item.refund_reason}}</view>
			</view>
			<view class="image" v-if="type === 3">
				<image v-for="(iitem,index) in item.refund_images" :src="iitem" class="image-dom" :key="index"></image>
			</view>
			<view class="btn" v-if="type === 3">
				<view class="btn-dom" @click="refuse(item.id)">
					拒绝
				</view>
				<view class="btn-dom" @click="agree(item.id)">
					同意
				</view>
			</view>
			<!-- 4 -->
			<view class="row" v-if="type === 4">
				<view class="col-name">退款账号</view>
				<view class="col-money">{{item.user.username}}</view>
			</view>
			<view class="row" v-if="type === 4">
				<view class="col-name">退款金额</view>
				<view class="col-money">{{item.refund_amount}}</view>
			</view>
			<view class="row" v-if="type === 4">
				<view class="col-name">订单金额</view>
				<view class="col-money">{{item.real_amount}}</view>
			</view>
			<view class="row" v-if="type === 4">
				<view class="col-name">订单编号</view>
				<view class="col-money">{{item.no}}</view>
			</view>
			<view class="row" v-if="type === 4">
				<view class="col-name">退款时间</view>
				<view class="col-money">{{item.refund_apply_at}}</view>
			</view>
			<view class="row" v-if="type === 4">
				<view class="col-name">退款原因</view>
				<view class="col-money">{{item.refund_reason}}</view>
			</view>
			<view class="row" v-if="type === 4 && item.refund_status !== -1">
				<view class="col-name">退款状态</view>
				<view class="col-money yellow">
					{{item.refund_status === 0?"审核中":""}}
					{{item.refund_status === 1?"通过":""}}
					{{item.refund_status === 2?"驳回":""}}
				</view>
			</view>
			<view class="btn" v-if="type === 4 && item.status === 80">
				<view class="btn-dom" @click="delorder(item.id)"> 
					删除
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 1,
				// 页码
				page: 1,
				// 数量
				limit: 10,
				// 获取数据
				dataList: [],
				// 处理反馈
				showfeedback: false,
				// 反馈内容
				feedbackId: '',
				feedbackconent: ''
			}
		},
		onLoad(e) {
			this.type = Number(e.type)
			if (this.type === 1) {
				uni.setNavigationBarTitle({
					title: "待结算"
				})
			}
			if (this.type === 2) {
				uni.setNavigationBarTitle({
					title: "待处理的反馈意见"
				})
			}
			if (this.type === 3) {
				uni.setNavigationBarTitle({
					title: "待处理退款"
				})
			}
			if (this.type === 4) {
				uni.setNavigationBarTitle({
					title: "售后管理"
				})
			}
			// 获取数据
			this.getData()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData();
		},
		methods: {
			// 点击删除订单
			delorder(id){
				this.request("/admin_order/order_delete",{id:id},"GET").then(res=>{
					if(res.code === 1){
						this.$u.toast('操作成功')
						this.getData()
					}
				})
			},
			// 点击拒绝退款
			refuse(id){
				let _this = this
				uni.showModal({
					title:"确定要拒绝退款吗？",
					showCancel:true,
					success(e) {
						if(e.confirm){
							_this.request("/admin_order/deal_refund",{id:id,status:2},"GET").then(res=>{
								if(res.code === 1){
									_this.$u.toast("操作成功")
									_this.getData()
								}
							})
						}
					}
				})
			},
			// 点击同意退款
			agree(id){
				let _this = this
				uni.showModal({
					title:"确定要同意退款吗？",
					showCancel:true,
					success(e) {
						if(e.confirm){
							_this.request("/admin_order/deal_refund",{id:id,status:1},"GET").then(res=>{
								if(res.code === 1){
									_this.$u.toast("操作成功")
									_this.getData()
								}
							})
						}
					}
				})
			},
			// 确认反馈
			feedbackconfirm(id) {
				if(this.feedbackconent === ""){
					this.$u.toast('请输入反馈内容')
					return false
				}
				this.request('/admin_order/deal_feedback', {
					id: this.feedbackId,
					body: this.feedbackconent
				}, "GET").then(res => {
					if (res.code === 1) {
						this.feedbackconent = "";
						this.getData()
					}
				})
			},
			// 取消反馈
			feedbackcancel() {
				this.feedbackconent = '';
			},
			// 点击处理反馈
			feedback(id) {
				let _this = this;
				this.showfeedback = true;
				this.feedbackId = id;
				console.log(id);
			},
			// 点击结算
			settlement(id) {
				let _this = this;
				console.log(id);
				uni.showModal({
					title: '提示',
					content: '是否结算此订单？',
					cancelText: "驳回",
					confirmText: "通过",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.request("/admin_order/deal_settle", {
								id: id,
								status: 1
							}, "GET").then(res => {
								console.log(res)
								if (res.code === 1) {
									_this.getData()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
							_this.request("/admin_order/deal_settle", {
								id: id,
								status: 2
							}, "GET").then(res => {
								console.log(res)
								if (res.code === 1) {
									_this.getData()
								}
							})
						}
					}
				});
			},
			// 获取数据
			getData() {
				let url = "";
				if (this.type === 1) {
					url = "/admin_order/wait_settle"
				}
				if (this.type === 2) {
					url = "/admin_order/feedback"
				}
				if (this.type === 3) {
					url = "/admin_order/refund"
				}
				if (this.type === 4) {
					url = "/admin_order/service"
				}
				this.request(url, {
					page: this.page,
					limit: this.limit
				}, "GET").then(res => {
					uni.stopPullDownRefresh();
					if (res.code === 1) {
						this.dataList = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;
		background-color: #F8F8F8;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;

		// 输入反馈
		.feedbackconent {
			height: 300rpx;
			font-size: 30rpx;
			padding: 10rpx;

			.feedbackconent-input {
				width: 100%;
				height: 100%;
			}

			.feedbackconent-input::-webkit-input-placeholder {
				color: red;
				font-size: 30rpx;
			}
		}


		.card {
			width: 90%;
			background-color: #FFFFFF;
			margin: 20rpx 0;
			padding: 30rpx;
			border-radius: 20rpx;

			.row {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				margin-bottom: 20rpx;

				.col-name {
					width: 30%;
				}

				.col-money {
					width: 70%;
				}

				.yellow {
					color: #F6B301;
				}
			}

			.image {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;

				.image-dom {
					width: 120rpx;
					height: 120rpx;
					border: 1px #eee solid;
					margin-right: 20rpx;
					flex-wrap: wrap;
				}
			}

			.btn {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-end;

				.btn-dom {
					background-color: #F6B301;
					color: #FFFFFF;
					padding: 10rpx 20rpx;
					border-radius: 30rpx;
					margin-left: 50rpx;
				}
			}
		}
	}
</style>