live-telecast-tk-ui-h5/src/views/order/detail.vue

<template>
  <div class="oDetail" v-loading="loading">
    <van-nav-bar
      title="订单详情"
      class="van-nav-bar-my-fixed"
      left-arrow
      @click-left="onClickLeft"
      fixedfixed
    />
    <div class="page-main">
      <van-cell-group title="订单信息">
        <van-cell
          size="mini"
          v-for="(item, i) in list1"
          :key="item.title + i"
          center
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
      <div class="jiange"></div>
      <van-cell-group v-if="status === '2'" title="物流信息">
        <van-cell
          size="mini"
          v-for="(item, i) in list2"
          :key="item.title + i"
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
      <div class="jiange" v-if="status === '2'"></div>
      <van-cell-group v-if="status === '2'" title="当前物流">
        <van-cell
          size="mini"
          v-for="(item, i) in list5"
          :key="item.title + i"
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
      <div v-if="context" class="context">{{ context }}</div>
      <div class="jiange" v-if="status === '2'"></div>
      <van-cell-group title="收货地址">
        <van-cell
          size="mini"
          v-for="(item, i) in list3"
          :key="item.title + i"
          center
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
      <div class="jiange"></div>
      <van-cell-group title="商品信息">
        <van-cell
          size="mini"
          v-for="(item, i) in list4"
          :key="item.title + i"
          center
          :title="item.title"
          :value="item.value"
      /></van-cell-group>
    </div>
  </div>
</template>

<script>
import asyncRequest from "@/apis/order/index";
import resToken from "@/mixins/resToken";
import { getAdmin } from "@/utils/auth";
export default {
  mixins: [resToken],
  components: {
    // "van-cell": cell,
    // "van-list": List,
    // "van-tab": Tab,
    // "van-tabs": Tabs,
  },
  data() {
    return {
      admin: "",
      id: "0",
      status: "0",
      options: [
        { value: "0", label: "未发货" },
        { value: "1", label: "暂无记录" },
        { value: "2", label: "在途中" },
        { value: "3", label: "派送中" },
        { value: "4", label: "已签收" },
        { value: "5", label: "用户拒签" },
        { value: "6", label: "疑难件" },
        { value: "7", label: "无效单" },
        { value: "8", label: "超时单" },
        { value: "9", label: "签收失败" },
        { value: "10", label: "退回" },
      ],
      list1: [
        { title: "订单编号：", value: "" },
        { title: "订单状态：", value: "" },
        { title: "下单时间：", value: "" },
      ],
      list2: [
        { title: "物流公司：", value: "" },
        { title: "物流编号：", value: "" },
        { title: "发货时间：", value: "" },
      ],
      list3: [
        { title: "联系人：", value: "" },
        { title: "联系电话：", value: "" },
        { title: "收货地址：", value: "" },
      ],
      list4: [
        { title: "商品名称：", value: "五常大米" },
        { title: "购买数量：", value: "" },
      ],
      list5: [
        { title: "物流状态：", value: "" },
        { title: "更新时间：", value: "" },
      ],
      context: "",
      loading: false,
    };
  },
  async created() {
    this.id = this.$route.query.id ? this.$route.query.id : "0";
    this.admin = getAdmin();
    await this.initData();
  },
  methods: {
    onClickLeft() {
      window.history.back(-1);
    },

    async initData() {
      const res = await asyncRequest.detail({ id: this.id });
      if (res && res.code === 0) {
        const {
          order_sn,
          status,
          unit,
          order_num,
          order_time,
          post_name,
          post_code,
          delivery_time,
          contector,
          contector_mobile,
          city_name,
          provice_name,
          area_name,
          addr,
          unit_weight,
        } = res.data;
        this.list1[0].value = order_sn;
        this.list1[1].value = status === "1" ? "待发货" : "待收货";
        this.status = status;
        this.list4[0].value =
          this.admin === "1" ? "红运稻2Kgx2" : this.admin === "2" ? "悦享泰康2.5Kgx1" : "";
        this.list4[1].value = order_num + "份";
        this.list1[2].value = order_time;
        if (this.status === "2") {
          this.list2[0].value = post_name;
          this.list2[1].value = post_code;
          this.list2[2].value = delivery_time;
        }
        this.list3[0].value = contector;
        this.list3[1].value = contector_mobile;
        let str =
          provice_name === city_name ? city_name : provice_name + city_name;
        this.list3[2].value = str + area_name + addr;
        if (status == "2") {
          await this.getLastPost(order_sn);
        }
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
      }
    },
    async getLastPost(order_sn) {
      const res = await asyncRequest.express({ order_sn: order_sn });
      if (res && res.code === 0) {
        const { last_data, status_cn, addtime } = res.data;
        const { context, time } = last_data;
        this.list5[0].value = status_cn;
        this.list5[1].value = time || addtime;
        this.context = context || "";
        console.log(res.data);
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.oDetail {
  // background: #fff;
  background: transparent;
  overflow-y: scroll;
  .page-main {
    box-sizing: border-box;
    overflow-y: scroll;
    width: 100%;
    height: auto;
    // background: #fff;
    background: transparent;
    padding: 46px 0 50px 0;
    border: 0 !important;
    .context {
      box-sizing: border-box;
      padding: 7px 16px 12px 16px;
      font-size: 12px;
      color: rgb(150, 151, 153);
      word-break: break-all;
    }
    .jiange {
      height: 5px;
      // width: 100%;
      background: #f0f0f0 !important;
      width: calc(100% -32px);
      margin: 3px 16px 0 16px;
    }
    .van-cell::after {
      border: 0px !important;
      box-sizing: 0 !important;
      border: 0 !important;
    }
    .van-cell-group__title {
      font-weight: bolder;
      color: #333;
      box-sizing: 0 !important;
      border: 0 !important;
    }
    .van-cell {
      font-size: 12px;
      background: transparent !important;
      color: #787878;
      padding: 7px 16px 0px 16px;
      box-sizing: 0 !important;
      border: 0 !important;
      &:last-child {
        padding-bottom: 7px !important;
        box-sizing: 0 !important;
        border: 0 !important;
      }
    }
    .van-cell-group {
      background: transparent !important;
      box-sizing: 0 !important;
      border: 0 !important;
    }
    .van-hairline--top-bottom::after,
    .van-hairline-unset--top-bottom::after {
      border: 0 !important;
    }
  }
}
</style>