• liwei's avatar
    liwei · ba96d5b9
    liwei authored
    ba96d5b9
address.vue 10.4 KB
<template>
  <div class="address2">
    <div class="item" v-if="deliverDetail && isShowCurrent">
      <div class="head next">
        <i style="background:#60ADF0"></i>
        本期收货地址
        <!-- <span class="fl-r" @click="goEdit" v-if="deliverDetail.flag">
          <span class="iconfont icon-icon_edit"></span> 修改
        </span>
        <span class="fl-r Invalid" v-if="!deliverDetail.flag">
          <span class="iconfont icon-icon_edit"></span> 修改
        </span>-->
      </div>
      <div class="content" v-if="deliverDetail">
        <div class="top">
          <span>{{deliverDetail.receive_name}}</span>
          <span>{{deliverDetail.receive_mobile}}</span>
        </div>
        <div
          class="bottom"
        >{{deliverDetail.province_name}} {{deliverDetail.city_name}}{{deliverDetail.area_name}}{{deliverDetail.address}}</div>
        <div class="line"></div>
        <div class="timeInfo">
          <div class="text">
            <!-- <p>地址修改时间:{{deliverDetail.updated_at}}</p> -->
            <p v-if="!!deliverDetail.express_no">发货时间:{{deliverDetail.deliver_at}}</p>
            <p
              v-if="!!!deliverDetail.express_no"
            >预计发货时间:{{deliverDetail.deliver_start_at}}-{{deliverDetail.deliver_end_at}}</p>
            <div v-if="!!deliverDetail.express_no && deliverDetail.status == 1" class="express-no">
              <span>物流信息:</span>
              <span style="flex: 1;">{{deliverDetail.express_name}} {{deliverDetail.express_no}}</span>
              <van-button round size="small" @click="search(1)" type="info">查看物流</van-button>
            </div>
            <div v-if="!!!deliverDetail.express_no && deliverDetail.status == 0" class="express-no">
              <span>物流信息:</span>
              <span style="flex: 1;">待发货</span>
            </div>
            <!-- <div v-if="!deliverDetail.express_no">物流信息:- -</div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="item" v-if="noDeliverDetail && isShowNext">
      <div class="head next">
        <i style="background:#FFD454"></i>
        下期收货地址
        <span class="fl-r" @click="goEdit">
          <span class="iconfont icon-icon_edit"></span> 修改
        </span>
        <!-- <span class="fl-r Invalid" v-if="noDeliverDetail.flag == 0">
          <span class="iconfont icon-icon_edit"></span> 修改
        </span>-->
        <!-- <span class="fl-r" @click="goEdit">
          <span class="iconfont icon-icon_edit"></span> 修改
        </span>-->
      </div>
      <div class="content">
        <div class="top">
          <span>{{noDeliverDetail.receive_name}}</span>
          <span>{{noDeliverDetail.receive_mobile}}</span>
        </div>
        <div
          class="bottom"
        >{{noDeliverDetail.province_name}} {{noDeliverDetail.city_name}}{{noDeliverDetail.area_name}}{{noDeliverDetail.address}}</div>
        <div class="line"></div>
        <div class="timeInfo">
          <div class="text">
            <!-- <p>地址修改时间:{{noDeliverDetail.updated_at}}</p> -->
            <p
              v-if="!!!noDeliverDetail.express_no"
            >预计发货时间:{{noDeliverDetail.deliver_start_at}}-{{noDeliverDetail.deliver_end_at}}</p>
            <div
              v-if="!!noDeliverDetail.express_no && noDeliverDetail.status == 1"
              style="justify-content:space-between;"
            >
              物流信息:{{noDeliverDetail.express_name}} {{noDeliverDetail.express_no}}
              <van-button round size="small" @click="search(2)" type="info">查看物流</van-button>
            </div>
            <div
              v-if="!!!noDeliverDetail.express_no && noDeliverDetail.status == 0"
              style="justify-content:space-between;"
            >物流信息:待发货</div>
            <!-- <div v-if="!noDeliverDetail.express_no">物流信息:- -</div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="tip" v-if="(deliverDetail && isShowCurrent)|| (noDeliverDetail && isShowNext )">
      <div class="tip-title">*</div>
      <div style="white-space: wrap;flex:1;">预计发货时间内不可修改地址,若有需要请联系您的专属班主任老师</div>
    </div>
  </div>
  <!-- <div class="address2">
    <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>
    <div  class="linebox">
      <img class="line" :src="line" alt>
    </div>
    <div class="tip">
      <p>(最新地址修改时间:{{addressInfo.updated_at}})</p>
      <p>*若要修改收货地址,请联系您的专属班主任老师</p>
    </div>
  </div>-->
