w-front-end / select_good · Files

<template>
  <div class="logistics-page">

    <!-- 导航栏 -->
    <div class="nav"
         :style="{'paddingTop': top.value + 'px'}">

      <!-- navBar -->
      <nav-bar v-if="!isWeChat.value"
               @back="back"
               :navs="navs">
      </nav-bar>
    </div>

    <div class="pl"
         :class="{'is-cnlive': isCNLive2.value, 'not-is-wechat': !isWeChat.value, 'not-is-cnlive': !isCNLive2.value, 'is-open-app': isOpenApp.value}"
         :style="{'paddingTop': top.value + 'px'}"></div>

    <!-- 主区域 -->
    <div class="main-box">

      <!-- 物流单号信息 -->
      <logistics-bar :logistics="datas">
      </logistics-bar>

      <!-- 物流详细信息列表 -->
      <logistics-list-com :logistics="datas">
      </logistics-list-com>
    </div>
  </div>
</template>

<script>

// 引入组件
import navBar from '@/components/navBar/navBar';
import logisticsBar from '@/components/logisticsBar/logisticsBar';
import logisticsListCom from '@/components/logisticsListCom/logisticsListCom';

export default {
  name: 'logisticsPage',
  data () {
    return {
      title: "",
      query: {},
      navs: null,							// navBar配置参数
      datas: null							// 数据
    }
  },
  components: {
    navBar,
    logisticsBar,
    logisticsListCom
  },
  created (options) {

    // 设置标题
    this.$set(this, 'title', '物流详情');

    // 设置地址栏请求参数
    this.$set(this, "query", options);

    this.$set(this, "navs", {
      back: {
        img: "static/img/icon_back.png"
      },
      title: this.title
    });

    // 活动物流查询
    this.luckDrawExpress();
    // #ifdef H5 || APP-PLUS

    // 更新页面title
    this.$emit("updateHead");

    // #endif
  },


  // #endif

  methods: {

    /**
     * 活动物流查询
     */
    luckDrawExpress () {

      // 必要参数
      if (this.query.orderId && this.query.orderId != '0' && this.query.orderId != '000') {

        // 显示loading
        uni.showLoading({
          title: "",
          mask: true
        });

        // 请求接口
        this.http("/Api/" + (this.getApiVersion().luckdraw) + "/luckDrawExpress", {
          id: this.query.orderId
        }, this.luckDrawExpressCallback, {
            method: "POST"
          });
      } else {

        // 订单号错误提示
        this.showToast('订单号错误~');

        // 定时返回
        setTimeout(() => {

          // 后退
          this.back();
        }, 2000);
      }
    },

    /**
     * 活动物流查询回调
     * @param {Object} res [服务器返回数据]
     * @param {Object} res [扩展参数]
     */
    luckDrawExpressCallback (res, ext) {

      // 隐藏loading
      uni.hideLoading();

      // 返回处理
      if (res.statusCode === 200 && res.data.code == 200) {

        // 解构数据
        let { data: datas } = res.data;

        // 设置参数
        this.$set(this, 'datas', datas);
      } else if (res.statusCode === 200 && res.data.code == 400) {

        // 获取地址列表出错
        this.showToast(res.data.message);

        // 定时返回
        setTimeout(() => {

          // 后退
          this.back();
        }, 2000);
      } else {

        // 获取地址列表出错
        this.showToast("获取物流详情出错");

        // 定时返回
        setTimeout(() => {

          // 后退
          this.back();
        }, 2000);
      }
    },

    /**
     * 返回
     */
    back () {

      // 判断是否有返回函数
      if (typeof this.helper.$Apps2 === 'object' && typeof this.helper.$Apps2.back === 'function') {

        // 调用返回
        this.helper.$Apps2.back();
      } else {

        // 后退
        uni.navigateBack({
          delta: 1
        });
      }
    }
  },
  head: {
    title () {
      return {
        inner: this.title
      }
    }
  },
  watch: {

    /**
   * 设置页面标题
   * @param {Object} newVal [标题新值]
   */
    title (newVal) {

      /* 设置页面标题 开始 */
      this.setTitle(newVal);
      /* 设置页面标题 结束 */
    }
  }
}
</script>

<style rel="stylesheet/less" lang="less">
@import './logistics';
</style>