增加收货地址管理

components/mobile/MobileHeader.vue

@@ -108,7 +108,7 @@
         return this.$store.state.componentDetail.detail.data
       },
       showEnHeader () {
-        return this.startWith(this.$route.path, '/mobile/center') || this.startWith(this.$route.path, '/mobile/order')
+        return this.startWith(this.$route.path, '/mobile/center') || this.startWith(this.$route.path, '/mobile/order') || this.startWith(this.$route.path, '/mobile/user/address')
       }
 //      showHeader () {
 //        return this.$route.path !== '/' || !this.$route.path || this.$route.path === ''
@@ -190,6 +190,9 @@
         } else if (this.startWith(val, '/mobile/user/info/admin')) {
           this.showSearchIcon = false
           title = '管理员信息'
+        } else if (this.startWith(val, '/mobile/user/address')) {
+          this.showSearchIcon = false
+          title = '收货地址信息'
         } else if (this.startWith(val, '/mobile/product')) {
           this.showSearchIcon = false
           title = '产品详情'

components/mobile/base/addressEdit.vue

@@ -1,38 +1,38 @@
 <template>
   <div class="shipments_address_edit">
-    <div class="form_line" ref="addressContent">
-      <ul class="list-unstyled" >
-        <li>
+    <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <li class="clearfix">
           <div class="com_left pull-left"><span>*</span>默认地址：</div>
           <div class="form_input">
             <el-switch
@@ -50,7 +50,6 @@
     </div>
     <select-address :isShow="addressShow" @closeAction="addressData"></select-address>
     <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
-    <div v-if="storeI && false"></div>
   </div>
 </template>
 
@@ -61,10 +60,7 @@
   export default {
     name: 'AddressEditView',
     props: {
-      data: {
-        type: Object,
-        default: {}
-      },
+      data: {},
       isSend: {
         default: true,
         type: Boolean
@@ -92,9 +88,14 @@
         collectResult: ''
       }
     },
+    watch: {
+      data(newVal) {
+        this.isActive = false
+        this.params = this.baseUtils.deepCopy(newVal)
+      }
+    },
     methods: {
       editClick () {
-        this.$store.dispatch('mobileAddress/loadAddressData', {count: 10, page: 1, isSend: this.isSend, sorting: { 'num': 'ASC' }})
         this.$emit('isEditEvent', [], false)
       },
       addressData (type) {
@@ -147,25 +148,12 @@
           })
       }
     },
