leromro-mini/pages_home/pages/Volunteerside/goodsDetails.vue

<template>
  <view>

    <!-- 顶部轮播图 -->
    <view>
      <Detiles :volunteerPicture="listData.volunteerPicture"></Detiles>
    </view>

    <!-- 页面背景整体定位 -->
    <view class="service-description-position">
      <!-- 价格服务介绍 -->
      <view class="service-description-container">
        <view class="service-price-top">
          <view class="service-price-tag1">¥</view>
          <view class="service-price-tag2">{{ listData.businessPrice }}</view>
          <view class="service-price-tag3">/{{ listData.businessUnit }}</view>
        </view>
        <view class="service-text">{{ listData.businessDescribe }}</view>
      </view>

      <!-- 预约-资质认证 -->
      <view class="service-description-bottom">
        <view class="service-item">
          <image src="/static/img/check-fill@1x.png" class="service-description-bottom-img"></image>
          <text class="service-description-bottom-text">提前预约</text>
        </view>
        <view class="service-item">
          <image src="/static/img/check-fill@1x.png" class="service-description-bottom-img"></image>
          <text class="service-description-bottom-text">通过专业资质认证</text>
        </view>
        <view class="service-item">
          <image src="/static/img/check-fill@1x.png" class="service-description-bottom-img"></image>
          <text class="service-description-bottom-text">技术人员专业培训</text>
        </view>
      </view>
    </view>

    <!-- 志愿者介绍 -->
    <view class="volunteer-Introduction">
      <view class="volunteer-Introduction-top">
        <!-- 主体内容 -->
        <view class="volunteer-main-content">
          <!-- 头像 -->
          <image class="volunteer-image" :src="firstVolunteerPicture" mode="aspectFill"></image>
          <!-- 个人信息 -->
          <view class="volunteer-info">
            <view class="name-row">
              <text class="name">{{ listData.name || '陈阿姨' }}</text>
              <view class="stat-item">
                <image src="/static/img/Iconly@1x (1).png"></image>
                <text>5星好评</text>
              </view>
              <view class="stat-item">
                <image src="/static/img/Iconly@1x (2).png"></image>
                <text>{{ listData.orderCount || 0 }}总单量</text>
              </view>
            </view>
            <view class="contact-row">
              <text>{{ listData.age }}岁</text>
              <text>{{ listData.phonenumber || '1554****9215' }}</text>
            </view>
          </view>
        </view>
        <!-- 查看个人主页 -->
        <view class="view-profile">
          <text>查看个人主页</text>
          <image src="/static/img/Iconly@1x (3).png"></image>
        </view>
        <!-- 标签 -->
        <view class="tags-container">
          <view class="tag">{{ listData.projectName }}</view>
          <view class="tag">{{ listData.projectTypeName }}</view>
        </view>
      </view>

      <!-- 个人介绍 -->
      <view>
        <view class="volunteer-H1">个人介绍</view>
        <text class="volunteer-H1-text"> {{ listData.skillDescribe }}</text>
      </view>
      <!-- -资质证书 -->
      <view class="certificate-more-container">
        <view class="volunteer-H1">
          资质证书
          <view class="certificate-more">
            <text>查看更多</text>
            <image src="/static/img/Iconly@1x (4).png" class="certificate-arrow-icon"></image>
          </view>
        </view>
        <view class="certificate-container">
          <image v-for="item in certificationPictures" :key="item" :src="item" class="certificate-img"
            mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <!-- 评论 -->
    <view class="comment-container">
      <view class="comment-top">
        <view class="comment-top-H2">评价（1条）</view>
        <view class="comment-top-text">
          <text>好评率100%</text>
          <image src="/static/img/Iconly@1x (4).png" class="certificate-arrow-img"></image>
        </view>
      </view>
      <view class="comment-evaluate">
        <view class="comment-user-title">
          <img src="/static/img/容器 162@1x.png" alt="" class="comment-user-img1">
          <view class="user-rating">
            <view class="user-name">宋小峰</view>
            <view class="rating-stars">
              <img v-for="item in 5" :key="item" src="/static/img/容器@1x (3).png" alt="" class="comment-user-img2">
            </view>
          </view>
        </view>
        <view class="comment-evaluate-text">
          <text class="comment-evaluate-text-text">
            重庆永川区好评重庆永川区好评重庆永川区好评
            重庆永川区好评重庆永川区
            重庆永川区好评重庆永川
            区好评重庆永川区好评
            好评重庆永川区好评
          </text>
          <img src="/static/img/矩形 55145@1x.png" alt="" class="comment-evaluate-img3">
        </view>
      </view>
    </view>


    <view class="service-description-box">
      <!-- 固定底部按钮区 -->
      <view class="Wrap-btn">
        <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
          @buttonClick="buttonClick" />
      </view>
    </view>

    <!-- 底部第一层弹框 -->
    <view>
      <up-popup :show="show" @close="close" @open="open"> </up-popup>
      <up-popup :show="show" @open="upPopupOpen" :custom-style="popupStyle">
        <scroll-view scroll-y class="popup-scroll-content">
          <!-- <view>
            <view class="Wrapper">
              <image src="/static/img/Location.png" class="Wrapper-img" />
              <span class="Wrapper-content">李四</span>
              <span class="Wrapper-content">重庆永川区</span>
            </view>
            <span style="margin-left: 15rpx; margin-top: 50rpx">重庆永川区</span>
          </view>
          <up-divider></up-divider> -->
          <view class="Wrap-content1">
            <up-avatar :src="src"></up-avatar>
            <text class="service-price">￥{{ businessPrice }}</text>
          </view>
          <view class="service-info-item">
            <text class="service-label1">服务类别：{{ listData.businessTierName }}</text>
            <!-- <up-text type="info" class="service-value" text="家庭教育"></up-text> -->
          </view>
          <view class="service-info-item">
            <text class="service-label">上门服务次数：</text>
            <up-number-box v-model="singleQuantity" :min="listData.minQuantity" :max="minQuantityMax"
              class="service-number-box" :disabled="isChanging" :longPress="false" @change="valChange"></up-number-box>
            <view class="service-values">{{ listData.businessUnit }}</view>
          </view>


          <view class="service-period">
            <text class="service-label">服务周期:</text>
            <view class="date-picker-container">
              <uniDatetimePickerMy :modelValue="doorToDoorTime" :start="startDisabled" :end="endDisabled"
                type="daterange">
              </uniDatetimePickerMy>
            </view>
            <view>

              <!-- :businessDuration="listData.businessDuration" -->
              <its-calendar v-if="show" ref="itsCalendarRef" :businessDuration="businessDurationComputed"
                :minQuantity="singleQuantity" :timeArr="doorToDoorTimeArr" :timeHostArr="timeHostArr"
                :businessTierName="listData.businessTierName" class="calendar-component" @getByDate="getByDate"
                @getByTime="getByTime" @changeMinQuantityMax="changeMinQuantityMax"></its-calendar>
            </view>
          </view>
          <view class="remark-container">
            <text class="service-label">备注：</text>
            <up-input placeholder="请输入内容" border="surround" v-model="remark" class="remark-input"
              @change="change"></up-input>
          </view>
          <!-- 保持内容底部有足够的空白以避免按钮遮挡内容 -->
          <view style="height: 120rpx;"></view>
        </scroll-view>
        <!-- 将按钮移到scroll-view外部，但保持在popup内 -->
        <view class="popup-fixed-bottom">
          <up-button type="primary" shape="circle" :customStyle="wrapqx" @click="handlCancel">取消</up-button>
          <up-button type="error" shape="circle" :customStyle="wrapqx" @click="handleBuy">
            预约￥{{ computeMoney.toFixed(2) }}
          </up-button>
        </view>
      </up-popup>
    </view>

    <!-- 第二个弹框-->
    <up-popup :show="showSecond">
      <view>
        <up-cell-group>
          <view @click="jumpToAddressSelect" style="display: flex; align-items: center; padding: 10px">
            <up-icon name="more-dot-fill" size="16" />
            <view v-if="selectedAddress" style="margin-left: 8px; flex: 1">
              <view class="address-display">
                <text class="address-line">
                  {{ selectedAddress.provinceName }}{{ selectedAddress.cityName
                  }}{{ selectedAddress.districtName }}
                </text>
                <view class="contact-info">
                  <text class="contact-name">{{ selectedAddress.name }}</text>
                  <text class="contact-phone">{{
                    selectedAddress.telephone
                    }}</text>
                </view>
              </view>
            </view>
            <text v-else style="margin-left: 8px; font-size: 18px">请选择服务地址</text>
          </view>
          <scroll-view scroll-y style="height: 460rpx">
            <view class="card-container" v-for="(item, index) in selectedTimes" :key="index">
              <image class="card-image" :src="listData.volunteerPicture" mode="aspectFill"></image>
              <view class="card-content">
                <view class="info-item">服务项目：{{ listData.projectName }}</view>
                <view class="Telephone">服务时长：{{ listData.businessDuration }}</view>
                <view class="date">日期:{{ item.date }}</view>
                <view class="time"> 时间：{{ item.time }} </view>
              </view>
            </view>
          </scroll-view>
        </up-cell-group>
      </view>

      <view class="Wrap-Payment">
        <!-- 支付金额 -->
        <view class="payment-header">
          <text class="payment-title">现在支付</text>
          <text class="payment-amount">￥{{ computeMoney }}</text>
        </view>

        <up-line></up-line>

        <!-- 钱包支付选项 -->
        <view class="payment-option">
          <view class="option-left">
            <image src="/static/钱包.png" class="payment-icon"></image>
            <text class="option-text">钱包</text>
          </view>
          <up-radio-group v-model="radiovalue1" placement="column" @change="handlePaymentMethodChange">
            <up-radio :customStyle="{ marginLeft: 'auto' }" v-for="(item, index) in radiolist1" :key="index"
              :label="item.name" :name="item.name"></up-radio>
          </up-radio-group>
        </view>
        <up-line></up-line>

        <!-- 微信支付选项 -->
        <view class="payment-option">
          <view class="option-left">
            <image src="/static/微信支付.png" class="payment-icon"></image>
            <text class="option-text">微信支付</text>
          </view>
          <up-radio-group v-model="radiovalue1" placement="column" @change="handlePaymentMethodChange">
            <up-radio :customStyle="{ marginLeft: 'auto' }" v-for="(item, index) in radiolist2" :key="index"
              :label="item.name" :name="item.name"></up-radio>
          </up-radio-group>
        </view>

        <up-line></up-line>

        <!-- 其他支付方式 -->
        <view class="other-payment">
          <text class="other-payment-text">其他方式支付</text>
          <up-icon name="arrow-right" size="14" color="#1890ff"></up-icon>
        </view>

        <!-- 条款说明 -->
        <view class="terms-of-service">
          我同意购买守则，取消政策和退款政策，我也同意支付以下所示的总金额(含服务费)。
        </view>
      </view>
      <view class="Wrap-detils-btn">
        <up-button type="primary" shape="circle" :customStyle="wrapqx" @click="closeSecond">取消</up-button>
        <up-button type="error" shape="circle" :customStyle="wrapqx" @click="handlConfiRmpurchase">
          购买￥{{ computeMoney }}
        </up-button>
      </view>
    </up-popup>

    <view v-if="addressFlag" class="box">
      <addressComponent :modelValue="addressFlag" @update:modelValue="(val) => (addressFlag = val)"
        :addressInfo="addressInfo" @update:addressInfo="handleAddressUpdate"></addressComponent>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { onMounted, ref, reactive, computed, nextTick } from 'vue'
