hospital-accompaniment-wechat/pages/workbench/refundOrder.vue

<template>
	<view class="container">
		<view class="order-list">
			<view class="order-item" v-for="item,index in orderList" :key="index" @click="toDetails(item)">
				<view class="order-t-box">
					<view class="order-t-box-l">
						<view class="order-name">
							{{item.serviceName || '-'}}（数量：{{item.orderNum || '-'}}）
						</view>
						<view class="order-no">
							<span>退款订单号：{{item.orderRefundNo || '-'}}</span>
							<image class="icon" :src="copyImg" mode="aspectFill"
								@click.stop="$utils.copyTxt(item.orderRefundNo)"></image>
						</view>
					</view>
					<view class="order-t-box-r">
						<span class="title">退款金额</span>
						<span class="price">￥{{item.refundAmount || '-'}}</span>
					</view>
				</view>
				<u-line color="#f0f0f0"></u-line>
				<view class="order-b-box">
					<view class="order-b-box-l">
						<view class="order-b-item">
							<span class="title">医院：</span>
							<span class="txt">{{item.orderVo.hospitalName || '-'}}</span>
						</view>
						<view class="order-b-item">
							<span class="title">科室：</span>
							<span class="txt">{{item.orderVo.hospitalDepartmentName || '-'}}</span>
						</view>
						<view class="order-b-item">
							<span class="title">就诊人：</span>
							<span
								class="txt">{{item.orderVo.patientName || '-'}}（{{item.orderVo.patientMobile || '-'}}）</span>
						</view>
					</view>
					<view class="order-b-box-r">
						<span class="status">{{getRefundTxt(item.refundStatus)}}</span>
					</view>
				</view>
				<u-line color="#f0f0f0"></u-line>
				<view class="btn-box">
					<span class="time">{{$utils.mFormatDate(item.createTime, 'yyyy-MM-dd HH:mm') || '-'}}</span>
					<view class="btn-box-r">
						<span class="btn btn1" v-if="item.refundStatus == 1"
							@click.stop="opration(item.id,'refuse')">拒绝退款</span>
						<span class="btn btn2" v-if="item.refundStatus == 1"
							@click.stop="opration(item.id,'agree')">同意退款</span>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-box" v-if="!orderList.length">
			<u-image src="/static/none.png" mode="aspectFill" width="582rpx" height="582rpx"></u-image>
			<span class="empty-txt">暂无数据!</span>
		</view>
		<view style="width: 100%;padding-bottom: 40rpx;" v-else>
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" @loadmore="loadmore" dashed line marginTop="20" />
		</view>

		<!-- 操作 -->
		<u-popup :overlayStyle="{'touch-action':'none'}" closeable mode="bottom" :show="popShow" @close="popClose"
			@open="open" :round="20">
			<view class="pop-box">
				<view class="pop-title">{{popTile}}</view>
				<view class="pop-content">
					<u--form labelWidth="140rpx" labelPosition="top" :model="formData" :rules="rules" ref="uForm">
						<u-form-item label="实退金额" prop="actualRefundAmount" borderBottom required
							v-if="popType == 'agree'">
							<u--input type="number" maxlength="9" v-model="formData.actualRefundAmount"
								placeholder-class="input-placeholder" border="none" clearable
								placeholder="请输入"></u--input>
						</u-form-item>

						<u-form-item label="操作原因" prop="operationReason" borderBottom required>

							<u--textarea v-model="formData.operationReason" placeholder="请输入内容"></u--textarea>
						</u-form-item>
					</u--form>
				</view>
				<view class="footer-btn">
					<span class="btn" @click="confirm">确认</span>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getAfterSaleOrderList,
		getRefundStatus,
		agreeOrRefuseAfterSaleOrder
	} from "@/api/hospital.js"
	export default {
		data() {
			return {
				orderList: [],
				loading: false,
				pageSize: 10,
				pageNum: 1,
				botLoadingShow: 0, //0不显示  1显示 3.显示没有更多了
				loadingShow: false,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '上拉或点击加载更多',
				nomoreText: '实在没有了',
				total: 0,
				customBar: 0, //状态栏高度 + 导航栏高度
				refundStatusList: [],

				popShow: false,
				popTile: '退款处置',
				popType: '',
				orderId: '',

				formData: {
					actualRefundAmount: '',
					operationReason: '',
				},
				rules: {
					actualRefundAmount: [{
						required: true,
						message: '请填写实退金额',
						trigger: ['blur', 'change'],
					}],
					operationReason: [{
						required: true,
						message: '请填写操作原因',
						trigger: ['blur', 'change'],
					}],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.getOrderList("reload")
		},
		methods: {
			//获取订单列表
			getOrderList(reload) {
				let that = this;
				if (reload) {
					that.pageNum = 1;
					that.orderList = [];
				}
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let param = {
					status: that.orderStatus,
					serviceName: that.serviceName,
					pageNum: that.pageNum,
					pageSize: that.pageSize,
				};

				getAfterSaleOrderList(param).then(res => {
						let data = res.rows;
						if (data) {
							that.orderList.push(...data); //在列表后面新增新获取的数据
							that.total = res.total; //获取数据总页数
							if (that.orderList.length >= that.total) {
								that.status = 'nomore';
								return;
							}
						} else {
							that.status = 'nomore';
						}
					})
					.catch((err) => {
						console.log(err);
					})
					.finally(() => {
						uni.hideLoading();
					});
			},

			getRefundTxt(value) {
				let obj = this.refundStatusList.find(item => item.code == value);;
				return obj ? obj.value : '-'
			},

			//查询退款状态
			getRefundStatus() {
				let that = this;
				getRefundStatus().then(res => {
						if (res.code == 200) {
							let data = res.data.refundStatus;
							this.refundStatusList = data;
						}

					})
					.catch((err) => {
						console.log(err);
					})
			},

			//去详情
			toDetails(item) {
				uni.navigateTo({
					url: '/pages/order/refundDetails?id=' + item.id + '&role=guanli'
				})
			},

			opration(id, type) {
				this.orderId = id;
				this.popShow = true;
				this.popType = type;
			},

			open() {
				this.popShow = true;
			},

			popClose() {
				this.popShow = false;
			},

			confirm() {
				let that = this;
				uni.showLoading({
					title: '操作中',
					mask: true,
				});
				that.$refs.uForm.validate().then((res) => {
					if (res) {
						that.formData.id = that.orderId
						that.formData.refundStatus = that.popType == 'agree' ? 2 : 3
						agreeOrRefuseAfterSaleOrder(this.formData).then(res => {
							uni.$u.toast('操作成功');
							that.formData = {
								actualRefundAmount: '',
								operationReason: '',
							}
							that.popClose();
							that.getOrderList('reload')
						}, err => {
							console.log(err);
						}).finally(() => {
							uni.hideLoading()
						});
					}
				})
			},


		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f6f6f6;

		.order-list {
			margin: 20rpx;

			.order-item {
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 10rpx 24rpx 30rpx;

				.order-t-box {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding: 20rpx 0;

					.order-t-box-l {
						.order-name {
							font-size: 32rpx;
							font-weight: bold;
						}

						.order-no {
							display: flex;
							align-items: center;
							margin-top: 15rpx;
							font-size: 24rpx;
							color: #6F6F6F;

							.icon {
								width: 40rpx;
								height: 40rpx;
								margin-left: 10rpx;
							}
						}
					}

					.order-t-box-r {
						display: flex;
						align-items: center;
						flex-direction: column;

						.title {
							font-size: 24rpx;
							color: #6F6F6F;
						}

						.price {
							margin-top: 15rpx;
							font-size: 32rpx;
							font-weight: bold;
							color: #FF0000;
						}
					}
				}

				.order-b-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 20rpx 0;

					.order-b-box-l {
						flex: 1;

						.order-b-item {
							margin-bottom: 15rpx;

							&:last-child {
								margin-bottom: 0;
							}

							.title {

								font-size: 26rpx;
								color: #1A1A1A;
							}

							.txt {
								font-size: 26rpx;
								color: #808080;
							}
						}
					}

					.order-b-box-r {
						width: 110rpx;
						text-align: right;
						font-size: 24rpx;
						color: #0085FF;

						.cancle {
							color: #FF0000;
						}
					}
				}

				.btn-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 15rpx;

					.time {
						font-size: 24rpx;
						color: #6F6F6F;
					}

					.btn-box-r {

						display: flex;
						align-items: center;

						.btn {
							width: 160rpx;
							height: 60rpx;
							margin-left: 20rpx;
							line-height: 60rpx;
							text-align: center;
							background-color: #4B91D1;
							color: #fff;
							border-radius: 30rpx;
							font-size: 24rpx;
						}

						.btn1 {
							background-color: #fff;
							border: 1rpx solid #FF0000;
							color: #FF0000;
						}
					}

				}

			}


		}

	}

	.pop-box {
		.pop-title {
			font-size: 32rpx;

			font-weight: bold;
			text-align: center;
			padding: 20rpx 0;

		}

		.pop-content {
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #6F6F6F;
			padding: 0rpx 40rpx;
			box-sizing: border-box;


			.tip-txt {
				display: flex;
				flex-direction: column;
				padding: 20rpx 0;
				width: 100%;

				.name {
					margin-bottom: 20rpx;
				}
			}


		}

		.footer-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 30rpx;
			padding: 20rpx 40rpx;

			.btn {
				width: 100%;
				padding: 20rpx 0;
				border: 1rpx solid #4B91D1;
				background-color: #4B91D1;
				border-radius: 40rpx;
				color: #fff;
				text-align: center;
			}
		}


	}
</style>