expressJump.wpy

<template>
    <view class="express">
        <view class="title">
            <view>{{ expressInfo.logisticCode }}
                <text wx:if='{{ expressInfo.success }}' class="save" catchtap='save'>保存搜索</text>
            </view>
            <button open-type='share' class="save save_btn" style="margin-top:80rpx" wx:if='{{ expressInfo.success }}'>分享该单号</button>
        </view>
        <view class="express-content-wrap">
            <view class="content {{ index == 0 ? 'setWrap' : '' }}" wx:for="{{ expressInfo.traces }}" wx:key="unique">
                <view class="time">{{ item.acceptTime}}</view>
                <view class="dot {{ index == 0 ? 'first' : '' }}"></view>
                <view class="content-wrap">
                    <view class="site">{{ item.acceptStation }}</view>
                    <view class="phone iconfont icon-tongxunfei" data-phone="{{ item.phone }}" catchtap="callPhone" wx:if="{{ item.phone }}"></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import wepy from 'wepy';
import { formatTime } from '@/utils/util';

export default class ExpressJump extends wepy.page {
  config = {
    navigationBarTitleText: '快递查询结果'
  };

  data = {
    baseUrl: 'https://qf-restapi.mdscj.com/xp_express',
    getExpressBy100: '/kuaidi100/query',
    number: null,
    expressInfo: {}
  };

  methods = {
    callPhone(e) {
      wx.makePhoneCall({
        phoneNumber: e.currentTarget.dataset.phone
      });
    },
    /**
     * 存储记录
     */
    save() {
      let list = wx.getStorageSync('saveList') || [];
      let saveSwitch = false;
      for (var item in list) {
        if (list[item].nubmer === this.number) {
          list.splice(item, 1);
          saveSwitch = true;
        }
      }
      let obj = {
        nubmer: this.number,
        company: this.expressInfo.logisticCode,
        traces: this.expressInfo.traces[0]
      };
      // console.log(obj)
      list.unshift(obj);
      wx.setStorageSync('saveList', list);
      if (saveSwitch) {
        wx.showModal({
          tilte: '已有信息',
          content: '亲爱的小主，快递信息已更新',
          showCancel: false
        });
      } else {
        wx.showModal({
          tilte: '保存成功',
          content: '已保存该快递记录',
          showCancel: false
        });
      }
    },
    onShareAppMessage() {
      let title = `${this.expressInfo.logisticCode}-单号${this.number}`
      return {
        title: title,
        path: 'pages/expressJump/?number=' + number,
        success(res) {
          wx.showToast({
            title: '分享成功',
            icon: 'none'
          })
        },
        fail(res) {
          wx.showToast({
            title: '分享失败',
            icon: 'none'
          })
        }
      };
    }
  };

  onLoad(e) {
    let that = this;
    this.number = e.number;
    let obj = {
      url: this.baseUrl + this.getExpressBy100 + '?logisticsNo=' + e.number,
      success(res) {
        console.log(res);
        if (!res.data.data) {
          let obj = {
            logisticCode: '请检查您的快递单号',
            traces: [
              { acceptStation: '未查询到该快递单号信息，请检查您的快递单号' }
            ]
          };
          that.expressInfo = obj;
          that.$apply();
          return;
        }
        var result = res.data.data;
        var reg = /(\d{11,20})/;
        for (var item in result.traces) {
          let str = result.traces[item].acceptStation;
          // console.log(str)
          let phone = str.match(reg);
          // console.log(phone)
          if (phone) {
            result.traces[item].phone = phone[0];
          }
        }
        console.log(result);
        that.expressInfo = result;
        that.$apply();
      }
    };
    wx.request(obj);
  }
}
</script>

<style lang="less" scoped>
.save_btn:after {
  border: none;
}
.icon-tongxunfei {
  color: #138cff;
}
.title {
  line-height: 160rpx;
  text-align: center;
  font-weight: 800;
  font-size: 40rpx;
  background: linear-gradient(#138cff, #f6f6f6);
  position: relative;
}
.save {
  position: fixed;
  top: 20rpx;
  right: 20rpx;
  border: 2rpx solid #43cd80;
  border-radius: 8rpx;
  font-size: 26rpx;
  text-align: center;
  line-height: 30rpx;
  padding: 8rpx;
  background-color: #43cd80;
  z-index: 9999;
  color: #fff;
  box-shadow: 2rpx 2rpx 1rpx 0 grey;
}
.content {
  font-size: 24rpx;
  display: flex;
  align-items: center;
  margin: 20rpx 0;
  .time {
    width: 140rpx;
    text-align: center;
    color: #666;
  }
  .dot {
    position: relative;
    width: 130rpx;
    height: 100rpx;
    //background-color: #f00;
    //height: 80rpx;
  }
  .dot::before {
    content: '';
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    background-color: #ccc;
    display: block;
    position: absolute;
    top: 40rpx;
    left: 40rpx;
    z-index: 99;
  }
  .dot::after {
    content: '';
    width: 6rpx;
    height: 150rpx;
    background-color: #ccc;
    display: block;
    position: absolute;
    top: 0rpx;
    left: 50rpx;
    z-index: 98;
  }
  .content-wrap {
    //height: 80rpx;
    flex: 1;
    position: relative;
    line-height: 30rpx;
    font-size: 26rpx;
    text-align: left;
    .site {
      margin-top: 10rpx;
      color: #666;
      letter-spacing: 2rpx;
    }
    .phone {
      position: absolute;
      top: 20rpx;
      left: -50rpx;
      font-size: 40rpx;
    }
  }
}
.setWrap .dot::before {
  background-color: #4bff4b;
}
.setWrap .dot::after {
  background: linear-gradient(180deg, #4bff4b, #4bff4b, #ccc, #ccc);
}
.setWrap {
  color: #4bff4b;
  .time {
    color: #4bff4b;
  }
  .content-wrap .site {
    color: #4bff4b;
  }
}
</style>