import {
  getDetailsvolunteerId,
  volunteerwork,
  volunteergetTimesByDate,
  ordersCreateOrder,
  coreUsersOrdersPayCancel,
} from '@/api/volunteerDetailsApi/details.js'

import itsCalendar from '@/components/its-calendar/its-calendar.vue'
import uniDatetimePickerMy from '@/uni_modules/lic-uni-datetime-picker/components/lic-uni-datetime-picker/lic-uni-datetime-picker.vue'
import addressComponent from '@/pages_home/components/volunteerData/adresss.vue'
import Detiles from './detiles.vue'

// const src = ref(
//   'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
// )
const itsCalendarRef = ref(null)
const businessPrice = ref() //价格
const isChanging = ref(false) // 步进器防抖
const singleQuantity = ref(1) // 购买次数，默认为1，不可为0
const volunteerId = ref('') // 存储志愿者ID
const serviceCategory = ref('') //存储大类别
const businessManagementId = ref('') //具体分类id
const doorToDoorTimeArr = ref([]) // 完整时间范围
const doorToDoorTime = ref([]) // 只具备开始、结束 时间
const timeHostArr = ref([]) // 时间段数组
const currentDate = ref([]) // 点击过的年月日数组数据
const currentTime = ref('') // 最后一次点击时间的时间节点
const selectedTimes = ref([]) // 存储所有选择的时间对象
const totalTimes = ref(0) // 时间点 点击的次数
const startDisabled = ref('')
const endDisabled = ref('')
const listData = ref({})
const show = ref(false) //第一层弹框
const showSecond = ref(false) //第二层弹框
const remark = ref('') //备注
const radiovalue1 = ref(null)
const selectedAddress = ref(null)
const addressFlag = ref(false)
const paymentMethod = ref(null) // Add payment method ref with default value 1 (wallet)
const addressInfo = ref(null)
const value = ref(1) // 将在onLoad中更新为listData.minQuantity
const minQuantityMax = ref(99999) // 步进器最大值控制变量

