leromro-mini/pages_classify/pages/cancelationOforder/cancelationOforder.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="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="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('')
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,
    refundReason: refundReason.value,
  }
  const res = await refunDnewOrderRefund(params)
  if (res.status === 200) {
    uni.showToast({
      title: '退款成功',
      icon: 'success', // 或者 'none'
      duration: 1500, // 显示时间，单位毫秒，默认1500
      mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
    })
    uni.navigateBack({
      delta: 1,
    })
  }
}
</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>