v1.7页面接口调试

.env.development

@@ -4,11 +4,11 @@ EVN = 'development'
 # 网站地址
 LOCALHOSE = 'https://zp-b.caimei365.com'
 # LOCALHOSE = 'http://192.168.2.81:8888'
-# LOCALHOSE = 'http://192.168.1.102:8888'
+LOCALHOSE = 'http://192.168.1.92:8888'
 
 # 接口api地址
-BASE_URL = 'https://zplma-b.caimei365.com'
-# BASE_URL = 'http://192.168.2.68:8012'
+# BASE_URL = 'https://zplma-b.caimei365.com'
+BASE_URL = 'http://192.168.2.68:8012'
 
 # 静态资源文件地址
 STATIC_URL = 'https://static.caimei365.com/www/authentic'

apis/index.js

@@ -57,6 +57,10 @@ export default ($axios) => {
   const fetchDoctorDetail = (params = {}) => $axios.get('/wx/auth/doctor/details', { params })
   // 公众号类型
   const checkAccountType = (params = {}) => $axios.get('/wx/sdk/account/type', { params })
+  // 判断用户手机号是否绑定了机构信息
+  const checkouMobileBindClub = (params = {}) => $axios.get('/wx/user/info', { params })
+
+
   // 高德地图api ： 将坐标转化为高德地图坐标
   const assistant = (params = {}) =>
     fetch('https://restapi.amap.com/v3/assistant/coordinate/convert' + queryStringify(params))
@@ -86,6 +90,7 @@ export default ($axios) => {
     fetchDoctorList,
     fetchDoctorDetail,
     checkAccountType,
-    assistant
+    assistant,
+    checkouMobileBindClub
   }
 }

components/SimpleDialog/index.vue

@@ -9,16 +9,26 @@
         <span class="simple-dialog__title__text">提示</span>
         <slot name="title"></slot>
       </div>
-      <div class="simple-dialog__content">
+      <div
+        class="simple-dialog__content"
+        :style="{ textAlign: center && 'center' }"
+      >
         <slot></slot>
-        <span class="simple-dialog__content__text">这是内容</span>
+        <span class="simple-dialog__content__text" v-text="description"></span>
       </div>
       <div class="simple-dialog__footer">
-        <slot name="footer"></slot>
+        <slot name="footer" v-if="!confirm || !cancel"></slot>
         <div
-          class="simple-dialog__confirm"
-          v-if="!$slots.footer"
-          @click="onClick"
+          class="simple-dialog__confirm simple-dialog__btn"
+          v-if="confirm"
+          @click="onConfirm"
+        >
+          确定
+        </div>
+        <div
+          class="simple-dialog__cancel simple-dialog__btn"
+          v-if="cancel"
+          @click="onCancel"
         >
           确定
         </div>
@@ -38,76 +48,174 @@ export default {
       type: Boolean,
       default: false,
     },
+    confirm: {
+      type: Boolean,
+      default: true,
+    },
+    cancel: {
+      type: Boolean,
+      default: true,
+    },
+    description: {
+      type: String,
+      default: '',
+    },
+    center: {
+      type: Boolean,
+      default: false,
+    },
   },
   methods: {
     onCloseClick() {
       this.$emit('change', false)
     },
-    onClick() {
-      this.$emit('click')
+    onConfirm() {
+      this.$emit('confirm')
+    },
+    onCancel() {
+      this.$emit('cancel')
     },
   },
 }
 </script>
 
 <style lang="scss" scoped>
