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>
            {{ orderStatus }}
          </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.addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
          </el-descriptions-item>
          <el-descriptions-item :span="2" v-if="orderDetails.back !== 'normal'">
            <template slot="label">
              <i class="iconfont icon-tuikuan"></i>
              退款
            </template>
            {{ orderBack }}
          </el-descriptions-item>
          <el-descriptions-item v-if="orderDetails.back !== 'normal'">
            <template slot="label">
              <i class="iconfont icon-qiandai"></i>
              退款金额
            </template>
            {{ orderDetails.refund_price }}元
          </el-descriptions-item>
          <el-descriptions-item :span="3" v-if="orderDetails.back_remark !== ''">
            <template slot="label">
              <i class="el-icon-user"></i>
              退款原因
            </template>
            {{ orderDetails.back_remark }}
          </el-descriptions-item>
          <el-descriptions-item :span="1.5" v-if="orderDetails.back !== 'normal'">
            <template slot="label">
              <i class="iconfont icon-shichang"></i>
              退款申请时间
            </template>
            {{ orderDetails.back_addtime | parseTime('{y}-{m}-{d} {h}:{i}') }}
          </el-descriptions-item>
          <el-descriptions-item :span="1.5" v-if="orderDetails.back !== 'normal'">
            <template slot="label">
              <i class="iconfont icon-shichang"></i>
              退款确定时间
            </template>
            {{ orderDetails.back_time | parseTime('{y}-{m}-{d} {h}:{i}') }}
          </el-descriptions-item>
          <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.remark }}
          </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'

export default {
  name: 'OrderShow',
  data () {
    return {
      orderId: this.$route.params.id, // get参数 获取飞机id 没有为添加页面
      orderStatus: '', // 订单状态 文字
      orderBack: ''// 退款状态 文字
    }
  },
  computed: {
    /**
     * @description: 订单列表
     */
    orderList () {
      return this.$store.state.orderList
    },
    /**
     * @description: 订单详情
     */
    orderDetails () {
      if (this.orderList.length > 0) {
        return this.orderList.find(order => order.id === this.orderId)
      } else {
        return {}
      }
    }
  },
  methods: {
    /**
     * @description: 订单状态转成文字形式
     * @param {*} val 订单状态值
     */
    statusToStr (val) {
      if (val.status === 'canceled') {
        this.orderStatus = '订单已取消'
      } else if (val.status === 'unpaid') {
        this.orderStatus = '未付款'
      } else if (val.status === 'pending') {
        this.orderStatus = '已付款处理中'
      } else if (val.status === 'processing') {
        this.orderStatus = '已接单备货中'
      } else if (val.status === 'shipped') {
        this.orderStatus = '已发货'
      } else if (val.status === 'completed') {
        this.orderStatus = '已送达'
      } else if (val.status === 'closed') {
        this.orderStatus = '交易已完成'
      }
      if (val.back === 'normal') {
        this.orderBack = '未申请过'
      } else if (val.back === 'requested') {
        this.orderBack = '申请退款'
      } else if (val.back === 'refunded') {
        this.orderBack = '已退款'
      } else if (val.back === 'rejected') {
        this.orderBack = '已拒绝退款'
      } else if (val.back === 'actively') {
        this.orderBack = '商家予退'
      }
    }
  },
  watch: {
    orderDetails (val) {
      this.statusToStr(val)
    }
  },
  created () {
    if (Object.keys(this.orderDetails).length > 0) {
      this.statusToStr(this.orderDetails)
    }
  },
  filters: {
    parseTime
  }
}
</script>

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