</template>

<script>
import line from "../../assets/activity/img_line@2x.png";
import { shopSuccess } from "../../util/imgUrl";
import { getNewestAddressListAPi } from "../../service/api";
import { Toast } from "vant";
export default {
  name: "Address",
  components: {},
  data() {
    return {
      line: line,
      isShowCurrent: false,
      isShowNext: false,
      addressInfo: null,
      noDeliverDetail: null, //下期收货地址
      deliverDetail: null //本期收货地址
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      getNewestAddressListAPi()
        .then(res => {
          // this.starNum = res.last_value
          // res = {
          //   code: 505,
          //   msg: "该用户没有物流信息"
          // };
          if (res) {
            if (res.deliver_detail) {
              if (typeof res.deliver_detail == "object") {
                if (res.deliver_detail instanceof Array) {
                  if (res.deliver_detail.length > 0) {
                    this.deliverDetail = res.deliver_detail[0];
                  }
                } else {
                  this.deliverDetail = res.deliver_detail;
                }
              }
            }
            if (res.no_deliver_detail) {
              if (typeof res.no_deliver_detail == "object") {
                if (res.no_deliver_detail instanceof Array) {
                  if (res.no_deliver_detail.length > 0) {
                    this.noDeliverDetail = res.no_deliver_detail[0];
                  }
                } else {
                  this.noDeliverDetail = res.no_deliver_detail;
                }
              }
            }
            if (this.deliverDetail) {
              if (
                !this.deliverDetail.receive_name ||
                this.deliverDetail.receive_name.length === 0 ||
                !this.deliverDetail.receive_mobile ||
                this.deliverDetail.receive_mobile.length === 0 ||
                !this.deliverDetail.address ||
                this.deliverDetail.address.length === 0
              ) {
                this.isShowCurrent = false;
              } else {
                this.isShowCurrent = true;
              }
            } else {
              this.isShowCurrent = false;
            }
            if (this.noDeliverDetail) {
              if (
                !this.noDeliverDetail.receive_name ||
                this.noDeliverDetail.receive_name.length === 0 ||
                !this.noDeliverDetail.receive_mobile ||
                this.noDeliverDetail.receive_mobile.length === 0 ||
                !this.noDeliverDetail.address ||
                this.noDeliverDetail.address.length === 0
              ) {
                this.isShowNext = false;
              } else {
                this.isShowNext = true;
              }
            } else {
              this.isShowNext = false;
            }
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    goEdit() {
      this.$router.push({
        name: "addressModify",
        params: { data: JSON.stringify(this.noDeliverDetail) }
      });
    },
    search(index) {
      let express_no =
        index == 1
          ? this.deliverDetail.express_no
          : this.noDeliverDetail.express_no;
      window.location = `https://m.baidu.com/from=1013755s/s?word=${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=快递单号查询`;
    }
  }
};
</script>

<style scoped lang="less">
@import "../../util/public";
@import "../../util/public";
.address2 {
  background: #f5f5f9;
  .van-button {
    margin-left: 20 * @toVw;
    margin-right: 20 * @toVw;
  }
  .van-button__text {
    padding: 10 * @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;
        width: 100%;
        .express-no {
          display: flex;
          justify-content: space-between;
        }
      }
      .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 {
    width: 90%;
    margin: 10 * @toVw auto;
    letter-spacing: 0;
    color: #999999;
    font-size: 12 * @toVw;
    // line-height: 23 * @toVw;
    display: flex;
    .tip-title {
      margin-top: 2 * @toVw;
      margin-right: 4 * @toVw;
    }
  }
}
@media screen and (orientation: landscape) {
}
</style>