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.showToast({
      title: res.msg,
      icon: 'success',
      duration: 1500,
      mask: true,
    })
    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>