优化店铺信息

src/views/shop/components/addShop.vue

@@ -5,7 +5,7 @@
                 <el-form-item label="店铺名称" prop="shopName">
                     <el-input v-model="form.shopName" placeholder="请输入门店名称"></el-input>
                 </el-form-item>
-                <el-form-item label="连锁店扩展店名" prop="chainName">
+                <el-form-item label="连锁店扩展店名">
                     <el-input v-model="form.chainName" placeholder="请输入连锁店扩展店名"></el-input>
                 </el-form-item>
                 <el-form-item label="门店logo" prop="logo">
@@ -50,7 +50,7 @@
                     <el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
                         :min="0"></el-input-number>
                 </el-form-item> -->
-                <el-form-item label="店铺经度">
+                <el-form-item label="店铺经度" prop="provinces">
                     <el-row>
                         <el-col :span="9" v-if="form.provinces">
                             <el-input :value="`${form.provinces}-${form.cities}-${form.districts}`" disabled />
@@ -189,11 +189,11 @@ export default {
                         trigger: 'blur'
                     }
                 ],
-                chainName: [
+                provinces: [
                     {
                         required: true,
-                        message: ' ',
+                        message: '请选择坐标',
-                        trigger: 'blur'
+                        trigger: 'change'
                     }
                 ],
                 logo: [

src/views/shop/components/shopInfo.vue

@@ -1,118 +1,76 @@
 <template>
   <div>
     <div>
-      <el-form
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
-        ref="form"
-        :model="form"
-        :rules="rules"
-        label-width="120px"
-        label-position="left"
-      >
         <el-form-item label="门店名称" prop="shopName">
-          <el-input
+          <el-input v-model="form.shopName" placeholder="请输入门店名称" style="width: 500px;"></el-input>
-            v-model="form.shopName"
+        </el-form-item>
-            placeholder="请输入门店名称"
+        <el-form-item label="连锁店扩展店名">
-            style="width: 500px;"
+          <el-input v-model="form.chainName" placeholder="请输入连锁店扩展店名" style="width: 500px;"></el-input>
-          ></el-input>
         </el-form-item>
         <el-form-item label="门店logo">
-          <el-image
+          <el-image :src="form.logo || require('@/assets/images/upload.png')" fit="contain"
-            :src="form.logo || require('@/assets/images/upload.png')"
+            style="width: 80px;height: 80px;" @click="
-            fit="contain"
-            style="width: 80px;height: 80px;"
-            @click="
               showUpload = true;
-              uploadIndex = 1;
+            uploadIndex = 1;
-            "
+            "></el-image>
-          ></el-image>
         </el-form-item>
         <el-form-item label="门店照片">
-          <el-image
+          <el-image :src="form.coverImg || require('@/assets/images/upload.png')" fit="contain"
-            :src="form.coverImg || require('@/assets/images/upload.png')"
+            style="width: 80px;height: 80px;" @click="
-            fit="contain"
-            style="width: 80px;height: 80px;"
-            @click="
               showUpload = true;
-              uploadIndex = 2;
+            uploadIndex = 2;
-            "
+            "></el-image>
-          ></el-image>
         </el-form-item>
         <el-form-item label="微信二维码">
-          <el-image
+          <el-image :src="form.shopQrcode || require('@/assets/images/upload.png')" fit="contain"
-            :src="form.shopQrcode || require('@/assets/images/upload.png')"
+            style="width: 80px;height: 80px;" @click="
-            fit="contain"
-            style="width: 80px;height: 80px;"
-            @click="
               showUpload = true;
-              uploadIndex = 3;
+            uploadIndex = 3;
-            "
+            "></el-image>
-          ></el-image>
         </el-form-item>
         <el-form-item label="联系电话" prop="phone">
-          <el-input
+          <el-input v-model="form.phone" placeholder="请输入联系电话" style="width: 500px;"></el-input>
-            v-model="form.phone"
-            placeholder="请输入联系电话"
-            style="width: 500px;"
-          ></el-input>
         </el-form-item>
         <!-- <el-form-item label="外卖起送金额">
                     <el-input-number v-model="form.takeaway_money" placeholder="0.00" controls-position="right"
                         :min="0"></el-input-number>
                 </el-form-item> -->
-        <el-form-item label="店铺经度">
+        <el-form-item label="店铺经度" prop="provinces">
           <el-row>
-            <el-col :span="4">
+            <el-col :span="9" v-if="form.provinces">
-              <el-input v-model="form.lng" placeholder="经度"></el-input>
+              <el-input :value="`${form.provinces}-${form.cities}-${form.districts}`" disabled />
+            </el-col>
+            <el-col :span="4" v-if="form.lng">
+              <el-input v-model="form.lng" placeholder="经度" disabled></el-input>
+            </el-col>
+            <el-col :span="4" v-if="form.lng">
+              <el-input v-model="form.lat" placeholder="纬度" disabled></el-input>
             </el-col>
             <el-col :span="4">
-              <el-input
+              <el-button type="primary" plain icon="el-icon-place" @click="showLocation = true">选择坐标</el-button>
-                v-model="form.lat"
-                placeholder="纬度"
-                style="margin-left: 10px;"
-              ></el-input>
-            </el-col>
-            <el-col :span="4">
-              <el-button
-                type="primary"
-                plain
-                icon="el-icon-place"
-                style="margin-left: 20px;"
-                @click="showLocation = true"
-                >选择坐标</el-button
-              >
             </el-col>
           </el-row>
           <div style="color: #999;">注：准确的定位便于用户导航到店铺</div>
         </el-form-item>
         <el-form-item label="门店详细地址">
-          <el-input
+          <el-input type="textarea" v-model="form.address" placeholder="请输入门店详细地址" style="width: 500px;"></el-input>
-            type="textarea"
-            v-model="form.address"
-            placeholder="请输入门店详细地址"
-            style="width: 500px;"
-          ></el-input>
         </el-form-item>
         <el-form-item label="营业时间">
-          <el-time-picker
+          <el-select v-model="form.businessStartDay" placeholder="周几开始">
-            placeholder="起始时间"
+            <el-option :value="item.label" :label="item.label" v-for="item in weeks" :key="item.value"></el-option>
-            v-model="startTime"
+          </el-select>
-            :picker-options="{
+          <el-select v-model="form.businessEndDay" placeholder="周几结束">
-              selectableRange: '00:00:00 - 23:59:59',
+            <el-option :value="item.label" :label="item.label" v-for="item in weeks" :key="item.value"></el-option>
-              format: 'HH:mm'
+          </el-select>
-            }"
+          <el-time-picker placeholder="起始时间" v-model="startTime" :picker-options="{
-            format="HH:mm"
+            selectableRange: '00:00:00 - 23:59:59',
-            value-format="HH:mm"
+            format: 'HH:mm'
-          >
+          }" format="HH:mm" value-format="HH:mm">
           </el-time-picker>
