food/src/views/layout/components/main/order/show.vue

<template>
  <div class="app-container">
    <el-row class="m-t-0">
      <el-col :span="24">
        <!-- 订单梗概 -->
        <el-descriptions class="margin-top m-b-20" title="订单梗概" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-dingdanshoukuan"></i>
              状态
            </template>
            {{ orderDetails.main_status }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-dingdanguanli"></i>
              订单编号
            </template>
            {{ orderDetails.order_sn }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-shichang"></i>
              下单时间
            </template>
            {{ orderDetails.order_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
          </el-descriptions-item>
          <template v-if="orderDetails.refund_status !== '未申请'">
            <el-descriptions-item :span="1">
              <template slot="label">
                <i class="iconfont icon-tuikuan"></i>
                退款状态
              </template>
              {{ orderDetails.refund_status }}
            </el-descriptions-item>
            <el-descriptions-item
              v-if="orderDetails.refund_status === '申请中' || orderDetails.refund_status === '已同意' || orderDetails.refund_status === '拒绝退'">
              <template slot="label">
                <i class="iconfont icon-qiandai"></i>
                客户申请金额
              </template>
              {{ orderDetails.apply_price }}元
            </el-descriptions-item>
            <el-descriptions-item v-if="orderDetails.refund_status === '已同意' || orderDetails.refund_status === '主动退'">
              <template slot="label">
                <i class="iconfont icon-qiandai"></i>
                退款金额
              </template>
              {{ orderDetails.refund_price }}元
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label" v-if="orderDetails.refund_remark !== ''">
                <i class="el-icon-user"></i>
                退款原因
              </template>
              {{ orderDetails.refund_remark }}
            </el-descriptions-item>
            <el-descriptions-item
              v-if="orderDetails.refund_status === '申请中' || orderDetails.refund_status === '已同意' || orderDetails.refund_status === '拒绝退'">
              <template slot="label">
                <i class="iconfont icon-shichang"></i>
                退款申请时间
              </template>
              {{ orderDetails.refundapply_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
            </el-descriptions-item>
            <el-descriptions-item v-if="orderDetails.refund_status === '已同意' || orderDetails.refund_status === '主动退'">
              <template slot="label">
                <i class="iconfont icon-shichang"></i>
                退款确定时间
              </template>
              {{ orderDetails.refunded_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
            </el-descriptions-item>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-zhongliang"></i>
              总重量
            </template>
            {{ orderDetails.total_weight }}克
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-qiandai"></i>
              总价格
            </template>
            {{ orderDetails.total_price }}元
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-liuyan"></i>
              买家留言
            </template>
            {{ orderDetails.remark }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-beizhu"></i>
              订单备注
            </template>
            {{ orderDetails.describe }}
          </el-descriptions-item>
        </el-descriptions>
        <!-- 收货信息 -->
        <el-descriptions class="margin-top m-b-20" title="收货信息" :column="3" border>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-id"></i>
              客户ID
            </template>
            {{ orderDetails.uid }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              收货人称呼
            </template>
            {{ orderDetails.receiver }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-gf_phoneLoudspeaker"></i>
              电话
            </template>
            {{ orderDetails.tel }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-jingqu"></i>
              收获地块
            </template>
            {{ orderDetails.receive_site_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-shuzishurukuang_line"></i>
              取餐号
            </template>
            {{ orderDetails.food_sn }}
          </el-descriptions-item>
        </el-descriptions>
        <!-- spu -->
        <div class="el-descriptions__header">
          <div class="el-descriptions__title">订单详情</div>
          <div class="el-descriptions__extra"></div>
        </div>
        <el-descriptions class="margin-top m-b-20" v-for="spu, index in orderDetails.product_snapshot" :key="index"
          :column="3" border>
          <el-descriptions-item :span="3">
            <template slot="label">
              <i class="iconfont icon-chanpinliebiao-02"></i>
              SPU
            </template>
            {{ spu.spu_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-tuxiang"></i>
              商品图片
            </template>
            <img width="60" height="60" :src="$store.state.settings.host + '/Data/UploadFiles/spu/' + spu.spu_photo" />
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-id"></i>
              商品ID
            </template>
            {{ spu.spu_id }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="iconfont icon-a-XXXbianhao"></i>
              商品编号
            </template>
            {{ spu.spu_number }}
          </el-descriptions-item>
          <!-- sku List-->
          <template v-for="sku in spu.sku_arr">
            <el-descriptions-item :span="3">
              <template slot="label">
                <i class="iconfont icon-sku"></i>
                SKU
              </template>
              {{ sku.arr_name }}：<el-tag>{{ sku.sku_name }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="iconfont icon-tuxiang"></i>
                单品图片
              </template>
              <img width="60" height="60" :src="$store.state.settings.host + '/Data/UploadFiles/sku/' + sku.sku_photo" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="iconfont icon-id"></i>
                单品ID
              </template>
              {{ sku.sku_id }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="iconfont icon-a-XXXbianhao"></i>
                单品编号
              </template>
              {{ sku.sku_number }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="iconfont icon-yunsuankongjian"></i>
                购买数量
              </template>
              {{ sku.sku_totol }} {{ sku.sku_unit }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="iconfont icon-zhongliang"></i>
                单品重量
              </template>
              {{ sku.sku_weight }}克
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                <i class="iconfont icon-qiandai"></i>
                单价
              </template>
              {{ sku.sku_price }}元
            </el-descriptions-item>
            <el-descriptions-item :span="3">
              <template slot="label">
                <i class="iconfont icon-putaway"></i>
                进货渠道
              </template>
              {{ sku.sku_purchase_channel }}
            </el-descriptions-item>
          </template>
        </el-descriptions>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getOrderDetails } from '@/utils/api/table'

export default {
  name: 'OrderShow',
  data () {
    return {
      orderId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
      orderDetails: {}// 订单详情
    }
  },
  computed: {},
  methods: {
    /**
     * @description: 获取订单详情
     */
    async getOrderDetails (orderId) {
      const res = await getOrderDetails(orderId)
      if (res.data.status === 1) {
        this.orderDetails = res.data.orderDetails
        // 反序列化 product_snapshot 字符串
        try {
          const productSnapshot = JSON.parse(this.orderDetails.product_snapshot)
          this.orderDetails.product_snapshot = productSnapshot // 存回 this.orderDetails
        } catch (error) {
          this.$message.error('解析产品快照失败')
        }
      } else {
        this.$message.error('获取订单详情失败')
      }
    }
  },
  watch: {},
  created () {
    this.getOrderDetails(this.orderId)
  },
  filters: {
    parseTime
  }
}
</script>

<style lang="scss" scoped></style>