// Radio 单选框数据
const radiolist1 = reactive([
  {
    name: '钱包支付',
    disabled: false,
  },
])

const radiolist2 = reactive([
  {
    name: '微信支付',
    disabled: false,
  },
])

const businessDurationComputed = computed(() => {
  // listData.value.businessDuration

  let result = 0
  if (listData.value.businessDuration <= 30) {
    result = 30
  } else {
    const num = Math.floor(listData.value.businessDuration / 30)

    //  result = (num + 1) * 30
    const n = listData.value.businessDuration % 30

    result = (n ? (num + 1) : num) * 30
  }
  console.log(result, '>>>>>>>result')

  return result
})

// 设置第一个弹框的样式
const popupStyle = {
  height: '80vh', // 设置为视窗高度的80%
  overflow: 'hidden', // 防止内容溢出
  position: 'relative', // 需要这个来支持内部的绝对定位元素
}

// 详情底部立即购买弹框
const buttonClick = (e) => {
  show.value = true // 打开弹框
}

// 详情页第一层弹框
function open() {
  show.value = true
}
// 第一层弹框取消
function close() {
  // 关闭逻辑，设置 show 为 false
  show.value = false
}

// 第一个弹框逻辑
const handleBuy = () => {
  console.log(selectedTimes.value, '>>>>>>selectedTimes.value')
  if (selectedTimes.value.length === 0) {
    uni.showToast({
      title: '请选择服务时间',
      icon: 'none',
    })
    return
  }
  show.value = false // 关闭第一个弹框
  showSecond.value = true // 打开第二个弹框
}

