新增机构配置修改保存功能

.env.development

@@ -18,11 +18,13 @@ CIMEI_LOCAL = 'https://www-b.caimei365.com'
 
 # 项目运行地址
 # HOST = '192.168.2.92'
-HOST = '192.168.2.93'
+# HOST = '192.168.2.93'
+HOST = "localhost"
 # HOST = '192.168.1.102'
 
 # 项目端口号
-PORT = '8888'
+# PORT = '8888'
+PORT = '8080'
 
 # HTTPS flag
 HTTPS = false

apis/module/auth.js

@@ -2,75 +2,61 @@ export default ($axios) => {
   const authApis = {}
 
   // 获取已认证机构列表
-  authApis.getAuthClubList = (params = {}) =>
-    $axios.get('/wx/auth/club/list', { params })
+  authApis.getAuthClubList = (params = {}) => $axios.get('/wx/auth/club/list', { params })
 
   // 获取已认证机构列表
-  authApis.getAuthClubStarList = (params = {}) =>
-    $axios.get('/wx/auth/club/star/list', { params })
+  authApis.getAuthClubStarList = (params = {}) => $axios.get('/wx/auth/club/star/list', { params })
 
   // 获取已认证机构详情
-  authApis.getAuthClubDetail = (params = {}) =>
-    $axios.get('/wx/auth/club/details', { params })
+  authApis.getAuthClubDetail = (params = {}) => $axios.get('/wx/auth/club/details', { params })
 
   // 获取已认证商品分类
-  authApis.getAuthProductCateList = (params = {}) =>
-    $axios.get('/wx/auth/product/type/list', { params })
+  authApis.getAuthProductCateList = (params = {}) => $axios.get('/wx/auth/product/type/list', { params })
 
   // 获取已认证商品列表
-  authApis.getAuthProductList = (params = {}) =>
-    $axios.get('/wx/auth/product/list', { params })
+  authApis.getAuthProductList = (params = {}) => $axios.get('/wx/auth/product/list', { params })
 
   // 获取供应商信息
-  authApis.fetchSupplierInfo = (params = {}) =>
-    $axios.get('/wx/auth/shop/info', { params })
+  authApis.fetchSupplierInfo = (params = {}) => $axios.get('/wx/auth/shop/info', { params })
 
   // 获取医师列表
-  authApis.fetchDoctorList = (params = {}) =>
-    $axios.get('/wx/auth/doctor/list', { params })
+  authApis.fetchDoctorList = (params = {}) => $axios.get('/wx/auth/doctor/list', { params })
 
   // 获取医师详情
-  authApis.fetchDoctorDetail = (params = {}) =>
-    $axios.get('/wx/auth/doctor/details', { params })
+  authApis.fetchDoctorDetail = (params = {}) => $axios.get('/wx/auth/doctor/details', { params })
 
   // 获取设备分类列表
-  authApis.fetchProductSelectList = (params = {}) =>
-    $axios.get('/wx/auth/product/type/select', { params })
+  authApis.fetchProductSelectList = (params = {}) => $axios.get('/wx/auth/product/type/select', { params })
 
   // 获取品牌列表
-  authApis.fetchBrandList = (params = {}) =>
-    $axios.get('/wx/auth/shop/info/list', { params })
+  authApis.fetchBrandList = (params = {}) => $axios.get('/wx/auth/shop/info/list', { params })
 
   // 查询机构认证信息
-  authApis.fetchClubAuthInfoData = (params = {}) =>
-    $axios.get('/wx/auth/form/data', { params })
+  authApis.fetchClubAuthInfoData = (params = {}) => $axios.get('/wx/auth/form/data', { params })
 
   // 查询机构认证信息
   authApis.authClubSave = (data = {}) => $axios.post('/wx/auth/save', data)
 
   // 查询授权商品列表
-  authApis.getClubAuthProductList = (params = {}) =>
-    $axios.get('/wx/auth/product/list', { params })
+  authApis.getClubAuthProductList = (params = {}) => $axios.get('/wx/auth/product/list', { params })
 
   // 查询授权商品列表
-  authApis.getProductDetails = (params = {}) =>
-    $axios.get('/wx/auth/product/form/data', { params })
+  authApis.getProductDetails = (params = {}) => $axios.get('/wx/auth/product/form/data', { params })
 
   // 编辑保存授权商品
-  authApis.authProducSave = (data = {}) =>
-    $axios.post('/wx/auth/product/save', data)
+  authApis.authProducSave = (data = {}) => $axios.post('/wx/auth/product/save', data)
 
   // 查询授权商品列表
-  authApis.fetchProductDetails = (params = {}) =>
-    $axios.get('/wx/auth/product/details', { params })
+  authApis.fetchProductDetails = (params = {}) => $axios.get('/wx/auth/product/details', { params })
 
   // 查询授权商品列表
-  authApis.fetchDetialBySnCode = (params = {}) =>
-    $axios.get('/wx/auth/product/info', { params })
+  authApis.fetchDetialBySnCode = (params = {}) => $axios.get('/wx/auth/product/info', { params })
+
+  // 修改机构认证信息
+  authApis.authEdit = (data = {}) => $axios.post('/auth/save', data)
 
   // 获取机构已认证设备
-  authApis.fetchClubAuthProductList = (params = {}) =>
-    $axios.get('/wx/auth/get/product/list', { params })
+  authApis.fetchClubAuthProductList = (params = {}) => $axios.get('/wx/auth/get/product/list', { params })
 
   return authApis
 }

pages/_template/app/center/club-detail.vue

@@ -3,75 +3,80 @@
     <div class="page-top"></div>
     <div class="page-content">
       <div class="title">机构认证信息</div>
+      <div class="updated">
+        <el-button type="text" size="default" @click="editData">{{ status ? '修改' : '保存' }}</el-button>
+      </div>
       <template v-if="!isAuth">
         <div class="tip">抱歉，您暂未认证机构</div>
         <div class="btn" @click="toAuth">去认证</div>
       </template>
       <template v-else>
