leromro-mini/pages_classify/pages/requestaRefund/requestaRefund.vue

<template>
	<view>
		<!-- 志愿者信息 -->
		<view class="volunteer-info">
			<image :src="dataList.volunteerPicture" class="volunteer-image"></image>
			<view class="volunteer-details">
				<view style="display: flex; justify-content: space-between; width: 100%;">
					<view>
						<view>{{dataList.volunteerName}}</view>
						<view>{{dataList.businessTierName}}</view>
					</view>
					<view>可退：{{dataList.refundAmount}}</view>
				</view>
			</view>
		</view>

		<!-- 申请类型 -->
		<view class="application-type">
			申请类型：申请退款
		</view>

		<!-- 志愿者详细信息 -->
		<view class="volunteer-detail-section">
			<view class="volunteer-detail">
				<image :src="dataList.volunteerPicture" class="volunteer-image"></image>
				<view class="volunteer-data">
					<view>姓名：{{dataList.volunteerName}}</view>
					<view>类别：{{dataList.businessTierName}}</view>
					<view>技能简介：</view>
				</view>
				<view class="refund-amount">¥{{dataList.refundAmount}}</view>
			</view>
		</view>

		<!-- 申请说明 -->
		<view class="application-note">
			<up-textarea v-model="refundReason" placeholder="请详细填写申请申请说明"></up-textarea>
		</view>

		<!-- 提交申请按钮 -->
		<view class="submit-button">
			<up-button type="error" text="提交申请" @click="handlClick"></up-button>
		</view>
	</view>
</template>
<script setup>
	import {
		onMounted,
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		userdictOrderInfo,
		refunDnewOrderRefund
	} from "@/api/userList.js"

	const dataList = ref([])
	const mainOrderId = ref(''); //志愿者ID
  const refundReason = ref('');
  
	onLoad(async (options) => {
		mainOrderId.value = options.mainOrderId;
		const res = await userdictOrderInfo(mainOrderId.value)
		dataList.value = res.data;
	});


	const handlClick = async () => {
		const params = {
			mainOrderId: mainOrderId.value,
      volunteerPicture: dataList.value.volunteerPicture,
      refundReason: refundReason.value
		};
		const res = await refunDnewOrderRefund(params);
		if (res.code == 200) {
			uni.showModal({
				title: '退款成功',
				content: '钱款将在三个工作日内返回到您的钱包中',
				showCancel: false,
				success: function () {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500);
				}
			});
		}
	}
</script>

<style scoped>
	.volunteer-info {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #ccc;
		padding: 20rpx;
	}
	
	.volunteer-image {
		width: 120rpx;
		height: 140rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}
	
	.volunteer-details {
		flex: 1;
	}
	
	.application-type {
		padding: 20rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.volunteer-detail-section {
		padding: 20rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.volunteer-detail {
		display: flex;
		align-items: center;
	}

	.volunteer-data {
		flex: 1;
		margin-left: 20rpx;
	}

	.refund-amount {
		color: red;
		font-weight: bold;
	}

	.expand-all {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		cursor: pointer;
	}

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

	.application-note {
		padding: 20rpx;
	}

	.submit-button {
		padding: 20rpx;
		text-align: center;
	}
</style>