-    computed: {
-      storeI() {
-        let str = JSON.stringify(this.$store.state.option.storeStatus.data)
-        this.storeInfo = JSON.parse(str)
-        return ''
-      },
-      isAdmin () {
-        return this.user.data.userUU === this.user.data.enterprise.enAdminuu
-      }
-    },
     components: {
       RemindBox,
       SelectAddress
     },
     mounted() {
       this.$nextTick(() => {
-        if (this.data) {
-          this.params = this.baseUtils.deepCopy(this.data)
-        }
         if (this.BScroll) {
           this.BScroll.refresh()
         } else {

components/mobile/base/addressView.vue

@@ -14,16 +14,16 @@
       </div>
     </div>
     <ul class="list-unstyled">
-      <li v-for="(item, index) in listInfo.content">
-        <div class="wrapper-line">
+      <li v-for="(item, index) in addressList">
+        <div class="wrapper-line clearfix">
           <div class="name pull-left">{{isSend ? '发货地址：' : '收货地址：'}}</div>
           <div class="name-text">{{item.area}}{{item.detailAddress}}</div>
         </div>
-        <div class="wrapper-line">
+        <div class="wrapper-line clearfix">
           <div class="name pull-left">{{isSend ? '发货人：' : '收货人：'}}</div>
           <div class="name-text">{{item.name}}</div>
         </div>
-        <div class="wrapper-line">
+        <div class="wrapper-line clearfix">
           <div class="name pull-left">电话：</div>
           <div class="name-text">{{item.tel}}</div>
         </div>
@@ -42,11 +42,13 @@
       </li>
     </ul>
 
-    <!--<pull-up :fixId="'logistics-content'"-->
-    <!--:searchMore="isSearchSearchingMore"-->
-    <!--:allPage="allPage"-->
-    <!--:page="param.page"-->
-    <!--@pullUpAction="getMoreSearch"></pull-up>-->
+    <pull-up
+      :searchMore="fetching"
+      :allPage="allPage"
+      :page="param.page"
+      :fixId="'logisticsContent'"
+      @pullUpAction="getPullAddress">
+    </pull-up>
   </div>
 </template>
 
@@ -62,6 +64,7 @@
     },
     data() {
       return {
+        addressList: [],
         showLogout: false,
         // 保存操作数据的序号
         saveId: {
@@ -72,14 +75,29 @@
           count: 10,
           page: 1,
           sorting: { 'num': 'asc' }
-        }
+        },
+        isChange: false
+      }
+    },
+    watch: {
+      'listInfo': {
+        handler: function (val) {
+          val.content = val.content.sort((a, b) => { return a.num - b.num })
+          if (this.isChange) {
+            this.addressList = val.content
+            this.isChange = false
+          } else {
+            this.addressList = [...this.addressList, ...val.content]
+          }
+        },
+        immediate: true
       }
     },
     methods: {
       // 设置默认地址
       setActiveClick (type) {
         this.$http.put(`/trade/address/settop/${type}`).then(() => {
-          this.$store.dispatch('mobileAddress/loadAddressData', {count: 10, page: 1, isSend: this.isSend, sorting: { 'num': 'ASC' }})
+          this.initList()
         })
       },
       // 删除事件
@@ -88,10 +106,13 @@
         this.saveId.active = index
         this.showLogout = true
       },
-      goNext () {
+      goNext() {
+        if (this.saveId.active === 0) {
+          this.setActiveClick(this.addressList[1].id)
+        }
         this.$http.put(`/trade/address/delete/${this.saveId.id}`)
           .then(() => {
-            this.$store.dispatch('mobileAddress/loadAddressData', {count: 10, page: 1, isSend: this.isSend, sorting: { 'num': 'ASC' }})
+            this.initList()
             this.showLogout = false
           })
       },
@@ -100,16 +121,30 @@
         this.$emit('isEditEvent', type || {}, true)
       },
       // 加载更多
-      getMoreSearch() {}
+      getPullAddress() {
+        this.param.page++
+        this.reloadList()
+      },
+      // 初始化数据页面
+      initList () {
+        this.isChange = true
+        this.param.page = 1
+        this.reloadList()
+      },
+      // 发送请求数据
+      reloadList () {
+        this.$store.dispatch('mobileAddress/loadAddressData', {count: this.param.count, page: this.param.page, isSend: this.isSend, sorting: this.param.sorting})
+      }
     },
     computed: {
       listInfo() {
-        let list = this.baseUtils.deepCopy(this.$store.state.mobileAddress.address.data)
-        list.content = list.content.sort((a, b) => { return a.num - b.num })
-        return list
+        return this.baseUtils.deepCopy(this.$store.state.mobileAddress.address.data)
+      },
+      fetching () {
+        return this.$store.state.mobileAddress.address.fetching
       },
       allPage() {
-        return this.listInfo.totalElements
+        return this.listInfo.totalPages
       }
     },
     components: {
@@ -227,10 +262,12 @@
           .name{
             display:inline-block;
             text-align: right;
-            width:1.5rem;
+            width:1.4rem;
+            font-size: .28rem;
+            color: #4c8cf7;
           }
           .name-text {
-            margin-left:1.5rem;
+            margin-left:1.4rem;
             word-break: break-all;
             word-wrap: break-word;
             font-size: 0.28rem;

pages/mobile/user/address.vue

@@ -1,157 +1,70 @@
 <template>
-  <div class="mobile-fix-content user-info">
-    <div class="info">
-      <div class="line">
-        <input type="file"
-               class="file-input"
-               name="name"
-               accept="image/jpeg,image/jpg,image/gif,image/bmp,image/png"
-               @change="uploadImg"/>
-        <span><i class="iconfont icon-tuxiang-" style="font-size: .29rem;"></i>头像：</span>
-        <span class="describe"><img :src="imageUploadUrl ? imageUploadUrl : info.imageUrl ? info.imageUrl : '/images/component/default.png'" alt="">
-          <i class="iconfont icon-xiangyou"></i></span>
-      </div>
-      <div class="line">
-        <span><i class="iconfont icon-yonghuming"></i>用户名：</span>
-        <span class="describe">{{info.userName}}</span>
-      </div>
-      <div class="line" @click="jumpSet('email')">
-        <span><i class="iconfont icon-youxiang"></i>邮箱：</span>
-        <span class="describe">{{info.userEmail}}
-        <i class="iconfont icon-xiangyou"></i>
-        </span>
-      </div>
-      <div class="line" @click="jumpSet('mobile')">
-        <span><i class="iconfont icon-shouji"></i>手机：</span>
-        <span class="describe">{{info.userTel}}
-        <i class="iconfont icon-xiangyou"></i>
-        </span>
-      </div>
+  <div class="logistics-wrapper">
+    <div class="logistics-content" id="logisticsContent">
+      <address-view ref="addressView" v-show="!isEdit" :isSend="isSend" @isEditEvent="editClick"></address-view>
+      <address-edit v-show="isEdit" :data="setData" :isPersonal="isPersonal" :isSend="isSend" @isEditEvent="editClick"></address-edit>
     </div>
   </div>
 </template>
-<script>
+
+<script type="text/javascript">
+  import { AddressView, AddressEdit } from '~components/mobile/base'
   export default {
-    props: {
-      info: {
-        default: {},
-        type: Object
-      }
+    name: 'NoSendAddress',
+    layout: 'mobile',
+    middleware: 'authenticated',
+    fetch({store}) {
+      return Promise.all([
+        store.dispatch('mobileAddress/loadAddressData', {count: 10, page: 1, isSend: false, sorting: { 'num': 'ASC' }})
+      ])
+    },
+    components: {
+      AddressView,
+      AddressEdit
     },
     data () {
       return {
-        imageUploadUrl: ''
+        isEdit: false,
+        setData: {}
       }
     },
-    mounted: function () {
-      this.$nextTick(() => {
-        if (!this.$store.state.option.user.logged) {
-          this.$router.push('/auth/login?returnUrl=' + window.location.href)
-        }
-      })
-    },
     computed: {
-      getEmail () {
-        return this.$store.state.user.updateUser.email.data.content
+      isSend () {
+        return false
       },
-      getMobile () {
-        return this.$store.state.user.updateUser.mobile.data.content
+      isPersonal () {
+        return true
       }
     },
     methods: {
-      uploadImg (e) {
-        let file = e.target.files[0]
-        if (file) {
-          let param = new FormData()
-          param.append('image', file, file.name)
-          let config = {
-            headers: {'Content-Type': 'multipart/form-data'}
-          }
-          this.$http.post('/api/images', param, config)
-            .then(response => {
-              if (response.data) {
-                let imageUrl = response.data[0].path
-                this.$http.post('/basic/user/setImageUrl', {imageUrl: imageUrl})
-                  .then(response => {
-                    if (response.data) {
-                      this.imageUploadUrl = response.data.imageUrl
-                      this.$store.dispatch('loadUserInfo')
-                    }
-                  })
-              }
-            })
+      editClick (item, type) {
+        this.isEdit = type
+        if (item) {
+          this.setData = item
         }
-      },
-      jumpSet (info) {
-        if (info === 'email') {
-          window.location.href = decodeURIComponent(this.getEmail)
-        } else if (info === 'mobile') {
-          window.location.href = decodeURIComponent(this.getMobile)
+        if (type === false) {
+          this.$refs.addressView.initList()
         }
       }
     }
   }
 </script>
-<style lang="scss">
-  .mobile-fix-content {
-    background: #f1f3f6;
+
+<style lang="scss" scoped>
+  @mixin Fixed() {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 1.26rem;
   }
-  .user-info {
-    .info {
-      width: 7.1rem;
-      background: #fff;
-      margin: 0 auto;
-      height: 4.66rem;
-      padding: 0 .24rem;
-      font-size: .28rem;
-      color: #999;
-      border-radius: .05rem;
-      margin-top: .3rem;
-      .line {
-        position: relative;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        height: 1.16rem;
-        line-height: 1.16rem;
-        border-bottom: .01rem solid #d9d9d9;
-        &:last-child {
-          border-bottom: none;
-        }
-        input{
-          position: absolute;
-          top: 0;
-          left: 0;
-          height: 1.16rem;
-          width: 100%;
-          opacity: 0;
-        }
-        span{
-          display: inline-block;
-          font-size: 0.28rem;
-          color: #226ce7;
-          text-align: left;
-          i{
-            margin-right: .15rem;
-            font-size: .3rem;
-            color: #f8953c;
-          }
-        }
-        span.describe {
-          float: right;
-          color: #333;
-          i{
-            margin: 0 0 0 .1rem;
-            font-size: .24rem;
-            color: #bebebe;
-          }
-          img{
-            width: .58rem;
-            height: .58rem;
-            /*border: 1px solid #bebebe;*/
-          }
-        }
-      }
+  .logistics-wrapper {
+    @include Fixed();
+    z-index: 111;
+    background: #f1f3f6;
+    .logistics-content {
+      overflow-y: scroll;
+      height: calc(100vh - 1.26rem)
     }
   }
 </style>

pages/mobile/user/index.vue

@@ -64,6 +64,14 @@
         <i class="iconfont icon-xiangyou"></i>
         <div class="border-line"></div>
       </div>
+      <div @click="go('/mobile/user/address')" class="line block-line">
+        <div class="img-wrap">
+          <img src="/images/mobile/user/icon_06.png" alt="">
+        </div>
+        <span>收货地址信息</span>
+        <i class="iconfont icon-xiangyou"></i>
+        <div class="border-line"></div>
+      </div>
       <div class="deleteKuang" v-if="showLogout">
         <div class="kuangContent">
           <div class="title">系统提示</div>

store/mobileAddress.js

@@ -32,7 +32,7 @@ export const actions = {
   // 获取地址数据
   loadAddressData ({ commit }, params = {}) {
     commit('REQUEST_ADDRESS')
-    return axios.get('/trade/address/page', params)
+    return axios.get('/trade/address/page', {params})
       .then(response => {
         commit('REQUEST_ADDRESS_SUCCESS', response.data)
       }, err => {