caimei-authentic-www/pages/_template/app/form/components/form-club-edit.vue

<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"
          oninput="value=value.replace(/[^\d]/g,'')"
        ></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="运营联系人手机号:" oninput="value=value.replace(/[^\d]/g,'')">
        <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', 'userInfo']),
    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,
        authImageType: 1,
        authImageLogo: '',
        createBy: this.authUserId,
        authParty: this.formData.name,
        authUserId: this.authUserId,
        authId: this.userInfo.authId,
        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>