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

<template>
  <view>
    <view>
      <Detiles></Detiles>
      <up-card
        title="服务描述"
        :thumb="thumb"
        :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
      >
        <template #body>
          <view class="service-description-container">
            <view class="service-text">{{ listData.businessDescribe }}</view>
            <view class="service-price-tag">¥{{ listData.businessPrice }}</view>
          </view>
        </template>
      </up-card>
    </view>
    <view>
      <up-card
        title="志愿者介绍"
        :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
      >
        <template #body>
          <view class="volunteer-card">
            <!-- 左侧图片 -->
            <image
              class="volunteer-image"
              :src="listData.volunteerPicture"
              mode="aspectFill"
            ></image>

            <!-- 中间信息（姓名/类别等） -->
            <view class="volunteer-info">
              <view class="info-row">
                <text class="info-label">姓名：</text>
                <text class="info-value">{{ listData.name }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">服务项目：</text>
                <text class="info-value">{{ listData.businessTierName }}</text>
              </view>
              <view v-if="serviceSubjectName != null" class="info-row">
                <text class="info-label">类别：</text>
                <text class="info-value">{{ listData.projectTypeName }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">服务时长：</text>
                <text class="info-value">{{ listData.businessDuration }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">电话：</text>
                <text class="info-value">{{ listData.phonenumber }}</text>
              </view>
            </view>

            <!-- 右上角评分 -->
            <view class="volunteer-rating">
              <text class="rating-text">4.5</text>
              <text class="rating-label">评分</text>
            </view>
          </view>
        </template>
      </up-card>

      <up-card
        title="技能介绍"
        :thumb="thumb"
        :head-style="{ height: '80rpx', padding: '20rpx', fontWeight: 'bold' }"
      >
        <template #body>
          <view class="skill-description">
            {{ listData.skillDescribe }}
          </view>
        </template>
      </up-card>
      <up-card
        title="证书"
        :thumb="thumb"
        :head-style="{ height: '80rpx', padding: '20rpx' }"
      >
        <template #body>
          <view class="certificate">
            <image
              v-for="item in certificationPictures"
              :key="item"
              :src="item"
              mode=""
              style="width: 100%"
              class="certificate-img"
            ></image>
          </view>
        </template>
      </up-card>
      <!-- 固定底部按钮区 -->
      <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-label">服务类别：</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
              :modelValue="singleQuantity"
              :min="listData.minQuantity"
              :max="minQuantityMax"
              class="service-number-box"
              @change="valChange"
            ></up-number-box>
          </view>
          <view class="service-info-item">
            <text class="service-label">购买规格：</text>
            <view class="service-value">{{ listData.minQuantity + 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>
              <its-calendar
                v-if="show"
                ref="itsCalendarRef"
                :businessDuration="listData.businessDuration"
                :minQuantity="singleQuantity"
                :timeArr="doorToDoorTimeArr"
                :timeHostArr="timeHostArr"
                :businessTierName="listData.businessTierName"
                class="calendar-component"
                @getByDate="getByDate"
                @getByTime="getByTime"
              ></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 }}
          </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 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 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 = () => {
  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: `点击${e.content.text}`,
    icon: 'none',
  })
}
// 修改详情页底部样式
const customStyle = {
  height: '70rpx',
  paddingLeft: '30rpx',
  width: '540rpx',
}

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 a = itsCalendarRef.value.upItem
  const b = itsCalendarRef.value.timeHostArr
  const c = itsCalendarRef.value.day_index

  const seconds = listData.value.businessDuration * 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)
  }

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

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

const computeMoney = computed(() => {
  // console.log(
  //   totalTimes.value,
  //   businessPrice.value,
  //   singleQuantity.value,
  //   '>>>>>>	console.log(totalTimes.value * businessPrice.value * minQuantity.value);'
  // )
  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: '支付失败',
                  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
  }
}

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

