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

<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>
      <el-form-item prop="mobile" label="联系电话:">
        <el-input placeholder="请输入对外联系电话"></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="所在地区:">
        <br />
        <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>
          <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>
          <el-select placeholder="请选择" v-model="formData.c">
            <el-option label="湖北" :value="1"> </el-option>
            <el-option label="广东" :value="1"> </el-option>
          </el-select>
        </div>
        <el-input
          class="mt-4"
          type="textarea"
          :rows="4"
          placeholder="建议您如实填写详细收货地址，例如：街道名称，门牌号码，楼层和房间号等信息"
        ></el-input>
      </el-form-item>
      <el-form-item prop="mobile" label="">
        <div class="normal-row">
          <div class="label">
            所在位置:<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:">
        <br />
        <el-input v-show="false"></el-input>
        <SimpleUploadImage :limit="1" />
      </el-form-item>
      <el-form-item prop="mobile">
        <div class="normal-row">
          <div class="label">门头照:<span>（可上传6张）</span></div>
          <el-input v-show="false"></el-input>
          <SimpleUploadImage :limit="6" />
        </div>
      </el-form-item>

      <el-form-item label="机构类型:">
        <br />
        <SimpleRadio
          :list="clubTypeList"
          type="defalut"
          v-model="formData.clubType"
        />
      </el-form-item>

      <el-form-item label="医美类型:">
        <br />
        <SimpleRadio
          :list="medicalTypeList"
          type="rect"
          v-model="formData.medicalType"
        />
      </el-form-item>

      <el-form-item label="医疗许可证:" prop="licenseImage">
        <br />
        <el-input v-show="false" v-model="formData.licenseImage" />
        <SimpleUploadImage :limit="1" />
      </el-form-item>

      <el-form-item label="员工人数:" prop="memberCount">
        <el-input
          v-model.number="formData.memberCount"
          placeholder="请输入员工人数"
          clearable
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import SimpleUploadImage from '@/components/SimpleUploadImage'
import SimpleRadio from '@/components/SimpleRadio'
export default {
  components: {
    SimpleUploadImage,
    SimpleRadio,
  },
  data() {
    return {
      clubTypeList: [
        { value: 1, name: '医美' },
        { value: 2, name: '生美' },
        { value: 3, name: '项目公司' },
        { value: 4, name: '个人' },
        { value: 5, name: '其他' },
      ],
      medicalTypeList: [
        { value: 1, name: '诊所' },
        { value: 2, name: '门诊' },
        { value: 3, name: '医院' },
        { value: 4, name: '其他' },
      ],
      formData: {
        clubType: 1,
        medicalType: 1,
        licenseImage: '',
        memberCount: '',
        a: '',
        b: '',
        c: '',
      },
      rules: {},
    }
  },
}
</script>

<style lang="scss" scoped>
// pc端
@media screen and (min-width: 768px) {
  .normal-row {
    position: relative;
    .label {
      font-size: 14px;
      color: #606266;

      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(https://static.caimei365.com/www/authentic/pc/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;
    }
  }

  .normal-row {
    position: relative;
    .label {
      font-size: 14px;
      color: #606266;

      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(https://static.caimei365.com/www/authentic/pc/icon-position.png)
          no-repeat center;
        background-size: 3.58vw;
      }
    }
  }
}
</style>