-          <el-time-picker
+          <el-time-picker placeholder="结束时间" v-model="endTime" :picker-options="{
-            placeholder="结束时间"
+            selectableRange: `${startTime}:00 - 23:59:59`
-            v-model="endTime"
+          }" format="HH:mm" value-format="HH:mm">
-            :picker-options="{
-              selectableRange: `${startTime}:00 - 23:59:59`
-            }"
-            format="HH:mm"
-            value-format="HH:mm"
-          >
           </el-time-picker>
         </el-form-item>
         <!-- <el-form-item label="结算类型">
@@ -135,12 +93,7 @@
           </el-time-picker>
         </el-form-item> -->
         <el-form-item label="店铺简介">
-          <el-input
+          <el-input type="textarea" v-model="form.detail" placeholder="请输入店铺简介" style="width: 500px;"></el-input>
-            type="textarea"
-            v-model="form.detail"
-            placeholder="请输入店铺简介"
-            style="width: 500px;"
-          ></el-input>
         </el-form-item>
         <el-form-item label="状态">
           <el-radio-group v-model="form.status">
@@ -149,11 +102,7 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item>
-          <el-button
+          <el-button type="primary" @click="submitHandle" :loading="formLoading">
-            type="primary"
-            @click="submitHandle"
-            :loading="formLoading"
-          >
             <span v-if="!formLoading">保存</span>
             <span v-else>保存中...</span>
           </el-button>
