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="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.code === 200) {
    uni.showModal({
      title: '提示',
      content: res.msg,
      showCancel: false,
      success: function (modalRes) {
        if (modalRes.confirm) {
          uni.navigateBack({
            delta: 1,
          })
        }
      },
    })
  }
}
</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>