// 第二层弹框取消
function closeSecond() {
  // 关闭逻辑，设置 show 为 false
  showSecond.value = false
  show.value = true // 打开第一个弹框
}

const handlCancel = () => {
  show.value = false // 关闭第一个弹框
  selectedTimes.value = [] // 清空已选时间
  totalTimes.value = 0 // 重置点击次数
}

const jumpToAddressSelect = () => {
  addressFlag.value = true
}

// 新增：处理子组件传回的地址数据
const handleAddressUpdate = (newAddress) => {
  selectedAddress.value = newAddress
  addressFlag.value = false // 关闭选择器
}
// 详情底部底部数据
const options = ref([
  // {
  //   icon: 'headphones',
  //   text: '客服',
  // },
  // {
  //   icon: 'shop',
  //   text: '收藏',
  // },
])

// 详情底部立即购买样式
const buttonGroup = ref([
  {
    text: '立即购买',
    backgroundColor: 'red',
    color: '#fff',
  },
])
// 底部帮助客服方法
const onClick = (e) => {
  // uni.showToast({
  //   title: `敬请期待`,
  //   icon: 'none',
  // })
  uni.navigateTo({
    url: `/pages_orderuser/pages/talk/pages/index/index?customerService=true&conversationType=3`
  })
}


const wrapqx = {
  // height: '70rpx',
  width: '240rpx',
}

// 获取传递的参数
onLoad(async (options) => {
  const option = JSON.parse(decodeURIComponent(options.params))
  const {
    volunteerId: id,
    serviceCategory: categoy,
    businessManagementId: manage,
  } = option
  volunteerId.value = id
  serviceCategory.value = categoy
  businessManagementId.value = manage
  const res = await getDetailsvolunteerId({
    volunteerId: id,
    serviceCategory: categoy,
    businessManagementId: manage,
  })

  listData.value = res.data || {}

  // 更新步进器的初始值为listData中的minQuantity
  value.value = listData.value.minQuantity || 1
  businessPrice.value = listData.value.businessPrice || 0
  singleQuantity.value = listData.value.minQuantity || 1
})