@@ -168,10 +117,7 @@
           </el-amap>
         </div>
         <div class="search_box">
-          <el-amap-search-box
+          <el-amap-search-box :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
-            :search-option="searchOption"
-            :on-search-result="onSearchResult"
-          ></el-amap-search-box>
         </div>
 
         <div class="search_wrap">
@@ -189,23 +135,10 @@
         </div>
       </div>
     </el-dialog>
-    <el-dialog
+    <el-dialog :visible.sync="showUpload" :close-on-click-modal="false" append-to-body width="500px"
-      :visible.sync="showUpload"
+      @close="showUpload = false">
-      :close-on-click-modal="false"
+      <el-upload :before-remove="handleBeforeRemove" :on-success="handleSuccess" :on-error="handleError"
-      append-to-body
+        :file-list="fileList" :headers="headers" :action="qiNiuUploadApi" class="upload-demo" multiple>
-      width="500px"
-      @close="showUpload = false"
-    >
-      <el-upload
-        :before-remove="handleBeforeRemove"
-        :on-success="handleSuccess"
-        :on-error="handleError"
-        :file-list="fileList"
-        :headers="headers"
-        :action="qiNiuUploadApi"
-        class="upload-demo"
-        multiple
-      >
         <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" style="display: block;" class="el-upload__tip">
           请勿上传违法文件，且文件不超过15M
@@ -223,6 +156,7 @@ import { getToken } from "@/utils/auth";
 import { mapGetters } from "vuex";
 import crudQiNiu from "@/api/tools/qiniu";
 import { tbShopInfo, tbShopInfoPut } from "@/api/user";
+import { geocode } from '@/api/shop'
 export default {
   computed: {
     ...mapGetters(["qiNiuUploadApi"])
@@ -272,7 +206,37 @@ export default {
       amapOptions: {
         center: [108.946465, 34.347984],
         position: []
-      }
+      },
+      weeks: [
+        {
+          value: '1',
+          label: '周一'
+        },
+        {
+          value: '2',
+          label: '周二'
+        },
+        {
+          value: '3',
+          label: '周三'
+        },
+        {
+          value: '4',
+          label: '周四'
+        },
+        {
+          value: '5',
+          label: '周五'
+        },
+        {
+          value: '6',
+          label: '周六'
+        },
+        {
+          value: '7',
+          label: '周天'
+        }
+      ]
     };
   },
   mounted() {
@@ -284,10 +248,19 @@ export default {
       this.amapOptions.center = [res[0].lng, res[0].lat];
     },
     // 确认地址选择
-    selectLocationHandle(item) {
+    async selectLocationHandle(item) {
       this.form.lng = item.lng;
       this.form.lat = item.lat;
+      this.form.address = item.address
       this.showLocation = false;
+
+      const position = `${item.lng},${item.lat}`;
+      const res = JSON.parse(await geocode({ location: position }))
+      console.log(res);
+
+      this.form.provinces = res.addressComponent.province
+      this.form.cities = res.addressComponent.city
+      this.form.districts = res.addressComponent.district
     },
     // 获取用户详情
     async tbShopInfo() {
@@ -300,7 +273,7 @@ export default {
           this.startTime = businessTime[0];
           this.endTime = businessTime[1];
         }
-      } catch (error) {}
+      } catch (error) { }
     },
     // 保存
     submitHandle() {
@@ -319,7 +292,7 @@ export default {
               message: "提交成功",
               type: "success"
             });
-          } catch (error) {}
+          } catch (error) { }
         }
       });
     },
@@ -333,7 +306,7 @@ export default {
     handleBeforeRemove(file, fileList) {
       for (let i = 0; i < this.files.length; i++) {
         if (this.files[i].uid === file.uid) {
-          crudQiNiu.del([this.files[i].id]).then(res => {});
+          crudQiNiu.del([this.files[i].id]).then(res => { });
           return true;
         }
       }