地址选择组件

components/mobile/base/SelectAddress.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="base-select-address mobile-modal" 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">
+        <li class="inline-block" v-for="(addrVal, addrName, index) in currentAddress" :class="{active: isActive(addrName)}" @click="resetAddr(addrName)">{{addrVal}}</li>
+      </ul>
+      <ul class="bs-current-list">
+        <li v-for="(item, index) in currentArr" @click="checkItem(index)">
+          {{item}}
+        </li>
+      </ul>
+    </div>
+    <remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
+  </div>
+</template>
+<script>
+  import { RemindBox } from '~components/mobile/common'
+  export default {
+    props: {
+      isShow: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        remindText: '',
+        timeoutCount: '',
+        addressData: '',
+        provinces: [],
+        activeObj: {
+          // 省
+          province: -1,
+          // 市
+          city: -1,
+          // 区
+          area: -1
+        }
+      }
+    },
+    components: {
+      RemindBox
+    },
+    created () {
+      this.$http.get('/data/city.json').then(res => {
+        this.addressData = res.data
+        for (let provinceAttr in this.addressData) {
+          this.provinces.push(provinceAttr)
+        }
+      })
+    },
+    computed: {
+      currentType () {
+        if (this.activeObj.area > -1) {
+          return 'full'
+        } else if (this.activeObj.city > -1) {
+          return 'area'
+        } else if (this.activeObj.province > -1) {
+          return 'city'
+        } else {
+          return 'province'
+        }
+      },
+      currentAddress () {
+        let obj = {
+          province: '',
+          city: '',
+          area: ''
+        }
+        if (this.activeObj.province > -1) {
+          obj.province = this.provinces[this.activeObj.province]
+        }
+        if (this.activeObj.city > -1) {
+          obj.city = this.cityObject.attrArr[this.activeObj.city]
+        }
+        if (this.activeObj.area > -1) {
+          obj.area = this.cityObject.valArr[this.activeObj.city][this.activeObj.area]
+        }
+        return obj
+      },
+      cityObject () {
+        let attrArr = []
+        let valArr = []
+        let tmp = this.addressData[this.provinces[this.activeObj.province]]
+        for (let attr in tmp) {
+          attrArr.push(attr)
+          valArr.push(tmp[attr])
+        }
+        return {
+          attrArr: attrArr,
+          valArr: valArr
+        }
+      },
+      currentArr () {
+        let arr = []
+        if (this.currentType === 'area') {
+          arr = this.cityObject.valArr[this.activeObj.city]
+        } else if (this.currentType === 'city') {
+          arr = this.cityObject.attrArr
+        } else if (this.currentType === 'province') {
+          arr = this.provinces
+        }
+        return arr
+      }
+    },
+    methods: {
+      setRemindText: function (str) {
+        this.remindText = str
+        this.timeoutCount++
+      },
+      checkItem (index) {
+        if (this.currentType === 'province') {
+          this.activeObj.province = index
+          this.activeObj.area = -1
+          this.activeObj.city = -1
+        } else if (this.currentType === 'city') {
+          this.activeObj.city = index
+          this.activeObj.area = -1
+        } else {
+          this.activeObj.area = index
+          this.$emit('closeAction', this.currentAddress)
+        }
+      },
+      isActive (type) {
+        return (type === 'province' && this.currentType === 'city') || (type === 'city' && this.currentType === 'area') || (type === 'area' && this.currentType === 'full')
+      },
+      resetAddr (addrName) {
+        if (addrName === 'province') {
+          this.activeObj.province = -1
+          this.activeObj.area = -1
+          this.activeObj.city = -1
+        } else if (addrName === 'city') {
+          this.activeObj.city = -1
+          this.activeObj.area = -1
+        } else {
+          this.activeObj.area = -1
+        }
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .bs-wrap {
+    position: absolute;
+    bottom: 0;
+    background: #fff;
+    width: 100%;
+    height: 8.17rem;
+    .bs-wrap-title {
+      text-align: center;
+      font-size: .3rem;
+      color: #666;
+      margin: .34rem 0;
+      i {
+        font-size: .24rem;
+        color: #666;
+        position: absolute;
+        right: .12rem;
+        top: .09rem;
+      }
+    }
+    .bs-selected-list {
+      border-bottom: 1px solid #e7e8ec;
+      li {
+        height: .48rem;
+        line-height: .48rem;
+        margin: 0 .33rem;
+        font-size: .28rem;
+        &.active {
+          border-bottom: .02rem solid #f38c8c;
+        }
+      }
+    }
+    .bs-current-list {
+      height: 100%;
+      overflow-y: auto;
+      li {
+        padding: .27rem .39rem;
+        &:hover, &:active, &:focus {
+          background: #f7f7f7;
+        }
+      }
+    }
+  }
+</style>

components/mobile/base/index.js

@@ -3,5 +3,6 @@ import SearchHeader2 from './SearchHeader2.vue'
 import LinkUser from './LinkUser.vue'
 import ModalWrapper from './ModalWrapper.vue'
 import BottomModalWrapper from './BottomModalWrapper.vue'
+import SelectAddress from './SelectAddress.vue'
 
-export { SearchHeader, SearchHeader2, LinkUser, ModalWrapper, BottomModalWrapper }
+export { SearchHeader, SearchHeader2, LinkUser, ModalWrapper, BottomModalWrapper, SelectAddress }

pages/supplier/index.vue

@@ -39,11 +39,11 @@
       Banner,
       ArticleOne,
       ArticleTwo
-    },
-    methods: {
-      loadProductKinds (id) {
-        this.$store.dispatch('loadAllProductKinds', {id})
-      }
     }
+//    methods: {
+//      loadProductKinds (id) {
+//        this.$store.dispatch('loadAllProductKinds', {id})
+//      }
+//    }
   }
 </script>