liwei

src/components/mine/address.vue

 <template>
   <div class="address2">
+    <div class="item" v-if="deliverDetail">
+      <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">
+        <div class="top">
+          <span>{{deliverDetail.receive_name}}</span>
+          <span>{{deliverDetail.receive_mobile}}</span>
+        </div>
+        <div
+          class="bottom"
+        >{{deliverDetail.province_name}} {{deliverDetail.city}}{{deliverDetail.area}}{{deliverDetail.address}}</div>
+        <div class="line"></div>
+        <div class="timeInfo">
+          <div class="text">
+            <p>地址修改时间：{{deliverDetail.created_at}}</p>
+            <p v-if="!deliverDetail.express_no">预计发货时间：{{deliverDetail.deliver_at}}</p>
+            <p v-if="deliverDetail.express_no">发货时间：{{deliverDetail.deliver_at}}</p>
+            <div v-if="deliverDetail.express_no">
+              物流信息：{{deliverDetail.express_name}} {{deliverDetail.express_no}}
+              <van-button round size="small" @click="search(1)" type="info">查看物流</van-button>
+            </div>
+            <div v-if="!deliverDetail.express_no">物流信息：- -</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="item" v-if="noDeliverDetail">
+      <div class="head next">
+        <i style="background:#FFD454"></i>
+        下期收货地址
+        <span class="fl-r" @click="goEdit" v-if="1">
+          <span class="iconfont icon-icon_edit"></span> 修改
+        </span>
+        <span class="fl-r Invalid" v-if="!noDeliverDetail.flag">
+          <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.created_at}}</p>
+            <p v-if="!noDeliverDetail.express_no">预计发货时间：{{noDeliverDetail.deliver_at}}</p>
+            <p v-if="noDeliverDetail.express_no">发货时间：{{noDeliverDetail.deliver_at}}</p>
+            <div v-if="noDeliverDetail.express_no">
+              物流信息：{{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">物流信息：- -</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tip">
+      <p>*预计发货前24小时不可修改地址，若有需要请联系您的专属班主任老师</p>
+    </div>
+  </div>
+  <!-- <div class="address2">
     <div class="content">
       <div class="top">
         <span>{{addressInfo.receive_name}}</span>
@@ -14,20 +87,22 @@
       <p>(最新地址修改时间：{{addressInfo.updated_at}})</p>
       <p>*若要修改收货地址，请联系您的专属班主任老师</p>
     </div>
-  </div>
+  </div>-->
 </template>
 
 <script>
 import line from "../../assets/activity/img_line@2x.png";
-import {shopSuccess} from "../../util/imgUrl";
-import { getUserAdressApi } from "../../service/api";
+import { shopSuccess } from "../../util/imgUrl";
+import { getNewestAddressListAPi } from "../../service/api";
 export default {
   name: "Address",
   components: {},
   data() {
     return {
       line: line,
-      addressInfo: {}
+      addressInfo: {},
+      noDeliverDetail: null, //下期收货地址
+      deliverDetail: null //本期收货地址
     };
   },
   mounted() {
@@ -35,10 +110,31 @@ export default {
   },
   methods: {
     initPage() {
-      getUserAdressApi().then(res => {
+      getNewestAddressListAPi().then(res => {
         // this.starNum = res.last_value
-        this.addressInfo = res;
+        if (res) {
+          if (res.deliver_detail && res.deliver_detail.length > 0) {
+            this.deliverDetail = res.deliver_detail[0];
+            console.log(this.deliverDetail);
+          }
+          if (res.no_deliver_detail && res.no_deliver_detail.length > 0) {
+            this.noDeliverDetail = res.no_deliver_detail[0];
+          }
+        }
+      });
+    },
+    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=快递单号查询`;
     }
   }
 };
@@ -46,11 +142,44 @@ export default {
 
 <style scoped lang="less">
 @import "../../util/public";
+@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: 10 * @toVw 20 * @toVw;
+    padding: 13 * @toVw 0 13 * @toVw 26 * @toVw;
     .top {
       line-height: 28 * @toVw;
       color: #333333;
@@ -62,13 +191,34 @@ export default {
       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{
+  .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;

src/components/mine/addressModify.vue

+<template>
+  <div class="addressEdit">
+    <div>
+      <mt-field label="收货人" v-model="receiveName" placeholder="请填写收货人"></mt-field>
+      <mt-field
+        label="手机号"
+        type="tel"
+        v-model="receiveMobile"
+        placeholder="请填写手机号"
+        :attr="{maxlength: 13}"
+      ></mt-field>
+      <mt-field
+        label="所在地区"
+        v-model="addressArea"
+        placeholder="请填写所在地区"
+        :readonly="true"
+        :disableClear="true"
+      >
+        <mt-cell is-link style="position:absolute;width: 40px;height:100%;right:0;top:-24px;"></mt-cell>
+        <div class="stbox" style="position:absolute;right: 0;top: -24px;left: 0;bottom: 0;">
+          <mt-cell
+            id="mtcell"
+            :value="addressArea"
+            @click.native="showPicker"
+            style="opacity:0;position:absolute;width:300px;height: 100%;right:10%;top:0;"
+          ></mt-cell>
+        </div>
+      </mt-field>
+      <mt-field label="详细地址" placeholder="请填写详细地址" v-model="address"></mt-field>
+      <div @click="onSave();buttonClick('保存地址')" class="btn">
+        <van-button round size="large" type="info">保存</van-button>
+      </div>
+    </div>
+    <my-address
+      :showAddressPicker="showAddressPicker"
+      @save-address="saveAddress"
+      @hide-picker="hidePicker"
+      :init="addressArea"
+    ></my-address>
+  </div>
+</template>
+
+<script>
+import MyAddress from "@/components/address-picker/Address.vue";
+import {
+  saveActivityAddressApi,
+  getActivityAddressApi,
+  modifyAddressApi
+} from "../../service/api";
+import addressList from "../address-picker/addr";
+import { Cell, Toast } from "vant";
+export default {
+  name: "",
+  components: {
+    MyAddress,
+    [Cell.name]: Cell
+  },
+  data() {
+    return {
+      addressData: null,
+      receiveName: "",
+      receiveMobile: "",
+      addressDetail: "",
+      showAddressPicker: false,
+      addressArea: "",
+      addressAreaCode: "",
+      address: "",
+      deliverId: ""
+    };
+  },
+  mounted() {
+    if (this.$route.params && this.$route.params.data) {
+      let addressData = JSON.parse(this.$route.params.data);
+      this.addressData = addressData;
+      this.receiveName = addressData.receive_name;
+      this.receiveMobile = addressData.receive_mobile;
+      this.address = addressData.address;
+      this.deliverId = addressData.id;
+      this.addressArea =
+        addressData.province_name +
+        "-" +
+        addressData.city_name +
+        "-" +
+        addressData.area_name;
+    }
+    this.getAddressCode();
+  },
+  methods: {
+    closeAdd() {
+      this.$emit("closeAdd", false);
+    },
+    buttonClick(buttonName) {
+      this.$sa.track("buttonClick", {
+        tabTitle: "商品",
+        moduleTitle: "地址填写",
+        buttonType: "功能",
+        buttonName: buttonName
+      });
+    },
+    getAddressCode() {
+      let provinceName = this.addressData.province_name;
+      let cityName = this.addressData.city_name;
+      let areaName = this.addressData.area_name;
+      let provinceCode, cityCode, areaCode;
+      for (let i = 0, len = addressList.length; i < len; i++) {
+        let item = addressList[i];
+        if (cityName == item.label) {
+          provinceCode = item.value;
+          let secondArr = item.children;
+          for (let j = 0, long = secondArr.length; j < long; j++) {
+            let secondItem = secondArr[j];
+            if (cityName == secondItem.label) {
+              cityCode = secondItem.value;
+              let thirdArr = secondItem.children;
+              for (let k = 0, l = thirdArr.length; k < l; k++) {
+                if ((areaName = thirdArr[k].label)) {
+                  areaCode = thirdArr[k].value;
+                  break;
+                }
+              }
+            }
+          }
+        }
+      }
+      this.addressAreaCode = provinceCode + "-" + cityCode + "-" + areaCode;
+    },
+    onSave: function() {
+      let values = this.addressAreaCode.split("-");
+      let labels = this.addressArea.split("-");
+      if (!this.receiveName) {
+        Toast("收货人不能为空");
+        return false;
+      } else if (!this.receiveMobile) {
+        Toast("手机号不能为空");
+        return false;
+      } else if (!/^1\d{10,12}$/.test(this.receiveMobile)) {
+        Toast("手机号格式不正确");
+        return false;
+      } else if (!this.addressArea) {
+        Toast("所在地区不能为空");
+        return false;
+      } else if (!this.address) {
+        Toast("详细地址不能为空");
+        return false;
+      }
+      let param = {};
+      param.deliver_id = this.deliverId;
+      param.receive_name = this.receiveName;
+      param.receive_mobile = this.receiveMobile;
+      param.address = this.address;
+      param.province_id = values[0];
+      param.province_name = labels[0];
+      param.city_id = values[1];
+      param.city = labels[1];
+      param.area_id = values[2];
+      param.area = labels[2];
+      console.log(param);
+      modifyAddressApi(param, this.deliverId)
+        .then(res => {
+          this.closeAdd();
+          Toast("修改成功");
+          this.$router.replace({
+            name: "Address"
+          });
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    },
+    onValuesChange: function(picker, values) {
+      if (values[0] > values[1]) {
+        picker.setSlotValue(1, values[0]);
+      }
+    },
+    hidePicker() {
+      // 接受子组件关闭popup事件
+      this.showAddressPicker = false;
+    },
+    showPicker() {
+      this.showAddressPicker = !this.showAddressPicker;
+    },
+    saveAddress(labels, values) {
+      console.log(labels);
+      // 从子组件接受返回所选值 val
+      this.addressArea = labels;
+      this.addressAreaCode = values;
+      this.showAddressPicker = !this.showAddressPicker;
+    }
+  }
+};
+</script>
+
+<style  lang="less">
+@import "../../util/public";
+
+.addressEdit {
+  background: #f5f5f9;
+
+  // .mint-cell-wrapper{border-bottom: 1px solid #E2E2E2;width: 94%;}
+  .stbox {
+    position: relative;
+  }
+  input::-webkit-input-placeholder {
+    color: #cccccc;
+  }
+  .van-popup {
+    background: white;
+  }
+  .gray {
+    background: #cccccc;
+    border: none;
+  }
+  .mint-cell {
+    color: #333333;
+  }
+  .btn {
+    margin-top: 50 * @toVw;
+    padding: 0 34 * @toVw;
+  }
+  #mtcell {
+    //  background: red;
+    span {
+      color: #333333;
+    }
+    .mint-cell-title {
+      width: 105px;
+      flex: none;
+    }
+    .mint-cell-value {
+      flex: 1;
+      text-align: left;
+      //  background: red;
+      span {
+        text-indent: 0;
+        margin-left: 4px;
+      }
+    }
+  }
+  .mint-field-core {
+    //  background: red;
+    text-indent: 2px;
+  }
+  .holder {
+    color: rgb(204, 204, 204);
+    position: absolute;
+    top: 10 * @toVw;
+    left: 108 * @toVw;
+  }
+  // .mint-cell-value{color: #333333;}
+  .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;
+  }
+  .now {
+    i {
+      background: #60adf0;
+    }
+  }
+  .item {
+    margin-top: 10px;
+  }
+  .next {
+    i {
+      background: #ffd454;
+    }
+  }
+  .content {
+    background: white;
+    padding: 13 * @toVw 0 13 * @toVw 33 * @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;
+  }
+  .tip {
+    padding: 10 * @toVw 20 * @toVw;
+    color: #999999;
+    font-size: 12 * @toVw;
+    line-height: 23 * @toVw;
+  }
+}
+@media screen and (orientation: landscape) {
+}
+</style>

src/util/common.js

@@ -64,11 +64,11 @@ export default {
     return theRequest;
   },
   // 倒计时
-  leftTimer(enddate,Interval) {
+  leftTimer(enddate, Interval) {
     if (enddate > new Date()) {
       var leftTime = (enddate) - new Date(); //计算剩余的毫秒数
-    }else{
-      if(Interval){
+    } else {
+      if (Interval) {
         clearInterval(Interval)
       }
       // console.log(enddate)
@@ -87,9 +87,9 @@ export default {
     // console.log(hours)
     // console.log(minutes)
     // console.log(seconds)
-    if(days > 0){
+    if (days > 0) {
       return days + "天"
-    }else if(hours >= 0 || minutes >= 0 || seconds >= 0){
+    } else if (hours >= 0 || minutes >= 0 || seconds >= 0) {
       return hours + ":" + minutes + ":" + seconds;
     }
     // if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0) return days + "天" + hours + ":" + minutes + ":" + seconds;
@@ -98,11 +98,11 @@ export default {
     //   window.clearInterval(_ordertimer);
     //   _ordertimer = null;
     // }
-},
-checkTime(i) { //将0-9的数字前面加上0，例1变为01
-  if (i < 10) {
-    i = "0" + i;
+  },
+  checkTime(i) { //将0-9的数字前面加上0，例1变为01
+    if (i < 10) {
+      i = "0" + i;
+    }
+    return i;
   }
-  return i;
-}
 }