leromro-mini/pages_classify/pages/orderItem/orderdetails.vue

<template>
  <view>
    <view class="address-container">
      <view class="address-header">
        <!-- 左侧默认标签-->
        <up-tag text="默认" type="error"></up-tag>

        <!-- 中间收货人信息 -->
        <view class="contact-info">
          {{ listData.cityName }}
          {{ listData.telephone }}
        </view>

        <!-- 右侧图标 -->
        <up-icon name="arrow-right" class="arrow-icon"></up-icon>
      </view>

      <!-- 下方地址信息 -->
      <view class="address-detail">
        {{ listData.provinceName }} {{ listData.cityName }}
        {{ listData.districtName }} {{ listData.address }}
      </view>
    </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.businessManagementName }}</view
              >
              <view class="info-item"
                >服务时长：{{ listData.serviceDuration }}分钟</view
              >
              <view class="info-item"
                >服务价格：{{ listData.serviceOnePrice }}</view
              >
              <view class="info-item"
                >服务数量：{{ listData.singleQuantity
                }}{{ listData.businessUnit }}</view
              >
              <view class="info-item"
                >服务类别：{{ listData.businessDescribe }}</view
              >
            </view>

            <view class="card-rating">4.5 评分</view>
          </view>
        </template>
      </up-card>

      <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.volunteerName }}</view>
              <view class="info-item">年龄：{{ listData.age }}</view>
              <view class="Telephone">电话：{{ listData.phonenumber }}</view>
              <view class="info-item">住址：{{ listData.address }}</view>
            </view>

            <view class="card-rating">4.5 评分</view>
          </view>
        </template>
      </up-card>
      <up-card
        title="技能介绍"
        :head-style="{ height: '80rpx', padding: '20rpx' }"
      >
        <template #body>
          {{ listData.skillDescribe }}
        </template>
      </up-card>
      <up-card title="证书" :head-style="{ height: '80rpx', padding: '20rpx' }">
        <template #body>
          <view
            class="certificate-container"
            v-if="certificationPictures.length > 0"
          >
            <image
              v-for="(image, index) in certificationPictures"
              :key="index"
              :src="image"
              mode="widthFix"
              class="certificate-img"
              @click="previewImage(image, certificationPictures)"
            ></image>
          </view>
          <view v-else class="no-certificate">暂无证书</view>
        </template>
      </up-card>
    </view>

      <up-card
        v-for="(item, index) in listData.secondOrderList"
        :key="index"
        :title="'订单号：' + item.secondOutTradeNo"
        :head-style="{ height: '80rpx', padding: '20rpx' }"
      >
        <template #body>
          <view class="list-item">
            <image
              :src="listData.volunteerPicture"
              mode="aspectFill"
              class="item-image"
            >
            </image>
            <view class="item-info">
              <view class="info-line">
                服务类别：{{ listData.businessManagementName }}
              </view>
              <text>服务价格：{{ item.serviceTotalPrice }}</text>
               <view class="info-item"
                >服务数量：{{ listData.singleQuantity
                }}{{ listData.businessUnit }}</view
              >
              <text
                >服务状态：{{
                  dictSortMap[item.orderStatus] || item.orderStatus
                }}</text
              >
            </view>
            <view class="right-corner-container">
              <up-button
                type="error"
                text="评论"
                size="mini"
                @click="handlButClick(item)"
                :customStyle="hadlClickError"
              ></up-button>
            </view>
          </view>
        </template>
      </up-card>
    </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed, onMounted } from 'vue'
import { orderInfomainOrderId } from '@/api/userList.js'
import { systemDictdaTalist } from '@/api/userList.js'

const listData = ref({}) //志愿者详情数据
const dataList = ref([])
const orderStatus = ref(0)
const score = ref(null)
const mainOrderId = ref('') //志愿者ID

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

const dictSortMap = computed(() => {
  let mapObj = {}
  dataList.value.forEach((item) => {
    mapObj[item.dictValue] = item.dictLabel
  })
  return mapObj
})

//获取用户订单列表状态
async function getData() {
  try {
    const res = await systemDictdaTalist().catch((err) => {
      console.error('接口请求失败:', err)
      throw err // 重新抛出以进入 catch 块
    })
    dataList.value = res.rows
  } catch (e) {
    console.error('获取数据异常:', e) // 确保这里打印错误
  }
}

const handlButClick = (item) => {
  uni.navigateTo({
    url: `/pages_classify/pages/orderItem/userComment?mainOrderId=${
      mainOrderId.value
    }&secondOrderId=${item.secondOrderId}&data=${encodeURIComponent(
      JSON.stringify(listData.value)
    )}`,
  })
}

// 获取传递的参数
onLoad(async (options) => {
  mainOrderId.value = options.mainOrderId
  const res = await orderInfomainOrderId(mainOrderId.value)
  // console.log('API Response:', res)
  listData.value = res.data
  // console.log('listData:', listData.value)
})

const hadlClickError = {
  width: '150rpx',
  height: '50rpx',
  marginTop: '70rpx',
}

// 预览图片
const previewImage = (current, urls) => {
  uni.previewImage({
    current,
    urls,
  })
}

onMounted(() => {
  getData()
})
</script>

<style scoped>
.address-container {
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.contact-info {
  flex: 1;
  /* 占据剩余空间 */
  font-size: 28rpx;
  margin-left: 25rpx;
}

.arrow-icon {
  margin-left: auto;
  /* 将图标推到最右侧 */
}

.address-detail {
  font-size: 26rpx;
  color: #666;
}

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

/* 中间信息区域 */
.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: 40rpx;
  background-color: #f8f8f8;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #ff9900;
  font-weight: bold;
}

/* 上课时间 */
.Wrap-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 20rpx 0rpx 24rpx;
}

.list-item {
  display: flex;
  padding: 24rpx;
  align-items: flex-start;
  gap: 24rpx;
  position: relative;
}

.item-image {
  width: 160rpx;
  height: 180rpx;
  border-radius: 16rpx;
  object-fit: cover;
}

.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

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

.right-corner-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.certificate-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  padding: 10rpx;
}

.certificate-img {
  width: 220rpx;
  height: 220rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

.no-certificate {
  text-align: center;
  color: #999;
  padding: 30rpx;
}
</style>