优化店铺编辑页面

src/api/map.ts

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+export async function queryArea(str: string, region: string) {
+  let data = {keyword: str, region}
+  return request({
+    url: '/area/query',
+    method: 'post',
+    data
+  })
+
+}

src/components/RegionPicker/index.vue

@@ -4,7 +4,7 @@
       v-model="areaSelect"
       filterable
       size="medium"
-      style="width: 300px"
+      style="width: 50%"
       v-on:change="valchange">
   </el-cascader>
 </template>

src/views/shop/edit.vue

@@ -1,82 +1,65 @@
 <template>
-  <div class="createPost-container">
+  <div class="app-container">
     <el-form
         ref="postForm"
         :model="postForm"
         :rules="rules"
+        label-width="121px"
         class="form-container"
     >
-      <sticky
-          :z-index="10"
-          :class-name="'sub-navbar '+postForm.status"
+      <el-form-item
+
+          label="店铺名"
       >
+        <el-select
+            v-model="postForm.name"
+            :remote-method="queryShop"
+            filterable
+            default-first-option
+            remote
+            @change="areaSelectChange"
+            placeholder="搜索店铺"
+            allow-create
+            style="width: 50%"
+        >
+          <el-option
+              v-for="(item, index) in shopListOptions"
+              :key="item.id"
+              :label="item.showStr"
+              :value="item.title"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+          label="区域"
+      >
+        <region-picker
+            v-model = "postForm.areaCode"
+            v-on:area-change = "areaChange"
+        />
+      </el-form-item>
+      <el-form-item
+          label="详细地址"
+          prop="address"
+      >
+        <el-input
+            v-model="postForm.address"
+            name="address"
+            style="width: 50%"
+            required
+        />
+      </el-form-item>
+      <el-form-item>
         <el-button
-            v-loading="loading"
-            style="margin-left: 10px;"
-            type="success"
+            type="primary"
             @click="submitForm"
         >
           保存
         </el-button>
-        <el-button
-            v-loading="loading"
-            type="warning"
-            @click="draftForm"
-        >
-          Draft
+        <el-button @click="onCancel">
+          取消
         </el-button>
-      </sticky>
-
-      <div class="createPost-main-container">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item
-                style="margin-bottom: 40px;"
-                prop="name"
-            >
-              <material-input
-                  v-model="postForm.name"
-                  :maxlength="100"
-                  name="name"
-                  id="name"
-                  required
-              >
-                店铺名
-              </material-input>
-            </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-item>
     </el-form>
   </div>
 </template>
@@ -91,6 +74,7 @@ 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'
+import { queryArea } from '@/api/map'
 
 @Component({
   name: 'ShopEditor',
@@ -130,6 +114,7 @@ export default class extends Vue {
   }
 
   private tempTagView?: ITagView
+  private shopListOptions = []
 
 
   get lang() {
@@ -197,7 +182,15 @@ export default class extends Vue {
       return false
     }
   }
-
+  private async onCancel() {
+    await this.$confirm('确认不保存当前店铺信息?', 'Warning', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning'
+    })
+    this.$store.dispatch("delView", this.$route)
+    this.$router.go(-1)
+  }
   private draftForm() {
     this.$message({
       message: 'The draft saved successfully',
@@ -212,6 +205,38 @@ export default class extends Vue {
     this.postForm.areaStr = val
   }
 
+  /**
+   *  begin of tencent map
+   */
+  private async queryShop(val: string) {
+    if (!val || val.length < 2) {
+      return
+    }
+    let { data } = await queryArea(val, '上海')
+    this.shopListOptions.length = 0
+    for(let d of data.records) {
+      d.showStr = `${d.title}(${d.city}-${d.district})`
+    }
+    this.shopListOptions = data.records
+  }
+  private areaSelectChange(val: any) {
+    let result
+    for (let d of this.shopListOptions) {
+      if (d.title == val) {
+        result = d
+        break
+      }
+    }
+    console.log(result)
+    if (result) {
+      this.postForm.address = result.address
+      this.postForm.areaCode = result.adcode
+    }
+  }
+
+  /**
+   * end of tencent map
+   */
 }
 </script>