fillShopInf.vue

<template>
  <div class="fill-store-inf">
    <div class="logo-bg">
      <img v-if="false" src="../../../public/images/logo_white_sm.png" alt="">
    </div>

    <el-card class="box-card">
      <div slot="header" class="clearfix steps">
        <el-steps :active="2" align-center finish-status="success">
          <el-step title="注册账号"></el-step>
          <el-step title="填写主体信息"></el-step>
          <el-step title="填写店铺信息"></el-step>
          <el-step title="提交入驻审核"></el-step>
        </el-steps>
      </div>
      <div class="main-con">
        <el-form ref="storeForm" :model="storeForm" :rules="shopRules" label-width="180px" size="small">

          <el-form-item label="电商平台经验：" prop="is_business_experience">
            <el-radio-group v-model="storeForm.is_business_experience">
              <el-radio :label="1">有</el-radio>
              <el-radio :label="0">无</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="店铺名称：" prop="store_name" inline-message="true">
            <el-input v-model="storeForm.store_name" style="width: 400px;" placeholder="请输入店铺名称"></el-input>
          </el-form-item>

          <el-form-item label="经营类目：" prop="scope">
            <el-select v-model="storeForm.scope" @remove-tag="removeTag" @visible-change="scopeVisibleChange($event)" multiple placeholder="请选择..." style="width: 400px;">
              <el-option
                v-for="item in scopeOptions"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="店铺LOGO：" prop="shop_logo">
            <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
              <div style="padding-right:6px;">
                <el-upload
                  :class="['uploadData',{ 'hiden-dom': logoImgFileList.length >= 1 }]"
                  action="#"
                  list-type="picture-card"
                  :limit="1"
                  :on-exceed="showTip1"
                  :before-upload = "beforeUpLogoImg"
                  :http-request="uploadLogoImgs"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :file-list = 'logoImgFileList'
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </div>
              <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
              </div>
              <div style="width:380px;line-height: 24px;padding-top: 6px;">
                <span class="tips-text">请上传店铺LOGO，文件大小在500KB以内，支持png,jpg格式，最多可上传1张</span>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="运营负责人：" prop="emergency_name" inline-message="true">
            <el-input v-model="storeForm.emergency_name" style="width: 400px;" placeholder="请输入运营负责人姓名"></el-input>
          </el-form-item>

          <el-form-item label="联系电话：" prop="emergency_tel">
            <el-input v-model="storeForm.emergency_tel" style="width: 400px;" placeholder="请输入联系电话"></el-input>
          </el-form-item>

          <el-form-item>
            <p style="width:580px;line-height:24px;font-size:14px;margin: 0;">需要提交特殊产品资质的类目请将资质上传在此处，包括全国工业生产许可证、3C、医疗品械
              生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</p>
          </el-form-item>

          <el-form-item label="其他资质：">
            <div class="auth-con">
              <!--*** 方法二 start ***-->
              <div v-for="(item,index) in qualificationList" :key="item.id" class="single-upload-con">
                <div v-show="!item.url" class="single-auth-img el-icon-plus" @click="upPreAuthImg(index)"></div>

                <div v-show="item.url" class="single-auth-img-con">
                  <img class="auth-spec-img" :src="item.url" alt="" />
                  <span class="span-img-del-loading">
                    <span class="span-img-del el-icon-zoom-in zoom-span-block" @click="viewSingleSpecImg(index,item)"></span>
                    <span class="span-img-del el-icon-delete del-span-block" @click="delSingleSpecImg(index,item)"></span>
                  </span>
                </div>
                <div class="single-title">{{ authTitleFormatter(item.content) }}</div>
                <!-- 真正上传 dom 原生 input -->
                <input type="file" style="display: none;" :ref=" 'hxz' + index " accept="image/*"
                       @change="changeIMG(index,item)">
              </div>
              <!--*** 方法二 end ***-->
            </div>
          </el-form-item>

          <el-form-item class="confirm-btn">
            <div>
              <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button>
              <el-button type="primary" @click="next('storeForm')">提交审核</el-button>
            </div>

          </el-form-item>

        </el-form>
      </div>
    </el-card>

    <!-- 图片预览 -->
    <el-dialog
      :visible.sync="imgDialog"
      :destroy-on-close="true"
      width="60%"
      center
      :close-on-click-modal="false"
      class="img-dialog-con"
    >
      <img class="img-spe" :src="qualificationUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import { getInfo,getGoodsType, getShopInf ,addShopInf ,upLoadImg,getUploadQualificationListData} from '@/api/module/entry';
  export default {
    name: "FillShopInf",
    data() {
      let logoValidator = (rule, value, callback) => {
        if(this.logoImgFileList.length > 0) {
          callback();
        }else if(this.logoImgFileList.length === 0) {
          callback(new Error("店铺logo图片至少上传一张"));
        }
      };
      let busAuthValidator = (rule, value, callback) => {
        if(this.businessImgFileList.length > 0) {
          callback();
        }else if(this.businessImgFileList.length === 0) {
          callback(new Error("其他资质图片至少上传一张"));
        }
      };
      // 手机号码格式校验
      let checkTel = (rule, value, callback) => {
        const reg = /^1[3456789]\d{9}$/;
        if(!reg.test(value)){
          callback(new Error('手机号码格式有误'));
        }else {
          callback();
        }
      }

      return {
        dialogImageUrl: '',
        dialogVisible: false,
        dialogImageUrl2: '',
        dialogVisible2: false,
        logoImgFileList: [],
        businessImgFileList: [],
        scopeOptions: [],
        storeForm: {
          is_business_experience: 0,
          store_name: '',
          scope: [],
          shop_logo: '',
          business_auth: '',
          emergency_name: '',
        },
        //
        shopRules: {
          store_name: [
            {required: true, message: '店铺名称不能为空', trigger: 'blur'},
            { max: 36,message: '店铺名称最多输入36个字符', trigger: 'blur' }
          ],
          scope: [{required: true, message: '经营类目至少选择一种', trigger: 'change'}],
          shop_logo: [{required: true, message: '店铺Logo至少上传一张图片', validator: logoValidator}],//
          emergency_name: [{required: true, message: '运营负责人不能为空', trigger: 'blur'}],//
          emergency_tel: [
            {required: true, message: '联系人手机号码不能为空', trigger: 'blur'},
            {required: true, validator: checkTel,trigger: 'blur' }
            ],
        },
        // 需要上传的资质
        qualificationList: [],
        qualificationUrl: '',
        imgDialog: false
      }
    },
    created() {
      // 获取经营一级类目
      getGoodsType().then(res => {
        if(res.code == 1) {
          this.scopeOptions = res.data;
        }else {
          this.$message({type:'error',message:res.message ? res.message : ''});
        }
      });
      // 获取店铺信息
      getInfo().then(res=> {
        if (res.code == 1 && res.data.user) {
          if (res.data.user.state > 0) {
            this.getShop();
          }
        }else {
          this.$message({type:'error',message: res.message ? res.message : '获取数据失败'});
        }
      });
    },
    mounted() {},
    methods: {
      showTip1(files,fileList){
        this.$message({message: '最多上传1张图片', type: 'warning'});
      },
      showTip20(files,fileList) {
        this.$message({message: '最多上传20张图片', type: 'warning'});
      },
      // 店铺logo图片上传格式和大小的校验
      beforeUpLogoImg(file) {
        let isImgSize = (file.size / 1024 ) > 500;
        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持png/png格式',
            type: "warning"
          });
          return false;
        }
        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过500kb',
            type: "warning"
          });
          return false;
        }
      },
      // 其他资质图片上传 校验
      beforeUpBusImg(file) {
        let isImgSize = (file.size / 1024 /1024) > 2;
        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持png/png格式',
            type: "warning"
          });
          return false;
        }
        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过2M',
            type: "warning"
          });
          return false;
        }
      },
      /** 获取 店铺信息 */
      getShop() {
        getShopInf().then(res => {
          if(res.code == 1){
            // 处理  select 下拉回显数据格式
            this.storeForm.scope = [];
            if(res.data.scope === '') {
              this.storeForm.scope = [];
            }else {
              let scopeListStr = res.data.scope.split(',');
              let scopeList = [];
              for(let i = 0; i < scopeListStr.length; i++) {
                scopeList.push(parseInt(scopeListStr[i]));
              }
              this.storeForm = res.data;
              this.storeForm.scope = scopeList;
            }

            // 店铺logo回显处理
            let logoImgArr = [];
            let logoImgUrl = {};
            logoImgArr = this.storeForm.shop_logo.split(",");
            if (logoImgArr.length > 0) {
              logoImgArr.forEach(item=> {
                logoImgUrl = {};
                if (item) {
                  logoImgUrl.url = item
                  this.logoImgFileList.push(logoImgUrl)
                }
              });
            }else {
              this.logoImgFileList = [];
            }

            // 资质图片回显处理
            this.qualificationList = this.storeForm.qualification;

          }else {
            this.$message({
              message: res.message ? res.message : '操作失败' ,
              type: 'error'
            });
          }
        });
      },
      // 上传店铺logo图片
      uploadLogoImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img};
          upLoadImg(data).then((res) => {
            if(res.code ==  1){
              this.logoImgFileList.push({'url':res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
              this.$refs.storeForm.clearValidate('shop_logo');
            }else {
              this.$message({type:'error',message:res.message ? res.message : '上传失败'});
            }
          });
        });
      },

      // 上传资质图片
      uploadBusinessImgs(param) {

        console.log(368,param);
        // this.getBase64(param.file).then((res) => {
        //   let result = res.split(",");
        //   this.Base64img = result[1];
        //   let data = {"img_data":this.Base64img};
        //   upLoadImg(data).then((res) => {
        //     if(res.code ==  1){
        //       this.businessImgFileList.push({'url':res.data.image_url});
        //       this.$message({type:'success',message:'上传成功'});
        //       this.$refs.storeForm.clearValidate('business_auth');
        //     }else {
        //       this.$message({type:'error',message:res.message ? res.message : '上传失败'});
        //     }
        //   });
        // });
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleRemove(file,fileList) {
        for(let i = 0; i < this.logoImgFileList.length; i++) {
          if(file.uid === this.logoImgFileList[i].uid) {
            this.logoImgFileList.splice(i,1);
          }
        }
      },
      handlePictureCardPreview2(file) {
        this.dialogImageUrl2 = file.url;
        this.dialogVisible2 = true;
      },
      handleRemove2(file,fileList) {
        for(let i = 0; i < this.businessImgFileList.length; i++) {
          if(file.uid === this.businessImgFileList[i].uid) {
            this.businessImgFileList.splice(i,1);
          }
        }
      },
      // 图片转换为base64位
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      },
      //
      back() {
        this.$router.push("/fillMainInf");
      },
      /** 提交审核数据 */
      next(formName) {

        // 其他 资质 填写拦截校验
        let isComplete = false;
        if (this.qualificationList.length > 0) {
          for (let i = 0; i < this.qualificationList.length; i++) {
            if (!this.qualificationList[i].url) {
              isComplete = true;
              break
            }
          }

          if (isComplete) {
            this.$message({type:'warning',message: '请上传对应资质所需的图片'});
            return;
          }
        }

        let scoprStr = '';
        for(let i = 0; i < this.storeForm.scope.length; i++) {
          scoprStr += this.storeForm.scope[i] + ',';
        }
        this.storeForm.scope = scoprStr.substring(0,scoprStr.length - 1);

        // shop_logo图片
        if(this.logoImgFileList.length > 0) {
          for(let i = 0; i < this.logoImgFileList.length; i++) {
            if(i === 0) {
              this.storeForm.shop_logo = this.logoImgFileList[i].url;
            }else {
              this.storeForm.shop_logo += ',' + this.logoImgFileList[i].url;
            }
          }
        }

        // 其他资质 数据格式处理
        // let JSONqualificationList = JSON.stringify(this.qualificationList)
        this.storeForm.qualification_auth = JSON.stringify(this.qualificationList)

        //formName
        this.$refs[formName].validate((valid) => {
          if(valid) {
            addShopInf(this.storeForm).then(res => {
              if(res.code == 1){
                this.$router.push("/reviewing");
              }else {
                this.$message({type: 'error',message: res.message ? res.message : '操作失败'});
                // 处理 scope数据格式冲突
                if(this.storeForm.scope === '') {
                  this.storeForm.scope = [];
                }else {
                  let scopeListStr = this.storeForm.scope.split(',');
                  let scopeList = [];
                  for(let i = 0; i < scopeListStr.length; i++) {
                    scopeList.push(parseInt(scopeListStr[i]));
                  }
                  this.storeForm.scope = scopeList;
                }
              }
            });
          }
          else {
            // 因  scope字段是selcet的绑定值，必须为数组类型，但是，在传给后台的时候，是字符串类型，传入的时候需要处理，回显的时候也需要处理
            // 在校验时候就产出了这个bug,校验不通过的话，他已经被处理为字符串了，不通过的话，还原格式，不能还原数据
            //this.storeForm.scope = [];
            if(this.storeForm.scope === '') {
              this.storeForm.scope = [];
            }else {
              let scopeListStr = this.storeForm.scope.split(',');
              let scopeList = [];
              for(let i = 0; i < scopeListStr.length; i++) {
                scopeList.push(parseInt(scopeListStr[i]));
              }
              this.storeForm.scope = scopeList;
            }
          }
        });
      },
      /** 删除单个 经营类目 触发 */
      removeTag(indexVal) {
        if (!indexVal) return;
        if (this.storeForm.scope.length == 0) {
          this.qualificationList = [];
        }
        if (this.storeForm.scope.length > 0) {
          let data = { cate_ids: this.storeForm.scope }
          getUploadQualificationListData(data).then(res=> {
            if (res.code == 1) {
              this.qualificationList = res.data ? res.data : [];
            }
          })
        }
      },
      /** 经营类目 下拉框隐藏时候，触发 */
      scopeVisibleChange(handleType) {
        if (!handleType) {
          if (Array.isArray(this.storeForm.scope) && this.storeForm.scope.length > 0) {
            let data = { cate_ids: this.storeForm.scope }
            getUploadQualificationListData(data).then(res=> {
              if (res.code == 1) {
                this.qualificationList = res.data ? res.data : [];
              }
            })
          }
        }
      },
      /** 上传 对应资质图片 */
      upPreAuthImg(index) {
        let domRef = "hxz" + index;
        this.$refs[domRef][0].value = '';
        this.$refs[domRef][0].click();
      },
      /** 真正的上传图片方法，原生input */
      changeIMG(index, item) {
        let curItem = item;
        let inputDom = "hxz" + index;
        let file = this.$refs[inputDom][0].files[0];

        if( file.size > 1024 * 1024 * 3 ) {
          this.$message({ type: 'error',message: '规格图片不能大于 3 M'});
          return;
        }

        this.getBase64(file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data": this.Base64img}
          upLoadImg(data).then(res => {
            // this.loading = false;
            if (res && res.code == 1) {
              curItem.url = res.data.image_url;
              // this.singleSpecImgList.push({'url': res.data.image_url})
              this.$message({ message:'上传成功',type:'success'});
            }else {
              this.$message({ message:'上传失败，请重新上传',type:'error'});
            }
          })
        });
      },
      /** 更换图片 */
      // changeSpeImg(index,item) {
      //   this.upPreAuthImg(index,item);
      // },
      /** 删除 当前图片 */
      delSingleSpecImg(index,item) {
        if( item.url ) {
          item.url = '';
          this.$message({type: 'success',message: '删除成功'});
        }
      },
      /** 查看 当前图片 */
      viewSingleSpecImg(index,item) {
        this.imgDialog = false;
        // this.qualificationUrl = "";
        if (!item.url) return;
        this.imgDialog = true;
        this.qualificationUrl = item.url
      },
      /** 资质类目 title格式化 */
      authTitleFormatter(textVal) {
        let res = '',resoult = '';
        if (textVal) {
          res = textVal.trim();
          // if(textVal.left(0) == '《') {
          //
          // }
          // if(textVal.right(0) == '《') {
          //
          // }
          // console.log(111,textVal.left(0));
          // console.log(222,textVal.right(0));
        }
        return res
      },
    } // methods end
  }
