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-itemIform">服务描述：{{ 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="'订单号'">
      <template #head>
        <view class="custom-order-title">
          <text>订单号：</text>
          <text class="order-number">{{ item.secondOutTradeNo }}</text>
        </view>
      </template>
      <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>服务价格：<text style="color: red">￥{{ item.serviceTotalPrice }}</text></text>
            <view class="info-item">服务数量：{{ listData.singleQuantity
              }}{{ listData.businessUnit }}</view>
            <text>服务状态：{{
              dictSortMap[item.orderStatus] || item.orderStatus
              }}</text>
            <view class="info-line">
              预计开始服务日期：{{ item.workDate }}
            </view>
            <view class="info-line">
              预计开始服务时间：{{ item.workStartTime }}
            </view>
            <view class="info-line">
              预计结束服务时间：{{ item.workEndTime }}
            </view>

          </view>
          <view class="right-corner-container" v-if="item.orderStatus !== '1'">
            <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) => {
  // 直接跳转到userComment页面并传递必要数据
  uni.navigateTo({
    url: `/pages_classify/pages/orderItem/userComment?secondOrderId=${item.secondOrderId}`
  });
  
  // 在跳转前存储必要数据
  uni.setStorage({
    key: 'orderDetailsData',
    data: {
      volunteerPicture: listData.value.volunteerPicture,
      businessManagementName: listData.value.businessManagementName,
      volunteerName: listData.value.volunteerName,
      volunteerInfoId: listData.value.volunteerInfoId,
      secondOrderId: item.secondOrderId
    },
    fail: (err) => {
      console.error('保存订单数据失败', err);
    }
  });
}

// 获取传递的参数
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: 15rpx;
  font-size: 28rpx;
  line-height: 1.6;
  color: #333;
}

.info-itemIform{
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 15rpx;
  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;
}

.custom-order-title {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #303133;
  width: 100%;
  padding: 10rpx 0;
}

.order-number {
  word-break: break-all;
  flex: 1;
}
</style>