-        <div class="row">
-          <div class="col label">机构名称：</div>
-          <div class="col content">{{ clubInfo.authParty }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">联系电话：</div>
-          <div class="col content">{{ clubInfo.mobile }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">运营联系人：</div>
-          <div class="col content">{{ clubInfo.linkMan }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">运营联系人手机号：</div>
-          <div class="col content">{{ clubInfo.linkMobile }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">所在地区：</div>
-          <div class="col content">{{ clubInfo.area }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">详细地址：</div>
-          <div class="col content">{{ clubInfo.address }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">所在位置：</div>
-          <div class="col content">
-            <div class="postion-btn" @click="initMap">查看定位</div>
+        <div v-if="status">
+          <div class="row">
+            <div class="col label">机构名称：</div>
+            <div class="col content">{{ clubInfo.authParty }}</div>
           </div>
-        </div>
-        <div class="row block">
-          <div class="col label">logo：</div>
-          <div class="col content">
-            <el-image :src="clubInfo.logo" v-if="clubInfo.logo"></el-image>
+          <div class="row">
+            <div class="col label">联系电话：</div>
+            <div class="col content">{{ clubInfo.mobile }}</div>
           </div>
-        </div>
-        <div class="row block">
-          <div class="col label">门头照：</div>
-          <div class="col content">
-            <template v-for="(image, index) in clubInfo.bannerList">
-              <el-image :src="image" :key="index"></el-image>
-            </template>
+          <div class="row">
+            <div class="col label">运营联系人：</div>
+            <div class="col content">{{ clubInfo.linkMan }}</div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col label">机构类型：</div>
-          <div class="col content">{{ firstClubTypeName }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">医美类型：</div>
-          <div class="col content">{{ secondClubTypeName }}</div>
-        </div>
-        <div class="row block">
-          <div class="col label">医疗许可证：</div>
-          <div class="col content">
-            <el-image
-              :src="clubInfo.medicalLicenseImage"
-              v-if="clubInfo.medicalLicenseImage"
-            ></el-image>
+          <div class="row">
+            <div class="col label">运营联系人手机号：</div>
+            <div class="col content">{{ clubInfo.linkMobile }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">所在地区：</div>
+            <div class="col content">{{ clubInfo.area }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">详细地址：</div>
+            <div class="col content">{{ clubInfo.address }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">所在位置：</div>
+            <div class="col content">
+              <div class="postion-btn" @click="initMap">查看定位</div>
+            </div>
+          </div>
+          <div class="row block">
+            <div class="col label">logo：</div>
+            <div class="col content">
+              <el-image :src="clubInfo.logo" v-if="clubInfo.logo"></el-image>
+            </div>
+          </div>
+          <div class="row block">
+            <div class="col label">门头照：</div>
+            <div class="col content">
+              <template v-for="(image, index) in clubInfo.bannerList">
+                <el-image :src="image" :key="index"></el-image>
+              </template>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col label">机构类型：</div>
+            <div class="col content">{{ firstClubTypeName }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">医美类型：</div>
+            <div class="col content">{{ secondClubTypeName }}</div>
+          </div>
+          <div class="row block">
+            <div class="col label">医疗许可证：</div>
+            <div class="col content">
+              <el-image :src="clubInfo.medicalLicenseImage" v-if="clubInfo.medicalLicenseImage"></el-image>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col label">员工人数：</div>
+            <div class="col content">{{ clubInfo.empNum }}</div>
           </div>
         </div>
-        <div class="row">
-          <div class="col label">员工人数：</div>
-          <div class="col content">{{ clubInfo.empNum }}</div>
+        <div v-else>
+          <FormClubInfo ref="clubInfoForm" @step="onClubInfoFormStep" :clubInfo="clubInfo" />
         </div>
       </template>
     </div>
@@ -81,12 +86,7 @@
         <SimpleAMap ref="aMap" :lnglat="lnglat" />
         <div class="position-select-footer">
           <div class="lnglat">当前经纬度：{{ clubInfo.lngAndLat }}</div>
-          <div
-            class="position-confirm postion-control"
-            @click="mapVisiable = false"
-          >
-            确定
-          </div>
+          <div class="position-confirm postion-control" @click="mapVisiable = false">确定</div>
         </div>
       </div>
     </div>
@@ -95,14 +95,18 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import FormClubInfo from '../form/components/form-club-edit.vue'
 export default {
   layout: 'app-normal',
   data() {
     return {
       mapVisiable: false,
       clubInfo: {},
+      status: true,
+      clubData: {},
     }
   },
+  components: { FormClubInfo },
   computed: {
     ...mapGetters(['userInfo', 'routePrefix']),
     isAuth() {
@@ -110,15 +114,11 @@ export default {
     },
     firstClubTypeName() {
       if (!this.clubInfo.firstClubType) return '其他'
-      return ['医美', '生美', '项目公司', '个人', '其他'][
-        this.clubInfo.firstClubType - 1
-      ]
+      return ['医美', '生美', '项目公司', '个人', '其他'][this.clubInfo.firstClubType - 1]
     },
     secondClubTypeName() {
       if (!this.clubInfo.secondClubType) return '其他'
-      return ['诊所', '门诊', '医院', '其他', '美容院', '养生馆', '其他'][
-        this.clubInfo.secondClubType - 1
-      ]
+      return ['诊所', '门诊', '医院', '其他', '美容院', '养生馆', '其他'][this.clubInfo.secondClubType - 1]
     },
     lnglat() {
       return this.clubInfo.lngAndLat ? this.clubInfo.lngAndLat.split(',') : null
@@ -150,6 +150,27 @@ export default {
         this.$refs.aMap.init()
       })
     },
+    // 修该数据
+    editData() {
+      this.status = !this.status
+      if (this.status) {
+        this.$refs.clubInfoForm.validate && this.$refs.clubInfoForm.validate()
+      }
+    },
+    async onClubInfoFormStep(authdata) {
+      console.log(authdata)
+      this.$toast.loading({
+        message: '正在保存请稍后...',
+        duration: 1000,
+      })
+
+      // try {
+      //   const data = await this.$http.api.authEdit(authdata)
+      //   console.log(data)
+      // } catch (e) {
+      //   console.log(e)
+      // }
+    },
   },
 }
 </script>
@@ -159,6 +180,7 @@ export default {
   .page {
     display: flex;
     justify-content: center;
+    position: relative;
   }
 
   .position-select {
@@ -225,6 +247,18 @@ export default {
   .page-content {
     max-width: 760px;
     padding-bottom: 167px;
+    .updated {
+      position: absolute;
+      top: 50px;
+      right: 200px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      ::v-deep .el-button--text {
+        color: blue;
+        font-size: 24px;
+      }
+    }
     .title {
       font-size: 24px;
       color: #282828;
@@ -244,7 +278,7 @@ export default {
     .btn {
       width: 98px;
       height: 36px;
-      background: #BC1724;
+      background: #bc1724;
       border-radius: 4px;
       text-align: center;
       line-height: 36px;
@@ -298,8 +332,7 @@ export default {
             display: inline-block;
             width: 16px;
             height: 16px;
-            background: url(~assets/theme-images/common/icon-position.png)
-              no-repeat center;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
             background-size: 16px 16px;
           }
         }
@@ -312,6 +345,7 @@ export default {
   .page {
     display: flex;
     justify-content: center;
+    position: relative;
   }
 
   .position-select {
@@ -377,6 +411,18 @@ export default {
 
   .page-content {
     padding: 0 4vw;
+    .updated {
+      position: absolute;
+      top: 5.5vw;
+      right: 4vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      ::v-deep .el-button--text {
+        color: blue;
+        font-size: 4.2vw;
+      }
+    }
     .title {
       font-size: 4.2vw;
       color: #282828;
@@ -396,7 +442,7 @@ export default {
     .btn {
       width: 36vw;
       height: 8.8vw;
-      background: #BC1724;
+      background: #bc1724;
       border-radius: 0.4vw;
       text-align: center;
       line-height: 8.8vw;
@@ -456,8 +502,7 @@ export default {
             display: inline-block;
             width: 3.58vw;
             height: 3.58vw;
-            background: url(~assets/theme-images/common/icon-position.png)
-              no-repeat center;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
             background-size: 3.58vw;
           }
         }

pages/_template/app/form/components/form-club-edit.vue

@@ -0,0 +1,746 @@
+<template>
+  <div class="club-info">
+    <el-form :model="formData" :rules="rules" ref="form" label-position="left">
+      <el-form-item prop="name" label="机构名称:">
+        <el-input
+          placeholder="请输入机构名称"
+          :disabled="true"
+          v-model="formData.name"
+          maxlength="50"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="联系电话:">
+        <el-input placeholder="请输入对外联系电话" v-model="formData.mobile"></el-input>
+      </el-form-item>
+      <el-form-item prop="linkMan" label="运营联系人:">
+        <el-input placeholder="请输入运营联系人" v-model="formData.linkMan"></el-input>
+      </el-form-item>
+      <el-form-item prop="linkMobile" label="运营联系人手机号:">
+        <el-input placeholder="请输入运营联系人手机号" v-model="formData.linkMobile"></el-input>
+      </el-form-item>
+      <el-form-item prop="address" label="所在地区:">
+        <br />
+        <input type="text" v-model="formData.address" v-show="false" />
+        <div class="flex items-center justify-between">
+          <el-select placeholder="请选择" v-model="formData.provinceId" @change="onProvinceChange">
+            <template v-for="item in provinceList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.cityId" @change="onCityChange" class="mx-2">
+            <template v-for="item in cityList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.townId" @change="onTownChange">
+            <template v-for="item in townList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+        </div>
+        <el-input
+          class="mt-4"
+          type="textarea"
+          :rows="4"
+          v-model="formData.fullAddress"
+          @input="onFullAddressInput"
+          placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="point" label="">
+        <div class="normal-row">
+          <div class="label"><i>*</i>所在位置:<span>（提示:打开地图，将定位图标移到具体位置）</span></div>
+
+          <div class="postion-btn" @click="initMap">定位</div>
+        </div>
+        <el-input v-model="formData.point" disabled></el-input>
+      </el-form-item>
+      <el-form-item prop="logoImage" label="logo:">
+        <br />
+        <el-input v-show="false" v-model="formData.logoImage" />
+        <SimpleUploadImage
+          :limit="1"
+          :image-list="logoList"
+          :before-upload="beforeLogoUpload"
+          @success="uploadLogoSuccess"
+          @remove="handleLogoRemove"
+        />
+      </el-form-item>
+      <el-form-item prop="banner">
+        <div class="normal-row">
+          <div class="label"><i>*</i>门头照:<span>（可上传6张）</span></div>
+          <el-input v-show="false" v-model="formData.banner" />
+          <SimpleUploadImage
+            :limit="6"
+            :image-list="bannerList"
+            :before-upload="beforeBannerUpload"
+            @success="uploadBannerSuccess"
+            @remove="handleBannerRemove"
+          />
+        </div>
+      </el-form-item>
+
+      <el-form-item label="机构类型:" prop="firstClubType">
+        <!-- <el-radio-group v-model="formData.firstClubType">
+          <el-radio :label="1">医美</el-radio>
+          <el-radio :label="2">生美</el-radio>
+          <el-radio :label="3">项目公司</el-radio>
+          <el-radio :label="4">个人</el-radio>
+          <el-radio :label="5">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.firstClubType" :list="clubTypeList" />
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 1" label="医美类型:" prop="secondClubType">
+        <!-- <el-radio-group v-model="formData.secondClubType">
+          <el-radio :label="1">诊所</el-radio>
+          <el-radio :label="2">门诊</el-radio>
+          <el-radio :label="3">医院</el-radio>
+          <el-radio :label="4">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.secondClubType" :list="medicalTypeList1" type="rect" />
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 2" label="生美类型:" prop="secondClubType">
+        <!-- <el-radio-group v-model="formData.secondClubType">
+          <el-radio :label="5">美容院</el-radio>
+          <el-radio :label="6">养生馆</el-radio>
+          <el-radio :label="7">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.secondClubType" :list="medicalTypeList2" type="rect" />
+      </el-form-item>
+
+      <el-form-item label="医疗许可证:" prop="medicalLicenseImage" v-if="formData.firstClubType === 1">
+        <br />
+        <el-input v-show="false" v-model="formData.medicalLicenseImage" />
+        <SimpleUploadImage
+          :limit="1"
+          :image-list="licenseImageList"
+          :before-upload="beforeLicenseImageUpload"
+          @success="uploadLicenseImageSuccess"
+          @remove="handleLicenseImageRemove"
+        />
+      </el-form-item>
+
+      <el-form-item label="员工人数:" prop="empNum">
+        <el-input v-model.number="formData.empNum" placeholder="请输入员工人数" clearable />
+      </el-form-item>
+    </el-form>
+
+    <div class="position-select" v-if="mapVisiable">
+      <div class="position-select-container">
+        <SimpleAMap @position="onPosition" ref="aMap" :lnglat="lnglat" :address="fullAddress" />
+        <div class="position-select-footer">
+          <div class="lnglat">当前经纬度：{{ lgnlatText }}</div>
+          <div class="position-cancel postion-control" @click="mapVisiable = false">取消</div>
+          <div class="position-confirm postion-control" @click="mapVisiable = false">确定</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SimpleUploadImage from '@/components/SimpleUploadImage'
+import SimpleRadio from '@/components/SimpleRadio'
+import { isPoint, isNumber } from '@/utils/validator'
+import { mapGetters } from 'vuex'
+export default {
+  components: {
+    SimpleUploadImage,
+    SimpleRadio,
+  },
+  props: {
+    clubInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    var validatePoint = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('经纬度坐标不能为空'))
+      } else {
+        if (isPoint(value)) {
+          callback()
+        } else {
+          callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
+        }
+      }
+    }
+
+    var validateMobile = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('联系方式不能为空'))
+      } else {
+        if (isNumber(value)) {
+          callback()
+        } else {
+          callback(new Error('联系方式格式不正确'))
+        }
+      }
+    }
+
+    var validateAddress = (rule, value, callback) => {
+      if (!this.formData.provinceId || !this.formData.cityId || !this.formData.townId || !this.formData.fullAddress) {
+        callback(new Error('请输入完整的地址'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      clubTypeList: [
+        { value: 1, name: '医美' },
+        { value: 2, name: '生美' },
+        { value: 3, name: '项目公司' },
+        { value: 4, name: '个人' },
+        { value: 5, name: '其他' },
+      ],
+      medicalTypeList1: [
+        { value: 1, name: '诊所' },
+        { value: 2, name: '门诊' },
+        { value: 3, name: '医院' },
+        { value: 4, name: '其他' },
+      ],
+      medicalTypeList2: [
+        { value: 5, name: '美容院' },
+        { value: 6, name: '养生馆' },
+        { value: 7, name: '其他' },
+      ],
+      active: true,
+      lnglat: null,
+      mapVisiable: false,
+      formData: {
+        name: '',
+        address: '',
+        fullAddress: '',
+        point: '',
+        mobile: '',
+        userMobile: '',
+        logoImage: '',
+        banner: '',
+        customFlag: 0,
+        remarks: '',
+        empNum: '',
+        firstClubType: 1,
+        secondClubType: 1,
+        medicalLicenseImage: '',
+        provinceId: '',
+        cityId: '',
+        townId: '',
+        linkMan: '',
+        linkMobile: '',
+      },
+      rules: {
+        name: [{ required: true, message: '机构名称不能为空', trigger: ['blur'] }],
+        logoImage: [{ required: true, message: '请上传logo', trigger: ['change'] }],
+        mobile: [
+          {
+            required: true,
+            validator: validateMobile,
+            trigger: ['blur', 'change'],
+          },
+        ],
+        point: [
+          {
+            required: true,
+            validator: validatePoint,
+            trigger: ['change'],
+          },
+        ],
+        address: [
+          {
+            required: true,
+            message: '所在地区不能为空',
+            trigger: ['change'],
+          },
+          {
+            validator: validateAddress,
+            trigger: ['change'],
+          },
+        ],
+        banner: [
+          {
+            required: true,
+            message: '门头照不能为空',
+            trigger: ['change'],
+          },
+        ],
+        empNum: [{ required: true, message: '员工人数不能为空', trigger: ['blur'] }],
+        firstClubType: [{ required: true, message: '机构类型不能为空', trigger: ['change'] }],
+        secondClubType: [
+          {
+            required: true,
+            message: '医美类型/生美类型不能为空',
+            trigger: ['change'],
+          },
+        ],
+        medicalLicenseImage: [
+          {
+            required: true,
+            message: '医疗许可证不能为空',
+            trigger: ['change'],
+          },
+        ],
+      },
+      // logo图片列表
+      logoList: [],
+      // banner图片列表
+      bannerList: [],
+      // 级联选择的地址
+      address: '',
+      // 医疗许可证图片
+      licenseImageList: [],
+
+      provinceList: [],
+    }
+  },
+
+  watch: {
+    'formData.firstClubType': function (nVal, oVal) {
+      if (nVal === 1) {
+        this.formData.secondClubType = 1
+      } else if (nVal === 2) {
+        this.formData.secondClubType = 5
+      } else {
+        this.formData.secondClubType = ''
+      }
+    },
+  },
+  computed: {
+    ...mapGetters(['authUserId']),
+    lgnlatText() {
+      return this.lnglat ? this.lnglat.join(',') : ''
+    },
+    cityList() {
+      const province = this.provinceList.find((item) => item.id === this.formData.provinceId)
+      if (province) {
+        return province.children
+      }
+      return []
+    },
+    townList() {
+      const city = this.cityList.find((item) => item.id === this.formData.cityId)
+      if (city) {
+        return city.children
+      }
+      return []
+    },
+
+    fullAddress() {
+      let str = ''
+      this.provinceList.forEach((pro) => {
+        if (pro.id === this.formData.provinceId) {
+          str += pro.name
+          pro.children.forEach((city) => {
+            if (city.id === this.formData.cityId) {
+              str += city.name
+              city.children.forEach((town) => {
+                if (town.id === this.formData.townId) {
+                  str += town.name
+                }
+              })
+            }
+          })
+        }
+      })
+      return (str += this.formData.fullAddress)
+    },
+  },
+  created() {
+    this.init(this.clubInfo)
+    this.fetchAllCityList()
+  },
+  methods: {
+    // 地图定位
+    initMap() {
+      this.mapVisiable = true
+      this.$nextTick(() => {
+        this.$refs.aMap.init()
+      })
+    },
+
+    onPosition(lnglat) {
+      console.log(lnglat)
+      this.lnglat = [lnglat.lng, lnglat.lat]
+      this.formData.point = this.lnglat.join(',')
+    },
+
+    async fetchAllCityList() {
+      try {
+        const res = await this.$http.api.fetchAllCityList()
+        console.log(res)
+        this.provinceList = res.data
+        return res
+      } catch (error) {
+        console.log(error)
+        return Promise.reject(error)
+      }
+    },
+
+    genetageFormData() {
+      return {
+        customFlag: 0,
+        authParty: this.formData.name,
+        authUserId: this.authUserId,
+        provinceId: this.formData.provinceId,
+        cityId: this.formData.cityId,
+        townId: this.formData.townId,
+        address: this.formData.fullAddress,
+        mobile: this.formData.mobile,
+        logo: this.formData.logoImage,
+        lngAndLat: this.lgnlatText,
+        remarks: this.formData.remarks,
+        empNum: this.formData.empNum,
+        firstClubType: this.formData.firstClubType,
+        secondClubType: this.formData.secondClubType,
+        medicalLicenseImage: this.formData.medicalLicenseImage,
+        linkMan: this.formData.linkMan,
+        linkMobile: this.formData.linkMobile,
+        bannerList: this.bannerList.map((item) => (item.response ? item.response.data : item.url)),
+      }
+    },
+
+    async init(formData) {
+      console.log(formData)
+      this.formData = formData
+      this.formData.fullAddress = formData.address
+      this.formData.point = formData.lngAndLat
+      this.formData.logoImage = formData.logo
+      this.formData.name = formData.authParty
+      this.onPosition(formData)
+
+      if (formData.medicalLicenseImage) {
+        this.licenseImageList = [{ name: '', url: formData.medicalLicenseImage }]
+      }
+      if (formData.logo) {
+        this.logoList = [{ name: '', url: formData.logo }]
+      }
+      this.bannerList = formData.bannerList.map((i) => ({ name: '', url: i }))
+      this.formData.banner = formData.bannerList.length > 0 ? this.formData.bannerList.length : ''
+    },
+
+    // 表单验证
+    validate() {
+      const data = this.genetageFormData()
+      this.$emit('step', data)
+      return this.$refs.form.validate()
+    },
+
+    onProvinceChange() {
+      this.formData.cityId = ''
+      this.formData.townId = ''
+      this.countAddress()
+    },
+    onCityChange() {
+      this.formData.townId = ''
+      this.countAddress()
+    },
+    onTownChange() {
+      this.countAddress()
+    },
+
+    onFullAddressInput() {
+      this.countAddress()
+    },
+
+    countAddress() {
+      this.formData.address =
+        this.formData.cityId + this.formData.provinceId + this.formData.townId + this.formData.fullAddress
+    },
+
+    // logo上传
+    uploadLogoSuccess({ response, file, fileList }) {
+      this.logoList = fileList
+      this.formData.logoImage = fileList[0].response.data
+    },
+    handleLogoRemove({ file, fileList }) {
+      this.logoList = fileList
+      this.formData.logoImage = ''
+    },
+    beforeLogoUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('上传logo图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+
+    // banner上传
+    uploadBannerSuccess({ response, file, fileList }) {
+      this.bannerList = fileList
+      console.log(this.bannerList)
+      this.formData.banner = fileList.length > 0 ? fileList.length : ''
+    },
+    handleBannerRemove({ file, fileList }) {
+      this.bannerList = fileList
+      this.formData.banner = fileList.length > 0 ? fileList.length : ''
+    },
+    beforeBannerUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('上传banner图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+
+    // 医疗许可证图片上传
+    uploadLicenseImageSuccess({ response, file, fileList }) {
+      this.licenseImageList = fileList
+      console.log(this.licenseImageList)
+      this.formData.medicalLicenseImage = response.data
+    },
+    handleLicenseImageRemove({ file, fileList }) {
+      this.licenseImageList = fileList
+      this.formData.medicalLicenseImage = ''
+    },
+    beforeLicenseImageUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('医疗许可证图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.club-info {
+  @include useTheme() {
+    ::v-deep {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        border-color: fetch('color');
+      }
+    }
+  }
+}
+
+// pc端
+@media screen and (min-width: 768px) {
+  .club-info {
+    @include useTheme() {
+      .position-select {
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.39);
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .position-select-container {
+          background: #fff;
+          width: 60%;
+          box-sizing: border-box;
+          padding: 24px;
+
+          .position-select-footer {
+            position: relative;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding-top: 24px;
+
+            .lnglat {
+              position: absolute;
+              font-size: 14px;
+              color: #666;
+
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+
+          .postion-control {
+            width: 120px;
+            height: 40px;
+            font-size: 14px;
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            margin-left: 16px;
+
+            &.position-confirm {
+              background: #f56c6c;
+              color: #fff;
+            }
+
+            &.position-cancel {
+              background: #b1b1b1;
+              color: #fff;
+            }
+          }
+        }
+      }
+
+      .normal-row {
+        position: relative;
+        .label {
+          font-size: 14px;
+          color: #606266;
+
+          i {
+            color: #f56c6c;
+            margin-right: 4px;
+          }
+
+          span {
+            color: #b2b2b2;
+          }
+        }
+        .postion-btn {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 62px;
+          height: 28px;
+          line-height: 28px;
+          font-size: 14px;
+          color: #fff;
+          background: #1890ff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
+            background-size: 16px 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+    }
+  }
+
+  .position-select {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.39);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .position-select-container {
+      background: #fff;
+      width: 80%;
+      box-sizing: border-box;
+      padding: 3.2vw;
+
+      .position-select-footer {
+        padding-top: 10vw;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .lnglat {
+          position: absolute;
+          font-size: 3.2vw;
+          color: #666;
+
+          left: 0;
+          top: 5vw;
+          transform: translateY(-50%);
+        }
+      }
+
+      .postion-control {
+        width: 16vw;
+        height: 7vw;
+        font-size: 3.4vw;
+        border-radius: 0.4vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin-left: 3.6vw;
+
+        &.position-confirm {
+          background: #f56c6c;
+          color: #fff;
+        }
+
+        &.position-cancel {
+          background: #b1b1b1;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .normal-row {
+    position: relative;
+    .label {
+      font-size: 14px;
+      color: #606266;
+
+      i {
+        color: #f56c6c;
+        margin-right: 4px;
+      }
+
+      span {
+        color: #b2b2b2;
+        font-size: 2.6vw;
+      }
+    }
+    .postion-btn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 14vw;
+      height: 6.8vw;
+      line-height: 6.8vw;
+      font-size: 3.2vw;
+      color: #fff;
+      background: #1890ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 0.4vw;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 3.58vw;
+        height: 3.58vw;
+        background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
+        background-size: 3.58vw;
+      }
+    }
+  }
+}
+</style>

pages/_template/hyt/center/club-detail.vue

@@ -3,12 +3,16 @@
     <div class="page-top"></div>
     <div class="page-content">
       <div class="title">机构认证信息</div>
+      <div class="updated">
+        <el-button type="text" size="default" @click="editData">{{ status ? '修改' : '保存' }}</el-button>
+      </div>
       <template v-if="!isAuth">
         <div class="tip">抱歉，您暂未认证机构</div>
         <div class="btn" @click="toAuth">去认证</div>
       </template>
       <template v-else>
-        <div class="row">
+        <div v-if="status">
+          <div class="row">
           <div class="col label">机构名称：</div>
           <div class="col content">{{ clubInfo.authParty }}</div>
         </div>
@@ -69,7 +73,71 @@
         <div class="row">
           <div class="col label">员工人数：</div>
           <div class="col content">{{ clubInfo.empNum }}</div>
+        </div></div>
+        <div v-else>
+          <FormClubInfo ref="clubInfoForm" @step="onClubInfoFormStep" :clubInfo="clubInfo" /></div>
+        <!-- <div class="row">
+          <div class="col label">机构名称：</div>
+          <div class="col content">{{ clubInfo.authParty }}</div>
+        </div>
+        <div class="row">
+          <div class="col label">联系电话：</div>
+          <div class="col content">{{ clubInfo.mobile }}</div>
+        </div>
+        <div class="row">
+          <div class="col label">运营联系人：</div>
+          <div class="col content">{{ clubInfo.linkMan }}</div>
+        </div>
+        <div class="row">
+          <div class="col label">运营联系人手机号：</div>
+          <div class="col content">{{ clubInfo.linkMobile }}</div>
+        </div>
+        <div class="row">
+          <div class="col label">所在地区：</div>
+          <div class="col content">{{ clubInfo.area }}</div>
+        </div>
+        <div class="row">
+          <div class="col label">详细地址：</div>
+          <div class="col content">{{ clubInfo.address }}</div>
+        </div>
+        <div class="row">
+          <div class="col label">所在位置：</div>
+          <div class="col content">
+            <div class="postion-btn" @click="initMap">查看定位</div>
+          </div>
+        </div>
+        <div class="row block">
+          <div class="col label">logo：</div>
+          <div class="col content">
+            <el-image :src="clubInfo.logo" v-if="clubInfo.logo"></el-image>
+          </div>
         </div>
+        <div class="row block">
+          <div class="col label">门头照：</div>
+          <div class="col content">
+            <template v-for="(image, index) in clubInfo.bannerList">
+              <el-image :src="image" :key="index"></el-image>
+            </template>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col label">机构类型：</div>
+          <div class="col content">{{ firstClubTypeName }}</div>
+        </div>
+        <div class="row">
+          <div class="col label">医美类型：</div>
+          <div class="col content">{{ secondClubTypeName }}</div>
+        </div>
+        <div class="row block">
+          <div class="col label">医疗许可证：</div>
+          <div class="col content">
+            <el-image :src="clubInfo.medicalLicenseImage" v-if="clubInfo.medicalLicenseImage"></el-image>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col label">员工人数：</div>
+          <div class="col content">{{ clubInfo.empNum }}</div>
+        </div> -->
       </template>
     </div>
 
@@ -87,14 +155,18 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import FormClubInfo from '../form/components/form-club-edit.vue'
 export default {
   layout: 'app-hyt',
   data() {
     return {
       mapVisiable: false,
       clubInfo: {},
+      status: true,
+      clubData: {},
     }
   },
+  components: { FormClubInfo },
   computed: {
     ...mapGetters(['userInfo', 'routePrefix']),
     isAuth() {
@@ -138,6 +210,27 @@ export default {
         this.$refs.aMap.init()
       })
     },
+    // 修该数据
+    editData() {
+      this.status = !this.status
+      if (this.status) {
+        this.$refs.clubInfoForm.validate && this.$refs.clubInfoForm.validate()
+      }
+    },
+    async onClubInfoFormStep(authdata) {
+      console.log(authdata)
+      this.$toast.loading({
+        message: '正在保存请稍后...',
+        duration: 1000,
+      })
+
+      // try {
+      //   const data = await this.$http.api.authEdit(authdata)
+      //   console.log(data)
+      // } catch (e) {
+      //   console.log(e)
+      // }
+    },
   },
 }
 </script>
@@ -148,6 +241,7 @@ export default {
     display: flex;
     justify-content: center;
     background: #fff;
+    position: relative;
   }
 
   .position-select {
@@ -214,6 +308,18 @@ export default {
   .page-content {
     max-width: 800px;
     padding-bottom: 120px;
+    .updated {
+      position: absolute;
+      top: 50px;
+      right: 200px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      ::v-deep .el-button--text {
+        color: blue;
+        font-size: 24px;
+      }
+    }
     .title {
       font-size: 24px;
       color: #282828;
@@ -300,6 +406,7 @@ export default {
   .page {
     display: flex;
     justify-content: center;
+    position: relative;
   }
 
   .position-select {
@@ -365,6 +472,18 @@ export default {
 
   .page-content {
     padding: 0 4vw;
+    .updated {
+      position: absolute;
+      top: 5.5vw;
+      right: 4vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      ::v-deep .el-button--text {
+        color: blue;
+        font-size: 4.2vw;
+      }
+    }
     .title {
       font-size: 4.2vw;
       color: #282828;

pages/_template/hyt/form/components/form-club-edit.vue

@@ -0,0 +1,746 @@
+<template>
+  <div class="club-info">
+    <el-form :model="formData" :rules="rules" ref="form" label-position="left">
+      <el-form-item prop="name" label="机构名称:">
+        <el-input
+          placeholder="请输入机构名称"
+          :disabled="true"
+          v-model="formData.name"
+          maxlength="50"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="联系电话:">
+        <el-input placeholder="请输入对外联系电话" v-model="formData.mobile"></el-input>
+      </el-form-item>
+      <el-form-item prop="linkMan" label="运营联系人:">
+        <el-input placeholder="请输入运营联系人" v-model="formData.linkMan"></el-input>
+      </el-form-item>
+      <el-form-item prop="linkMobile" label="运营联系人手机号:">
+        <el-input placeholder="请输入运营联系人手机号" v-model="formData.linkMobile"></el-input>
+      </el-form-item>
+      <el-form-item prop="address" label="所在地区:">
+        <br />
+        <input type="text" v-model="formData.address" v-show="false" />
+        <div class="flex items-center justify-between">
+          <el-select placeholder="请选择" v-model="formData.provinceId" @change="onProvinceChange">
+            <template v-for="item in provinceList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.cityId" @change="onCityChange" class="mx-2">
+            <template v-for="item in cityList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.townId" @change="onTownChange">
+            <template v-for="item in townList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+        </div>
+        <el-input
+          class="mt-4"
+          type="textarea"
+          :rows="4"
+          v-model="formData.fullAddress"
+          @input="onFullAddressInput"
+          placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="point" label="">
+        <div class="normal-row">
+          <div class="label"><i>*</i>所在位置:<span>（提示:打开地图，将定位图标移到具体位置）</span></div>
+
+          <div class="postion-btn" @click="initMap">定位</div>
+        </div>
+        <el-input v-model="formData.point" disabled></el-input>
+      </el-form-item>
+      <el-form-item prop="logoImage" label="logo:">
+        <br />
+        <el-input v-show="false" v-model="formData.logoImage" />
+        <SimpleUploadImage
+          :limit="1"
+          :image-list="logoList"
+          :before-upload="beforeLogoUpload"
+          @success="uploadLogoSuccess"
+          @remove="handleLogoRemove"
+        />
+      </el-form-item>
+      <el-form-item prop="banner">
+        <div class="normal-row">
+          <div class="label"><i>*</i>门头照:<span>（可上传6张）</span></div>
+          <el-input v-show="false" v-model="formData.banner" />
+          <SimpleUploadImage
+            :limit="6"
+            :image-list="bannerList"
+            :before-upload="beforeBannerUpload"
+            @success="uploadBannerSuccess"
+            @remove="handleBannerRemove"
+          />
+        </div>
+      </el-form-item>
+
+      <el-form-item label="机构类型:" prop="firstClubType">
+        <!-- <el-radio-group v-model="formData.firstClubType">
+          <el-radio :label="1">医美</el-radio>
+          <el-radio :label="2">生美</el-radio>
+          <el-radio :label="3">项目公司</el-radio>
+          <el-radio :label="4">个人</el-radio>
+          <el-radio :label="5">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.firstClubType" :list="clubTypeList" />
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 1" label="医美类型:" prop="secondClubType">
+        <!-- <el-radio-group v-model="formData.secondClubType">
+          <el-radio :label="1">诊所</el-radio>
+          <el-radio :label="2">门诊</el-radio>
+          <el-radio :label="3">医院</el-radio>
+          <el-radio :label="4">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.secondClubType" :list="medicalTypeList1" type="rect" />
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 2" label="生美类型:" prop="secondClubType">
+        <!-- <el-radio-group v-model="formData.secondClubType">
+          <el-radio :label="5">美容院</el-radio>
+          <el-radio :label="6">养生馆</el-radio>
+          <el-radio :label="7">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.secondClubType" :list="medicalTypeList2" type="rect" />
+      </el-form-item>
+
+      <el-form-item label="医疗许可证:" prop="medicalLicenseImage" v-if="formData.firstClubType === 1">
+        <br />
+        <el-input v-show="false" v-model="formData.medicalLicenseImage" />
+        <SimpleUploadImage
+          :limit="1"
+          :image-list="licenseImageList"
+          :before-upload="beforeLicenseImageUpload"
+          @success="uploadLicenseImageSuccess"
+          @remove="handleLicenseImageRemove"
+        />
+      </el-form-item>
+
+      <el-form-item label="员工人数:" prop="empNum">
+        <el-input v-model.number="formData.empNum" placeholder="请输入员工人数" clearable />
+      </el-form-item>
+    </el-form>
+
+    <div class="position-select" v-if="mapVisiable">
+      <div class="position-select-container">
+        <SimpleAMap @position="onPosition" ref="aMap" :lnglat="lnglat" :address="fullAddress" />
+        <div class="position-select-footer">
+          <div class="lnglat">当前经纬度：{{ lgnlatText }}</div>
+          <div class="position-cancel postion-control" @click="mapVisiable = false">取消</div>
+          <div class="position-confirm postion-control" @click="mapVisiable = false">确定</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SimpleUploadImage from '@/components/SimpleUploadImage'
+import SimpleRadio from '@/components/SimpleRadio'
+import { isPoint, isNumber } from '@/utils/validator'
+import { mapGetters } from 'vuex'
+export default {
+  components: {
+    SimpleUploadImage,
+    SimpleRadio,
+  },
+  props: {
+    clubInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    var validatePoint = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('经纬度坐标不能为空'))
+      } else {
+        if (isPoint(value)) {
+          callback()
+        } else {
+          callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
+        }
+      }
+    }
+
+    var validateMobile = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('联系方式不能为空'))
+      } else {
+        if (isNumber(value)) {
+          callback()
+        } else {
+          callback(new Error('联系方式格式不正确'))
+        }
+      }
+    }
+
+    var validateAddress = (rule, value, callback) => {
+      if (!this.formData.provinceId || !this.formData.cityId || !this.formData.townId || !this.formData.fullAddress) {
+        callback(new Error('请输入完整的地址'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      clubTypeList: [
+        { value: 1, name: '医美' },
+        { value: 2, name: '生美' },
+        { value: 3, name: '项目公司' },
+        { value: 4, name: '个人' },
+        { value: 5, name: '其他' },
+      ],
+      medicalTypeList1: [
+        { value: 1, name: '诊所' },
+        { value: 2, name: '门诊' },
+        { value: 3, name: '医院' },
+        { value: 4, name: '其他' },
+      ],
+      medicalTypeList2: [
+        { value: 5, name: '美容院' },
+        { value: 6, name: '养生馆' },
+        { value: 7, name: '其他' },
+      ],
+      active: true,
+      lnglat: null,
+      mapVisiable: false,
+      formData: {
+        name: '',
+        address: '',
+        fullAddress: '',
+        point: '',
+        mobile: '',
+        userMobile: '',
+        logoImage: '',
+        banner: '',
+        customFlag: 0,
+        remarks: '',
+        empNum: '',
+        firstClubType: 1,
+        secondClubType: 1,
+        medicalLicenseImage: '',
+        provinceId: '',
+        cityId: '',
+        townId: '',
+        linkMan: '',
+        linkMobile: '',
+      },
+      rules: {
+        name: [{ required: true, message: '机构名称不能为空', trigger: ['blur'] }],
+        logoImage: [{ required: true, message: '请上传logo', trigger: ['change'] }],
+        mobile: [
+          {
+            required: true,
+            validator: validateMobile,
+            trigger: ['blur', 'change'],
+          },
+        ],
+        point: [
+          {
+            required: true,
+            validator: validatePoint,
+            trigger: ['change'],
+          },
+        ],
+        address: [
+          {
+            required: true,
+            message: '所在地区不能为空',
+            trigger: ['change'],
+          },
+          {
+            validator: validateAddress,
+            trigger: ['change'],
+          },
+        ],
+        banner: [
+          {
+            required: true,
+            message: '门头照不能为空',
+            trigger: ['change'],
+          },
+        ],
+        empNum: [{ required: true, message: '员工人数不能为空', trigger: ['blur'] }],
+        firstClubType: [{ required: true, message: '机构类型不能为空', trigger: ['change'] }],
+        secondClubType: [
+          {
+            required: true,
+            message: '医美类型/生美类型不能为空',
+            trigger: ['change'],
+          },
+        ],
+        medicalLicenseImage: [
+          {
+            required: true,
+            message: '医疗许可证不能为空',
+            trigger: ['change'],
+          },
+        ],
+      },
+      // logo图片列表
+      logoList: [],
+      // banner图片列表
+      bannerList: [],
+      // 级联选择的地址
+      address: '',
+      // 医疗许可证图片
+      licenseImageList: [],
+
+      provinceList: [],
+    }
+  },
+
+  watch: {
+    'formData.firstClubType': function (nVal, oVal) {
+      if (nVal === 1) {
+        this.formData.secondClubType = 1
+      } else if (nVal === 2) {
+        this.formData.secondClubType = 5
+      } else {
+        this.formData.secondClubType = ''
+      }
+    },
+  },
+  computed: {
+    ...mapGetters(['authUserId']),
+    lgnlatText() {
+      return this.lnglat ? this.lnglat.join(',') : ''
+    },
+    cityList() {
+      const province = this.provinceList.find((item) => item.id === this.formData.provinceId)
+      if (province) {
+        return province.children
+      }
+      return []
+    },
+    townList() {
+      const city = this.cityList.find((item) => item.id === this.formData.cityId)
+      if (city) {
+        return city.children
+      }
+      return []
+    },
+
+    fullAddress() {
+      let str = ''
+      this.provinceList.forEach((pro) => {
+        if (pro.id === this.formData.provinceId) {
+          str += pro.name
+          pro.children.forEach((city) => {
+            if (city.id === this.formData.cityId) {
+              str += city.name
+              city.children.forEach((town) => {
+                if (town.id === this.formData.townId) {
+                  str += town.name
+                }
+              })
+            }
+          })
+        }
+      })
+      return (str += this.formData.fullAddress)
+    },
+  },
+  created() {
+    this.init(this.clubInfo)
+    this.fetchAllCityList()
+  },
+  methods: {
+    // 地图定位
+    initMap() {
+      this.mapVisiable = true
+      this.$nextTick(() => {
+        this.$refs.aMap.init()
+      })
+    },
+
+    onPosition(lnglat) {
+      console.log(lnglat)
+      this.lnglat = [lnglat.lng, lnglat.lat]
+      this.formData.point = this.lnglat.join(',')
+    },
+
+    async fetchAllCityList() {
+      try {
+        const res = await this.$http.api.fetchAllCityList()
+        console.log(res)
+        this.provinceList = res.data
+        return res
+      } catch (error) {
+        console.log(error)
+        return Promise.reject(error)
+      }
+    },
+
+    genetageFormData() {
+      return {
+        customFlag: 0,
+        authParty: this.formData.name,
+        authUserId: this.authUserId,
+        provinceId: this.formData.provinceId,
+        cityId: this.formData.cityId,
+        townId: this.formData.townId,
+        address: this.formData.fullAddress,
+        mobile: this.formData.mobile,
+        logo: this.formData.logoImage,
+        lngAndLat: this.lgnlatText,
+        remarks: this.formData.remarks,
+        empNum: this.formData.empNum,
+        firstClubType: this.formData.firstClubType,
+        secondClubType: this.formData.secondClubType,
+        medicalLicenseImage: this.formData.medicalLicenseImage,
+        linkMan: this.formData.linkMan,
+        linkMobile: this.formData.linkMobile,
+        bannerList: this.bannerList.map((item) => (item.response ? item.response.data : item.url)),
+      }
+    },
+
+    async init(formData) {
+      console.log(formData)
+      this.formData = formData
+      this.formData.fullAddress = formData.address
+      this.formData.point = formData.lngAndLat
+      this.formData.logoImage = formData.logo
+      this.formData.name = formData.authParty
+      this.onPosition(formData)
+
+      if (formData.medicalLicenseImage) {
+        this.licenseImageList = [{ name: '', url: formData.medicalLicenseImage }]
+      }
+      if (formData.logo) {
+        this.logoList = [{ name: '', url: formData.logo }]
+      }
+      this.bannerList = formData.bannerList.map((i) => ({ name: '', url: i }))
+      this.formData.banner = formData.bannerList.length > 0 ? this.formData.bannerList.length : ''
+    },
+
+    // 表单验证
+    validate() {
+      const data = this.genetageFormData()
+      this.$emit('step', data)
+      return this.$refs.form.validate()
+    },
+
+    onProvinceChange() {
+      this.formData.cityId = ''
+      this.formData.townId = ''
+      this.countAddress()
+    },
+    onCityChange() {
+      this.formData.townId = ''
+      this.countAddress()
+    },
+    onTownChange() {
+      this.countAddress()
+    },
+
+    onFullAddressInput() {
+      this.countAddress()
+    },
+
+    countAddress() {
+      this.formData.address =
+        this.formData.cityId + this.formData.provinceId + this.formData.townId + this.formData.fullAddress
+    },
+
+    // logo上传
+    uploadLogoSuccess({ response, file, fileList }) {
+      this.logoList = fileList
+      this.formData.logoImage = fileList[0].response.data
+    },
+    handleLogoRemove({ file, fileList }) {
+      this.logoList = fileList
+      this.formData.logoImage = ''
+    },
+    beforeLogoUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('上传logo图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+
+    // banner上传
+    uploadBannerSuccess({ response, file, fileList }) {
+      this.bannerList = fileList
+      console.log(this.bannerList)
+      this.formData.banner = fileList.length > 0 ? fileList.length : ''
+    },
+    handleBannerRemove({ file, fileList }) {
+      this.bannerList = fileList
+      this.formData.banner = fileList.length > 0 ? fileList.length : ''
+    },
+    beforeBannerUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('上传banner图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+
+    // 医疗许可证图片上传
+    uploadLicenseImageSuccess({ response, file, fileList }) {
+      this.licenseImageList = fileList
+      console.log(this.licenseImageList)
+      this.formData.medicalLicenseImage = response.data
+    },
+    handleLicenseImageRemove({ file, fileList }) {
+      this.licenseImageList = fileList
+      this.formData.medicalLicenseImage = ''
+    },
+    beforeLicenseImageUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('医疗许可证图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.club-info {
+  @include useTheme() {
+    ::v-deep {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        border-color: fetch('color');
+      }
+    }
+  }
+}
+
+// pc端
+@media screen and (min-width: 768px) {
+  .club-info {
+    @include useTheme() {
+      .position-select {
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.39);
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .position-select-container {
+          background: #fff;
+          width: 60%;
+          box-sizing: border-box;
+          padding: 24px;
+
+          .position-select-footer {
+            position: relative;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding-top: 24px;
+
+            .lnglat {
+              position: absolute;
+              font-size: 14px;
+              color: #666;
+
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+
+          .postion-control {
+            width: 120px;
+            height: 40px;
+            font-size: 14px;
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            margin-left: 16px;
+
+            &.position-confirm {
+              background: #f56c6c;
+              color: #fff;
+            }
+
+            &.position-cancel {
+              background: #b1b1b1;
+              color: #fff;
+            }
+          }
+        }
+      }
+
+      .normal-row {
+        position: relative;
+        .label {
+          font-size: 14px;
+          color: #606266;
+
+          i {
+            color: #f56c6c;
+            margin-right: 4px;
+          }
+
+          span {
+            color: #b2b2b2;
+          }
+        }
+        .postion-btn {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 62px;
+          height: 28px;
+          line-height: 28px;
+          font-size: 14px;
+          color: #fff;
+          background: #1890ff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
+            background-size: 16px 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+    }
+  }
+
+  .position-select {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.39);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .position-select-container {
+      background: #fff;
+      width: 80%;
+      box-sizing: border-box;
+      padding: 3.2vw;
+
+      .position-select-footer {
+        padding-top: 10vw;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .lnglat {
+          position: absolute;
+          font-size: 3.2vw;
+          color: #666;
+
+          left: 0;
+          top: 5vw;
+          transform: translateY(-50%);
+        }
+      }
+
+      .postion-control {
+        width: 16vw;
+        height: 7vw;
+        font-size: 3.4vw;
+        border-radius: 0.4vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin-left: 3.6vw;
+
+        &.position-confirm {
+          background: #f56c6c;
+          color: #fff;
+        }
+
+        &.position-cancel {
+          background: #b1b1b1;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .normal-row {
+    position: relative;
+    .label {
+      font-size: 14px;
+      color: #606266;
+
+      i {
+        color: #f56c6c;
+        margin-right: 4px;
+      }
+
+      span {
+        color: #b2b2b2;
+        font-size: 2.6vw;
+      }
+    }
+    .postion-btn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 14vw;
+      height: 6.8vw;
+      line-height: 6.8vw;
+      font-size: 3.2vw;
+      color: #fff;
+      background: #1890ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 0.4vw;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 3.58vw;
+        height: 3.58vw;
+        background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
+        background-size: 3.58vw;
+      }
+    }
+  }
+}
+</style>

pages/_template/ph/center/club-detail.vue

@@ -3,75 +3,80 @@
     <div class="page-top"></div>
     <div class="page-content">
       <div class="title">机构认证信息</div>
+      <div class="updated">
+        <el-button type="text" size="default" @click="editData">{{ status ? '修改' : '保存' }}</el-button>
+      </div>
       <template v-if="!isAuth">
         <div class="tip">抱歉，您暂未认证机构</div>
         <div class="btn" @click="toAuth">去认证</div>
       </template>
       <template v-else>
-        <div class="row">
-          <div class="col label">机构名称：</div>
-          <div class="col content">{{ clubInfo.authParty }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">联系电话：</div>
-          <div class="col content">{{ clubInfo.mobile }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">运营联系人：</div>
-          <div class="col content">{{ clubInfo.linkMan }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">运营联系人手机号：</div>
-          <div class="col content">{{ clubInfo.linkMobile }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">所在地区：</div>
-          <div class="col content">{{ clubInfo.area }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">详细地址：</div>
-          <div class="col content">{{ clubInfo.address }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">所在位置：</div>
-          <div class="col content">
-            <div class="postion-btn" @click="initMap">查看定位</div>
+        <div v-if="status">
+          <div class="row">
+            <div class="col label">机构名称：</div>
+            <div class="col content">{{ clubInfo.authParty }}</div>
           </div>
-        </div>
-        <div class="row block">
-          <div class="col label">logo：</div>
-          <div class="col content">
-            <el-image :src="clubInfo.logo" v-if="clubInfo.logo"></el-image>
+          <div class="row">
+            <div class="col label">联系电话：</div>
+            <div class="col content">{{ clubInfo.mobile }}</div>
           </div>
-        </div>
-        <div class="row block">
-          <div class="col label">门头照：</div>
-          <div class="col content">
-            <template v-for="(image, index) in clubInfo.bannerList">
-              <el-image :src="image" :key="index"></el-image>
-            </template>
+          <div class="row">
+            <div class="col label">运营联系人：</div>
+            <div class="col content">{{ clubInfo.linkMan }}</div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col label">机构类型：</div>
-          <div class="col content">{{ firstClubTypeName }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">医美类型：</div>
-          <div class="col content">{{ secondClubTypeName }}</div>
-        </div>
-        <div class="row block">
-          <div class="col label">医疗许可证：</div>
-          <div class="col content">
-            <el-image
-              :src="clubInfo.medicalLicenseImage"
-              v-if="clubInfo.medicalLicenseImage"
-            ></el-image>
+          <div class="row">
+            <div class="col label">运营联系人手机号：</div>
+            <div class="col content">{{ clubInfo.linkMobile }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">所在地区：</div>
+            <div class="col content">{{ clubInfo.area }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">详细地址：</div>
+            <div class="col content">{{ clubInfo.address }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">所在位置：</div>
+            <div class="col content">
+              <div class="postion-btn" @click="initMap">查看定位</div>
+            </div>
+          </div>
+          <div class="row block">
+            <div class="col label">logo：</div>
+            <div class="col content">
+              <el-image :src="clubInfo.logo" v-if="clubInfo.logo"></el-image>
+            </div>
+          </div>
+          <div class="row block">
+            <div class="col label">门头照：</div>
+            <div class="col content">
+              <template v-for="(image, index) in clubInfo.bannerList">
+                <el-image :src="image" :key="index"></el-image>
+              </template>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col label">机构类型：</div>
+            <div class="col content">{{ firstClubTypeName }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">医美类型：</div>
+            <div class="col content">{{ secondClubTypeName }}</div>
+          </div>
+          <div class="row block">
+            <div class="col label">医疗许可证：</div>
+            <div class="col content">
+              <el-image :src="clubInfo.medicalLicenseImage" v-if="clubInfo.medicalLicenseImage"></el-image>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col label">员工人数：</div>
+            <div class="col content">{{ clubInfo.empNum }}</div>
           </div>
         </div>
-        <div class="row">
-          <div class="col label">员工人数：</div>
-          <div class="col content">{{ clubInfo.empNum }}</div>
+        <div v-else>
+          <FormClubInfo ref="clubInfoForm" @step="onClubInfoFormStep" :clubInfo="clubInfo" />
         </div>
       </template>
     </div>
@@ -81,12 +86,7 @@
         <SimpleAMap ref="aMap" :lnglat="lnglat" />
         <div class="position-select-footer">
           <div class="lnglat">当前经纬度：{{ clubInfo.lngAndLat }}</div>
-          <div
-            class="position-confirm postion-control"
-            @click="mapVisiable = false"
-          >
-            确定
-          </div>
+          <div class="position-confirm postion-control" @click="mapVisiable = false">确定</div>
         </div>
       </div>
     </div>
@@ -95,14 +95,18 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import FormClubInfo from '../form/components/form-club-edit.vue'
 export default {
   layout: 'app-ph',
   data() {
     return {
       mapVisiable: false,
       clubInfo: {},
+      status: true,
+      clubData: {},
     }
   },
+  components: { FormClubInfo },
   computed: {
     ...mapGetters(['userInfo', 'routePrefix']),
     isAuth() {
@@ -110,15 +114,11 @@ export default {
     },
     firstClubTypeName() {
       if (!this.clubInfo.firstClubType) return '其他'
-      return ['医美', '生美', '项目公司', '个人', '其他'][
-        this.clubInfo.firstClubType - 1
-      ]
+      return ['医美', '生美', '项目公司', '个人', '其他'][this.clubInfo.firstClubType - 1]
     },
     secondClubTypeName() {
       if (!this.clubInfo.secondClubType) return '其他'
-      return ['诊所', '门诊', '医院', '其他', '美容院', '养生馆', '其他'][
-        this.clubInfo.secondClubType - 1
-      ]
+      return ['诊所', '门诊', '医院', '其他', '美容院', '养生馆', '其他'][this.clubInfo.secondClubType - 1]
     },
     lnglat() {
       return this.clubInfo.lngAndLat ? this.clubInfo.lngAndLat.split(',') : null
@@ -150,6 +150,27 @@ export default {
         this.$refs.aMap.init()
       })
     },
+    // 修该数据
+    editData() {
+      this.status = !this.status
+      if (this.status) {
+        this.$refs.clubInfoForm.validate && this.$refs.clubInfoForm.validate()
+      }
+    },
+    async onClubInfoFormStep(authdata) {
+      console.log(authdata)
+      this.$toast.loading({
+        message: '正在保存请稍后...',
+        duration: 1000,
+      })
+
+      // try {
+      //   const data = await this.$http.api.authEdit(authdata)
+      //   console.log(data)
+      // } catch (e) {
+      //   console.log(e)
+      // }
+    },
   },
 }
 </script>
@@ -159,6 +180,7 @@ export default {
   .page {
     display: flex;
     justify-content: center;
+    position: relative;
   }
 
   .position-select {
@@ -225,6 +247,18 @@ export default {
   .page-content {
     max-width: 760px;
     padding-bottom: 167px;
+    .updated {
+      position: absolute;
+      top: 50px;
+      right: 200px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      ::v-deep .el-button--text {
+        color: blue;
+        font-size: 24px;
+      }
+    }
     .title {
       font-size: 24px;
       color: #282828;
@@ -244,7 +278,7 @@ export default {
     .btn {
       width: 98px;
       height: 36px;
-      background: #BC1724;
+      background: #bc1724;
       border-radius: 4px;
       text-align: center;
       line-height: 36px;
@@ -298,8 +332,7 @@ export default {
             display: inline-block;
             width: 16px;
             height: 16px;
-            background: url(~assets/theme-images/common/icon-position.png)
-              no-repeat center;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
             background-size: 16px 16px;
           }
         }
@@ -312,6 +345,7 @@ export default {
   .page {
     display: flex;
     justify-content: center;
+    position: relative;
   }
 
   .position-select {
@@ -377,6 +411,18 @@ export default {
 
   .page-content {
     padding: 0 4vw;
+    .updated {
+      position: absolute;
+      top: 5.5vw;
+      right: 4vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      ::v-deep .el-button--text {
+        color: blue;
+        font-size: 4.2vw;
+      }
+    }
     .title {
       font-size: 4.2vw;
       color: #282828;
@@ -396,7 +442,7 @@ export default {
     .btn {
       width: 36vw;
       height: 8.8vw;
-      background: #BC1724;
+      background: #bc1724;
       border-radius: 0.4vw;
       text-align: center;
       line-height: 8.8vw;
@@ -456,8 +502,7 @@ export default {
             display: inline-block;
             width: 3.58vw;
             height: 3.58vw;
-            background: url(~assets/theme-images/common/icon-position.png)
-              no-repeat center;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
             background-size: 3.58vw;
           }
         }

pages/_template/ph/form/components/form-club-edit.vue

@@ -0,0 +1,746 @@
+<template>
+  <div class="club-info">
+    <el-form :model="formData" :rules="rules" ref="form" label-position="left">
+      <el-form-item prop="name" label="机构名称:">
+        <el-input
+          placeholder="请输入机构名称"
+          :disabled="true"
+          v-model="formData.name"
+          maxlength="50"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="联系电话:">
+        <el-input placeholder="请输入对外联系电话" v-model="formData.mobile"></el-input>
+      </el-form-item>
+      <el-form-item prop="linkMan" label="运营联系人:">
+        <el-input placeholder="请输入运营联系人" v-model="formData.linkMan"></el-input>
+      </el-form-item>
+      <el-form-item prop="linkMobile" label="运营联系人手机号:">
+        <el-input placeholder="请输入运营联系人手机号" v-model="formData.linkMobile"></el-input>
+      </el-form-item>
+      <el-form-item prop="address" label="所在地区:">
+        <br />
+        <input type="text" v-model="formData.address" v-show="false" />
+        <div class="flex items-center justify-between">
+          <el-select placeholder="请选择" v-model="formData.provinceId" @change="onProvinceChange">
+            <template v-for="item in provinceList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.cityId" @change="onCityChange" class="mx-2">
+            <template v-for="item in cityList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.townId" @change="onTownChange">
+            <template v-for="item in townList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+        </div>
+        <el-input
+          class="mt-4"
+          type="textarea"
+          :rows="4"
+          v-model="formData.fullAddress"
+          @input="onFullAddressInput"
+          placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="point" label="">
+        <div class="normal-row">
+          <div class="label"><i>*</i>所在位置:<span>（提示:打开地图，将定位图标移到具体位置）</span></div>
+
+          <div class="postion-btn" @click="initMap">定位</div>
+        </div>
+        <el-input v-model="formData.point" disabled></el-input>
+      </el-form-item>
+      <el-form-item prop="logoImage" label="logo:">
+        <br />
+        <el-input v-show="false" v-model="formData.logoImage" />
+        <SimpleUploadImage
+          :limit="1"
+          :image-list="logoList"
+          :before-upload="beforeLogoUpload"
+          @success="uploadLogoSuccess"
+          @remove="handleLogoRemove"
+        />
+      </el-form-item>
+      <el-form-item prop="banner">
+        <div class="normal-row">
+          <div class="label"><i>*</i>门头照:<span>（可上传6张）</span></div>
+          <el-input v-show="false" v-model="formData.banner" />
+          <SimpleUploadImage
+            :limit="6"
+            :image-list="bannerList"
+            :before-upload="beforeBannerUpload"
+            @success="uploadBannerSuccess"
+            @remove="handleBannerRemove"
+          />
+        </div>
+      </el-form-item>
+
+      <el-form-item label="机构类型:" prop="firstClubType">
+        <!-- <el-radio-group v-model="formData.firstClubType">
+          <el-radio :label="1">医美</el-radio>
+          <el-radio :label="2">生美</el-radio>
+          <el-radio :label="3">项目公司</el-radio>
+          <el-radio :label="4">个人</el-radio>
+          <el-radio :label="5">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.firstClubType" :list="clubTypeList" />
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 1" label="医美类型:" prop="secondClubType">
+        <!-- <el-radio-group v-model="formData.secondClubType">
+          <el-radio :label="1">诊所</el-radio>
+          <el-radio :label="2">门诊</el-radio>
+          <el-radio :label="3">医院</el-radio>
+          <el-radio :label="4">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.secondClubType" :list="medicalTypeList1" type="rect" />
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 2" label="生美类型:" prop="secondClubType">
+        <!-- <el-radio-group v-model="formData.secondClubType">
+          <el-radio :label="5">美容院</el-radio>
+          <el-radio :label="6">养生馆</el-radio>
+          <el-radio :label="7">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.secondClubType" :list="medicalTypeList2" type="rect" />
+      </el-form-item>
+
+      <el-form-item label="医疗许可证:" prop="medicalLicenseImage" v-if="formData.firstClubType === 1">
+        <br />
+        <el-input v-show="false" v-model="formData.medicalLicenseImage" />
+        <SimpleUploadImage
+          :limit="1"
+          :image-list="licenseImageList"
+          :before-upload="beforeLicenseImageUpload"
+          @success="uploadLicenseImageSuccess"
+          @remove="handleLicenseImageRemove"
+        />
+      </el-form-item>
+
+      <el-form-item label="员工人数:" prop="empNum">
+        <el-input v-model.number="formData.empNum" placeholder="请输入员工人数" clearable />
+      </el-form-item>
+    </el-form>
+
+    <div class="position-select" v-if="mapVisiable">
+      <div class="position-select-container">
+        <SimpleAMap @position="onPosition" ref="aMap" :lnglat="lnglat" :address="fullAddress" />
+        <div class="position-select-footer">
+          <div class="lnglat">当前经纬度：{{ lgnlatText }}</div>
+          <div class="position-cancel postion-control" @click="mapVisiable = false">取消</div>
+          <div class="position-confirm postion-control" @click="mapVisiable = false">确定</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SimpleUploadImage from '@/components/SimpleUploadImage'
+import SimpleRadio from '@/components/SimpleRadio'
+import { isPoint, isNumber } from '@/utils/validator'
+import { mapGetters } from 'vuex'
+export default {
+  components: {
+    SimpleUploadImage,
+    SimpleRadio,
+  },
+  props: {
+    clubInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    var validatePoint = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('经纬度坐标不能为空'))
+      } else {
+        if (isPoint(value)) {
+          callback()
+        } else {
+          callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
+        }
+      }
+    }
+
+    var validateMobile = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('联系方式不能为空'))
+      } else {
+        if (isNumber(value)) {
+          callback()
+        } else {
+          callback(new Error('联系方式格式不正确'))
+        }
+      }
+    }
+
+    var validateAddress = (rule, value, callback) => {
+      if (!this.formData.provinceId || !this.formData.cityId || !this.formData.townId || !this.formData.fullAddress) {
+        callback(new Error('请输入完整的地址'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      clubTypeList: [
+        { value: 1, name: '医美' },
+        { value: 2, name: '生美' },
+        { value: 3, name: '项目公司' },
+        { value: 4, name: '个人' },
+        { value: 5, name: '其他' },
+      ],
+      medicalTypeList1: [
+        { value: 1, name: '诊所' },
+        { value: 2, name: '门诊' },
+        { value: 3, name: '医院' },
+        { value: 4, name: '其他' },
+      ],
+      medicalTypeList2: [
+        { value: 5, name: '美容院' },
+        { value: 6, name: '养生馆' },
+        { value: 7, name: '其他' },
+      ],
+      active: true,
+      lnglat: null,
+      mapVisiable: false,
+      formData: {
+        name: '',
+        address: '',
+        fullAddress: '',
+        point: '',
+        mobile: '',
+        userMobile: '',
+        logoImage: '',
+        banner: '',
+        customFlag: 0,
+        remarks: '',
+        empNum: '',
+        firstClubType: 1,
+        secondClubType: 1,
+        medicalLicenseImage: '',
+        provinceId: '',
+        cityId: '',
+        townId: '',
+        linkMan: '',
+        linkMobile: '',
+      },
+      rules: {
+        name: [{ required: true, message: '机构名称不能为空', trigger: ['blur'] }],
+        logoImage: [{ required: true, message: '请上传logo', trigger: ['change'] }],
+        mobile: [
+          {
+            required: true,
+            validator: validateMobile,
+            trigger: ['blur', 'change'],
+          },
+        ],
+        point: [
+          {
+            required: true,
+            validator: validatePoint,
+            trigger: ['change'],
+          },
+        ],
+        address: [
+          {
+            required: true,
+            message: '所在地区不能为空',
+            trigger: ['change'],
+          },
+          {
+            validator: validateAddress,
+            trigger: ['change'],
+          },
+        ],
+        banner: [
+          {
+            required: true,
+            message: '门头照不能为空',
+            trigger: ['change'],
+          },
+        ],
+        empNum: [{ required: true, message: '员工人数不能为空', trigger: ['blur'] }],
+        firstClubType: [{ required: true, message: '机构类型不能为空', trigger: ['change'] }],
+        secondClubType: [
+          {
+            required: true,
+            message: '医美类型/生美类型不能为空',
+            trigger: ['change'],
+          },
+        ],
+        medicalLicenseImage: [
+          {
+            required: true,
+            message: '医疗许可证不能为空',
+            trigger: ['change'],
+          },
+        ],
+      },
+      // logo图片列表
+      logoList: [],
+      // banner图片列表
+      bannerList: [],
+      // 级联选择的地址
+      address: '',
+      // 医疗许可证图片
+      licenseImageList: [],
+
+      provinceList: [],
+    }
+  },
+
+  watch: {
+    'formData.firstClubType': function (nVal, oVal) {
+      if (nVal === 1) {
+        this.formData.secondClubType = 1
+      } else if (nVal === 2) {
+        this.formData.secondClubType = 5
+      } else {
+        this.formData.secondClubType = ''
+      }
+    },
+  },
+  computed: {
+    ...mapGetters(['authUserId']),
+    lgnlatText() {
+      return this.lnglat ? this.lnglat.join(',') : ''
+    },
+    cityList() {
+      const province = this.provinceList.find((item) => item.id === this.formData.provinceId)
+      if (province) {
+        return province.children
+      }
+      return []
+    },
+    townList() {
+      const city = this.cityList.find((item) => item.id === this.formData.cityId)
+      if (city) {
+        return city.children
+      }
+      return []
+    },
+
+    fullAddress() {
+      let str = ''
+      this.provinceList.forEach((pro) => {
+        if (pro.id === this.formData.provinceId) {
+          str += pro.name
+          pro.children.forEach((city) => {
+            if (city.id === this.formData.cityId) {
+              str += city.name
+              city.children.forEach((town) => {
+                if (town.id === this.formData.townId) {
+                  str += town.name
+                }
+              })
+            }
+          })
+        }
+      })
+      return (str += this.formData.fullAddress)
+    },
+  },
+  created() {
+    this.init(this.clubInfo)
+    this.fetchAllCityList()
+  },
+  methods: {
+    // 地图定位
+    initMap() {
+      this.mapVisiable = true
+      this.$nextTick(() => {
+        this.$refs.aMap.init()
+      })
+    },
+
+    onPosition(lnglat) {
+      console.log(lnglat)
+      this.lnglat = [lnglat.lng, lnglat.lat]
+      this.formData.point = this.lnglat.join(',')
+    },
+
+    async fetchAllCityList() {
+      try {
+        const res = await this.$http.api.fetchAllCityList()
+        console.log(res)
+        this.provinceList = res.data
+        return res
+      } catch (error) {
+        console.log(error)
+        return Promise.reject(error)
+      }
+    },
+
+    genetageFormData() {
+      return {
+        customFlag: 0,
+        authParty: this.formData.name,
+        authUserId: this.authUserId,
+        provinceId: this.formData.provinceId,
+        cityId: this.formData.cityId,
+        townId: this.formData.townId,
+        address: this.formData.fullAddress,
+        mobile: this.formData.mobile,
+        logo: this.formData.logoImage,
+        lngAndLat: this.lgnlatText,
+        remarks: this.formData.remarks,
+        empNum: this.formData.empNum,
+        firstClubType: this.formData.firstClubType,
+        secondClubType: this.formData.secondClubType,
+        medicalLicenseImage: this.formData.medicalLicenseImage,
+        linkMan: this.formData.linkMan,
+        linkMobile: this.formData.linkMobile,
+        bannerList: this.bannerList.map((item) => (item.response ? item.response.data : item.url)),
+      }
+    },
+
+    async init(formData) {
+      console.log(formData)
+      this.formData = formData
+      this.formData.fullAddress = formData.address
+      this.formData.point = formData.lngAndLat
+      this.formData.logoImage = formData.logo
+      this.formData.name = formData.authParty
+      this.onPosition(formData)
+
+      if (formData.medicalLicenseImage) {
+        this.licenseImageList = [{ name: '', url: formData.medicalLicenseImage }]
+      }
+      if (formData.logo) {
+        this.logoList = [{ name: '', url: formData.logo }]
+      }
+      this.bannerList = formData.bannerList.map((i) => ({ name: '', url: i }))
+      this.formData.banner = formData.bannerList.length > 0 ? this.formData.bannerList.length : ''
+    },
+
+    // 表单验证
+    validate() {
+      const data = this.genetageFormData()
+      this.$emit('step', data)
+      return this.$refs.form.validate()
+    },
+
+    onProvinceChange() {
+      this.formData.cityId = ''
+      this.formData.townId = ''
+      this.countAddress()
+    },
+    onCityChange() {
+      this.formData.townId = ''
+      this.countAddress()
+    },
+    onTownChange() {
+      this.countAddress()
+    },
+
+    onFullAddressInput() {
+      this.countAddress()
+    },
+
+    countAddress() {
+      this.formData.address =
+        this.formData.cityId + this.formData.provinceId + this.formData.townId + this.formData.fullAddress
+    },
+
+    // logo上传
+    uploadLogoSuccess({ response, file, fileList }) {
+      this.logoList = fileList
+      this.formData.logoImage = fileList[0].response.data
+    },
+    handleLogoRemove({ file, fileList }) {
+      this.logoList = fileList
+      this.formData.logoImage = ''
+    },
+    beforeLogoUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('上传logo图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+
+    // banner上传
+    uploadBannerSuccess({ response, file, fileList }) {
+      this.bannerList = fileList
+      console.log(this.bannerList)
+      this.formData.banner = fileList.length > 0 ? fileList.length : ''
+    },
+    handleBannerRemove({ file, fileList }) {
+      this.bannerList = fileList
+      this.formData.banner = fileList.length > 0 ? fileList.length : ''
+    },
+    beforeBannerUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('上传banner图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+
+    // 医疗许可证图片上传
+    uploadLicenseImageSuccess({ response, file, fileList }) {
+      this.licenseImageList = fileList
+      console.log(this.licenseImageList)
+      this.formData.medicalLicenseImage = response.data
+    },
+    handleLicenseImageRemove({ file, fileList }) {
+      this.licenseImageList = fileList
+      this.formData.medicalLicenseImage = ''
+    },
+    beforeLicenseImageUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('医疗许可证图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.club-info {
+  @include useTheme() {
+    ::v-deep {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        border-color: fetch('color');
+      }
+    }
+  }
+}
+
+// pc端
+@media screen and (min-width: 768px) {
+  .club-info {
+    @include useTheme() {
+      .position-select {
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.39);
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .position-select-container {
+          background: #fff;
+          width: 60%;
+          box-sizing: border-box;
+          padding: 24px;
+
+          .position-select-footer {
+            position: relative;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding-top: 24px;
+
+            .lnglat {
+              position: absolute;
+              font-size: 14px;
+              color: #666;
+
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+
+          .postion-control {
+            width: 120px;
+            height: 40px;
+            font-size: 14px;
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            margin-left: 16px;
+
+            &.position-confirm {
+              background: #f56c6c;
+              color: #fff;
+            }
+
+            &.position-cancel {
+              background: #b1b1b1;
+              color: #fff;
+            }
+          }
+        }
+      }
+
+      .normal-row {
+        position: relative;
+        .label {
+          font-size: 14px;
+          color: #606266;
+
+          i {
+            color: #f56c6c;
+            margin-right: 4px;
+          }
+
+          span {
+            color: #b2b2b2;
+          }
+        }
+        .postion-btn {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 62px;
+          height: 28px;
+          line-height: 28px;
+          font-size: 14px;
+          color: #fff;
+          background: #1890ff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
+            background-size: 16px 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+    }
+  }
+
+  .position-select {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.39);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .position-select-container {
+      background: #fff;
+      width: 80%;
+      box-sizing: border-box;
+      padding: 3.2vw;
+
+      .position-select-footer {
+        padding-top: 10vw;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .lnglat {
+          position: absolute;
+          font-size: 3.2vw;
+          color: #666;
+
+          left: 0;
+          top: 5vw;
+          transform: translateY(-50%);
+        }
+      }
+
+      .postion-control {
+        width: 16vw;
+        height: 7vw;
+        font-size: 3.4vw;
+        border-radius: 0.4vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin-left: 3.6vw;
+
+        &.position-confirm {
+          background: #f56c6c;
+          color: #fff;
+        }
+
+        &.position-cancel {
+          background: #b1b1b1;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .normal-row {
+    position: relative;
+    .label {
+      font-size: 14px;
+      color: #606266;
+
+      i {
+        color: #f56c6c;
+        margin-right: 4px;
+      }
+
+      span {
+        color: #b2b2b2;
+        font-size: 2.6vw;
+      }
+    }
+    .postion-btn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 14vw;
+      height: 6.8vw;
+      line-height: 6.8vw;
+      font-size: 3.2vw;
+      color: #fff;
+      background: #1890ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 0.4vw;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 3.58vw;
+        height: 3.58vw;
+        background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
+        background-size: 3.58vw;
+      }
+    }
+  }
+}
+</style>

pages/_template/ross/center/club-detail.vue

@@ -4,77 +4,141 @@
     <div class="page-content">
       <div class="title">机构认证信息</div>
       <div class="updated">
-        <el-button type="text" size="default" @click="editData">{{status ? '修改': '保存'}}</el-button>
+        <el-button type="text" size="default" @click="editData">{{ status ? '修改' : '保存' }}</el-button>
       </div>
       <template v-if="!isAuth">
         <div class="tip">抱歉，您暂未认证机构</div>
         <div class="btn" @click="toAuth">去认证</div>
       </template>
       <template v-else>
-        <div class="row">
-          <div class="col label">机构名称：</div>
-          <div class="col content">{{ clubInfo.authParty }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">联系电话：</div>
-          <div class="col content">{{ clubInfo.mobile }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">运营联系人：</div>
-          <div class="col content">{{ clubInfo.linkMan }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">运营联系人手机号：</div>
-          <div class="col content">{{ clubInfo.linkMobile }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">所在地区：</div>
-          <div class="col content">{{ clubInfo.area }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">详细地址：</div>
-          <div class="col content">{{ clubInfo.address }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">所在位置：</div>
-          <div class="col content">
-            <div class="postion-btn" @click="initMap">查看定位</div>
+        <div v-if="status">
+          <div class="row">
+            <div class="col label">机构名称：</div>
+            <div class="col content">{{ clubInfo.authParty }}</div>
           </div>
-        </div>
-        <div class="row block">
-          <div class="col label">logo：</div>
-          <div class="col content">
-            <el-image :src="clubInfo.logo" v-if="clubInfo.logo"></el-image>
+          <div class="row">
+            <div class="col label">联系电话：</div>
+            <div class="col content">{{ clubInfo.mobile }}</div>
           </div>
-        </div>
-        <div class="row block">
-          <div class="col label">门头照：</div>
-          <div class="col content">
-            <template v-for="(image, index) in clubInfo.bannerList">
-              <el-image :src="image" :key="index"></el-image>
-            </template>
+          <div class="row">
+            <div class="col label">运营联系人：</div>
+            <div class="col content">{{ clubInfo.linkMan }}</div>
           </div>
-        </div>
-        <div class="row">
-          <div class="col label">机构类型：</div>
-          <div class="col content">{{ firstClubTypeName }}</div>
-        </div>
-        <div class="row">
-          <div class="col label">医美类型：</div>
-          <div class="col content">{{ secondClubTypeName }}</div>
-        </div>
-        <div class="row block">
-          <div class="col label">医疗许可证：</div>
-          <div class="col content">
-            <el-image
-              :src="clubInfo.medicalLicenseImage"
-              v-if="clubInfo.medicalLicenseImage"
-            ></el-image>
+          <div class="row">
+            <div class="col label">运营联系人手机号：</div>
+            <div class="col content">{{ clubInfo.linkMobile }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">所在地区：</div>
+            <div class="col content">{{ clubInfo.area }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">详细地址：</div>
+            <div class="col content">{{ clubInfo.address }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">所在位置：</div>
+            <div class="col content">
+              <div class="postion-btn" @click="initMap">查看定位</div>
+            </div>
+          </div>
+          <div class="row block">
+            <div class="col label">logo：</div>
+            <div class="col content">
+              <el-image :src="clubInfo.logo" v-if="clubInfo.logo"></el-image>
+            </div>
+          </div>
+          <div class="row block">
+            <div class="col label">门头照：</div>
+            <div class="col content">
+              <template v-for="(image, index) in clubInfo.bannerList">
+                <el-image :src="image" :key="index"></el-image>
+              </template>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col label">机构类型：</div>
+            <div class="col content">{{ firstClubTypeName }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">医美类型：</div>
+            <div class="col content">{{ secondClubTypeName }}</div>
+          </div>
+          <div class="row block">
+            <div class="col label">医疗许可证：</div>
+            <div class="col content">
+              <el-image :src="clubInfo.medicalLicenseImage" v-if="clubInfo.medicalLicenseImage"></el-image>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col label">员工人数：</div>
+            <div class="col content">{{ clubInfo.empNum }}</div>
           </div>
         </div>
-        <div class="row">
-          <div class="col label">员工人数：</div>
-          <div class="col content">{{ clubInfo.empNum }}</div>
+        <div v-else>
+          <!-- <div class="row">
+            <div class="col label">机构名称：</div>
+            <div class="col content">{{ clubInfo.authParty }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">联系电话：</div>
+            <div class="col content">{{ clubInfo.mobile }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">运营联系人：</div>
+            <div class="col content">{{ clubInfo.linkMan }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">运营联系人手机号：</div>
+            <div class="col content">{{ clubInfo.linkMobile }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">所在地区：</div>
+            <div class="col content">{{ clubInfo.area }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">详细地址：</div>
+            <div class="col content">{{ clubInfo.address }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">所在位置：</div>
+            <div class="col content">
+              <div class="postion-btn" @click="initMap">查看定位</div>
+            </div>
+          </div>
+          <div class="row block">
+            <div class="col label">logo：</div>
+            <div class="col content">
+              <el-image :src="clubInfo.logo" v-if="clubInfo.logo"></el-image>
+            </div>
+          </div>
+          <div class="row block">
+            <div class="col label">门头照：</div>
+            <div class="col content">
+              <template v-for="(image, index) in clubInfo.bannerList">
+                <el-image :src="image" :key="index"></el-image>
+              </template>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col label">机构类型：</div>
+            <div class="col content">{{ firstClubTypeName }}</div>
+          </div>
+          <div class="row">
+            <div class="col label">医美类型：</div>
+            <div class="col content">{{ secondClubTypeName }}</div>
+          </div>
+          <div class="row block">
+            <div class="col label">医疗许可证：</div>
+            <div class="col content">
+              <el-image :src="clubInfo.medicalLicenseImage" v-if="clubInfo.medicalLicenseImage"></el-image>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col label">员工人数：</div>
+            <div class="col content">{{ clubInfo.empNum }}</div>
+          </div> -->
+          <FormClubInfo ref="clubInfoForm" @step="onClubInfoFormStep" :clubInfo="clubInfo" />
         </div>
       </template>
     </div>
@@ -84,12 +148,7 @@
         <SimpleAMap ref="aMap" :lnglat="lnglat" />
         <div class="position-select-footer">
           <div class="lnglat">当前经纬度：{{ clubInfo.lngAndLat }}</div>
-          <div
-            class="position-confirm postion-control"
-            @click="mapVisiable = false"
-          >
-            确定
-          </div>
+          <div class="position-confirm postion-control" @click="mapVisiable = false">确定</div>
         </div>
       </div>
     </div>
@@ -98,6 +157,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import FormClubInfo from '../form/components/form-club-edit.vue'
 export default {
   layout: 'app-ross',
   data() {
@@ -108,6 +168,7 @@ export default {
       clubData: {},
     }
   },
+  components: { FormClubInfo },
   computed: {
     ...mapGetters(['userInfo', 'routePrefix']),
     isAuth() {
@@ -115,15 +176,11 @@ export default {
     },
     firstClubTypeName() {
       if (!this.clubInfo.firstClubType) return '其他'
-      return ['医美', '生美', '项目公司', '个人', '其他'][
-        this.clubInfo.firstClubType - 1
-      ]
+      return ['医美', '生美', '项目公司', '个人', '其他'][this.clubInfo.firstClubType - 1]
     },
     secondClubTypeName() {
       if (!this.clubInfo.secondClubType) return '其他'
-      return ['诊所', '门诊', '医院', '其他', '美容院', '养生馆', '其他'][
-        this.clubInfo.secondClubType - 1
-      ]
+      return ['诊所', '门诊', '医院', '其他', '美容院', '养生馆', '其他'][this.clubInfo.secondClubType - 1]
     },
     lnglat() {
       return this.clubInfo.lngAndLat ? this.clubInfo.lngAndLat.split(',') : null
@@ -156,10 +213,26 @@ export default {
       })
     },
     // 修该数据
-    editData () {
+    editData() {
       this.status = !this.status
-      if(!this.status) {}
-    }
+      if (this.status) {
+        this.$refs.clubInfoForm.validate && this.$refs.clubInfoForm.validate()
+      }
+    },
+    async onClubInfoFormStep(authdata) {
+      console.log(authdata)
+      this.$toast.loading({
+        message: '正在保存请稍后...',
+        duration: 1000,
+      })
+
+      // try {
+      //   const data = await this.$http.api.authEdit(authdata)
+      //   console.log(data)
+      // } catch (e) {
+      //   console.log(e)
+      // }
+    },
   },
 }
 </script>
@@ -169,7 +242,7 @@ export default {
   .page {
     display: flex;
     justify-content: center;
-    position:relative;
+    position: relative;
   }
 
   .position-select {
@@ -236,18 +309,16 @@ export default {
   .page-content {
     max-width: 760px;
     padding-bottom: 167px;
-    .updated{
+    .updated {
       position: absolute;
       top: 50px;
-      right:200px;
-      display:flex;
-      justify-center:center;
-      align-items:center;
+      right: 200px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       ::v-deep .el-button--text {
-      color: blue;
-        font-size:24px;
-      }
-      ::v-deep .el-button--text::hover{
+        color: blue;
+        font-size: 24px;
       }
     }
     .title {
@@ -323,8 +394,7 @@ export default {
             display: inline-block;
             width: 16px;
             height: 16px;
-            background: url(~assets/theme-images/common/icon-position.png)
-              no-repeat center;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
             background-size: 16px 16px;
           }
         }
@@ -336,7 +406,7 @@ export default {
 @media screen and (max-width: 768px) {
   .page {
     display: flex;
-    position:relative;
+    position: relative;
     justify-content: center;
   }
 
@@ -403,18 +473,16 @@ export default {
 
   .page-content {
     padding: 0 4vw;
-    .updated{
+    .updated {
       position: absolute;
-      top: 5vw;
-      right:4vw;
-      display:flex;
-      justify-center:center;
-      align-items:center;
+      top: 5.5vw;
+      right: 4vw;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       ::v-deep .el-button--text {
-      color: blue;
-        font-size:4.2vw;
-      }
-      ::v-deep .el-button--text::hover{
+        color: blue;
+        font-size: 4.2vw;
       }
     }
     .title {
@@ -496,8 +564,7 @@ export default {
             display: inline-block;
             width: 3.58vw;
             height: 3.58vw;
-            background: url(~assets/theme-images/common/icon-position.png)
-              no-repeat center;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
             background-size: 3.58vw;
           }
         }

pages/_template/ross/form/components/form-club-edit.vue

@@ -0,0 +1,746 @@
+<template>
+  <div class="club-info">
+    <el-form :model="formData" :rules="rules" ref="form" label-position="left">
+      <el-form-item prop="name" label="机构名称:">
+        <el-input
+          placeholder="请输入机构名称"
+          :disabled="true"
+          v-model="formData.name"
+          maxlength="50"
+          show-word-limit
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="mobile" label="联系电话:">
+        <el-input placeholder="请输入对外联系电话" v-model="formData.mobile"></el-input>
+      </el-form-item>
+      <el-form-item prop="linkMan" label="运营联系人:">
+        <el-input placeholder="请输入运营联系人" v-model="formData.linkMan"></el-input>
+      </el-form-item>
+      <el-form-item prop="linkMobile" label="运营联系人手机号:">
+        <el-input placeholder="请输入运营联系人手机号" v-model="formData.linkMobile"></el-input>
+      </el-form-item>
+      <el-form-item prop="address" label="所在地区:">
+        <br />
+        <input type="text" v-model="formData.address" v-show="false" />
+        <div class="flex items-center justify-between">
+          <el-select placeholder="请选择" v-model="formData.provinceId" @change="onProvinceChange">
+            <template v-for="item in provinceList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.cityId" @change="onCityChange" class="mx-2">
+            <template v-for="item in cityList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+          <el-select placeholder="请选择" v-model="formData.townId" @change="onTownChange">
+            <template v-for="item in townList">
+              <el-option :label="item.name" :value="item.id" :key="item.id"> </el-option>
+            </template>
+          </el-select>
+        </div>
+        <el-input
+          class="mt-4"
+          type="textarea"
+          :rows="4"
+          v-model="formData.fullAddress"
+          @input="onFullAddressInput"
+          placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="point" label="">
+        <div class="normal-row">
+          <div class="label"><i>*</i>所在位置:<span>（提示:打开地图，将定位图标移到具体位置）</span></div>
+
+          <div class="postion-btn" @click="initMap">定位</div>
+        </div>
+        <el-input v-model="formData.point" disabled></el-input>
+      </el-form-item>
+      <el-form-item prop="logoImage" label="logo:">
+        <br />
+        <el-input v-show="false" v-model="formData.logoImage" />
+        <SimpleUploadImage
+          :limit="1"
+          :image-list="logoList"
+          :before-upload="beforeLogoUpload"
+          @success="uploadLogoSuccess"
+          @remove="handleLogoRemove"
+        />
+      </el-form-item>
+      <el-form-item prop="banner">
+        <div class="normal-row">
+          <div class="label"><i>*</i>门头照:<span>（可上传6张）</span></div>
+          <el-input v-show="false" v-model="formData.banner" />
+          <SimpleUploadImage
+            :limit="6"
+            :image-list="bannerList"
+            :before-upload="beforeBannerUpload"
+            @success="uploadBannerSuccess"
+            @remove="handleBannerRemove"
+          />
+        </div>
+      </el-form-item>
+
+      <el-form-item label="机构类型:" prop="firstClubType">
+        <!-- <el-radio-group v-model="formData.firstClubType">
+          <el-radio :label="1">医美</el-radio>
+          <el-radio :label="2">生美</el-radio>
+          <el-radio :label="3">项目公司</el-radio>
+          <el-radio :label="4">个人</el-radio>
+          <el-radio :label="5">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.firstClubType" :list="clubTypeList" />
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 1" label="医美类型:" prop="secondClubType">
+        <!-- <el-radio-group v-model="formData.secondClubType">
+          <el-radio :label="1">诊所</el-radio>
+          <el-radio :label="2">门诊</el-radio>
+          <el-radio :label="3">医院</el-radio>
+          <el-radio :label="4">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.secondClubType" :list="medicalTypeList1" type="rect" />
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 2" label="生美类型:" prop="secondClubType">
+        <!-- <el-radio-group v-model="formData.secondClubType">
+          <el-radio :label="5">美容院</el-radio>
+          <el-radio :label="6">养生馆</el-radio>
+          <el-radio :label="7">其他</el-radio>
+        </el-radio-group> -->
+        <SimpleRadio v-model="formData.secondClubType" :list="medicalTypeList2" type="rect" />
+      </el-form-item>
+
+      <el-form-item label="医疗许可证:" prop="medicalLicenseImage" v-if="formData.firstClubType === 1">
+        <br />
+        <el-input v-show="false" v-model="formData.medicalLicenseImage" />
+        <SimpleUploadImage
+          :limit="1"
+          :image-list="licenseImageList"
+          :before-upload="beforeLicenseImageUpload"
+          @success="uploadLicenseImageSuccess"
+          @remove="handleLicenseImageRemove"
+        />
+      </el-form-item>
+
+      <el-form-item label="员工人数:" prop="empNum">
+        <el-input v-model.number="formData.empNum" placeholder="请输入员工人数" clearable />
+      </el-form-item>
+    </el-form>
+
+    <div class="position-select" v-if="mapVisiable">
+      <div class="position-select-container">
+        <SimpleAMap @position="onPosition" ref="aMap" :lnglat="lnglat" :address="fullAddress" />
+        <div class="position-select-footer">
+          <div class="lnglat">当前经纬度：{{ lgnlatText }}</div>
+          <div class="position-cancel postion-control" @click="mapVisiable = false">取消</div>
+          <div class="position-confirm postion-control" @click="mapVisiable = false">确定</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SimpleUploadImage from '@/components/SimpleUploadImage'
+import SimpleRadio from '@/components/SimpleRadio'
+import { isPoint, isNumber } from '@/utils/validator'
+import { mapGetters } from 'vuex'
+export default {
+  components: {
+    SimpleUploadImage,
+    SimpleRadio,
+  },
+  props: {
+    clubInfo: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    var validatePoint = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('经纬度坐标不能为空'))
+      } else {
+        if (isPoint(value)) {
+          callback()
+        } else {
+          callback(new Error('经纬度坐标格式不正确，(例如：114.095294,22.536004)'))
+        }
+      }
+    }
+
+    var validateMobile = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('联系方式不能为空'))
+      } else {
+        if (isNumber(value)) {
+          callback()
+        } else {
+          callback(new Error('联系方式格式不正确'))
+        }
+      }
+    }
+
+    var validateAddress = (rule, value, callback) => {
+      if (!this.formData.provinceId || !this.formData.cityId || !this.formData.townId || !this.formData.fullAddress) {
+        callback(new Error('请输入完整的地址'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      clubTypeList: [
+        { value: 1, name: '医美' },
+        { value: 2, name: '生美' },
+        { value: 3, name: '项目公司' },
+        { value: 4, name: '个人' },
+        { value: 5, name: '其他' },
+      ],
+      medicalTypeList1: [
+        { value: 1, name: '诊所' },
+        { value: 2, name: '门诊' },
+        { value: 3, name: '医院' },
+        { value: 4, name: '其他' },
+      ],
+      medicalTypeList2: [
+        { value: 5, name: '美容院' },
+        { value: 6, name: '养生馆' },
+        { value: 7, name: '其他' },
+      ],
+      active: true,
+      lnglat: null,
+      mapVisiable: false,
+      formData: {
+        name: '',
+        address: '',
+        fullAddress: '',
+        point: '',
+        mobile: '',
+        userMobile: '',
+        logoImage: '',
+        banner: '',
+        customFlag: 0,
+        remarks: '',
+        empNum: '',
+        firstClubType: 1,
+        secondClubType: 1,
+        medicalLicenseImage: '',
+        provinceId: '',
+        cityId: '',
+        townId: '',
+        linkMan: '',
+        linkMobile: '',
+      },
+      rules: {
+        name: [{ required: true, message: '机构名称不能为空', trigger: ['blur'] }],
+        logoImage: [{ required: true, message: '请上传logo', trigger: ['change'] }],
+        mobile: [
+          {
+            required: true,
+            validator: validateMobile,
+            trigger: ['blur', 'change'],
+          },
+        ],
+        point: [
+          {
+            required: true,
+            validator: validatePoint,
+            trigger: ['change'],
+          },
+        ],
+        address: [
+          {
+            required: true,
+            message: '所在地区不能为空',
+            trigger: ['change'],
+          },
+          {
+            validator: validateAddress,
+            trigger: ['change'],
+          },
+        ],
+        banner: [
+          {
+            required: true,
+            message: '门头照不能为空',
+            trigger: ['change'],
+          },
+        ],
+        empNum: [{ required: true, message: '员工人数不能为空', trigger: ['blur'] }],
+        firstClubType: [{ required: true, message: '机构类型不能为空', trigger: ['change'] }],
+        secondClubType: [
+          {
+            required: true,
+            message: '医美类型/生美类型不能为空',
+            trigger: ['change'],
+          },
+        ],
+        medicalLicenseImage: [
+          {
+            required: true,
+            message: '医疗许可证不能为空',
+            trigger: ['change'],
+          },
+        ],
+      },
+      // logo图片列表
+      logoList: [],
+      // banner图片列表
+      bannerList: [],
+      // 级联选择的地址
+      address: '',
+      // 医疗许可证图片
+      licenseImageList: [],
+
+      provinceList: [],
+    }
+  },
+
+  watch: {
+    'formData.firstClubType': function (nVal, oVal) {
+      if (nVal === 1) {
+        this.formData.secondClubType = 1
+      } else if (nVal === 2) {
+        this.formData.secondClubType = 5
+      } else {
+        this.formData.secondClubType = ''
+      }
+    },
+  },
+  computed: {
+    ...mapGetters(['authUserId']),
+    lgnlatText() {
+      return this.lnglat ? this.lnglat.join(',') : ''
+    },
+    cityList() {
+      const province = this.provinceList.find((item) => item.id === this.formData.provinceId)
+      if (province) {
+        return province.children
+      }
+      return []
+    },
+    townList() {
+      const city = this.cityList.find((item) => item.id === this.formData.cityId)
+      if (city) {
+        return city.children
+      }
+      return []
+    },
+
+    fullAddress() {
+      let str = ''
+      this.provinceList.forEach((pro) => {
+        if (pro.id === this.formData.provinceId) {
+          str += pro.name
+          pro.children.forEach((city) => {
+            if (city.id === this.formData.cityId) {
+              str += city.name
+              city.children.forEach((town) => {
+                if (town.id === this.formData.townId) {
+                  str += town.name
+                }
+              })
+            }
+          })
+        }
+      })
+      return (str += this.formData.fullAddress)
+    },
+  },
+  created() {
+    this.init(this.clubInfo)
+    this.fetchAllCityList()
+  },
+  methods: {
+    // 地图定位
+    initMap() {
+      this.mapVisiable = true
+      this.$nextTick(() => {
+        this.$refs.aMap.init()
+      })
+    },
+
+    onPosition(lnglat) {
+      console.log(lnglat)
+      this.lnglat = [lnglat.lng, lnglat.lat]
+      this.formData.point = this.lnglat.join(',')
+    },
+
+    async fetchAllCityList() {
+      try {
+        const res = await this.$http.api.fetchAllCityList()
+        console.log(res)
+        this.provinceList = res.data
+        return res
+      } catch (error) {
+        console.log(error)
+        return Promise.reject(error)
+      }
+    },
+
+    genetageFormData() {
+      return {
+        customFlag: 0,
+        authParty: this.formData.name,
+        authUserId: this.authUserId,
+        provinceId: this.formData.provinceId,
+        cityId: this.formData.cityId,
+        townId: this.formData.townId,
+        address: this.formData.fullAddress,
+        mobile: this.formData.mobile,
+        logo: this.formData.logoImage,
+        lngAndLat: this.lgnlatText,
+        remarks: this.formData.remarks,
+        empNum: this.formData.empNum,
+        firstClubType: this.formData.firstClubType,
+        secondClubType: this.formData.secondClubType,
+        medicalLicenseImage: this.formData.medicalLicenseImage,
+        linkMan: this.formData.linkMan,
+        linkMobile: this.formData.linkMobile,
+        bannerList: this.bannerList.map((item) => (item.response ? item.response.data : item.url)),
+      }
+    },
+
+    async init(formData) {
+      console.log(formData)
+      this.formData = formData
+      this.formData.fullAddress = formData.address
+      this.formData.point = formData.lngAndLat
+      this.formData.logoImage = formData.logo
+      this.formData.name = formData.authParty
+      this.onPosition(formData)
+
+      if (formData.medicalLicenseImage) {
+        this.licenseImageList = [{ name: '', url: formData.medicalLicenseImage }]
+      }
+      if (formData.logo) {
+        this.logoList = [{ name: '', url: formData.logo }]
+      }
+      this.bannerList = formData.bannerList.map((i) => ({ name: '', url: i }))
+      this.formData.banner = formData.bannerList.length > 0 ? this.formData.bannerList.length : ''
+    },
+
+    // 表单验证
+    validate() {
+      const data = this.genetageFormData()
+      this.$emit('step', data)
+      return this.$refs.form.validate()
+    },
+
+    onProvinceChange() {
+      this.formData.cityId = ''
+      this.formData.townId = ''
+      this.countAddress()
+    },
+    onCityChange() {
+      this.formData.townId = ''
+      this.countAddress()
+    },
+    onTownChange() {
+      this.countAddress()
+    },
+
+    onFullAddressInput() {
+      this.countAddress()
+    },
+
+    countAddress() {
+      this.formData.address =
+        this.formData.cityId + this.formData.provinceId + this.formData.townId + this.formData.fullAddress
+    },
+
+    // logo上传
+    uploadLogoSuccess({ response, file, fileList }) {
+      this.logoList = fileList
+      this.formData.logoImage = fileList[0].response.data
+    },
+    handleLogoRemove({ file, fileList }) {
+      this.logoList = fileList
+      this.formData.logoImage = ''
+    },
+    beforeLogoUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('上传logo图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+
+    // banner上传
+    uploadBannerSuccess({ response, file, fileList }) {
+      this.bannerList = fileList
+      console.log(this.bannerList)
+      this.formData.banner = fileList.length > 0 ? fileList.length : ''
+    },
+    handleBannerRemove({ file, fileList }) {
+      this.bannerList = fileList
+      this.formData.banner = fileList.length > 0 ? fileList.length : ''
+    },
+    beforeBannerUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('上传banner图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+
+    // 医疗许可证图片上传
+    uploadLicenseImageSuccess({ response, file, fileList }) {
+      this.licenseImageList = fileList
+      console.log(this.licenseImageList)
+      this.formData.medicalLicenseImage = response.data
+    },
+    handleLicenseImageRemove({ file, fileList }) {
+      this.licenseImageList = fileList
+      this.formData.medicalLicenseImage = ''
+    },
+    beforeLicenseImageUpload(file) {
+      const flag = file.size / 1024 / 1024 < 5
+      if (!flag) {
+        this.$message.error('医疗许可证图片大小不能超过 5MB!')
+      }
+      return flag
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.club-info {
+  @include useTheme() {
+    ::v-deep {
+      .el-input.is-active .el-input__inner,
+      .el-input__inner:focus {
+        border-color: fetch('color');
+      }
+    }
+  }
+}
+
+// pc端
+@media screen and (min-width: 768px) {
+  .club-info {
+    @include useTheme() {
+      .position-select {
+        width: 100vw;
+        height: 100vh;
+        background: rgba(0, 0, 0, 0.39);
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 999;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .position-select-container {
+          background: #fff;
+          width: 60%;
+          box-sizing: border-box;
+          padding: 24px;
+
+          .position-select-footer {
+            position: relative;
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            padding-top: 24px;
+
+            .lnglat {
+              position: absolute;
+              font-size: 14px;
+              color: #666;
+
+              left: 0;
+              top: 50%;
+              transform: translateY(-50%);
+            }
+          }
+
+          .postion-control {
+            width: 120px;
+            height: 40px;
+            font-size: 14px;
+            border-radius: 4px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            margin-left: 16px;
+
+            &.position-confirm {
+              background: #f56c6c;
+              color: #fff;
+            }
+
+            &.position-cancel {
+              background: #b1b1b1;
+              color: #fff;
+            }
+          }
+        }
+      }
+
+      .normal-row {
+        position: relative;
+        .label {
+          font-size: 14px;
+          color: #606266;
+
+          i {
+            color: #f56c6c;
+            margin-right: 4px;
+          }
+
+          span {
+            color: #b2b2b2;
+          }
+        }
+        .postion-btn {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 62px;
+          height: 28px;
+          line-height: 28px;
+          font-size: 14px;
+          color: #fff;
+          background: #1890ff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+
+          &::before {
+            content: '';
+            display: inline-block;
+            width: 16px;
+            height: 16px;
+            background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
+            background-size: 16px 16px;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 移动端
+@media screen and (max-width: 768px) {
+  ::v-deep {
+    .el-form-item__label {
+      font-size: 3.4vw;
+    }
+  }
+
+  .position-select {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.39);
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .position-select-container {
+      background: #fff;
+      width: 80%;
+      box-sizing: border-box;
+      padding: 3.2vw;
+
+      .position-select-footer {
+        padding-top: 10vw;
+        position: relative;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .lnglat {
+          position: absolute;
+          font-size: 3.2vw;
+          color: #666;
+
+          left: 0;
+          top: 5vw;
+          transform: translateY(-50%);
+        }
+      }
+
+      .postion-control {
+        width: 16vw;
+        height: 7vw;
+        font-size: 3.4vw;
+        border-radius: 0.4vw;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        margin-left: 3.6vw;
+
+        &.position-confirm {
+          background: #f56c6c;
+          color: #fff;
+        }
+
+        &.position-cancel {
+          background: #b1b1b1;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  .normal-row {
+    position: relative;
+    .label {
+      font-size: 14px;
+      color: #606266;
+
+      i {
+        color: #f56c6c;
+        margin-right: 4px;
+      }
+
+      span {
+        color: #b2b2b2;
+        font-size: 2.6vw;
+      }
+    }
+    .postion-btn {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 14vw;
+      height: 6.8vw;
+      line-height: 6.8vw;
+      font-size: 3.2vw;
+      color: #fff;
+      background: #1890ff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+      border-radius: 0.4vw;
+
+      &::before {
+        content: '';
+        display: inline-block;
+        width: 3.58vw;
+        height: 3.58vw;
+        background: url(~assets/theme-images/common/icon-position.png) no-repeat center;
+        background-size: 3.58vw;
+      }
+    }
+  }
+}
+</style>