// 添加步进器值变化处理函数
const valChange = (obj) => {

  // const durationMs = listData.value.businessDuration * obj.value * 60
  const durationMs = businessDurationComputed.value * obj.value * 60

  const a = itsCalendarRef.value.upItem
  const b = itsCalendarRef.value.timeHostArr
  const c = itsCalendarRef.value.day_index


  let selectLength = [] // 所有日期選擇數組匯總
  const disFlag = false // 是否多选参数 / 备用禁用步进器

  Object.keys(itsCalendarRef.value.selectedTimeSlots).forEach(i => {
    selectLength.push(...itsCalendarRef.value.selectedTimeSlots[i])
  })



  if (selectLength.length > 1) {
    setTimeout(() => {
      singleQuantity.value = obj.value - 1
    }, 100)

    uni.showToast({ title: '请选择单个时间进行调整服务次数', icon: 'none' })
    return false
  }

  // const seconds = listData.value.businessDuration * obj.value * 60
  const seconds = businessDurationComputed.value * obj.value * 60
  const endTimestamp = a.timeStamp + durationMs

  // 根据当前时间分割出后续应选数据数组
  const filteredSlots = b[c].filter((i) => {
    return i.timeStamp > a.timeStamp && i.timeStamp <= endTimestamp
  })

  const timestampDifferenceValue = filteredSlots.length
    ? filteredSlots[filteredSlots.length - 1].timeStamp - a.timeStamp
    : 0

  // console.log(filteredSlots, '>>>>>filteredSlots')

  if (timestampDifferenceValue < durationMs) {
    minQuantityMax.value = obj.value - 1
    // 所选时间差值 小于 服务时间值 结束执行
    uni.showToast({ title: '所选时间的服务时间不充足！', icon: 'none' })
    return false
  }

  singleQuantity.value = obj.value || 1

  nextTick(() => {
    itsCalendarRef.value.handleTimeClick2()
  })
}

// 选择日期
const getListTime = async () => {
  const params = {
    volunteerId: Number(volunteerId.value),
  }
  const res = await volunteerwork(params)

  if (res.data && res.data.length > 0) {
    doorToDoorTimeArr.value = res.data
    const newRes = [res.data[0], res.data[res.data.length - 1]]
    doorToDoorTime.value = newRes
    startDisabled.value = doorToDoorTime.value[0]
    endDisabled.value = doorToDoorTime.value[1]

    // 默认加载第一个日期的排班时间
    getByDate(res.data[0])
  } else {
    console.error('接口返回的日期范围为空')
    doorToDoorTimeArr.value = []
    timeHostArr.value = [] // 清空时间段
  }
}

// 获取志愿者排班时间
const getByDate = async (date = doorToDoorTimeArr.value[0]) => {
  // 检查日期是否为空
  if (!date) {
    coannsole.error('日期为空，跳过获取排班时间')
    return
  }

  if (!volunteerId.value) {
    console.error('volunteerId 为空')
    return
  }

  const params = {
    volunteerId: volunteerId.value,
    date,
  }

  try {
    const res = await volunteergetTimesByDate(params)
    const TArr = res.data.map((item) => {
      // 初始化disabled变量
      let disabled = false
      if (item.hasReservation === 1) disabled = true

      let itemTime =
        item.timeStamp > 9999999999 ? item.timeStamp : item.timeStamp * 1000

      if (new Date().getTime() > itemTime) disabled = true

      return {
        ...item,
        hours: item.reservationTime,
        timeStamp: new Date(`${date} ${item.reservationTime}`).getTime() / 1000,
        date: date,
        // checked: false,  // 每次点击请求时间后，延续之前选中状态，不初始化选中
        disabled,
      }
    })

    // 如果 doorToDoorTimeArr.value 为空，直接返回
    if (!doorToDoorTimeArr.value.length) {
      console.error('可选的日期范围为空')
      return
    }

    // 填充时间段数组
    timeHostArr.value = Array(doorToDoorTimeArr.value.length).fill(TArr)
  } catch (error) {
    console.error('获取排班时间失败:', error)
  }
}

const getByTime = (timeObj) => {
  if (timeObj.clicked) {
    return
  }

  if (timeObj.checked) {
    // 选中 添加到已选时间数组
    selectedTimes.value.push({
      date: timeObj.date,
      time: timeObj.hours,
      timestamp: timeObj.timeStamp,
    })
  } else {
    // 取消选中
    const index = selectedTimes.value.findIndex(
      (item) => item.timestamp === timeObj.timeStamp
    )
    selectedTimes.value.splice(index, 1)
  }

  console.log(selectedTimes, '.>>>selectedTimes');


  console.log(selectedTimes.value.length, '>>>>>>selectedTimes.value.length');


  totalTimes.value = selectedTimes.value.length // 更新点击次数
}

// 立即购买显示时执行
const upPopupOpen = () => {
  //显示时初始化预存储信息数据
  selectedTimes.value = []
  totalTimes.value = 0
  currentTime.value = ''
  currentDate.value = []
  // 初始化disabled/checked 数据状态
  getByDate()
}

