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

<template>
  <view>
    <view>
      <up-card
        title="志愿者介绍"
        :head-style="{ height: '80rpx', padding: '20rpx' }"
      >
        <template #body>
          <view class="card-container">
            <!-- 左侧图片 -->
            <image
              class="card-image"
              :src="listData.volunteerPicture"
              mode="aspectFill"
            ></image>

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

            <!-- 右上角评分 - 使用绝对定位 -->
            <view class="card-rating">4.5 评分</view>
          </view>
        </template>
      </up-card>
      <up-card
        title="技能介绍"
        :thumb="thumb"
        :head-style="{ height: '80rpx', padding: '20rpx' }"
      >
        <template #body>
          {{ listData.skillDescribe }}
        </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 v-model:show="show" @open="upPopupOpen">
        <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 style="margin-top: 15rpx">￥{{ listData.businessPrice }}</text>
        </view>
        <view class="Wrap-info">
          <text style="margin-left: 10rpx">服务类别：</text>
          <up-text type="info" text="家庭教育"></up-text>
        </view>

        <view class="Wrap-content3">
          <text style="margin-left: 15rpx">服务周期:</text>
          <view style="margin-top: 25rpx">
            <uniDatetimePickerMy
              :modelValue="doorToDoorTime"
              :start="startDisabled"
              :end="endDisabled"
              type="daterange"
            ></uniDatetimePickerMy>
          </view>
          <view>
            <its-calendar
              v-if="show"
              :businessDuration="listData.businessDuration"
              :timeArr="doorToDoorTimeArr"
              :timeHostArr="timeHostArr"
              @getByDate="getByDate"
              @getByTime="getByTime"
            ></its-calendar>
          </view>
        </view>

        <view class="Wrap-content6">
          <text style="margin-left: 15rpx">备注：</text>
          <up-input
            placeholder="请输入内容"
            border="surround"
            v-model="remark"
            @change="change"
          ></up-input>
        </view>
        <view class="Wrap-detils-btn">
          <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 v-model: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"> 其他方式支付 > </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 } 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/volunteerSide/adresss.vue'

const src = ref(
  'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
)
const businessPrice = ref() //价格
const addressId = ref('') //用户下单地址
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 time = ref('')
const listData = ref({})
const show = ref(false) //第一层弹框
const showSecond = ref(false) //第二层弹框
const showThird = ref(false) //第二层弹框
const showSum = ref(false)
const remark = ref('') //备注
const radiovalue1 = ref('苹果')
const selectedAddress = ref(null)
const addressFlag = ref(false)
const paymentMethod = ref(1) // Add payment method ref with default value 1 (wallet)

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

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

// 详情底部立即购买弹框
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 || {}
  businessPrice.value = listData.value.businessPrice || 0
})

// 选择日期
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(() => {
  return totalTimes.value * businessPrice.value
})
// const computeClickTime = computed(() => {
// 	let timeArr = []
// 	let nyr = selectedTimes.value.map(item => {
// 		return item.date
// 	})

// 	let nyrSet = Array.from(new Set(nyr)).map(item => {
// 		return {
// 			date: item,
// 			timeArr: []
// 		}
// 	})
// 	selectedTimes.value.forEach(item => {
// 		nyrSet.forEach(i => {
// 			if (item.date == i.date) i.timeArr.push(item.time)
// 		})
// 	})
// 	return nyrSet
// })

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 // 阻止购买
  }

  // 如果有地址，执行购买逻辑
  proceedToPayment()
}

const proceedToPayment = async () => {
  try {
    // 定义要发送的数据
    const orderData = {
      orders: {
        serviceOnePrice: businessPrice.value,
        serviceTotalPrice: computeMoney.value,
        serviceCategory: serviceCategory.value,
        totalTimes: totalTimes.value,
        serviceStartDate: '2025-04-18',
        startTime: '8:00',
        serviceDuration: 4,
        paymentMethod: paymentMethod.value,
        volunteerId: volunteerId.value,
        remark: remark.value,
        businessManagementId: businessManagementId.value,
        volunteerInfoId: listData.value.volunteerInfoId,
        addressId: selectedAddress.value.addressId,
      },
      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/index',
                })
              }, 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)
            }
          }
        })
      })
    }
  } catch (error) {
    console.error('支付失败:', error)
    uni.showToast({
      title: '支付失败余额不足',
      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: 340rpx;
  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: 30rpx;
  background-color: #fff;
}

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

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

.payment-amount {
  font-size: 36rpx;
  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: 80rpx;
  height: 80rpx;
  margin-right: 20rpx;
}

.option-text {
  font-size: 30rpx;
  font-weight: bold;
}

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

.terms-of-service {
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #999;
  line-height: 1.5;
}

.confirm-button {
  margin-top: 40rpx;
}

.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;
}
</style>