店铺编辑增加区域信息

src/api/shop.ts

@@ -3,7 +3,8 @@ import { IShopData } from './types'
 
 export const defaultShopData: IShopData = {
   name: '',
-  _id: ''
+  _id: '',
+  address: '',
 }
 
 export const getShops = (params: any) =>

src/api/types.d.ts

@@ -44,5 +44,8 @@ export interface IQuestionData {
 export interface IShopData {
   _id: string,
   name: string,
-  createdAt?: Date
+  createdAt?: Date,
+  areaCode?: number,
+  areaStr?: string,
+  address: string
 }

src/components/RegionPicker/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-cascader-panel
+      :options="options"
+      v-model="areaSelect"
+      v-on:change="valchange">
+  </el-cascader-panel>
+</template>
+<script lang="ts">
+import { Component, Vue, Watch } from 'vue-property-decorator'
+import axios from 'axios'
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    initArea?: number
+  }
+}
+
+@Component({
+  name: 'RegionPicker',
+  props: ['initArea'],
+  model: {
+    prop: 'initArea',
+    event: 'update'
+  }
+})
+export default class extends Vue {
+  private options = []
+  private areaData = {}
+  private areaSelect = ''
+
+  async mounted() {
+    if (this.initArea) {
+      let ckey = this.getCcode(this.initArea)
+      let pkey = this.getPcode(this.initArea)
+      this.areaSelect = [pkey, ckey, this.initArea]
+    }
+    await this.prepareRegion()
+  }
+
+  @Watch('initArea')
+  private updateArea(val: number) {
+    if (val) {
+      let ckey = this.getCcode(val)
+      let pkey = this.getPcode(val)
+      this.areaSelect = [pkey, ckey, val]
+    }
+  }
+
+  private async prepareRegion() {
+    let datas = await this.fetchData()
+    this.areaData = datas
+    let province = new Map()
+    let citys = new Map()
+    let areas = new Map()
+    for (let key in datas) {
+      key = +key
+      if (key % 1e4 == 0) {
+        province.set(key, datas[key])
+      } else if (key % 100 == 0) {
+        let pkey = this.getPcode(key)
+        if (citys.has(pkey)) {
+          let arr = citys.get(pkey)
+          arr.push([key, datas[key]])
+        } else {
+          citys.set(pkey, [[key, datas[key]]])
+        }
+      } else {
+        let ckey = this.getCcode(key)
+        if (areas.has(ckey)) {
+          let arr = areas.get(ckey)
+          arr.push([key, datas[key]])
+        } else {
+          areas.set(ckey, [[key, datas[key]]])
+        }
+      }
+    }
+    for (let [key, area] of areas) {
+      let pkey = this.getPcode(key)
+      if (!citys.has(pkey)) {
+        citys.set(pkey, [[key, province.get(pkey)]])
+      }
+    }
+    let results = []
+    for (let [pcode, pname] of province) {
+      let cityArr = []
+      if (citys.has(pcode)) {
+        let cityData = citys.get(pcode)
+        for (let city of cityData) {
+          let areaArr = []
+          if (areas.has(city[0])) {
+            let areaData = areas.get(city[0])
+            for (let area of areaData) {
+              areaArr.push({
+                value: area[0],
+                label: area[1]
+              })
+            }
+          }
+
+          cityArr.push({
+            value: city[0],
+            label: city[1],
+            children: areaArr
+          })
+        }
+      }
+
+      results.push({
+        value: pcode,
+        label: pname,
+        children: cityArr
+      })
+    }
+    this.options = results
+    return results
+  }
+  private async fetchData() {
+    let url = 'https://passer-by.com/data_location/list.json'
+    return axios.get(url, {})
+        .then(res => {
+          return res.data
+        })
+  }
+  private valchange(val: string) {
+    this.$emit('update', this.areaSelect[this.areaSelect.length - 1])
+    let areaStr = ''
+    for (let v of this.areaSelect) {
+      if (!this.areaData.hasOwnProperty(v)) {
+        continue
+      }
+      if (areaStr) {
+        areaStr += '-'
+      }
+      areaStr += this.areaData[v]
+    }
+    this.$emit('area-change', areaStr)
+  }
+  private getPcode(acode: number) {
+    return (acode / 1e4 | 0) * 1e4
+  }
+  private getCcode(acode: number) {
+    return (acode / 100 | 0) * 100
+  }
+}
+</script>

src/views/shop/edit.vue

@@ -38,6 +38,7 @@
                   v-model="postForm.name"
                   :maxlength="100"
                   name="name"
+                  id="name"
                   required
               >
                 店铺名
@@ -45,6 +46,36 @@
             </el-form-item>
           </el-col>
         </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item
+                label="区域"
+            >
+              <region-picker
+                  v-model = "postForm.areaCode"
+                  v-on:area-change = "areaChange"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="24">
+            <el-form-item
+                style="margin-bottom: 40px;"
+                prop="address"
+            >
+              <material-input
+                  v-model="postForm.address"
+                  :maxlength="1000"
+                  name="address"
+                  id="address"
+                  required
+              >
+                详细地址
+              </material-input>
+            </el-form-item>
+          </el-col>
+        </el-row>
       </div>
     </el-form>
   </div>
@@ -57,6 +88,7 @@ import { TagsViewModule, ITagView } from '@/store/modules/tags-view'
 import MaterialInput from '@/components/MaterialInput/index.vue'
 import Sticky from '@/components/Sticky/index.vue'
 import UploadImage from '@/components/UploadImage/index.vue'
+import RegionPicker from '@/components/RegionPicker/index.vue'
 import { Form } from 'element-ui'
 import { defaultShopData, getShop, saveShop } from '@/api/shop'
 
@@ -65,7 +97,8 @@ import { defaultShopData, getShop, saveShop } from '@/api/shop'
   components: {
     MaterialInput,
     Sticky,
-    UploadImage
+    UploadImage,
+    RegionPicker
   }
 })
 export default class extends Vue {
@@ -174,6 +207,11 @@ export default class extends Vue {
     })
   }
 
+  private areaChange(val: string) {
+    console.log(`new area: ${val}`)
+    this.postForm.areaStr = val
+  }
+
 }
 </script>
 

src/views/shop/list.vue

@@ -38,7 +38,7 @@
       </el-table-column>
 
       <el-table-column
-          min-width="300px"
+          min-width="200px"
           label="店铺名"
       >
         <template slot-scope="{row}">
@@ -51,6 +51,14 @@
         </template>
       </el-table-column>
 
+      <el-table-column
+          label="区域"
+      >
+        <template slot-scope="{row}">
+            <span>{{ row.areaStr }}</span>
+        </template>
+      </el-table-column>
+
       <el-table-column
           align="center"
           label="操作"