online-order-vue/src/views/mall/order/storeOrder/OrderDetail.vue

<template>
  <el-drawer v-model="drawer" :title="dialogTitle" size="30%">
    <div>
      <el-descriptions :title="t('mall.receivingInfoOne')" :column="2" v-if="DetailData.orderType == 'takeout'">
        <el-descriptions-item :label="t('mall.userNickname')">{{ nickname }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.consignee')">{{ DetailData.realName }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.contactPhone')">{{ DetailData.userPhone }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.receivingAddress')">{{ DetailData.userAddress }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="" :column="1" v-if="DetailData.orderType != 'due'">
        <el-descriptions-item>
          <template #label>
            <div class="mylabel">
              {{ t('mall.dishDetails') }}
            </div>
          </template>
          <div
            style="background: linear-gradient(to bottom, #e9f1ee, #fcfcf4); padding: 20px 30px; margin: 10px 0; border-radius: 20px"
            v-for="(item, index) in DetailData.appDeskOrderVo"
            :key="index"
          >
            <div class="flex align-center">
              <div><el-avatar :size="50" :src="item.uavatar" /></div>
              <div class="flex flex-1 justify-between font-size-sm text-color-assist">
                <div class="flex flex-column ml-2">
                  <span>{{ item.unickname }}</span>
                  <span>{{ formatDate(item.addTime) }}</span>
                </div>
                <div style="">
                  <span style="color: #9acafc; font-weight: bold">{{
                    item.uidType == 'user' ? t('mall.userOrdering') : t('mall.staffOrderingOnBehalf')
                  }}</span>
                  <span style="color: #5ac725">({{ item.isOrder == 0 ? t('mall.mealNotServed') : t('mall.mealServed') }})</span>
                </div>
              </div>
            </div>
            <el-divider />
            <div class="flex align-center" v-for="(good, index2) in item.appDeskOrderGoodsVos" :key="index2">
              <div><el-image :src="getImageUrl(good.image)" style="width: 70px; height: 70px" /></div>
              <div class="flex flex-1 flex-column ml-2 font-size-sm">
                <div class="flex justify-between"
                  ><span class="font-weight-bolder">{{ good.title }}</span
                  ><span style="color: #f56c6c">{{ good.spec }}</span></div
                >
                <div class="flex justify-between mt-1"
                  ><span>¥{{ good.price }}</span
                  ><span>x{{ good.number }}</span></div
                >
              </div>
            </div>
          </div>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :title="t('mall.productDetails')" :column="1" v-else>
        <el-descriptions-item :label="t('mall.reserveTable')">
          <table width="100%">
            <tr style="font-weight: bold; height: 50px">
              <td>{{ t('mall.picture') }}</td>
              <td>{{ t('mall.name') }}</td>
              <td>{{ t('mall.price') }}</td>
              <td>{{ t('mall.quantity') }}</td>
            </tr>
            <tr>
              <td><el-image style="width: 40px; height: 40px" :src="getImageUrl(DetailData.shopDeskDO.image)" :fit="fit" /></td>
              <td>{{ DetailData.shopDeskDO.title }}</td>
              <td>￥0.00</td>
              <td>x 1</td>
            </tr>
          </table>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions :title="t('mall.orderInfo')" :column="2">
        <template #title>
          {{ t('mall.orderInfo') }}
          <el-tag type="danger" v-if="DetailData.orderType == 'desk'">{{ t('mall.dineIn') }}</el-tag>
          <el-tag type="danger" v-if="DetailData.orderType == 'takeout'">{{ t('mall.takeOut') }}</el-tag>
          <el-tag type="danger" v-if="DetailData.orderType == 'takein'">{{ t('mall.pickup') }}</el-tag>
          <el-tag type="danger" v-if="DetailData.orderType == 'due'">{{ t('mall.reservation') }}</el-tag>
        </template>
        <el-descriptions-item :label="t('mall.store')">{{ DetailData.shopName }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.pickupNumber')" v-if="DetailData.orderType != 'due'">{{
          DetailData.numberId
        }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.tableNumber')">{{
          DetailData.deskNumber ? DetailData.deskNumber : t('public.none')
        }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.diningPersonCount')" v-if="DetailData.orderType != 'due'">{{
          DetailData.deskPeople ? DetailData.deskPeople : t('public.none')
        }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.orderNumber1')">{{ DetailData.orderId }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.reservationTime')" v-if="DetailData.orderType == 'due'">{{
          formatDate(DetailData.dueTime)
        }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.arrivalTime')" v-if="DetailData.orderType == 'due'">{{
          DetailData.reachTime
        }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.reservationPerson')" v-if="DetailData.orderType == 'due'">{{
          DetailData.realName
        }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.reservationPhone')" v-if="DetailData.orderType == 'due'">{{
          DetailData.userPhone
        }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.orderStatus')" v-if="DetailData.orderType != 'due'">{{
          DetailData.statusStr
        }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.reservationStatus')" v-if="DetailData.orderType == 'due'">
          <span v-if="DetailData.dueStatus == 1">{{ t('mall.reserving') }}</span>
          <span v-else-if="DetailData.dueStatus == 2">{{ t('mall.cancelled') }}</span>
          <span v-else>{{ t('mall.completed') }}</span>
        </el-descriptions-item>
        <el-descriptions-item :label="t('mall.totalProductQuantity')">{{ DetailData.totalNum }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.totalProductPrice')">{{ DetailData.totalPrice }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.shippingFee')">{{ DetailData.payPostage }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.couponAmount')">{{ DetailData.couponPrice }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.pointsDeduction')">{{ DetailData.useIntegral }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.actualPayment')">{{ DetailData.payPrice }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.bonusPoints')">{{ DetailData.gainIntegral }}</el-descriptions-item>
        <el-descriptions-item :label="t('public.createTime')">{{ formatDate(DetailData.createTime) }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.paymentTime')">{{ formatDate(DetailData.payTime) }}</el-descriptions-item>
        <el-descriptions-item :label="t('mall.paymentMethod')">{{ DetailData.payType }}</el-descriptions-item>
      </el-descriptions>
      <!-- <el-descriptions title="物流信息" :column="2">
        <el-descriptions-item label="快递公司">{{ DetailData.deliveryName }}</el-descriptions-item>
        <el-descriptions-item label="快递单号">{{ DetailData.deliveryId }} <el-button type="primary" @click="getLogistic(DetailData.deliverySn,DetailData.deliveryId)">物流追踪</el-button></el-descriptions-item>
      </el-descriptions> -->
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in logisticResult" :key="index" :timestamp="activity.acceptTime">
          {{ activity.acceptStation }}
        </el-timeline-item>
      </el-timeline>
      <!-- <el-button @click="innerDrawer = true">Click me!</el-button>
      <el-drawer
        v-model="innerDrawer"
        title="I'm inner Drawer"
        :append-to-body="true"
        :before-close="handleClose"
      >
        <p>_(:зゝ∠)_</p>
      </el-drawer> -->
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import * as StoreOrderApi from '@/api/mall/order/storeOrder'
import { formatDate } from '@/utils/formatTime'
import { convertImageUrl } from '@/utils/image-helper' // 导入图片URL处理工具
//const message = useMessage() // 消息弹窗

const { t } = useI18n() // 国际化
// const message = useMessage() // 消息弹窗
const dialogTitle = ref('') // 弹窗的标题
const drawer = ref(false)
const DetailData = ref({})
const nickname = ref('')
const logisticResult = ref({})
const product = ref([])
const addProductMark = ref(0)
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  drawer.value = true
  dialogTitle.value = t('action.' + type)
  DetailData.value = await StoreOrderApi.getStoreOrder(id)
  nickname.value = DetailData.value.userRespVO ? DetailData.value.userRespVO.nickname : '--'
  product.value = DetailData.value.storeOrderCartInfoDOList
  //获取加餐数量
  if (DetailData.value.storeOrderCartInfoDOList.length > 0) {
    addProductMark.value = DetailData.value.storeOrderCartInfoDOList[DetailData.value.storeOrderCartInfoDOList.length - 1].addProductMark
  }

  console.log('addProductMark.value:', addProductMark.value)
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

//const getLogistic = async(deliverySn,deliveryId) => {
//   const res  = await StoreOrderApi.getLogistic(deliverySn, deliveryId)
//   if (res.success == "false") {
//     message.error(res.reason)
//   }
//   logisticResult.value = res.traces
// }

// 添加图片URL转换方法
const getImageUrl = (url) => {
  return convertImageUrl(url)
}
</script>
<style scoped>
.flex {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.align-center {
  align-items: center;
}
.flex-1 {
  flex: 1;
}
.flex-column {
  flex-direction: column !important;
}
.ml-2 {
  margin-left: 20px;
}
.mylabel {
  font-weight: bolder;
  text-align: center;
  font-size: 18px;
}
</style>