订单地址编辑

assets/scss/mobileCommon.scss

@@ -604,3 +604,11 @@ table.com-price-list {
     font-size: .32rem;
   }
 }
+
+.mobile-hover-pager {
+  position: fixed;
+  top: 1.26rem;
+  width: 100%;
+  bottom: 0;
+  background: rgb(255, 255, 255);
+}

components/mobile/base/SelectAddress.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="base-select-address mobile-modal" v-if="isShow">
+  <div class="base-select-address mobile-modal" :class="{'fix-bs-address': inFix}" v-if="isShow">
     <div class="bs-wrap">
       <p class="bs-wrap-title">选择地址<i class="iconfont icon-guanbi1" @click="$emit('closeAction')"></i></p>
       <ul class="bs-selected-list">
@@ -19,6 +19,10 @@
       isShow: {
         type: Boolean,
         default: false
+      },
+      inFix: {
+        type: Boolean,
+        default: false
       }
     },
     data () {
@@ -147,6 +151,10 @@
         position: absolute;
         right: .12rem;
         top: .09rem;
+        display: block;
+        width: .5rem;
+        height: .5rem;
+        text-align: right;
       }
     }
     .bs-selected-list {
@@ -172,4 +180,15 @@
       }
     }
   }
+  .fix-bs-address {
+    background: #fff;
+    .bs-wrap {
+      border-top: 1px solid #ccc;
+      border-bottom: 1px solid #ccc;
+      height: 100%;
+      .bs-current-list {
+        height: 7.3rem;
+      }
+    }
+  }
 </style>

components/mobile/base/addressEdit.vue

@@ -1,54 +1,56 @@
 <template>
-  <div class="shipments_address_edit">
-    <div class="form_line">
-      <ul class="list-unstyled" ref="addressContent">
-        <li class="clearfix">
-          <div class="com_left pull-left"><span>*</span>发货人姓名：</div>
-          <div class="form_input">
-            <input type="text" placeholder="请输入您的姓名" v-model="params.name" maxlength="10">
-          </div>
-        </li>
-        <li class="clearfix">
-          <div class="com_left pull-left"><span>*</span>联系电话：</div>
-          <div class="form_input">
-            <input type="tel" placeholder="请输入您的联系电话" v-model="params.tel" maxlength="11">
-          </div>
-        </li>
-        <li class="clearfix">
-          <div class="com_left pull-left">邮箱：</div>
-          <div class="form_input">
-            <input type="email" placeholder="请输入正确邮箱，用于接收订单提醒" v-model="params.email">
-          </div>
-        </li>
-        <li class="clearfix">
-          <div class="com_left pull-left"><span>*</span>所在地区：</div>
-          <div class="form_input" @click="addressShow = true">
-            <span v-text="params.area || '选择地区'">选择地区</span>
-          </div>
-        </li>
-        <li class="clearfix">
-          <div class="com_left pull-left"><span>*</span>详细地址：</div>
-          <div class="form_input">
-            <input type="text" placeholder="请您填写详细地址，街道名、门牌号等" v-model="params.detailAddress" maxlength="30">
-          </div>
-        </li>
-        <li class="clearfix">
-          <div class="com_left pull-left"><span>*</span>默认地址：</div>
-          <div class="form_input">
-            <el-switch
-              v-model="isActive"
-              on-text="ON"
-              off-text="OFF">
-            </el-switch>
-          </div>
-        </li>
-      </ul>
+  <div>
+    <div class="shipments_address_edit" :class="{'fix-sa-edit': inFix}">
+      <div class="form_line">
+        <ul class="list-unstyled" ref="addressContent">
+          <li class="clearfix">
+            <div class="com_left pull-left"><span>*</span>收货人姓名：</div>
+            <div class="form_input">
+              <input type="text" placeholder="请输入您的姓名" v-model="params.name" maxlength="10">
+            </div>
+          </li>
+          <li class="clearfix">
+            <div class="com_left pull-left"><span>*</span>联系电话：</div>
+            <div class="form_input">
+              <input type="tel" placeholder="请输入您的联系电话" v-model="params.tel" maxlength="11">
+            </div>
+          </li>
+          <li class="clearfix">
+            <div class="com_left pull-left">邮箱：</div>
+            <div class="form_input">
+              <input type="email" placeholder="请输入正确邮箱，用于接收订单提醒" v-model="params.email">
+            </div>
+          </li>
+          <li class="clearfix">
+            <div class="com_left pull-left"><span>*</span>所在地区：</div>
+            <div class="form_input" @click="addressShow = true">
+              <span v-text="params.area || '选择地区'">选择地区</span>
+            </div>
+          </li>
+          <li class="clearfix">
+            <div class="com_left pull-left"><span>*</span>详细地址：</div>
+            <div class="form_input">
+              <input type="text" placeholder="请您填写详细地址，街道名、门牌号等" v-model="params.detailAddress" maxlength="30">
+            </div>
+          </li>
+          <li class="clearfix">
+            <div class="com_left pull-left"><span>*</span>默认地址：</div>
+            <div class="form_input">
+              <el-switch
+                v-model="isActive"
+                on-text="ON"
+                off-text="OFF">
+              </el-switch>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <div class="control clearfix">
+        <div class="cancel" @click="storeInfosave('cancel')">取消</div>
+        <div class="save" @click="storeInfosave()">保存</div>
+      </div>
     </div>
