web-admin/src/views/system/order/detail_order.vue

<template>
  <div id="form-1">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight">
        <el-col class="top-btn">
          <el-button type="primary" size="mini" @click="toBack()">返回</el-button>
        </el-col>
        <el-col :span="8" class="one">
          <el-col :span="24" class="add">
            <el-col :span="2">
              <i class="el-icon-location"></i>
            </el-col>
            <el-col :span="22">
              <p>{{ address.name }},{{ address.phone }}</p>
              <p>{{ address.province }} , {{ address.city }} , {{ address.area }} , {{ address.address }}</p>
            </el-col>
          </el-col>
          <el-col :span="24" v-for="(item, index) in list" :key="index">
            <el-col :span="24" class="shop"> <i class="el-icon-s-shop"></i>{{ item.shop_name }}</el-col>
            <el-col :span="24" v-for="(goods, index) in item.goods" :key="index">
              <el-col :span="24" class="goods">
                <el-col :span="6"><el-image :src="goods.goods.file[0].url"></el-image></el-col>
                <el-col :span="18">
                  <el-col :span="12">
                    <p>{{ goods.goods.name }}</p>
                    <p>规格：{{ goods.name }}</p>
                  </el-col>
                  <el-col :span="12" class="money">
                    <p v-if="info.type == '0'">￥{{ goods.sell_money }}</p>
                    <p v-else-if="info.type == '1'">￥{{ goods.group_config.money }}</p>
                    <p>X{{ goods.buy_num }}</p>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="6">运费</el-col>
                <el-col :span="18" class="other" v-if="!goods.freight == '0'">{{ goods.freight }}</el-col>
                <el-col :span="18" class="other" v-else>包邮</el-col>
              </el-col>
              <el-col :span="24">
                <el-col :span="6">订单备注</el-col>
                <el-col :span="18" class="other" v-if="item.remarks">{{ item.remarks }}</el-col>
                <el-col :span="18" class="other" v-else>暂无备注</el-col>
              </el-col>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="6">配送方式</el-col>
            <el-col :span="18" class="other">快递配送</el-col>
          </el-col>
          <el-col :span="24" class="goods_total">
            <el-col :span="6">商品金额</el-col>
            <el-col :span="18" class="other">
              <p>￥{{ total_detail.goods_total }}</p>
            </el-col>
          </el-col>
          <el-col :span="24" class="goods_total">
            <el-col :span="6">快递费</el-col>
            <el-col :span="18" class="other">
              <p>￥{{ total_detail.freight_total }}</p>
            </el-col>
          </el-col>
          <el-col :span="24" class="goods_total">
            <el-col :span="8">优惠后应付金额</el-col>
            <el-col :span="16" class="other">
              <p>￥{{ pay.pay_money }}</p>
            </el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="6">下单时间</el-col>
            <el-col :span="18" class="other">{{ info.buy_time }}</el-col>
          </el-col>
          <el-col :span="24">
            <el-col :span="6">支付时间</el-col>
            <el-col :span="18" class="other">{{ info.pay_time || '未支付' }}</el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
const moment = require('moment');
import { mapState, mapGetters, createNamespacedHelpers } from 'vuex';
const { mapActions } = createNamespacedHelpers('order');
export default {
  name: 'form-1',
  props: {},
  components: {},
  data: function () {
    return {
      info: {},
      address: {},
      list: [],
      total_detail: {},
      typeList: [],
      statusList: [],
      pay: {},
    };
  },
  async created() {
    await this.search();
  },
  methods: {
    ...mapActions(['query', 'fetch', 'create', 'update']),
    // 查询
    async search() {
      let res = await this.fetch(this.id);
      if (this.$checkRes(res)) {
        this.$set(this, `info`, res.data);
        // 地址
        this.$set(this, `address`, res.data.address);
        // 商品
        this.$set(this, `list`, res.data.goods);
        // 实付金额
        this.$set(this, `total_detail`, res.data.total_detail);
        this.$set(this, `pay`, res.data.pay);
      }
    },
    // 返回
    toBack() {
      window.history.go('-1');
    },
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 10px 0 0 20%;
    padding: 5px;
    .add {
      border-bottom: 2px dashed #ccc;
      margin: 0 0 5px 0;
      padding: 5px 0;
    }
    .shop {
      padding: 4px 0;
      font-size: 18px;
      border-bottom: 1px solid #ccc;
    }
    .goods {
      padding: 10px 0;
      .money {
        text-align: right;
      }
    }
    .other {
      text-align: right;
      p {
        color: red;
      }
    }
    .el-col {
      margin: 4px 0;
    }
  }
}
</style>