<style scoped>
/* 添加卡片样式 */
.card-container {
  display: flex;
  padding: 20rpx;
  margin: 10rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info-item,
.Telephone,
.date,
.time {
  font-size: 26rpx;
  margin-bottom: 8rpx;
}

.box {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: red;
}

.card-container {
  display: flex;
  position: relative;
  padding: 20rpx;
  align-items: flex-start;
  background-color: #fff;
  border-radius: 12rpx;
}

/* 左侧图片 */
.card-image {
  width: 240rpx;
  height: 380rpx;
  border-radius: 12rpx;
  margin-right: 30rpx;
  flex-shrink: 0;
}

/* 中间信息区域 */
.card-info {
  flex: 1;
  padding-right: 100rpx;
}

.Telephone {
  white-space: nowrap;
  margin-bottom: 24rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

.info-item {
  margin-bottom: 24rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

/* 右上角评分 */
.card-rating {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  background-color: #f8f8f8;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #ff9900;
  font-weight: bold;
}

/* 固定在页面底部 */
.Wrap-btn {
  /* display: flex; */
  /* justify-content: flex-end; */
  /* align-items: center; */
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: white;
  padding: 40rpx 20rpx;
  box-shadow: -2rpx 5rpx rgba(0, 0, 0, 0.1);
}

.Wrapper {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-top: 10rpx;
}

.Wrapper-img {
  width: 50rpx;
  height: 50rpx;
  margin-left: 10rpx;
}

.Wrapper-content {
  color: rgba(16, 16, 16, 1);
  font-size: 25rpx;
  font-family: PingFangSC-regular;
  line-height: 20rpx;
}

.Wrap-content1 {
  display: flex;
  justify-content: flex-start;
  margin-left: 10rpx;
  margin-top: 10rpx;
}

.Wrap-info {
  display: flex;
  justify-content: flex-start;
  margin-left: 10rpx;
  margin-top: 25rpx;
}

.Wrap-content3 {
  margin-top: 25rpx;
}

.Wrap-content4 {
  margin-top: 25rpx;
}

.Wrap-content5 {
  display: flex;
  justify-content: flex-start;
  margin-left: 10rpx;
  margin-top: 25rpx;
}

.Wrap-content6 {
  margin-top: 25rpx;
}

.Wrap-detils-btn {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 25rpx;
  /* position: fixed;
		bottom: 0;
		width: 100%;
		background-color: white;
		padding: 40rpx 20rpx;
		box-shadow: -2rpx 5rpx rgba(0, 0, 0, 0.1); */
}

.Wrap-Payment {
  padding: 40rpx 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0 30rpx;
}

.payment-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.payment-amount {
  font-size: 40rpx;
  color: #ff4d4f;
  font-weight: bold;
}

.payment-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
}

.option-left {
  display: flex;
  align-items: center;
}

.payment-icon {
  width: 64rpx;
  height: 64rpx;
  margin-right: 24rpx;
  border-radius: 8rpx;
}

.option-text {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

.other-payment {
  padding: 30rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.other-payment-text {
  color: #1890ff;
  font-size: 28rpx;
}

.terms-of-service {
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #999;
  line-height: 1.6;
  background-color: #f9f9f9;
  padding: 20rpx;
  border-radius: 8rpx;
}

.Wrap-detils-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  background-color: #fff;
  border-top: 1px solid #f0f0f0;
}

.certificate {
  display: flex;
  flex-direction: column;
}

.certificate-img {
  margin-bottom: 24rpx;
}

/* 第二层弹框 */
.card-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 10px;
}

.card-image {
  width: 100px;
  /* Adjust as needed */
  height: 100px;
  /* Adjust as needed */
  border-radius: 8px;
  margin-right: 15px;
  object-fit: cover;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.info-item,
.Telephone,
.date,
.time {
  margin-bottom: 5px;
  font-size: 14px;
  color: #333;
}

.time span {
  margin-right: 8px;
}

.address-line {
  font-size: 14px;
  line-height: 20rpx;
  /* 行高20rpx */
  color: #333;
  /* 深色文字 */
  display: block;
  /* 确保独占一行 */
  margin-bottom: 30rpx;
  /* 下边距30rpx */
}

/* 联系人信息容器 */
.contact-info {
  display: flex;
  gap: 20rpx;
  /* 姓名和电话之间的间距 */
}

/* 姓名样式 */
.contact-name {
  font-size: 12px;
  color: #999;
  /* 灰色文字 */
  line-height: 20rpx;
}

/* 电话样式 */
.contact-phone {
  font-size: 12px;
  color: #999;
  /* 灰色文字 */
  line-height: 20rpx;
}

/* 服务描述卡片样式 */
.service-description-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.service-text {
  flex: 1;
  margin-right: 20rpx;
}

.service-price-tag {
  font-size: 36rpx;
  font-weight: bold;
  color: #ff4d4f;
  white-space: nowrap;
  padding: 8rpx 16rpx;
  background-color: #fff2f0;
  border-radius: 8rpx;
}

/* 弹框滚动内容样式 */
.popup-scroll-content {
  height: calc(80vh - 120rpx); /* 减去底部按钮区域的高度 */
  padding: 24rpx;
  padding-bottom: 30px; /* 增加底部内边距，避免内容被按钮遮挡 */
  box-sizing: border-box;
}

/* 固定底部按钮样式 */
.popup-fixed-bottom {
  position: absolute; /* 相对于popup容器定位 */
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: white;
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-end; /* 右对齐按钮 */
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1); /* 顶部阴影，创造分隔感 */
  z-index: 1; /* 确保按钮在内容之上 */
}

/* 服务信息项样式 */
.service-info-item {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.service-label {
  width: 200rpx;
  font-size: 28rpx;
  color: #666;
  flex-shrink: 0;
}

.service-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.service-number-box {
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

/* 服务周期样式 */
.service-period {
  padding: 24rpx 0;
  border-bottom: 1px solid #f5f5f5;
}

.date-picker-container {
  margin: 20rpx 0;
  padding: 12rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

.calendar-component {
  margin-top: 20rpx;
  border: 1px solid #f0f0f0;
  border-radius: 8rpx;
}

/* 备注容器样式 */
.remark-container {
  padding: 24rpx 0;
  display: flex;
  flex-direction: column;
}

.remark-input {
  margin-top: 16rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
}

/* 修改卡片基础样式 */
.card-container {
  display: flex;
  padding: 24rpx;
  margin: 16rpx 0;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

/* 志愿者卡片样式 */
.volunteer-card {
  display: flex;
  position: relative;
  padding: 24rpx 0;
  align-items: flex-start;
}

.volunteer-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 12rpx;
  margin-right: 24rpx;
  flex-shrink: 0;
  object-fit: cover;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.volunteer-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-row {
  display: flex;
  align-items: center;
}

.info-label {
  color: #666;
  font-size: 26rpx;
  margin-right: 8rpx;
  width: 140rpx;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  font-size: 26rpx;
  font-weight: 500;
}

.volunteer-rating {
  position: absolute;
  top: 24rpx;
  right: 0;
  background-color: #fff8e6;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  border: 1px solid #ffebb7;
}

.rating-text {
  font-size: 28rpx;
  color: #ff9900;
  font-weight: bold;
  margin-right: 6rpx;
}

.rating-label {
  font-size: 24rpx;
  color: #ff9900;
}

/* 技能描述样式 */
.skill-description {
  padding: 16rpx 0;
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

/* 证书样式 */
.certificate {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.certificate-img {
  border-radius: 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  margin-bottom: 16rpx;
}

/* Address selection styles */
.address-display {
  padding: 16rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  margin-bottom: 16rpx;
}

.address-line {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #333;
  display: block;
  margin-bottom: 12rpx;
  font-weight: 500;
}

.contact-info {
  display: flex;
  gap: 20rpx;
}

.contact-name, .contact-phone {
  font-size: 26rpx;
  color: #666;
  line-height: 36rpx;
}
</style>