</script>

<style lang="scss" type="text/stylus" scoped>
  .fill-store-inf {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    .box-card {
      width: 80%;
      margin: 30px auto 30px;
      height: calc(100% - 140px);
      /deep/.el-card__body{
        height: calc(100% - 180px);
        overflow-x: hidden;
        overflow-y: scroll;
      }
    }
  }

  .logo-bg {
    height: 60px;
    background: #1890ff;

    img {
      height: 44px;
      margin: 8px 0 8px 20px;
    }
  }

  .steps {
    height: 70px;
    width: 60%;
    margin: 20px auto;
  }

  .steps >>> .el-step__title {
    font-size: 16px;
    line-height: 18px;
    padding-top: 20px;
  }

  .el-step >>> .el-step__head.is-process {
    color: #1890ff;
    border-color: #1890ff;

    .el-step__icon.is-text {
      background-color: #1890ff;

      .el-step__icon-inner {
        color: #fff;
      }
    }
  }

  .el-step >>> .el-step__title.is-process {
    color: #000;
    font-weight: 400;
  }

  .el-step >>> .el-step__head.is-success {
    color: #1890ff;
    border-color: #1890ff;

    .el-step__line {
      background-color: #1890ff;
    }
  }

  .el-step >>> .el-step__title.is-success {
    color: #000;
  }

  // 主体信息
  .main-con {
    width: 70%;
    height: 100%;
    margin: 20px auto 0;

    // 重置 提示图标颜色

    .tips-text {
      font-size: 14px;
      color: #C9C9C9;
      word-break: break-all;
    }

    .h-warning:before {
      color: #e3c300;
    }

    // 上传图片样式
    .uploadData {
      display: inline-block;

      /deep/ .el-upload--picture-card {
        width: 100px;
        height: 100px;
      }

      /deep/ .el-upload {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }

      /deep/ .el-upload-list--picture-card .el-upload-list__item {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }

      /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }

      /deep/ .avatar {
        width: 100px;
        height: 100px;
      }
    }

    .hiden-dom >>> .el-upload--picture-card {
      display :none!important;
    }

    /*** 资质 样式  start ***/
    .auth-con {
      width:100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      justify-content: normal;
      flex-wrap: wrap;

    }

    .single-upload-con {
      width: 160px;
      height: 140px;
      text-align :center;
      overflow:hidden;
    }

    .single-auth-img {
      width: 98px;
      height: 98px;
      border-radius : 6px;
      border: 1px dashed #eee;
      margin: 5px auto;
      cursor: pointer;
      color: #8c939d;
      line-height : 98px;
      font-size : 28px;
    }

    .single-auth-img-con{
      margin: 0;
      padding: 0;
      display : inline-block;
      width:98px;
      height:98px;
      position: relative;
      //top:4px;
      cursor: pointer;
      border-radius: 6px;
      border: 1px solid #c0ccda;
    }

    .auth-spec-img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      border: none;
    }

    /* 当前图片滑过 效果，显示删除icon */
    .span-img-del-loading {
      display : none;
      position: absolute;
      width: 98px;
      height: 98px;
      top: 0;
      left: 0;
      border-radius : 5px;
      z-index: 66;
      background-color: rgba(0,0,0,0.5);
      opacity: 0.75;
      transition: opacity .3s;
    }

    .span-img-del-loading > .zoom-span-block {
      color: #fff;
      font-size: 20px;
      font-weight : 500;
      margin: 41px 4px 0;
      z-index: 70;
    }

    .span-img-del-loading > .del-span-block {
      color: #fff;
      font-size: 20px;
      font-weight : 500;
      margin: 41px 4px 0;
      z-index: 70;
    }


    .single-auth-img-con:hover > .span-img-del-loading {
      display : block;
    }

    .single-title {
      font-size: 12px;
      color: #666;
      text-align: center;
      //line-height :14px;
      //margin: 10px 0;
    }
    /*** 资质 样式  end ***/

    .confirm-btn {
      width: 50%;
      margin: 40px auto 20px;
    }

    .confirm-btn > div {
      text-align: center;
    }
  }

  .img-dialog-con >>> .el-dialog__body {
    text-align : center;
  }

  .img-spe {
    //width: 80%;
    margin: 0 auto;
  }
</style>