activityAddr.vue 4.15 KB
<template>
  <div class="address2">
    <div class="item">
      <div class="head next">
        <i></i>
        全勤活动收货地址
        <span class="fl-r" @click="goEdit" v-if="addressInfo.flag"><span class="iconfont icon-icon_edit"></span> 修改 </span>
        <span class="fl-r Invalid"  v-if="!addressInfo.flag"><span class="iconfont icon-icon_edit"></span> 修改 </span>
      </div>
      <div class="content">
        <div class="top">
          <span>{{addressInfo.receive_name}}</span>
          <span>{{addressInfo.receive_mobile}}</span>
        </div>
        <div class="bottom">{{addressInfo.province_name}} {{addressInfo.city}}{{addressInfo.area}}{{addressInfo.address}}</div>
        <div class="line"></div>
        <div class="timeInfo">
          <div class="text">
            <p>地址修改时间:{{addressInfo.created_at}}</p>
            <p v-if="!addressInfo.express_no">预计发货时间:{{addressInfo.deliver_at}}</p>
            <p v-if="addressInfo.express_no">发货时间:{{addressInfo.deliver_at}}</p>
            <div v-if="addressInfo.express_no">物流信息:{{addressInfo.express_name}} {{addressInfo.express_no}}  <van-button  round size="small"  @click="search" type="info">查看物流</van-button></div>
            <div v-if="!addressInfo.express_no">物流信息:- -</div>
          </div>
        </div>
      </div>
    </div>
    <div class="tip">
      <p>*预计发货前24小时不可修改地址</p>
    </div>
  </div>
</template>

<script>
import { shopSuccess } from "../../util/imgUrl";
import { getActivityAddressApi } from "../../service/api";
export default {
  name: "activityAddr",
  components: {},
  data() {
    return {
      addressInfo: {}
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      getActivityAddressApi().then(res => {
        // this.starNum = res.last_value
        this.addressInfo = res;
      })
    },
    goEdit(){
      this.$router.push({name:'addressEdit'})
    },
    search(){
      window.location=`https://m.baidu.com/from=1013755s/s?word=${this.addressInfo.express_no}&sa=tb&ts=2790568&t_kt=0&ie=utf-8&rsv_t=cbe2F%252FT5T3MIzkRl%252Fg8ZUw%252FEPHZmn2wHIrB8cLvgNlEKyyDqUNPrTyDEEDjkAb8&rsv_pq=11793168499026332712&ss=110000000001&tj=1&rqlang=zh&rsv_sug4=4111&inputT=3178&oq=快递单号查询`
      // window.location='https://m.baidu.com/from=1013755s/s?word=806454448534420146&sa=tb&ts=2790568&t_kt=0&ie=utf-8&rsv_t=cbe2F%252FT5T3MIzkRl%252Fg8ZUw%252FEPHZmn2wHIrB8cLvgNlEKyyDqUNPrTyDEEDjkAb8&rsv_pq=11793168499026332712&ss=110000000001&tj=1&rqlang=zh&rsv_sug4=4111&inputT=3178&oq=快递单号查询'
    }
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
.address2 {
  background: #f5f5f9;
  .van-button{
    margin-left: 20 * @toVw;
  }
  .head{
    i{display: inline-block;border-radius: 50%; width: 11 * @toVw;height: 11 * @toVw; }
    padding: 13 * @toVw;
    background: white;
    border-bottom: 1px solid #E2E2E2;
    color: #666666;
    font-size: 14* @toVw;
    
  }
  .Invalid{color: #CCCCCC;}
  .now{
    i{background: #60ADF0;}
  }
  .item{margin-top: 10px;}
  .next{
    i{background: #FFD454;}
  }
  .content {
    background: white;
    padding: 13 * @toVw 0 13 * @toVw 26 * @toVw;
    .top {
      line-height: 28 * @toVw;
      color: #333333;
      font-weight: bold;
      font-size: 17 * @toVw;
    }
    .bottom {
      color: #666666;
      font-size: 14 * @toVw;
      line-height: 20 * @toVw;
    }
    .timeInfo{
      display: flex;
      .text{
        color: #999999;
        font-size: 12 * @toVw;
        margin-left: 0;
        line-height: 26 * @toVw;
      }
      .right{
        margin-top: 43 * @toVw;
      }
      .van-button--info{
        background: white;
        width: 74* @toVw;
        color: #60ADF0;
        border-color: #60ADF0;
      }
    }
  }
  .linebox {
    background: white;
  }
  .line {
    width: 100%;
    display: block;
    border-bottom: 1px solid #E2E2E2;
    margin: 12* @toVw 0;
    -webkit-transform: scale(1,0.5);
  }
  .tip {
    padding: 10 * @toVw 20 * @toVw;
    color: #999999;
    font-size: 12 * @toVw;
    line-height: 23 * @toVw;
  }
  
}
@media screen and (orientation: landscape) {
}
</style>