const computeMoney = computed(() => {
  return totalTimes.value * businessPrice.value * singleQuantity.value
})

const certificationPictures = computed(() => {
  if (listData.value.certificationPicture) {
    return listData.value.certificationPicture.split(',')
  }
  return []
})

// 确认购买
const handlConfiRmpurchase = () => {
  if (!selectedAddress.value) {
    uni.showToast({
      title: '请选择服务地址',
      icon: 'none',
      duration: 2000,
    })
    return // 阻止购买
  } else if (!paymentMethod.value) {
    uni.showToast({
      title: '请选择支付方式',
      icon: 'none',
      duration: 2000,
    })
    return // 阻止购买
  }
  // 如果有地址，执行购买逻辑
  proceedToPayment()
}

const proceedToPayment = async () => {
  try {
    // 定义要发送的数据
    const orderData = {
      orders: {
        // serviceOnePrice: businessPrice.value,
        // serviceTotalPrice: computeMoney.value,
        serviceCategory: serviceCategory.value,
        totalTimes: totalTimes.value,
        paymentMethod: paymentMethod.value,
        volunteerId: volunteerId.value,
        remark: remark.value,
        businessManagementId: businessManagementId.value,
        volunteerInfoId: listData.value.volunteerInfoId,
        addressId: selectedAddress.value.addressId,
        singleQuantity: singleQuantity.value,
      },
      workDateList: [],
    }
    // 转换所有选择的时间
    selectedTimes.value.forEach((item) => {
      orderData.workDateList.push({
        workDate: item.date,
        workStartTime: item.time,
      })
    })

    // 创建订单
    const res = await ordersCreateOrder(orderData)
    if (res.code !== 200) {
      throw new Error('创建订单失败')
    }

    // 保存订单号
    const mainOrderId = res.data.mainOrderId
    // console.log('创建订单成功，订单号:', mainOrderId)

    // 如果是微信支付
    if (paymentMethod.value === 2) {
      return new Promise((resolve, reject) => {
        uni.requestPayment({
          ...res.data,
          package: res.data.packageValue,
          success: (payRes) => {
            // console.log('支付成功:', payRes)
            if (payRes.errMsg === 'requestPayment:ok') {
              uni.showToast({
                title: '支付成功',
                icon: 'success',
                duration: 1500,
                mask: true,
              })
              setTimeout(() => {
                uni.reLaunch({
                  url: '/pages/classify',
                })
              }, 1500)
              resolve(payRes)
            }
          },
          fail: async (payRes) => {
            // console.log('支付失败或取消:', payRes)
            try {
              // 调用取消支付接口
              const cancelRes = await coreUsersOrdersPayCancel({ mainOrderId })
              // console.log('取消支付接口调用成功:', cancelRes)

              if (payRes.errMsg === 'requestPayment:fail cancel') {
                uni.showToast({
                  title: '已取消支付',
                  icon: 'none',
                  duration: 1500,
                  mask: true,
                })
              } else {
                uni.showToast({
                  title: error.response?.data?.msg,
                  icon: 'error',
                  duration: 1500,
                  mask: true,
                })
              }
              reject(payRes)
            } catch (error) {
              console.error('取消支付接口调用失败:', error)
              uni.showToast({
                title: '取消支付失败',
                icon: 'error',
                duration: 1500,
                mask: true,
              })
              reject(error)
            }
          },
        })
      })
    }
    // 如果是钱包支付
    if (paymentMethod.value === 1) {
      uni.showToast({
        title: '支付成功',
        icon: 'success',
        duration: 1500,
        mask: true,
      })
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/classify',
        })
      }, 1500)
    }
  } catch (error) {
    console.error('支付失败:', error)
    uni.showToast({
      title: error.response?.data?.msg,
      icon: 'error',
      duration: 1500,
      mask: true,
    })
  }
}

// 修改支付方式
const handlePaymentMethodChange = (value) => {
  if (value === '钱包支付') {
    paymentMethod.value = 1
  } else if (value === '微信支付') {
    paymentMethod.value = 2
  }
}

const changeMinQuantityMax = (val = 99999) => {
  minQuantityMax.value = val
}

// 计算属性：获取志愿者第一张图片
const firstVolunteerPicture = computed(() => {
  const pictures = listData.value.volunteerPicture.split(',');
  return pictures[0];
});

onMounted(async () => {
  await getListTime()
})
</script>

<style scoped lang="scss">
@import '../../styles/goodsDetails.scss';
</style>