caimei-mall-admin-ui/src/views/club/form.vue

<template>
  <div class="app-container clearfix" style=" width: 700px;margin: 0 auto;">
    <el-form ref="dataForm" :rules="rules" :model="form" label-position="left" label-width="130px">
      <el-form-item label="机构名称:" prop="name" style="width: 500px;text-align: right;">
        <el-input v-model="form.name" placeholder="请与营业执照的注册名称保持一致" maxlength="20" />
      </el-form-item>
      <el-form-item label="联系人:" prop="linkMan" style="width: 500px; text-align: right;">
        <el-input v-model="form.linkMan" placeholder="请填写联系人姓名" maxlength="10" />
      </el-form-item>
      <el-form-item label="手机号:" prop="contractMobile" style="width: 500px; text-align: right;">
        <el-input v-model="form.contractMobile" placeholder="请填写你的常用号码" maxlength="11" />
      </el-form-item>
      <City :address-data="addList" :is-address="isAddress" @addlist="handleCity" />

      <el-form-item label="" prop="address" style="width: 500px; text-align: right;float:left;">
        <el-input v-model="form.address" placeholder="请填写机构详细的地址" />
      </el-form-item>
      <el-form-item label="机构类型:" style="width: 270px; text-align: right;float:left;">
        <el-radio-group v-model="form.firstClubType">
          <el-radio :label="1">医美</el-radio>
          <el-radio :label="2">生美</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="营业执照编号:" prop="socialCreditCode" style="width: 500px; text-align: right;float:left;">
        <el-input v-model="form.socialCreditCode" placeholder="请填写统一社会信用代码" maxlength="18" />
      </el-form-item>
      <el-form-item label="营业执照:" prop="businessLicenseImage" style="width:450px;text-align: right;float:left;">
        <div class="form-el-upload">
          <el-upload
            class="avatar-uploader"
            :action="actionUrl"
            :headers="getToken"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeUpload"
          >
            <div v-loading="businessImgLoading" class="avatar">
              <img v-if="form.businessLicenseImage" :src="form.businessLicenseImage" @error="reloadAvatarImage" @load="loadAvatarSucess">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </div>
            <div slot="tip" class="el-upload__tip_club">注意：请上传jpg/png格式的图片，最大不超过5M</div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="门头照:" prop="headpic" style="width:450px; text-align: right;float:left;">
        <div class="form-el-upload">
          <el-upload
            class="avatar-uploader"
            :action="actionUrl"
            :headers="getToken"
            :show-file-list="false"
            :on-success="handleDoorwaySuccess"
            :before-upload="beforeUpload"
          >
            <div v-loading="headImgLoading" class="avatar">
              <img v-if="form.headpic" :src="form.headpic" @error="reloadDoorwayImage" @load="loadDoorwaySucess">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </div>
            <div slot="tip" class="el-upload__tip_club">注意：请上传jpg/png格式的图片，最大不超过5M</div>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="是否上线:" style="width: 240px;text-align: right;float:left;">
        <el-radio-group v-model="form.status">
          <el-radio :label="90">是</el-radio>
          <el-radio :label="91">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item style="width: 430px;text-align: right;float:left;">
        <el-button style="margin-right:10px;float: left;" @click="backToList">返回</el-button>
        <el-button style="margin-right:10px;float: left;" type="primary" :loading="loadingbut" @click="onSubmite()">{{ loadingbuttext }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 引入省市区组件，公共组件所在的路径
import City from '@/components/Ctiy'
import { saveAddClubUser } from '@/api/club'
export default {
  components: { City },
  data() {
    return {
      form: {
        name: '',
        linkMan: '',
        contractMobile: '',
        socialCreditCode: '',
        address: '',
        status: 90,
        firstClubType: 1,
        headpic: '',
        businessLicenseImage: ''
      },
      rules: {
        name: [{ required: true, message: '机构名称不能为空', trigger: 'blur' }],
        contractMobile: [
          { required: true, message: '常用手机号不能为空', trigger: 'blur' },
          {
            required: true,
            pattern: /^\d{11}|\d{13}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        businessLicenseImage: [{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
        linkMan: [{ required: true, message: '联系人不能为空', trigger: 'blur' }],
        socialCreditCode: [{ required: true, message: '统一社会信用代码不能为空', trigger: 'blur' }],
        address: [{ required: true, message: '机构详细地址不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '请选择是否上线', trigger: 'blur' }]
      },
      addList: {
        provinceID: '',
        cityID: '',
        townID: ''
      },
      businessImgLoading: false,
      headImgLoading: false,
      isAddress: false,
      loadingbut: false,
      loadingbuttext: '保存'
    }
  },
  computed: {
    getToken() {
      return {
        'token': this.$store.getters.token
      }
    },
    organizeID() {
      return this.$store.getters.organizeId
    },
    actionUrl() {
      return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
    }
  },
  methods: {
    // 从子组件获取省市区
    handleCity(data) {
      // console.log(data)
      this.addList.provinceID = data.provinceid
      this.addList.cityID = data.cityid
      this.addList.townID = data.townid
      this.isAddress = false
    },
    // 上传图标事件
    handleAvatarSuccess(response, file) {
      this.businessImgLoading = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.form.businessLicenseImage = response.data
        }, 1000 * 2)
      })
    },
    reloadAvatarImage() {
      this.businessImgLoading = true
      setTimeout(() => {
        this.form.businessLicenseImage = this.form.businessLicenseImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
      }, 1000 * 2)
    },
    loadAvatarSucess() {
      this.businessImgLoading = false
    },
    // 上传图标事件
    handleDoorwaySuccess(response, file) {
      this.headImgLoading = true
      this.$nextTick(() => {
        setTimeout(() => {
          this.form.headpic = response.data
        }, 1000 * 2)
      })
    },
    reloadDoorwayImage() {
      this.headImgLoading = true
      setTimeout(() => {
        this.form.headpic = this.form.headpic.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
      }, 1000 * 2)
    },
    loadDoorwaySucess() {
      this.headImgLoading = false
    },
    // 对上传图片的大小、格式进行限制
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isJPG2 = file.type === 'image/jpg'
      const isPNG = file.type === 'image/png'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isJPG && !isJPG2 && !isPNG) {
        this.$message.error('只支持jpg或png格式图片')
      }
      if (!isLt5M) {
        this.$message.error('请上传5MB以内的图片!')
      }
      return (isJPG || isJPG2 || isPNG) && isLt5M
    },
    onSubmite() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          if (this.addList.provinceID === '') {
            this.isAddress = true
            return
          }
          const Formobj = Object.assign(this.form, { id: this.organizeID })
          const params = Object.assign(this.addList, Formobj)
          this.loadingbut = true
          this.loadingbuttext = '保存中...'
          saveAddClubUser(params).then(response => {
            this.loadingbut = false
            this.loadingbuttext = '保存'
            this.$message({ message: response.msg, type: 'success', center: true })
            this.backToList()
          }).catch(() => {
            this.loadingbut = false
            this.loadingbuttext = '保存'
          })
        }
      })
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/club/list'
          })
        })
      })
    }
  }
}
</script>

<style lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 148px;
  height: 148px;
  line-height: 148px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
.avatar img {
  width: 148px;
  height: 148px;
  display: block;
}
.el-form-item__label{
    text-align: right !important;
}
.form-el-upload{
  width: 150px;
  height: 150px;
}
.el-upload__tip_club{
  margin-top: 0;
  line-height: 20px;
  color: red;
  text-align: left;
  position: absolute;
  right: -45%;
  bottom: 0;
}
.address .el-form-item__content{
  margin-left: 0 !important;
}
.span-tip{
  position: absolute;
  right: 70px;
  bottom: -21px;
  font-size: 12px;
  line-height: 20px;
  color: red;
  text-align: left;
}
/*清除浮动*/
.clearfix:before,.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1;
}
</style>