test

src/assets/css/iconfont.css

 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1557915199457'); /* IE9 */
-  src: url('iconfont.eot?t=1557915199457#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
-  url('iconfont.woff?t=1557915199457') format('woff'),
-  url('iconfont.ttf?t=1557915199457') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1557915199457#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1560222725345'); /* IE9 */
+  src: url('iconfont.eot?t=1560222725345#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
+  url('iconfont.woff?t=1560222725345') format('woff'),
+  url('iconfont.ttf?t=1560222725345') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1560222725345#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -67,6 +67,10 @@
   content: "\e603";
 }
 
+.icon-bianji:before {
+  content: "\e73c";
+}
+
 .icon-below-s:before {
   content: "\e627";
 }

src/assets/css/iconfont.svg

@@ -59,6 +59,9 @@ Created by iconfont
     <glyph glyph-name="dagou" unicode="&#58883;" d="M512 896a512 512 0 1 1 512-512A512 512 0 0 1 512 896z m0-955.733A443.733 443.733 0 1 0 955.733 384 443.733 443.733 0 0 0 512-59.733zM753.323 577.195L439.637 263.509l-168.96 168.619A34.133 34.133 0 1 1 222.208 384l193.195-193.195a34.133 34.133 0 0 1 48.128 0l337.92 337.92a34.133 34.133 0 1 1-48.128 48.128z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="bianji" unicode="&#59196;" d="M761.27191-64.249425H261.807135c-110.412311 0-199.847307 89.434996-199.847307 199.847306V635.062656c0 110.412311 89.434996 199.847307 199.847307 199.847307h332.976516c18.419107 0 33.359049-14.939942 33.359049-33.359049s-14.939942-33.25672-33.359049-33.25672H278.384331c-82.783651 0-149.911062-67.127411-149.911062-149.911062v-466.208055c0-82.783651 67.127411-149.911062 149.911062-149.911062h466.208054c82.783651 0 149.911062 67.127411 149.911063 149.911062V468.574398c0 18.419107 14.939942 33.359049 33.25672 33.359049 18.419107 0 33.359049-14.939942 33.359049-33.359049v-332.976517c0-110.412311-89.434996-199.847307-199.847307-199.847306zM350.116518 178.166483a32.239576 32.239576 0 0 0-45.740781 0c-12.688718 12.688718-12.688718 33.25672 0 45.84311l534.665734 535.58669c12.688718 12.688718 33.154392 12.688718 45.84311 0 12.688718-12.688718 12.688718-33.25672 0-45.84311L350.116518 178.166483z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="below-s" unicode="&#58919;" d="M859.8528 603.0336H164.1472c-40.1408 0-60.3136-48.5376-31.8464-77.0048L480.1536 178.17600000000004c17.6128-17.6128 46.1824-17.6128 63.7952 0l347.8528 347.8528c28.3648 28.4672 8.2944 77.0048-31.9488 77.0048z"  horiz-adv-x="1024" />
 
     

src/components/mine/address.vue

@@ -27,7 +27,8 @@
     <div class="item">
       <div class="head next">
         <i></i>
-        本期收货地址
+        下期收货地址
+        <span class="fl-r"><span class="iconfont icon-bianji"></span> 修改 </span>
       </div>
       <div class="content">
         <div class="top">
@@ -42,15 +43,11 @@
             <p>发货时间：2019.06.03 15:00:00</p>
             <p>物流信息：韵达快递 6912462345001364</p>
           </div>
-          <div class="right">
-            <van-button round plain size="small" type="info">查看物流</van-button>
-          </div>
         </div>
       </div>
     </div>
     <div class="tip">
-      <p>(最新地址修改时间：{{addressInfo.updated_at}})</p>
-      <p>*若要修改收货地址，请联系您的专属班主任老师</p>
+      <p>*预计发货前24小时不可修改地址，若有需要请联系您的专属班主任老师</p>
     </div>
   </div>
 </template>

src/components/mine/addressEdit.vue

+<template>
+  <div class="address2">
+    <div style="padding: 10px">
+      <mt-field label="收货人" v-model="receiveName"></mt-field>
+      <mt-field label="手机号" v-model="receiveMobile"></mt-field>
+      <mt-cell title="所在地区" :value="addressArea" @click.native="showPicker" is-link></mt-cell>
+      <mt-field label="详细地址" v-model="address"></mt-field>
+      <div @click="onSave();buttonClick('保存地址')" class="btn">保存并使用</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 {saveAddressApi,getUserAdressApi} from "../../service/api";
+import { Toast } from 'vant';
+export default {
+  name: "address",
+  components: {
+    MyAddress
+  },
+  data() {
+    return {
+      receiveName: '',
+      receiveMobile:JSON.parse(localStorage.getItem('userDesc')).mobile ? JSON.parse(localStorage.getItem('userDesc')).mobile : '',
+      addressDetail: '',
+      showAddressPicker: false,
+      addressArea: '',
+      addressAreaCode: '6-77-705',
+      address: ''
+    };
+  },
+  mounted() {
+    this.getUserAddress();
+  },
+  methods: {
+    closeAdd(){
+          this.$emit('closeAdd', false)
+      },
+    buttonClick(buttonName){
+      this.$sa.track('buttonClick',{
+        tabTitle:'商品',
+        moduleTitle:'地址填写',
+        buttonType:'功能',
+        buttonName:buttonName
+      });
+    },
+    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}$/.test(this.receiveMobile))) {
+        Toast('手机号格式不正确');
+          return false
+      } else if (!this.address) {
+        Toast('详细地址不能为空');
+          return false
+      }
+      let param = {};
+      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];
+      saveAddressApi(param).then((res) => {
+          this.closeAdd()
+      })
+    },
+    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) {
+      // 从子组件接受返回所选值 val
+      this.addressArea = labels
+      this.addressAreaCode = values
+      this.showAddressPicker = !this.showAddressPicker
+    },
+    getUserAddress: function () {
+      getUserAdressApi().then((res) => {
+        let addressInfo = res;
+        this.receiveName = addressInfo.receive_name ? addressInfo.receive_name : '';
+        this.receiveMobile = !!JSON.parse(localStorage.getItem('userDesc')).mobile &&  !!JSON.parse(localStorage.getItem('userDesc')).mobile !== '' ? JSON.parse(localStorage.getItem('userDesc')).mobile :( !!addressInfo.receive_mobile ? addressInfo.receive_mobile :'');
+        this.address = addressInfo.address;
+        this.addressArea = `${addressInfo.province_name}-${addressInfo.city}-${addressInfo.area}`;
+        this.addressAreaCode = `${addressInfo.province_id}-${addressInfo.city_id}-${addressInfo.area_id}`
+      })
+    }
+  }
+  }
+};
+</script>
+
+<style scoped lang="less">
+@import "../../util/public";
+.address2 {
+  background: #f5f5f9;
+  .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>