-.simple-dialog {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.39);
-
-  .simple-dialog__container {
-    position: relative;
-    width: 76vw;
-    min-height: 20vw;
-    background: #fff;
-
-    .simple-dialog__colse {
-      width: 6.4vw;
-      height: 6.4vw;
-      font-size: 5vw;
-      position: absolute;
-      top: 3vw;
-      right: 3vw;
-      text-align: center;
-      line-height: 6.4vw;
-      color: #c2c2c2;
-    }
+@media screen and (min-width: 768px) {
+  .simple-dialog {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.39);
 
-    .simple-dialog__title {
-      padding: 3vw 4.8vw;
-      border-bottom: 1px solid #c2c2c2;
-      .simple-dialog__title__text {
-        font-size: 4.2vw;
-        color: #282828;
+    .simple-dialog__container {
+      position: relative;
+      width: 400px;
+      background: #fff;
+
+      .simple-dialog__colse {
+        width: 36px;
+        height: 36px;
+        font-size: 26px;
+        position: absolute;
+        top: 8px;
+        right: 12px;
+        text-align: center;
+        line-height: 36px;
+        color: #c2c2c2;
+        cursor: pointer;
       }
-    }
 
-    .simple-dialog__content {
-      padding: 3vw 4.8vw;
+      .simple-dialog__title {
+        padding: 12px 24px;
+        border-bottom: 1px solid #c2c2c2;
+        .simple-dialog__title__text {
+          font-size: 18px;
+          color: #282828;
+        }
+      }
 
-      .simple-dialog__content__text {
-        font-size: 3.6vw;
-        color: #282828;
+      .simple-dialog__content {
+        padding: 24px 24px;
+
+        .simple-dialog__content__text {
+          font-size: 16px;
+          color: #282828;
+        }
+      }
+
+      .simple-dialog__footer {
+        padding: 0 24px 24px;
+
+        .simple-dialog__btn {
+          width: 100%;
+          height: 40px;
+          text-align: center;
+          line-height: 40px;
+          font-size: 16px;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+
+        .simple-dialog__confirm {
+          background: #f3920d;
+          color: #fff;
+        }
+
+        .simple-dialog__cancel {
+          color: #666666;
+          box-sizing: border-box;
+          border: 1px solid #c2c2c2;
+          margin-top: 16px;
+        }
       }
     }
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .simple-dialog {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.39);
 
-    .simple-dialog__footer {
-      padding: 0 4.8vw 7vw;
-      .simple-dialog__confirm {
-        width: 100%;
-        height: 8.8vw;
+    .simple-dialog__container {
+      position: relative;
+      width: 76vw;
+      min-height: 20vw;
+      background: #fff;
+
+      .simple-dialog__colse {
+        width: 6.4vw;
+        height: 6.4vw;
+        font-size: 5vw;
+        position: absolute;
+        top: 3vw;
+        right: 3vw;
         text-align: center;
-        background: #f3920d;
-        color: #fff;
-        line-height: 8.8vw;
-        font-size: 3.6vw;
+        line-height: 6.4vw;
+        color: #c2c2c2;
+      }
+
+      .simple-dialog__title {
+        padding: 3vw 4.8vw;
+        border-bottom: 1px solid #c2c2c2;
+        .simple-dialog__title__text {
+          font-size: 4.2vw;
+          color: #282828;
+        }
+      }
+
+      .simple-dialog__content {
+        padding: 3vw 4.8vw;
+
+        .simple-dialog__content__text {
+          font-size: 3.6vw;
+          color: #282828;
+        }
+      }
+
+      .simple-dialog__footer {
+        padding: 0 4.8vw 7vw;
+        .simple-dialog__confirm {
+          width: 100%;
+          height: 8.8vw;
+          text-align: center;
+          background: #f3920d;
+          color: #fff;
+          line-height: 8.8vw;
+          font-size: 3.6vw;
+        }
       }
     }
   }

components/SimpleUploadImage/index.vue

@@ -74,7 +74,7 @@ export default {
       return this.imageList.length < this.limit
     },
     action() {
-      return process.env.VUE_APP_UPLOAD_API + '/upload/image'
+      return process.env.BASE_URL + '/upload/image'
     },
     headers() {
       return {
@@ -102,3 +102,13 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+::v-deep {
+  .el-upload-hidden {
+    .el-upload {
+      display: none;
+    }
+  }
+}
+</style>

layouts/app.vue

@@ -98,7 +98,7 @@ export default {
       this.$store.commit('user/SET_AUTH_USER_ID', authUserId)
 
       // 设置页面主题
-      if (authUserId === parseInt(62)) {
+      if (authUserId === parseInt(17)) {
         this.$store.commit('app/SET_PAGE_THEME', 'ross')
       }
 

pages/_template/app/form/club-register.vue

@@ -8,18 +8,28 @@
       ></div>
     </div>
     <div class="page-content">
-      <template v-if="false">
+      <template v-if="registerType.indexOf(step) > -1">
         <!-- 进步条 -->
-        <SimpleStep :list="stepList" :active="step" />
+        <SimpleStep :list="stepList" :active="step - 1" />
 
         <div class="step-list py-4">
           <keep-alive>
             <!-- 账号注册表单 -->
-            <template><FormClubRegister v-if="step === 0" /></template>
+            <template
+              ><FormClubRegister
+                v-if="step === 1"
+                ref="userForm"
+                @step="onUserFormStep"
+            /></template>
             <!-- 机构认证表单 -->
-            <template><FormClubInfo v-if="step === 1" /></template>
+            <template
+              ><FormClubInfo
+                v-if="step === 2"
+                ref="clubInfoForm"
+                @step="onClubInfoFormStep"
+            /></template>
             <!-- 设备认证表单 -->
-            <template><FormClubDevice v-if="step === 2" /></template>
+            <template><FormClubDevice v-if="step === 3" /></template>
           </keep-alive>
         </div>
       </template>
@@ -37,7 +47,7 @@
         <div
           class="button prev flex justify-center items-center mb-2"
           @click="onPrevStep"
-          v-if="step > 0"
+          v-if="step > 1"
         >
           上一步
         </div>
@@ -68,45 +78,114 @@ export default {
     FormClubDevice,
   },
   computed: {
-    ...mapGetters(['supplierInfo', 'authUserId', 'routePrefix']),
+    ...mapGetters([
+      'supplierInfo',
+      'authUserId',
+      'routePrefix',
+      'accessToken',
+      'userInfo',
+    ]),
   },
   data() {
     return {
-      step: 0,
+      registerType: [3],
+      step: 3,
       stepList: [
         {
           label: '账号注册',
-          id: 0,
+          id: 1,
           recordRoute: '/record/club/detail',
         },
         {
           label: '机构认证',
-          id: 1,
+          id: 2,
           recordRoute: '/record/club/detail',
         },
         {
           label: '设备认证',
-          id: 2,
+          id: 3,
           recordRoute: '/record/device',
         },
       ],
     }
   },
+  created() {
+    this.initForm()
+  },
   methods: {
-    onNextStep() {
-      if (this.step < this.stepList.length - 1) {
+    async onNextStep() {
+      const validateAction = {
+        1: this.$refs.userForm?.validate(),
+        2: this.$refs.clubInfoForm?.validate(),
+      }
+
+      debugger
+
+      if (this.registerType.indexOf(this.step) > -1) {
+        try {
+          await validateAction[this.step]
+        } catch (error) {
+          console.log(error)
+          return error
+        }
+      }
+
+      if (this.step < this.stepList.length) {
         this.step++
       }
     },
     onPrevStep() {
-      if (this.step > 0) {
+      if (this.step > 1) {
         this.step--
       }
     },
+
+    onUserFormStep(data) {
+      console.log(data)
+    },
+
+    onClubInfoFormStep(data) {
+      console.log(data)
+    },
+
     toRecord() {
       const step = this.stepList.find((item) => item.id === this.step)
       this.$router.push(`${this.routePrefix + step.recordRoute}`)
     },
+    // 初始化表单
+    initForm() {
+      if (true) {
+        this.registerType.push(2)
+      }
+      // 判断用户是否登录
+      if (this.accessToken) {
+        // 判断用户是否注册了账号
+        this.checkouMobileBindClub()
+        // 判断用户是否注册了机构
+      } else {
+        this.registerType.push(1)
+      }
+    },
+
+    // 判断用户手机号是否绑定机构
+    async checkouMobileBindClub() {
+      try {
+        const res = await this.$http.api.checkouMobileBindClub({
+          authUserId: this.authUserId,
+          mobile: this.userInfo.mobile,
+        })
+        if (!res.data.clubUser) {
+          this.registerType.push(1)
+        }
+        if (!res.data.auth) {
+          this.registerType.push(2)
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 判断用户是否注册了机构
   },
 }
 </script>
@@ -167,7 +246,7 @@ export default {
           background-image: url(https://static.caimei365.com/www/authentic/pc/icon-auth-danger.png);
         }
       }
- 
+
       .status {
         font-size: 18px;
         color: #282828;

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

@@ -1,84 +1,140 @@
 <template>
   <div class="club-info">
     <el-form :model="formData" :rules="rules" ref="form" label-position="left">
-      <el-form-item prop="mobile" label="机构名称:">
-        <el-input placeholder="请输入机构名称"></el-input>
+      <el-form-item prop="name" label="机构名称:">
+        <el-input
+          placeholder="请输入机构名称"
+          v-model="formData.name"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="mobile" label="联系电话:">
-        <el-input placeholder="请输入对外联系电话"></el-input>
+        <el-input
+          placeholder="请输入对外联系电话"
+          v-model="formData.mobile"
+        ></el-input>
       </el-form-item>
-      <el-form-item prop="mobile" label="所在地区:">
+      <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.a">
-            <el-option label="湖北" :value="1"> </el-option>
-            <el-option label="广东" :value="1"> </el-option>
+          <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.b" class="mx-2">
-            <el-option label="湖北" :value="1"> </el-option>
-            <el-option label="广东" :value="1"> </el-option>
+          <el-select
+            placeholder="请选择"
+            v-model="formData.cityId"
+            @change="onCityChange"
+          >
+            <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.c">
-            <el-option label="湖北" :value="1"> </el-option>
-            <el-option label="广东" :value="1"> </el-option>
+          <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="mobile" label="">
+      <el-form-item prop="point" label="">
+        <el-input v-model="formData.point" v-show="false"></el-input>
         <div class="normal-row">
           <div class="label">
-            所在位置:<span>（提示:打开地图，将定位图标移到具体位置）</span>
+            <i>*</i>所在位置:<span
+              >（提示:打开地图，将定位图标移到具体位置）</span
+            >
           </div>
           <div class="postion-btn">定位</div>
         </div>
-        <!-- <el-input placeholder="地图坐标" v-show="false"></el-input> -->
       </el-form-item>
-      <el-form-item prop="mobile" label="logo:">
+      <el-form-item prop="logoImage" label="logo:">
         <br />
-        <el-input v-show="false"></el-input>
-        <SimpleUploadImage :limit="1" />
+        <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="mobile">
+      <el-form-item prop="banner">
         <div class="normal-row">
-          <div class="label">门头照:<span>（可上传6张）</span></div>
-          <el-input v-show="false"></el-input>
-          <SimpleUploadImage :limit="6" />
+          <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="机构类型:">
-        <br />
-        <SimpleRadio
-          :list="clubTypeList"
-          type="defalut"
-          v-model="formData.clubType"
-        />
+        <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>
       </el-form-item>
 
-      <el-form-item label="医美类型:">
-        <br />
-        <SimpleRadio
-          :list="medicalTypeList"
-          type="rect"
-          v-model="formData.medicalType"
-        />
+      <el-form-item v-if="formData.firstClubType === 1" label="医美类型:">
+        <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>
+      </el-form-item>
+
+      <el-form-item v-if="formData.firstClubType === 2" label="生美类型:">
+        <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>
       </el-form-item>
 
-      <el-form-item label="医疗许可证:" prop="licenseImage">
+      <el-form-item label="医疗许可证:" prop="medicalLicenseImage">
         <br />
-        <el-input v-show="false" v-model="formData.licenseImage" />
-        <SimpleUploadImage :limit="1" />
+        <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="memberCount">
+      <el-form-item label="员工人数:" prop="empNum">
         <el-input
-          v-model.number="formData.memberCount"
+          v-model.number="formData.empNum"
           placeholder="请输入员工人数"
           clearable
         />
@@ -90,12 +146,52 @@
 <script>
 import SimpleUploadImage from '@/components/SimpleUploadImage'
 import SimpleRadio from '@/components/SimpleRadio'
+import { isPoint, isNumber } from '@/utils/validator'
 export default {
   components: {
     SimpleUploadImage,
     SimpleRadio,
   },
   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: '医美' },
@@ -111,17 +207,197 @@ export default {
         { value: 4, name: '其他' },
       ],
       formData: {
-        clubType: 1,
-        medicalType: 1,
-        licenseImage: '',
-        memberCount: '',
-        a: '',
-        b: '',
-        c: '',
+        name: '',
+        address: [],
+        fullAddress: '',
+        point: '',
+        mobile: '',
+        userMobile: '',
+        logoImage: '',
+        banner: '',
+        customFlag: 0,
+        remarks: '',
+        empNum: '',
+        firstClubType: 1,
+        secondClubType: 1,
+        medicalLicenseImage: '',
+        provinceId: '',
+        cityId: '',
+        townId: '',
+      },
+      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'] },
+        ],
       },
-      rules: {},
+      // logo图片列表
+      logoList: [],
+      // banner图片列表
+      bannerList: [],
+      // 级联选择的地址
+      address: '',
+      // 医疗许可证图片
+      licenseImageList: [],
+
+      provinceList: [],
     }
   },
+  computed: {
+    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 []
+    },
+  },
+  created() {
+    this.fetchAllCityList()
+  },
+  methods: {
+    async fetchAllCityList() {
+      try {
+        const res = await this.$http.api.fetchAllCityList()
+        console.log(res)
+        this.provinceList = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 表单验证
+    validate() {
+      this.$emit('step', this.formData)
+      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 < 500
+      if (!flag) {
+        this.$message.error('上传logo图片大小不能超过 500kb!')
+      }
+      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 < 1
+      if (!flag) {
+        this.$message.error('上传banner图片大小不能超过 1MB!')
+      }
+      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 < 1
+      if (!flag) {
+        this.$message.error('医疗许可证图片大小不能超过 1MB!')
+      }
+      return flag
+    },
+  },
 }
 </script>
 
@@ -134,6 +410,11 @@ export default {
       font-size: 14px;
       color: #606266;
 
+      i {
+        color: #f56c6c;
+        margin-right: 4px;
+      }
+
       span {
         color: #b2b2b2;
       }
@@ -182,6 +463,11 @@ export default {
       font-size: 14px;
       color: #606266;
 
+      i {
+        color: #f56c6c;
+        margin-right: 4px;
+      }
+
       span {
         color: #b2b2b2;
         font-size: 2.6vw;

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

@@ -2,13 +2,21 @@
   <div class="club-register">
     <el-form :model="formData" :rules="rules" ref="form" label-width="0">
       <el-form-item prop="mobile">
-        <el-input v-model="formData.mobile" placeholder="手机号"></el-input>
+        <el-input
+          v-model="formData.mobile"
+          placeholder="手机号"
+          @blur="onMobileBlur"
+          maxlength="11"
+          show-word-limit
+        ></el-input>
       </el-form-item>
       <el-form-item prop="verifyCode">
         <div class="verifyCode flex justify-between">
           <el-input
             v-model="formData.verifyCode"
             placeholder="验证码"
+            maxlength="6"
+            show-word-limit
           ></el-input>
           <div class="send ml-8">获取验证码</div>
         </div>
@@ -23,12 +31,30 @@
         ></el-input>
       </el-form-item>
     </el-form>
+
+    <SimpleDialog
+      v-model="active"
+      @confirm="onConfirm"
+      @cancel="onCancel"
+      description="抱歉，该手机号已注册，您可以登录后再来进行正品授权申请！"
+      :center="true"
+    />
   </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import { isMobile } from '@/utils/validator'
 export default {
   data() {
+    const confirmPwdValide = (rule, value, callback) => {
+      if (this.formData.password !== value) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+
     return {
       formData: {
         mobile: '',
@@ -36,13 +62,60 @@ export default {
         password: '',
         confirmPwd: '',
       },
+      active: false,
       rules: {
         mobile: [
           { required: true, message: '手机号不能为空', trigger: ['blur'] },
         ],
+        verifyCode: [
+          { required: true, message: '验证码不能为空', trigger: ['blur'] },
+        ],
+        password: [
+          { required: true, message: '密码不能为空', trigger: ['blur'] },
+        ],
+        confirmPwd: [
+          { required: true, message: '请再次输入密码', trigger: ['blur'] },
+          { validator: confirmPwdValide, trigger: ['blur'] },
+        ],
       },
     }
   },
+  computed: {
+    ...mapGetters(['authUserId', 'routePrefix', 'accessToken']),
+  },
+  methods: {
+    onConfirm() {
+      this.$router.push(`${this.routePrefix}`)
+    },
+    onCancel() {
+      this.active = false
+    },
+
+    onMobileBlur() {
+      this.checkouMobileBindClub()
+    },
+    // 判断用户手机号是否绑定机构
+    async checkouMobileBindClub() {
+      if (!isMobile(this.formData.mobile)) return
+      try {
+        const res = await this.$http.api.checkouMobileBindClub({
+          authUserId: this.authUserId,
+          mobile: this.formData.mobile,
+        })
+        if (res.data.clubUser) {
+          this.active = true
+        }
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    // 表单验证
+    validate() {
+      this.$emit('step', this.formData)
+      return this.$refs.form.validate()
+    },
+  },
 }
 </script>
 

utils/validator.js

@@ -13,3 +13,21 @@ export function isWeChat() {
     ua.match(/MicroMessenger/i).includes('micromessenger')
   )
 }
+
+/**
+ * @param {String} arg
+ * @returns {Boolean}
+ */
+export function isPoint(arg) {
+  const reg = /^[0-9|\.]{1,},[0-9|\.]{1,}$/
+  return reg.test(arg)
+}
+
+/**
+ * @param {String} arg
+ * @returns {Boolean}
+ */
+export function isNumber(arg) {
+  const reg = /\d+$/
+  return reg.test(arg)
+}