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="expand-all">
			<text @click="toggleExpand">展开全部</text>
			<image :src="expanded ? '/path/to/up-icon.png' : '/path/to/down-icon.png'" class="expand-icon"></image>
		</view>

		<!-- 申请说明 -->
		<view class="application-note">
			<up-textarea v-model="value1" 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 value1 = ref('');
	const expanded = ref(false);

	onLoad(async (options) => {
		mainOrderId.value = options.mainOrderId;
		const res = await userdictOrderInfo(mainOrderId.value)
		dataList.value = res.data;
	});

	const toggleExpand = () => {
		expanded.value = !expanded.value;
	};

	const handlClick = async () => {
		const params = {
			mainOrderId: mainOrderId.value,
			volunteerPicture: dataList.value.volunteerPicture
		};
		const res = await refunDnewOrderRefund(params);
		if (res.status === 200) {
			uni.showToast({
				title: '提交成功',
				icon: 'success', // 或者 'none'
				duration: 1500, // 显示时间，单位毫秒，默认1500
				mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
			});
			uni.navigateTo({
				url: '/pages/classify'
			});
		}
	}
</script>

<style scoped>
	.volunteer-info {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #ccc;
		padding: 20rpx;
	}
	
	.volunteer-image {
		width: 80rpx;
		height: 120rpx;
		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>