-    <div class="control clearfix">
-      <div class="cancel" @click="storeInfosave('cancel')">取消</div>
-      <div class="save" @click="storeInfosave()">保存</div>
-    </div>
-    <select-address :isShow="addressShow" @closeAction="addressData"></select-address>
+    <select-address :inFix="inFix" :isShow="addressShow" @closeAction="addressData"></select-address>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
@@ -60,7 +62,10 @@
   export default {
     name: 'AddressEditView',
     props: {
-      data: {},
+      data: {
+        type: Object,
+        default: {}
+      },
       isSend: {
         default: true,
         type: Boolean
@@ -68,6 +73,10 @@
       isPersonal: {
         default: true,
         type: Boolean
+      },
+      inFix: {
+        type: Boolean,
+        default: false
       }
     },
     data() {
@@ -89,14 +98,20 @@
       }
     },
     watch: {
-      data(newVal) {
-        this.isActive = false
-        this.params = this.baseUtils.deepCopy(newVal)
+      'data': {
+        handler: function (newVal) {
+          console.log(newVal)
+          if (newVal) {
+            this.isActive = false
+            this.params = this.baseUtils.deepCopy(newVal)
+          }
+        },
+        immediate: true
       }
     },
     methods: {
-      editClick () {
-        this.$emit('isEditEvent', [], false)
+      editClick (data) {
+        this.$emit('isEditEvent', data || [], false)
       },
       addressData (type) {
         this.addressShow = false
@@ -118,7 +133,7 @@
           return false
         }
         if (!this.params.name || this.params.name === '') {
-          this.setRemindText('发货人姓名不能为空')
+          this.setRemindText('收货人姓名不能为空')
           return false
         }
         if (!this.params.tel || this.params.tel === '' || !/^1[3|4|5|6|7|8|9][0-9]{9}$/.test(this.params.tel)) {
@@ -138,9 +153,9 @@
           return false
         }
         this.$http.post(`/trade/address/shipping/save?isPersonal=${this.isPersonal}&isSetTop=${this.isActive}&send=${this.isSend}`, this.params)
-          .then(() => {
+          .then(res => {
             this.setRemindText('保存成功')
-            this.editClick()
+            this.editClick(res.data)
           }).catch(err => {
             this.collectResult = err.response.data
             this.timeoutCount++
@@ -232,4 +247,9 @@
       }
     }
   }
+  .fix-sa-edit {
+    .form_line {
+      margin-top: 0;
+    }
+  }
 </style>

pages/mobile/center/user/pay/_orderId.vue

@@ -18,7 +18,7 @@
     <ul class="pay-store-list">
       <li class="ps-item" v-for="item in orderData">
         <p class="ps-store-name">
-          <span class="inline-block text-ellipse seller-name"><span>卖&nbsp;&nbsp;家：</span>{{item.storeName}}&nbsp;<i class="iconfont icon-arrow-right"></i></span>
+          <nuxt-link tag="span" :to="`/mobile/shop/${item.storeid}`" class="inline-block text-ellipse seller-name"><span>卖&nbsp;&nbsp;家：</span>{{item.storeName}}&nbsp;<i class="iconfont icon-arrow-right"></i></nuxt-link>
           <a class="com-mobile-link" @click.stop="linkSaler(item)"><i class="iconfont icon-kefu1"></i>联系卖家</a>
         </p>
         <div class="ps-goods-info"  @click="showDetailList(item.goods)">
@@ -264,20 +264,59 @@
     <modal-wrapper :showModal="showAddrModal"
                    :title="'收货地址'"
                    @closeAction="showAddrModal = false">
-      <ul class="addr-list">
-        <li v-for="(addr, index) in addressData" :class="{active: selectedAddressIndex === index}" @click="setAddressCheck(index)">
-          <div class="info-line">
-            <label class="mobile-cart-check" :class="{active: selectedAddressIndex === index}">
-              <input type="checkbox">
-            </label>
-            <span class="name inline-block text-ellipse">{{addr.name}}</span>
-            <span class="tel inline-block text-ellipse">{{addr.tel}}</span>
-            <i class="inline-block" v-if="addr.num === 1">默认地址</i>
-          </div>
-          <p>{{addr.area + addr.detailAddress}}</p>
-        </li>
-      </ul>
+      <template v-if="!editAddr">
+        <div class="addr-list-wrap">
+          <ul class="addr-list">
+            <li v-for="(addr, index) in addressData" :class="{active: selectedAddressIndex === index}" @click="setAddressCheck(index)">
+              <div class="info-wrap">
+                <div class="info-line">
+                  <label class="mobile-cart-check" :class="{active: selectedAddressIndex === index}">
+                    <input type="checkbox">
+                  </label>
+                  <span class="name inline-block text-ellipse">{{addr.name}}</span>
+                  <span class="tel inline-block text-ellipse">{{addr.tel}}</span>
+                  <i class="inline-block" v-if="addr.num === 1">默认地址</i>
+                </div>
+                <p>{{addr.area + addr.detailAddress}}</p>
+              </div>
+              <div class="edit-addr-area">
+                <a class="inline-block addr-btn" @click.stop="addAddress(addr)"><i class="iconfont icon-xinzeng"></i>编辑</a>
+                <a class="inline-block addr-btn" @click.stop="deleteAddress(addr)"><i class="iconfont icon-lajitong"></i>删除</a>
+              </div>
+            </li>
+          </ul>
+          <button class="add-addr-btn" @click="addAddress()"><i class="iconfont icon-add"></i>添加新地址</button>
+        </div>
+      </template>
+      <address-edit v-else="editAddr" :inFix="true" :data="currentAddress" :isPersonal="true" :isSend="false" @isEditEvent="editClick"></address-edit>
     </modal-wrapper>
+   <!-- <div v-if="showAddrModal" class="mobile-hover-pager">
+      <template v-if="!editAddr">
+        <div class="addr-list-wrap">
+          <ul class="addr-list">
+            <li v-for="(addr, index) in addressData" :class="{active: selectedAddressIndex === index}" @click="setAddressCheck(index)">
+              <div class="info-wrap">
+                <div class="info-line">
+                  <label class="mobile-cart-check" :class="{active: selectedAddressIndex === index}">
+                    <input type="checkbox">
+                  </label>
+                  <span class="name inline-block text-ellipse">{{addr.name}}</span>
+                  <span class="tel inline-block text-ellipse">{{addr.tel}}</span>
+                  <i class="inline-block" v-if="addr.num === 1">默认地址</i>
+                </div>
+                <p>{{addr.area + addr.detailAddress}}</p>
+              </div>
+              <div class="edit-addr-area">
+                <a class="inline-block addr-btn" @click.stop="addAddress(addr)"><i class="iconfont icon-xinzeng"></i>编辑</a>
+                <a class="inline-block addr-btn" @click.stop="deleteAddress(addr)"><i class="iconfont icon-lajitong"></i>删除</a>
+              </div>
+            </li>
+          </ul>
+          <button class="add-addr-btn" @click="addAddress()"><i class="iconfont icon-add"></i>添加新地址</button>
+        </div>
+      </template>
+      <address-edit v-else="editAddr" :inFix="false" :data="currentAddress" :isPersonal="true" :isSend="false" @isEditEvent="editClick"></address-edit>
+    </div>-->
     <!-- 选择地址弹框end -->
 
     <!-- 选择自提点弹框start -->
@@ -286,14 +325,16 @@
                    @closeAction="showTakeSelfModal = false">
       <ul class="addr-list takeself-list">
         <li v-for="(takeself, index) in takeSelfData[currentTakeSelfStoreId]" @click="checkTakeSelf(index)" :class="{active: index === 0}">
-          <div class="info-line">
-            <label class="mobile-cart-check" :class="{active: index === 0}">
-              <input type="checkbox">
-            </label>
-            <span class="name inline-block text-ellipse">{{takeself.takename}}</span>
+          <div class="info-wrap">
+            <div class="info-line">
+              <label class="mobile-cart-check" :class="{active: index === 0}">
+                <input type="checkbox">
+              </label>
+              <span class="name inline-block text-ellipse">{{takeself.takename}}</span>
+            </div>
+            <p><span>地址：</span>{{takeself.area + takeself.detailAddress}}</p>
+            <p><span>营业时间：</span>{{takeself.businesstime}}</p>
           </div>
-          <p><span>地址：</span>{{takeself.area + takeself.detailAddress}}</p>
-          <p><span>营业时间：</span>{{takeself.businesstime}}</p>
         </li>
       </ul>
     </modal-wrapper>
@@ -303,7 +344,7 @@
   </div>
 </template>
 <script>
-  import { LinkUser, ModalWrapper, BottomModalWrapper } from '~components/mobile/base'
+  import { LinkUser, ModalWrapper, BottomModalWrapper, AddressEdit } from '~components/mobile/base'
   import { RemindBox } from '~components/mobile/common'
   import { goodsPurchaseOperate } from '~utils/mixin'
   export default {
@@ -336,7 +377,9 @@
         // 选中的地址
         selectedAddressIndex: 0,
         // 正在修改自提点的店铺id
-        currentTakeSelfStoreId: ''
+        currentTakeSelfStoreId: '',
+        editAddr: false,
+        currentAddress: {}
       }
     },
     mixins: [goodsPurchaseOperate],
@@ -344,7 +387,8 @@
       LinkUser,
       ModalWrapper,
       RemindBox,
-      BottomModalWrapper
+      BottomModalWrapper,
+      AddressEdit
     },
     fetch ({ store, params }) {
       return Promise.all([
@@ -615,6 +659,7 @@
       },
       setAddressCheck (index) {
         if (this.selectedAddressIndex === index) {
+          this.showAddrModal = false
           return
         }
         this.selectedAddressIndex = index
@@ -622,10 +667,9 @@
         this.getDeliveryRule()
       },
       openAddrModal () {
-        if (this.addressData && this.addressData.length) {
-          this.showAddrModal = true
-        } else {
-          this.setRemindText('暂未设置收货地址，请前往【我】->【收货地址信息】进行维护】')
+        this.showAddrModal = true
+        if (!this.selectedAddress.id) {
+          this.editAddr = true
         }
       },
       // 配送规则校验
@@ -641,7 +685,7 @@
       // 收货地址校验
       checkAddress () {
         if (!this.selectedAddress || !this.selectedAddress.id) {
-          this.setRemindText('暂未设置收货地址，请前往【我】->【收货地址信息】进行维护】')
+          this.setRemindText('请选择收货地址')
           return false
         } else if (this.selectedAddress.area.indexOf('香港') > -1) {
           if (this.payData.currency === 'RMB') {
@@ -824,6 +868,31 @@
             console.log(err)
             this.setRemindText(err.response.data || '提交订单失败')
           })
+      },
+      reloadAddress () {
+        this.$store.dispatch('userCenter/loadAcceptAddress', {send: false})
+      },
+      editClick (obj) {
+        if (obj.id) {
+          this.reloadAddress()
+        }
+        this.editAddr = false
+      },
+      addAddress (item) {
+        if (!item) {
+          this.currentAddress = {}
+        } else {
+          this.currentAddress = item
+        }
+        this.editAddr = true
+      },
+      deleteAddress (item) {
+        this.$http.put(`/trade/address/delete/${item.id}`).then(res => {
+          this.setRemindText('删除成功')
+          this.reloadAddress()
+        }, err => {
+          this.setRemindText(err.response.data || '删除失败，系统错误')
+        })
       }
     }
   }
@@ -1260,9 +1329,12 @@
         }
       }
     }
-    .addr-list {
+    .addr-list-wrap {
       background: #f1f3f7;
       padding: .19rem 0;
+    }
+    .addr-list {
+      background: #f1f3f7;
       li {
         margin-bottom: .19rem;
         position: relative;
@@ -1270,7 +1342,9 @@
           margin-bottom: 0;
         }
         background: #fff;
-        padding: .35rem .25rem .28rem;
+        .info-wrap {
+          padding: .35rem .25rem .28rem;
+        }
         .info-line {
           font-size: .3rem;
           color: #666;
@@ -1310,6 +1384,41 @@
             color: #666;
           }
         }
+        .edit-addr-area {
+          border-top: 1px solid #d9d9d9;
+          .addr-btn {
+            width: 50%;
+            height: .8rem;
+            line-height: .8rem;
+            color: #333;
+            text-align: center;
+            i {
+              font-size: .34rem;
+              margin-right: .1rem;
+            }
+            &:first-child {
+              border-right: 1px solid #d9d9d9;
+            }
+          }
+        }
+      }
+    }
+    .add-addr-btn {
+      /*position: absolute;*/
+      /*bottom: .26rem;*/
+      /*left: .52rem;*/
+      width: 5.67rem;
+      text-align: center;
+      display: block;
+      margin: .26rem auto .07rem;
+      height: .77rem;
+      line-height: .77rem;
+      background: #3f84f6;
+      border-radius: .08rem;
+      color: #fff;
+      font-size: .32rem;
+      i {
+        margin-right: .08rem;
       }
     }
     .takeself-list {

pages/mobile/center/vendor/payCenter.vue

@@ -707,7 +707,7 @@
     }
   }
   .vendor-pay {
-    bottom: 2.23rem;
+    bottom: 2.23rem !important;
     .mobile-modal .mobile-modal-wrapper {
       left: .2rem !important;
       right: .2rem !important;