fillShopInf.vue

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

    <el-card class="box-card">
      <div slot="header" class="clearfix steps">
        <el-steps :active="3" 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-step title="提交入驻审核"></el-step>
        </el-steps>
      </div>
      <div class="main-con">
        <el-form ref="storeForm" :model="storeForm" :rules="shopRules" label-width="180px">

          <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" 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"
                  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="其他资质：" prop="business_auth">
            <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
              <div style="padding-right:6px;">
                <el-upload
                  class="uploadData"
                  action="#"
                  list-type="picture-card"
                  :limit="20"
                  :on-exceed="showTip20"
                  :before-upload = "beforeUpBusImg"
                  :http-request="uploadBusinessImgs"
                  :on-preview="handlePictureCardPreview2"
                  :on-remove="handleRemove2"
                  :file-list = 'businessImgFileList'>
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible2">
                  <img width="100%" :src="dialogImageUrl2" 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;color: #333;">
                <span class="tips-text">请上其他资质，单个文件大小在2MB以内，支持jpg,png格式，最多可上传20张</span>
              </div>
            </div>
          </el-form-item>

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

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

<script>
  import { getGoodsType, getShopInf ,addShopInf ,upLoadImg} 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'}],
          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' }
            ],
          business_auth: [{required: true, message: '其他资质至少上传一张图片', validator: busAuthValidator}],//
        }
      }
    },
    created() {

      // 获取经营一级类目
      getGoodsType().then(res => {
        if(res.code === 1) {
          this.scopeOptions = res.data;
        }
      });
      // 获取店铺信息
      this.getShop();
    },
    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 && res.code === 1 && res.data){
            // 处理  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;
            }
            //console.log("处理后的格式：",this.storeForm.scope);
            // 店铺logo回显处理
            let logoList = {};
            let logoArr = [];
            if(this.storeForm.shop_logo.indexOf(",") > 0) {
              logoArr = this.storeForm.shop_logo.split(",");
              for(let a = 0; a < logoArr.length; a++){
                logoList = {};
                logoList.url = logoArr[a];
                this.logoImgFileList.push(logoList);
              }
            }else if(this.storeForm.shop_logo) {
              logoList.url = this.storeForm.shop_logo;
              this.logoImgFileList = [];
              this.logoImgFileList.push(logoList);
            }else {
              this.logoImgFileList = [];
            }
            // 资质图片回显处理
            let businessList = {};
            let busArr = [];
            if(this.storeForm.business_auth.indexOf(",") > 0) {
              busArr = this.storeForm.business_auth.split(",");
              for(let a = 0; a < busArr.length; a++){
                businessList = {};
                businessList.url = busArr[a];
                this.businessImgFileList.push(businessList);
              }
            }else if(this.storeForm.business_auth) {
              businessList.url = this.storeForm.business_auth;
              this.businessImgFileList = [];
              this.businessImgFileList.push(businessList);
            }else {
              this.businessImgFileList = [];
            }
          }else if( res.code === 0 && res.msg) {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }else {
            this.$message({
              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) => {
            //console.log("可以过来了",this.logoImgFileList);
            if(res && res.code ===  1){
              this.logoImgFileList.push({'url':res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
              this.$refs.storeForm.clearValidate('shop_logo');
            }else {
              let msg = '';
              msg = res.message || '上传失败'
              this.$message({type:'success',message: msg });
              //this.$refs.storeForm.clearValidate('shop_logo');
            }
          });
        });
      },

      // 上传资质图片
      uploadBusinessImgs(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 && res.code ===  1){
              this.businessImgFileList.push({'url':res.data.image_url});
              this.$message({type:'success',message:'上传成功'});
              this.$refs.storeForm.clearValidate('business_auth');
            }
          });
        });
      },

      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("/fillBrandInf");
      },
      next(formName) {
        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);
        //console.log("提交前的scope",this.storeForm.scope);

        // 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;
            }
          }
        }

        // 其他资质图片字段处理
        if(this.businessImgFileList.length > 0) {
          for(let i = 0; i < this.businessImgFileList.length; i++) {
            if(i === 0) {
              this.storeForm.business_auth = this.businessImgFileList[i].url;
            }else {
              this.storeForm.business_auth += ',' + this.businessImgFileList[i].url;
            }
          }
        }

        //console.log("新增/修改的店铺信息：",this.storeForm);
        //formName
        this.$refs[formName].validate((valid) => {
          if(valid) {
            addShopInf(this.storeForm).then(res => {
              if(res.code === 1){
                this.$router.push("/reviewing");
              }else if(res.code === 0 && res.msg) {
                // 处理 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;
                }
                if(res.msg) {
                  this.$message({
                    message: res.msg,
                    type: 'error'
                  });
                }else {
                  this.$message({
                    message: "数据开小差了，请稍后重试",
                    type: 'error'
                  });
                }
              }
            });
          }
          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;
            }
          }
        });
      }
    }
  }
</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% - 120px);
      /deep/.el-card__body{
        height: calc(100% - 120px);
        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 :calc(100% - 170px);
    margin: 20px auto 0;
    overflow-y: scroll;

    // 重置 提示图标颜色

    .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;
      }
    }

  }
</style>