云仓2.5-暂存

src/api/module/entry.js

 import request from '@/utils/request';
+// 获取用户详细信息
+export function getInfo(param) {
+  return request({
+    url: '/system/index/getInfo',
+    method: 'get',
+    params: param
+  })
+}
 
 // 获取主体信息
 export function getMainInf(query) {
@@ -69,14 +77,6 @@ export function upLoadImg (data) {
   });
 }
 
-// old
-// export function upLoadImg (data) {
-//   return request({
-//     url: '/system/goods/uploadImg',
-//     method: 'post',
-//     data: data
-//   });
-// }
 // 获取商品类目
 export function getGoodsType(query) {
   return request({
@@ -85,3 +85,30 @@ export function getGoodsType(query) {
     params: query
   });
 }
+
+// 营业执照 图片识别信息
+export function getLicenseImgInfoData(query) {
+  return request({
+    url: '/local/check/businessLicense',
+    method: 'get',
+    params: query
+  });
+}
+
+// 身份证 正/反 图片识别信息
+export function getIdcardImgInfoData(query) {
+  return request({
+    url: '/local/check/idCard',
+    method: 'get',
+    params: query
+  });
+}
+
+// 查询 入驻类目资质
+export function getUploadQualificationListData(query) {
+  return request({
+    url: '/local/qualification/list',
+    method: 'get',
+    params: query
+  });
+}

src/layout/components/Navbar.vue

@@ -136,14 +136,14 @@ export default {
                 })
   },
     async logout() {
-      this.$confirm('确定注销并退出系统吗？', '提示', {
+      this.$confirm('确定退出系统吗？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
         this.$store.dispatch('LogOut').then(() => {
-          var ssa = window.location.host
-           var ht = document.location.protocol
+          let ssa = window.location.host
+          let ht = document.location.protocol
           if(ssa =='localhost:1024'){
             window.location.href=ht+'//'+this.ssourl +'/logout?redirect='+ht+'//'+ssa+'/login'
           }else{

src/store/modules/user.js

@@ -10,7 +10,13 @@ const user = {
     sellerid:0,
     roles: [],
     permissions: [],
-    ssourl:''
+    ssourl:'',
+    // 客户信息中，入驻审核状态
+    // 0-未提交信息；
+    // 1-审核成；
+    // 2-审核中；
+    // 3-审核拒绝；
+    applyState: -1,
   },
 
   mutations: {
@@ -34,6 +40,9 @@ const user = {
     },
     SET_PERMISSIONS: (state, permissions) => {
       state.permissions = permissions
+    },
+    SET_APPLYSTATE: (state, applyState) => {
+      state.applyState = applyState
     }
   },
 
@@ -98,6 +107,7 @@ const user = {
           }
           commit('SET_NAME', user.Username)
           commit('SET_SELLERID', user.SellerId)
+          commit('SET_APPLYSTATE', user.state) // 记录 商户入驻后的审核状态
           commit('SET_AVATAR', avatar)
           resolve(res)
         }).catch(error => {

src/views/entry/fillMainInf.vue

@@ -5,43 +5,28 @@
     </div>
     <el-card class="box-card">
       <div slot="header" class="clearfix steps">
-        <el-steps :active="0" align-center finish-status="success">
-<!--          <el-step title="签署入驻协议"></el-step>-->
+        <el-steps :active="1" 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="mainForm" :model="mainForm" :rules="mainRules" label-width="180px">
-          <el-form-item label="主体类型：">
-            <el-radio-group v-model="mainForm.organization_type">
-              <el-radio :label="1">企业/公司</el-radio>
-              <el-radio :label="2">个体工商户</el-radio>
-            </el-radio-group>
+        <el-form ref="mainForm" :model="mainForm" :rules="mainRules" label-width="180px" class="main-form-con" size="small">
+          <el-form-item>
+            <p class="main-form-title">企业资质信息</p>
           </el-form-item>
 
-          <el-form-item label="执照类型：" prop="license_type">
-            <el-select v-model="mainForm.license_type" placeholder="请选择..." style="width: 400px;">
-              <el-option
-                v-for="item in zzOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="营业执照电子版：" prop="license" >
+          <el-form-item label="营业执照：" prop="license" >
             <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
               <div style="padding-right:6px;">
                 <el-upload
-                  class="uploadData"
+                  :class="['uploadData',{ 'hiden-dom': licenseImgFileList.length >= 1 }]"
                   action="#"
                   list-type="picture-card"
                   :http-request="uploadLicenseImages"
-                  :limit="2"
+                  :limit="1"
                   :on-exceed="showTip"
                   :before-upload = "beforeUpImg"
                   :on-preview="handlePictureCardPreview"
@@ -60,7 +45,8 @@
               </span>
               </div>
               <div style="width:380px;line-height: 24px;padding-top: 6px;">
-                <span class="tips-text">图片大小在2MB以内，支持png,jpg格式，最多可上传2张</span>
+                <span class="tips-text">图片大小在2MB以内，支持png,jpg格式，最多可上传2张</span></br>
+                <span class="tips-text">请确保营业执照在有效期内</span>
               </div>
             </div>
           </el-form-item>
@@ -70,59 +56,50 @@
             <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span>
           </el-form-item>
 
-          <el-form-item label="营业执照详细地址：" prop="organization_address">
-            <el-input v-model="mainForm.organization_address" style="width: 400px;"></el-input>
-            <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上的详细地址填写</span>
+          <el-form-item label="统一社会代码：" prop="license_number" inline-message="true">
+            <el-input v-model="mainForm.license_number" style="width: 400px;"></el-input>
+            <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span>
           </el-form-item>
 
           <el-form-item :gutter="20" label="营业期限：" prop="license_expires_time">
-            <el-date-picker type="date" placeholder="选择日期" v-model="periodConcreteTime"
-                            style="width: 300px;" :disabled="isConcretePeriod" @change="periodConcrete"></el-date-picker>
+            <el-date-picker
+              style="width:400px;"
+              v-model="periodConcreteTime"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              value-format="yyyy-MM-dd"
+              @change="periodLongTermChange"
+              :clearable="false"
+            />
             <el-checkbox v-model="periodLongTermVal" :disabled="isPeriodDisabled"
-                         style="padding-left:15px;" @change="periodLongTerm">长期
+                         style="padding-left:15px;" @change="periodConcreteChange">长期
             </el-checkbox>
             <span class="tips-text"><i class="el-icon-warning h-warning"></i>具体时间和长期，二者必填一个</span>
           </el-form-item>
 
-          <el-form-item label="法定代表人证件类型：" prop="idcard_type">
-            <el-select v-model="mainForm.idcard_type" placeholder="请选择..." style="width: 400px;">
-              <el-option
-                v-for="item in idcardTypeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-
-          <el-form-item label="法定代表人姓名：" prop="real_name">
-            <el-input v-model="mainForm.real_name" style="width: 400px;"></el-input>
-            <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的法人填写</span>
-          </el-form-item>
-
-          <el-form-item label="法定代表人证件号：" prop="idcard_number">
-            <el-input v-model="mainForm.idcard_number" style="width: 400px;"></el-input>
+          <el-form-item>
+            <p class="main-form-tips">请核对营业执照信息，若信息不符合，可手动修改</p>
           </el-form-item>
+          <el-divider></el-divider>
 
-          <el-form-item label="有效期至：" prop="idcard_expires_time">
-            <el-date-picker type="date" placeholder="选择日期" v-model="validityConcreteTime"
-                            style="width: 300px;" @change="validityConcrete"></el-date-picker>
-            <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;"
-                         @change="validityLongTerm">长期
-            </el-checkbox>
+          <el-form-item>
+            <p class="main-form-title">企业法人信息</p>
           </el-form-item>
 
-          <el-form-item label="法人证件电子版：" prop="idcard_front">
+          <el-form-item label="法人身份证：" prop="idcard_front">
             <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
-              <div style="padding-right:6px;">
+              <!-- 身份证正面 -->
+              <div style="padding: 0 20px;">
                 <el-upload
-                  class="uploadData"
+                  :class="['uploadData',{ 'hiden-dom': idcardImgFileList.length >= 1 }]"
                   list-type="picture-card"
                   action="#"
-                  :limit="2"
+                  :limit="1"
                   :on-exceed="showTip"
                   :before-upload = "beforeUpImg"
-                  :http-request="uploadIdcardImages"
+                  :http-request="uploadIdcardPositive"
                   :on-preview="handlePictureCardPreview2"
                   :on-remove="handleRemove2"
                   :file-list = 'idcardImgFileList'
@@ -133,6 +110,26 @@
                   <img width="100%" :src="dialogImageUrl2" alt="">
                 </el-dialog>
               </div>
+              <!-- 身份证反面 -->
+              <div style="padding: 0 20px;">
+                <el-upload
+                  :class="['uploadData',{ 'hiden-dom': idcardBackImgFileList.length >= 1 }]"
+                  list-type="picture-card"
+                  action="#"
+                  :limit="1"
+                  :on-exceed="showTip"
+                  :file-list = 'idcardBackImgFileList'
+                  :before-upload = "beforeUpImg"
+                  :on-preview="handleBackPictureCardPreview2"
+                  :on-remove="handleBackRemove2"
+                  :http-request="uploadIdcardBack"
+                >
+                  <i class="el-icon-plus"></i>
+                </el-upload>
+                <el-dialog :visible.sync="dialogBackVisible2">
+                  <img width="100%" :src="dialogBackImageUrl2" alt="">
+                </el-dialog>
+              </div>
               <div>
                 <span class="tips-text">
                   <i class="el-icon-warning h-warning"></i>
@@ -142,12 +139,41 @@
                 <span class="tips-text">请按顺序分别上传正面（照片面）和反面（国徽面）电子版图片,文件大小在 2MB以内，支持png,jpg格式，最多可上传2张</span>
               </div>
             </div>
+            <div class="idcard-tips-con">
+              <p>请上传身份证正面</p>
+              <p>请上传身份证国徽面</p>
+            </div>
+          </el-form-item>
+
+          <el-form-item label="法定姓名：" prop="real_name">
+            <el-input v-model="mainForm.real_name" style="width: 400px;"></el-input>
+            <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的法人填写</span>
+          </el-form-item>
+
+          <el-form-item label="法定代表人证件号：" prop="idcard_number">
+            <el-input v-model="mainForm.idcard_number" style="width: 400px;"></el-input>
+          </el-form-item>
+
+          <el-form-item label="有效期至：" prop="idcard_expires_time">
+            <el-date-picker
+              style="width:400px;"
+              v-model="validityConcreteTime"
+              type="daterange"
+              range-separator="至"
+              value-format="yyyy-MM-dd"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @change="validityConcreteTimeChange"
+              :clearable="false"
+            />
+            <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;" @change="validityLongTermValChange">长期
+            </el-checkbox>
+          </el-form-item>
+
+          <el-form-item>
+            <p class="main-form-tips">请核对企业法人信息，若信息不符合，可手动修改</p>
           </el-form-item>
 
-<!--          <el-form-item style="padding-top:20px;">-->
-<!--&lt;!&ndash;            <el-button type="primary" @click="back" style="margin-right: 40px;">上一步</el-button>&ndash;&gt;-->
-<!--            <el-button type="primary" @click="next('mainForm')">下一步</el-button>-->
-<!--          </el-form-item>-->
           <div class="confirm-btn">
             <p>
               <el-button type="primary" style="padding: 8px 30px;"  @click="next('mainForm')">下一步</el-button>
@@ -164,7 +190,8 @@
 </template>
 
 <script>
-  import { getMainInf,addMain,upLoadImg } from '@/api/module/entry';
+  import { getInfo,getMainInf,addMain,upLoadImg,getLicenseImgInfoData,getIdcardImgInfoData } from '@/api/module/entry';
+  import { dateFormat } from '@/utils'
   export default {
     name: "FillMainInf",
     data() {
@@ -202,7 +229,7 @@
         }
       };
       let licenseTimeValidator = (rule, value, callback) => {
-        if (this.periodConcreteTime === null && this.periodLongTermVal === false) {
+        if (this.periodConcreteTime == [] && this.periodLongTermVal === false) {
           callback(new Error("营业期限具体时间和长期必须填写其中一个"));
         } else {
           callback();
@@ -217,55 +244,46 @@
       };
       return {
         licenseImgFileList: [], // 营业执照图片
-        idcardImgFileList: [], // 法人证件照图片
+        idcardImgFileList: [], // 身份证件照图片
+        idcardBackImgFileList: [], // 身份证国徽面
         dialogImageUrl: '',
         dialogVisible: false,
         dialogImageUrl2: '',
         dialogVisible2: false,
-        // 执照类型
-        zzOptions: [
-          {label: "多证合一营业执照（统一社会信用代码）", value: 1},
-          {label: "多证合一营业执照（非统一社会信用代码）", value: 2},
-        ],
-        // 法人执照类型
-        idcardTypeOptions: [
-          {label: "大陆身份证", value: 1},
-          {label: "护照", value: 2},
-          {label: "港奥台居民通行证", value: 3},
-          {label: "台湾居民通行证", value: 4},
-        ],
+        dialogBackImageUrl2: '',
+        dialogBackVisible2: false,
         // 营业期限
-        periodConcreteTime: null,
+        periodConcreteTime: [],
         periodLongTermVal: false,
         // 证件有效期
-        validityConcreteTime: null,
+        validityConcreteTime: [],
         validityLongTermVal: false,
         isConcretePeriod: false,
         isPeriodDisabled: false,
         isValidity: true, // 有效期至 是否填写
+        submitTime: [],
         // 主体信息
         mainForm: {
-          organization_type: 2,
-          license_type: '',
           license: '',
           organization_name: '',
-          organization_address: '',
-          license_expires_time: '',
-          idcard_type: '',
+          license_number: '',
+          // 法人信息
+          idcard_front: '',
+          idcard_back: '',
           real_name: '',
           idcard_number: '',
+          idcard_start_time: '',
           idcard_expires_time: '',
-          idcard_front: '',
-          idcardback: 'jiazhuangwshifanmian'
+          license_expires_time: '',
+          license_start_time: ''
         },
         // 主体信息校验
         hasLicense: false,
         mainRules: {
-          license_type: [{required: true, message: '营业执照类型不能为空', trigger: 'change'}],
           license: [{required: true, message: '请上传营业执照电子版',validator: licenseValidator}],
           organization_name: [{required: true, message: '企业名称不能为空', trigger: 'blur'}],
-          organization_address: [{required: true, message: '营业执照地址不能为空', trigger: 'blur'}],
-          idcard_type: [{required: true, message: '证件类型不能为空', trigger: 'change'}],
+          license_number: [{required: true, message: '统一社会代码不能为空', trigger: 'blur'}],
+          // idcard_type: [{required: true, message: '证件类型不能为空', trigger: 'change'}],
           real_name: [{required: true, message: '法人姓名不能为空', trigger: 'blur'}],
           idcard_number: [
             {required: true, message: '法人证件号不能为空', trigger: 'blur'},
@@ -278,35 +296,55 @@
       }
     },
     created() {
-      this.getMain();
-    },
-    mounted() {
+      // 根据 用户信息，判断是否请求 回显接口
+      getInfo().then(res=> {
+        if (res.code == 1 && res.data.user) {
+          let isRrequest = false;
+          if (res.data.user.state == 0) {
+            if (res.data.user.status == 1) {
+              isRrequest = true;
+            }else {
+              isRrequest = false;
+            }
+          }else if (res.data.user.state == 1 || res.data.user.state == 2 || res.data.user.state == 3) {
+            isRrequest = true;
+          }
 
+          if (isRrequest) {
+            this.getMain();
+          }
+        } // if end
+      }); // getInfo end
     },
+    mounted() {},
     methods: {
-      periodConcrete() {
-        if (this.periodConcreteTime) {
+      /** 营业期限 选择区间时间时 */
+      periodLongTermChange() {
+        if (Array.isArray(this.periodConcreteTime) && this.periodConcreteTime.length == 2) {
           this.periodLongTermVal = false;
         }
       },
-      periodLongTerm() {
+      /** 营业期限 选择 长期时 */
+      periodConcreteChange() {
         if (this.periodLongTermVal) {
-          this.periodConcreteTime = null;
+          this.periodConcreteTime = [];
         }
       },
-      validityConcrete() {
-        if (this.validityConcreteTime) {
+      /** 身份证有效期  选择区间时间时 */
+      validityConcreteTimeChange() {
+        if (Array.isArray(this.validityConcreteTime) && this.validityConcreteTime.length == 2) {
           this.validityLongTermVal = false;
         }
       },
-      validityLongTerm() {
+      /** 身份证有效期 选择 长期时 */
+      validityLongTermValChange() {
         if (this.validityLongTermVal) {
-          this.validityConcreteTime = null;
+          this.validityConcreteTime = [];
         }
       },
-      // 上传图片格式和大小的校验
+      /** 上传 图片大小和格式校验 */
       beforeUpImg(file) {
-        let isImgSize = (file.size / 1024 /1024) > 2;
+        // let isImgSize = (file.size / 1024 / 100) > 5;
         if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
           this.$message({
             message: '上传图片格式只支持png/png格式',
@@ -314,15 +352,15 @@
           });
           return false;
         }
-        if(isImgSize) {
-          this.$message({
-            message: '上传图片大小不能超过2M',
-            type: "warning"
-          });
-          return false;
-        }
+        // if(isImgSize) {
+        //   this.$message({
+        //     message: '上传图片大小不能超过500k',
+        //     type: "warning"
+        //   });
+        //   return false;
+        // }
       },
-      // 营业执照图片，上传
+      /** 上传 营业执照图片 */
       uploadLicenseImages(param) {
         this.getBase64(param.file).then((res) => {
           let result = res.split(",");
@@ -333,6 +371,8 @@
               this.licenseImgFileList.push({'url':res.data.image_url});
               this.$message({type: 'success',message:'上传成功'});
               this.$refs.mainForm.clearValidate('license');
+              // 图片识别
+              this.readLicenseImgInfo(this.licenseImgFileList);
             }else {
               this.$message({type:'error',message:res.message ? res.message : '上传失败'});
             }
@@ -350,8 +390,39 @@
           }
         }
       },
-      // 上传法人证件照
-      uploadIdcardImages(param) {
+      /** 识别 营业执照信息 */
+      readLicenseImgInfo(fileList) {
+        // debugger
+        if ( !Array.isArray(fileList) || !fileList[0].url) return
+        let data = {img: fileList[0].url}
+        // let data = {img: 'http://excel.jxhh.com/1626058781.jpg'}
+        getLicenseImgInfoData(data).then(res=> {
+          // console.log(369,res);
+          if (res.code == 1 ) {
+            this.mainForm.organization_name = res.data.words_result['单位名称'].words ? res.data.words_result['单位名称'].words : '';
+            this.mainForm.license_number = res.data.words_result['社会信用代码'].words ? res.data.words_result['社会信用代码'].words : '';
+            // 营业期限处理
+            if (res.data.words_result['有效期'].words == '长期' || res.data.words_result['有效期'].words == '年月日') {
+              this.periodConcreteTime = [];
+              this.periodLongTermVal = true;
+              // this.isConcretePeriod = true;
+            }else {
+              // 营业期限 日期处理 XXXX年XX月XX日 => xx-xx-xx
+              let beginTimeStr = res.data.words_result['成立日期'].words ? res.data.words_result['成立日期'].words : '';
+              let endTimeStr = res.data.words_result['有效期'].words
+              let beginTime = beginTimeStr.replace(/年|月|日/g,"-").substr(0,beginTimeStr.length - 1)
+              let endTime = endTimeStr.replace(/年|月|日/g,"-").substr(0,endTimeStr.length - 1)
+              this.periodConcreteTime = [];
+              this.periodConcreteTime.push(beginTime);
+              this.periodConcreteTime.push(endTime);
+              // this.isConcretePeriod = false;
+              this.periodLongTermVal = false;
+            }
+          }
+        });
+      },
+      /** 上传身份证 正面 */
+      uploadIdcardPositive(param) {
         this.getBase64(param.file).then((res) => {
           let result = res.split(",");
           this.Base64img = result[1];
@@ -361,12 +432,24 @@
               this.idcardImgFileList.push({'url':res.data.image_url});
               this.$message({type:'success',message:'上传成功'});
               this.$refs.mainForm.clearValidate('idcard_front');
+              this.readIdcardPositive(this.idcardImgFileList);
             }else {
               this.$message({type:'error',message:res.message ? res.message : '上传失败'});
             }
           });
         });
       },
+      /** 识别 身份证 正面 */
+      readIdcardPositive(fileList) {
+        if ( !Array.isArray(fileList) || !fileList[0].url) return
+        let data = {img: fileList[0].url}
+        getIdcardImgInfoData(data).then(res=> {
+          if (res.code == 1 ) {
+            this.mainForm.real_name = res.data.words_result['姓名'].words ? res.data.words_result['姓名'].words : '';
+            this.mainForm.idcard_number = res.data.words_result['公民身份号码'].words ? res.data.words_result['公民身份号码'].words : '';
+          }
+        });
+      },
       handlePictureCardPreview2(file) {
         this.dialogImageUrl2 = file.url;
         this.dialogVisible2 = true;
@@ -378,70 +461,149 @@
           }
         }
       },
+
+      /** 上传身份证 反面 */
+      uploadIdcardBack(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.idcardBackImgFileList.push({'url':res.data.image_url});
+              this.$message({type:'success',message:'上传成功'});
+              this.$refs.mainForm.clearValidate('idcard_back');
+              this.readIdcardBack(this.idcardBackImgFileList);
+            }else {
+              this.$message({type:'error',message:res.message ? res.message : '上传失败'});
+            }
+          });
+        });
+      },
+      /** 识别 身份证 反面 */
+      readIdcardBack(fileList) {
+        if ( !Array.isArray(fileList) || !fileList[0].url) return
+        let data = {img: fileList[0].url}
+        getIdcardImgInfoData(data).then(res=> {
+          if (res.code == 1 ) {
+            // 身份证 有效 XXXXXXXX日 => xx-xx-xx
+            let endStr = res.data.words_result['失效日期'].words ? res.data.words_result['失效日期'].words : '';
+            if (endStr == '长期') {
+              this.validityConcreteTime = [];
+              this.validityLongTermVal = true;
+            }else {
+              let beginStr = res.data.words_result['签发日期'].words ? res.data.words_result['签发日期'].words : '';
+              let reg = /^(\d{4})(\d{2})(\d{2})$/;
+              let begin = beginStr.replace(reg, "$1-$2-$3");
+              let end = endStr.replace(reg, "$1-$2-$3");
+              this.validityConcreteTime = [];
+              this.validityConcreteTime.push(begin);
+              this.validityConcreteTime.push(end);
+              this.validityLongTermVal = false;
+            }
+          }
+        });
+      },
+      handleBackPictureCardPreview2(file) {
+        this.dialogBackImageUrl2 = file.url;
+        this.dialogBackVisible2 = true;
+      },
+      handleBackRemove2(file) {
+        for(let i = 0; i < this.idcardBackImgFileList.length; i++) {
+          if(file.uid === this.idcardBackImgFileList[i].uid) {
+            this.idcardBackImgFileList.splice(i,1);
+          }
+        }
+      },
       // 获取主体信息接口
       getMain() {
         getMainInf().then(res => {
-          //console.log("获取主体数据：",res);
-          if(res.code === 1) {
+          // debugger
+          if(res.code == 1) {
             this.resetForm('mainForm');
             this.mainForm = res.data;
-            this.mainForm.idcardback = "jzwsfm";
 
-            // 处理证件照
-            let licenseList = {};
-            let licenseArr = [];
-
-            if(this.mainForm.license.indexOf(",") > 0) {
-              licenseArr = this.mainForm.license.split(",");
-              for(let a = 0; a < licenseArr.length; a++){
-                licenseList = {};
-                licenseList.url = licenseArr[a];
-                this.licenseImgFileList.push(licenseList);
+            // 营业执照电子图片处理
+            let licenseImgArr = [];
+            let licenseImgUrl = {};
+            licenseImgArr = this.mainForm.license.split(",");
+            if (licenseImgArr.length > 0) {
+              licenseImgArr.forEach(item=> {
+                licenseImgUrl = {};
+                if (item) {
+                  licenseImgUrl.url = item
+                  this.licenseImgFileList.push(licenseImgUrl)
                 }
+              });
             }else {
-              licenseList.url = this.mainForm.license;
               this.licenseImgFileList = [];
-              this.licenseImgFileList.push(licenseList);
             }
 
-
-            // 处理法人证件照
-            let idcardList = {};
-            let idcardArr = [];
-            if(this.mainForm.idcard_front.indexOf(",") > 0) {
-              idcardArr = this.mainForm.idcard_front.split(",");
-              for(let a = 0; a < idcardArr.length; a++){
-                idcardList = {};
-                idcardList.url = idcardArr[a];
-                this.idcardImgFileList.push(idcardList);
+            // 身份证 正面数据处理
+            let idcardFrontImgArr = [];
+            let idcardFrontImgUrl = {};
+            idcardFrontImgArr = this.mainForm.idcard_front.split(",");
+            if (idcardFrontImgArr.length > 0) {
+              idcardFrontImgArr.forEach(item=> {
+                idcardFrontImgUrl = {};
+                if (item) {
+                  idcardFrontImgUrl.url = item
+                  this.idcardImgFileList.push(idcardFrontImgUrl)
                 }
+              });
             }else {
-              idcardList.url = this.mainForm.idcard_front;
               this.idcardImgFileList = [];
-              this.idcardImgFileList.push(idcardList);
             }
 
-
-            if(this.mainForm.idcard_expires_time === 0) {
-              this.validityLongTermVal = true;
-            }else {
-              this.validityConcreteTime = this.toStandTime(this.mainForm.idcard_expires_time);
+            // 身份证 反面数据处理
+            let idcardBackImgArr = [];
+            let idcardBackImgUrl = {};
+            idcardBackImgArr = this.mainForm.idcard_back.split(",");
+            if (idcardBackImgArr.length > 0) {
+              idcardBackImgArr.forEach(item=> {
+                idcardBackImgUrl = {};
+                if (item) {
+                  idcardBackImgUrl.url = item
+                  this.idcardBackImgFileList.push(idcardBackImgUrl)
                 }
-
-            //
-            if(this.mainForm.license_expires_time === 0) {
-              this.periodLongTermVal = true;
+              });
             }else {
-              this.periodConcreteTime = this.toStandTime(this.mainForm.license_expires_time);
+              this.idcardBackImgFileList = [];
             }
 
-
+            // 营业期限 日期格式处理
+            if (this.mainForm.license_expires_time == 0) {
+              this.periodLongTermVal = true
+              this.periodConcreteTime = [];
+            } else if (this.mainForm.license_expires_time > 0) {
+              this.periodLongTermVal = false;
+              this.periodConcreteTime = [];
+              let start = this.formatterTime(this.mainForm.license_start_time)
+              let end = this.formatterTime(this.mainForm.license_expires_time);
+              this.periodConcreteTime.push(start)
+              this.periodConcreteTime.push(end)
+            }
+
+            // 身份证 有效期 日期格式处理
+            if (this.mainForm.idcard_expires_time == 0) {
+              this.validityLongTermVal = true
+              this.validityConcreteTime = [];
+            } else if (this.mainForm.idcard_expires_time > 0) {
+              this.validityLongTermVal = false;
+              this.validityConcreteTime = [];
+              let start = this.formatterTime(this.mainForm.idcard_start_time)
+              let end = this.formatterTime(this.mainForm.idcard_expires_time);
+              this.validityConcreteTime.push(start)
+              this.validityConcreteTime.push(end)
+            }
           } else {
-            this.$message({type:'error',message:res.message ? res.message : ''});
+            this.$message({type:'error',message:res.message ? res.message : '获取主体信息失败'});
           }
         });
       },
       resetForm(formName) {
+        this.periodConcreteTime = [];
+        this.validityConcreteTime = [];
         this.$refs[formName].resetFields();
       },
       // 图片转换为base64位
@@ -462,39 +624,41 @@
         });
       },
       // 时间戳转换为 标准时间格式
-      toStandTime(val) {
-        let date = new Date(val * 1000)
-        let Y = date.getFullYear() + '-'
-        let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
-        const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
-        const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
-        const m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
-        const s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
-        return Y + M + D + h + m + s;
+      formatterTime(time) {
+        return dateFormat(time *1000, 'Y-m-d')
       },
-      showTip(files,fileList) {
+      /** 图片上传 数量限制 1张 */
+      showTip2() {
         this.$message({message: '最多上传2张图片', type: 'warning'});
       },
+      showTip() {
+        this.$message({message: '最多上传1张图片', type: 'warning'});
+      },
 
       back() {
         this.$router.push("/agreement");
       },
       next(form) {
-        // 营业期限
-        if(this.periodLongTermVal) {
-          this.mainForm.license_expires_time = (this.periodLongTermVal - 0 - 1); // 布尔值减0得到对应数字
-        } else if(this.periodLongTermVal === false && this.periodConcreteTime) {
-          this.mainForm.license_expires_time = new Date(this.periodConcreteTime).getTime() / 1000;
-        }else {
-          this.mainForm.license_expires_time = '';
+        // 营业期限 数据处理
+        if (this.periodLongTermVal) {
+          this.mainForm.license_expires_time = 0;
+          this.mainForm.license_start_time = 0;
+        } else {
+          if( Array.isArray(this.periodConcreteTime) && this.periodConcreteTime.length == 2) {
+            this.mainForm.license_start_time = new Date(this.periodConcreteTime[0]).getTime() / 1000;
+            this.mainForm.license_expires_time = new Date(this.periodConcreteTime[1]).getTime() / 1000;
+          }
+        }
+
+        // 身份证有效期 数据处理
+        if (this.validityLongTermVal) {
+          this.mainForm.idcard_expires_time = 0;
+          this.mainForm.idcard_start_time = 0;
+        } else {
+          if( Array.isArray(this.validityConcreteTime) && this.validityConcreteTime.length == 2) {
+            this.mainForm.idcard_start_time = new Date(this.validityConcreteTime[0]).getTime() / 1000;
+            this.mainForm.idcard_expires_time = new Date(this.validityConcreteTime[1]).getTime() / 1000;
           }
-        // 法人证件期限
-        if(this.validityLongTermVal) {
-          this.mainForm.idcard_expires_time = (this.validityLongTermVal - 0 -1);
-        }else if(this.validityLongTermVal === false && this.validityConcreteTime) {
-          this.mainForm.idcard_expires_time = new Date(this.validityConcreteTime).getTime() / 1000;
-        }else {
-          this.mainForm.idcard_expires_time = '';
         }
 
         // 处理营业执照
@@ -509,7 +673,7 @@
           }
         }
 
-        // 处理法人证件照
+        // 身份证 正面 数据处理
         if(this.idcardImgFileList.length > 0) {
           for(let i = 0; i < this.idcardImgFileList.length; i++) {
             if(i === 0) {
@@ -520,11 +684,22 @@
           }
         }
 
+        // 身份证 反面 数据处理
+        if(this.idcardBackImgFileList.length > 0) {
+          for(let i = 0; i < this.idcardBackImgFileList.length; i++) {
+            if(i === 0) {
+              this.mainForm.idcard_back = this.idcardBackImgFileList[i].url;
+            }else {
+              this.mainForm.idcard_back += ',' + this.idcardBackImgFileList[i].url;
+            }
+          }
+        }
+
         this.$refs[form].validate((valid) => {
           if (valid) {
             addMain(this.mainForm).then(res => {
               if(res.code == 1) {
-                this.$router.push("/fillBrandInf");
+                this.$router.push("/fillShopInf");
               }else {
                 this.$message({type:'error',message:res.message ? res.message : '操作失败'});
               }
@@ -546,9 +721,9 @@
     .box-card {
       width: 80%;
       margin: 30px auto 30px;
-      height: calc(100% - 120px);
+      height: calc(100% - 140px);
       /deep/.el-card__body{
-        height: calc(100% - 120px);
+        height: calc(100% - 140px);
         overflow-x: hidden;
         overflow-y: scroll;
       }
@@ -607,7 +782,7 @@
   // 主体信息
   .main-con {
     width: 70%;
-    margin: 30px auto 50px;
+    margin: 30px auto;
     overflow-y: scroll;
     // 重置 提示图标颜色
     .tips-text {
@@ -646,10 +821,44 @@
       }
     }
   }
+
+   .hiden-dom >>> .el-upload--picture-card {
+     display :none!important;
+   }
+
+   .idcard-tips-con {
+     display: flex;
+     flex-direction: row;
+     justify-content: normal;
+     justify-items : center;
+   }
+
+  .idcard-tips-con > p {
+    margin: 0;
+    padding: 0 15px;
+  }
+
+  .main-form-con {
+    margin-left: 100px;
+  }
+
+  .main-form-title {
+    color: #666;
+    font-size: 18px;
+    font-weight: 600;
+    padding: 0;
+    margin: 10px 0 10px -180px;
+  }
+
+  .main-form-tips {
+    color: #aaa;
+    font-size: 14px;
+    font-weight: 400;
+    padding: 0;
+  }
   .confirm-btn {
-    //height: 100px;
     width: 50%;
-    margin: 0 auto;
+    margin: 40px auto 0;
     p {
       text-align: center;
     }

src/views/entry/fillShopInf.vue

@@ -7,15 +7,14 @@
     <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-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 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">
@@ -29,7 +28,7 @@
           </el-form-item>
 
           <el-form-item label="经营类目：" prop="scope">
-            <el-select v-model="storeForm.scope" multiple placeholder="请选择..." style="width: 400px;">
+            <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"
@@ -43,7 +42,7 @@
             <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
               <div style="padding-right:6px;">
                 <el-upload
-                  class="uploadData"
+                  :class="['uploadData',{ 'hiden-dom': logoImgFileList.length >= 1 }]"
                   action="#"
                   list-type="picture-card"
                   :limit="1"
@@ -84,50 +83,72 @@
               生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</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>
+          <el-form-item label="其他资质：">
+            <div class="auth-con">
+<!--*** 方法一 start ***-->
+              <!--                  :class="['uploadData',{ 'hiden-dom': businessImgFileList.length >= 1 }]"-->
+<!--              :class="uploadDataClass(item)"-->
+<!--              <div v-for="(item,index) in qualificationList" :key="item.id" class="single-upload-con">-->
+<!--                <el-upload-->
+<!--                  :class="uploadDataClass(item,index)"-->
+<!--                  action="#"-->
+<!--                  list-type="picture-card"-->
+<!--                  :limit="1"-->
+<!--                  :on-exceed="showTip1"-->
+<!--                  :http-request="(item)=> {return uploadBusinessImgs(item)}"-->
+<!--                  :file-list="showIndexAuthImg(item,index)"-->
+<!--                ></el-upload>-->
+<!--                <div class="single-title">{{ authTitleFormatter(item.content) }}</div>-->
+<!--              </div>-->
+<!--*** 方法一 end ***-->
+              <!--*** 方法二 start ***-->
+              <div v-for="(item,index) in qualificationList" :key="item.id" class="single-upload-con">
+                <div v-show="!item.url" class="single-auth-img" @click="upPreSpeImg(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 style="width:380px;line-height: 24px;padding-top: 6px;color: #333;">
-                <span class="tips-text">请上其他资质，单个文件大小在2MB以内，支持jpg,png格式，最多可上传20张</span>
+                <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 style="margin: 40px 0 0;">
+          <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 { getGoodsType, getShopInf ,addShopInf ,upLoadImg} from '@/api/module/entry';
+  import { getInfo,getGoodsType, getShopInf ,addShopInf ,upLoadImg,getUploadQualificationListData} from '@/api/module/entry';
   export default {
     name: "FillShopInf",
     data() {
@@ -173,7 +194,10 @@
         },
         //
         shopRules: {
-          store_name: [{required: true, message: '店铺名称不能为空', trigger: 'blur'}],
+          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'}],//
@@ -181,8 +205,11 @@
             {required: true, message: '联系人手机号码不能为空', trigger: 'blur'},
             {required: true, validator: checkTel,trigger: 'blur' }
             ],
-          business_auth: [{required: true, message: '其他资质至少上传一张图片', validator: busAuthValidator}],//
-        }
+        },
+        // 需要上传的资质
+        qualificationList: [],
+        qualificationUrl: '',
+        imgDialog: false
       }
     },
     created() {
@@ -195,11 +222,17 @@
         }
       });
       // 获取店铺信息
+      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() {
-
-    },
+    mounted() {},
     methods: {
       showTip1(files,fileList){
         this.$message({message: '最多上传1张图片', type: 'warning'});
@@ -243,10 +276,10 @@
           return false;
         }
       },
-      // 获取 店铺信息
+      /** 获取 店铺信息 */
       getShop() {
         getShopInf().then(res => {
-          if(res.code == 1 && res.data){
+          if(res.code == 1){
             // 处理  select 下拉回显数据格式
             this.storeForm.scope = [];
             if(res.data.scope === '') {
@@ -260,41 +293,26 @@
               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);
+            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 = [];
             }
+
             // 资质图片回显处理
-            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 = [];
-            }
+            this.qualificationList = this.storeForm.qualification;
+
           }else {
             this.$message({
               message: res.message ? res.message : '操作失败' ,
@@ -323,20 +341,22 @@
 
       // 上传资质图片
       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.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 : '上传失败'});
-            }
-          });
-        });
+
+        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) {
@@ -380,18 +400,34 @@
       },
       //
       back() {
-        this.$router.push("/fillBrandInf");
+        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);
-        //console.log("提交前的scope",this.storeForm.scope);
 
-        // shop_logo图片地址字段
+        // shop_logo图片
         if(this.logoImgFileList.length > 0) {
           for(let i = 0; i < this.logoImgFileList.length; i++) {
             if(i === 0) {
@@ -402,18 +438,10 @@
           }
         }
 
-        // 其他资质图片字段处理
-        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;
-            }
-          }
-        }
+        // 其他资质 数据格式处理
+        // let JSONqualificationList = JSON.stringify(this.qualificationList)
+        this.storeForm.qualification_auth = JSON.stringify(this.qualificationList)
 
-        //console.log("新增/修改的店铺信息：",this.storeForm);
         //formName
         this.$refs[formName].validate((valid) => {
           if(valid) {
@@ -452,8 +480,104 @@
             }
           }
         });
+      },
+      /** 删除单个 经营类目 触发 */
+      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 : [];
+              }
+            })
+          }
+        }
+      },
+      /** 上传 对应资质图片 */
+      upPreSpeImg(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.upPreSpeImg(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>
 
@@ -466,9 +590,9 @@
     .box-card {
       width: 80%;
       margin: 30px auto 30px;
-      height: calc(100% - 120px);
+      height: calc(100% - 140px);
       /deep/.el-card__body{
-        height: calc(100% - 120px);
+        height: calc(100% - 180px);
         overflow-x: hidden;
         overflow-y: scroll;
       }
@@ -531,9 +655,8 @@
   // 主体信息
   .main-con {
     width: 70%;
-    //height :calc(100% - 170px);
+    height: 100%;
     margin: 20px auto 0;
-    overflow-y: scroll;
 
     // 重置 提示图标颜色
 
@@ -580,5 +703,120 @@
       }
     }
 
+    .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;
+    }
+
+    .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>

src/views/entry/reviewFail.vue

@@ -6,9 +6,8 @@
     <el-card class="box-card">
       <div slot="header" class="clearfix steps">
         <el-steps :active="3" align-center finish-status="success" process-status="error">
-<!--          <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-step title="提交入驻审核"></el-step>
         </el-steps>
@@ -33,6 +32,7 @@
 </template>
 
 <script>
+  import { getInfo } from '@/api/module/entry';
   export default {
     name: "ReviewFail",
     data() {
@@ -40,10 +40,32 @@
         msg: '具体原因，请联系售后'
       }
     },
+    created() {
+      getInfo().then(res=> {
+        if (res.code == 1 && res.data.user) {
+          if (res.data.user.state == 1) {
+            this.$router.push({path: '/home/index'});
+          }
+          if (res.data.user.state == 2) {
+            this.$router.push({path: '/reviewing'})
+          }
+          if (res.data.user.state == 3) {
+            this.$router.push({path: '/reviewFail'});
+          }
+        } else {
+          this.$router.push({path: '/reviewFail'});
+        }
+      });
+    },
     mounted() {
       if(this.$route.params.msg) {
         this.msg = this.$route.params.msg;
       }
+      /** 禁止 浏览器 后退 */
+      history.pushState(null,null,document.URL);
+      window.addEventListener('popstate', function () {
+        history.pushState(null, null, document.URL);
+      })
     },
     methods: {
       // 重新提交审核

src/views/entry/reviewing.vue

@@ -6,9 +6,8 @@
     <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-step title="提交入驻审核" ></el-step>
         </el-steps>
@@ -19,7 +18,7 @@
             <img src="../../../public/images/entry/reviewSuccess.png" alt="">
           </p>
           <p>资料已提交，工作人员审核中。。。</p>
-<!--          <p>感谢您使用云仓！</p>-->
+          <p style="margin-top: 10px;">感谢您使用云仓！</p>
           <p>您的资料已经提交审核，审核周期为1-3个工作日，请您耐心等待审核结果。</p>
           <p>如果您有其它的问题，可以拔打我们的服务电话与我们联系！</p>
 <!--          <p>服务电话：4000-188-199</p>-->
@@ -34,6 +33,25 @@
     name: "ReviewSuccess",
     data() {
       return {}
+    },
+    created() {
+      // 刷新当前页面，如果sys操作，审核通过，那么这个applyState状态值会变为 1，代表审核通过，可以直接跳转登录页面,审核拒绝，则 为3，跳转到失败页面
+      if (this.$store.state.user.applyState == 1) {
+        this.$router.push({path: '/home/index'});
+      }
+      if (this.$store.state.user.applyState == 2) {
+        this.$router.push({path: '/reviewing'});
+      }
+      if (this.$store.state.user.applyState == 3) {
+        this.$router.push({path: '/reviewFail'});
+      }
+    },
+    mounted() {
+      /** 禁止 浏览器 后退 */
+      history.pushState(null,null,document.URL);
+      window.addEventListener('popstate', function () {
+        history.pushState(null, null, document.URL);
+      })
     }
   }
 </script>

src/views/system/goods/add/components/goodsimg.vue

@@ -61,6 +61,7 @@
                 'image': function (value) {
                   if (value) {
                     // 触发input框选择图片文件
+                    document.querySelector('#file').value = ''; // 清空是为了解决，连续上传同一张图片时，后续图片上传失效问题
                     document.querySelector('#file').click()
                   } else {
                     this.quill.format('image', false);

src/views/system/shop/brand.vue

@@ -46,28 +46,31 @@
         </el-form>
       </div>
       <el-table v-loading="loading" :data="brandList" :height="tableHeight">
-<!--        <el-table-column type="selection" width="45" align="center"/>-->
-        <el-table-column label="序号" prop="id" align="center"></el-table-column>
         <el-table-column label="品牌名称" prop="brand_cn" align="center"></el-table-column>
         <el-table-column label="品牌经营类型" prop="brand_type" align="center">
           <template slot-scope="scope">
             {{ scope.row.brand_type === 1 ? '自有品牌' : '品牌厂商授权' }}
           </template>
         </el-table-column>
-        <el-table-column label="品牌类型" prop="brand_range" align="center">
-          <template slot-scope="scope">
-            {{ scope.row.brand_range === 1 ? '国内' : '国外' }}
-          </template>
-        </el-table-column>
         <el-table-column label="品牌商标注册号" prop="brand_number" align="center"></el-table-column>
         <el-table-column label="品牌状态" prop="status" align="center">
           <template slot-scope="scope">
             {{ scope.row.status === 0 ? '未审核' : scope.row.status === 1 ? '已通过' : '已拒绝'}}
           </template>
         </el-table-column>
+        <el-table-column label="授权期限" align="center">
+          <template slot-scope="scope">
+<!--            <span>{{ timeFormatter(scope.row.send_time) }}</span>-->
+            <span>--</span>
+<!--            <span>{{ timeFormatter(scope.row.send_time) }}</span>-->
+          </template>
+        </el-table-column>
+        <el-table-column label="审核说明" prop="sm" align="center"></el-table-column>
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="handleDetails(scope.row)" :disabled="(scope.row.id === 1)">详情</el-button>
+            <el-button type="text" size="small" @click="handleDetails(scope.row)" :disabled="(scope.row.id === 1)">编辑</el-button>
+            <el-divider direction="vertical"></el-divider>
+            <el-button type="text" size="small" @click="deleteBrand(scope.row)" :disabled="(scope.row.id === 1)">删除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -312,7 +315,7 @@
 
 <script>
   import {getBrandsInf, getDetails, addBrand, upBrand, upLoadImg} from '@/api/module/brand/brand'
-
+  import { dateFormat } from '@/utils'
   export default {
     name: "Brand",
     data() {
@@ -667,7 +670,7 @@
           this.$message({ type: 'warning', message: '目前暂时只支持维护20个品牌数据！'});
         }
       },
-      // 详情
+      /** 详情  */
       handleDetails(row) {
         this.isOpen = true;
         this.brandTitle = '品牌信息详情';
@@ -851,6 +854,10 @@
         })
       },
 
+      /** 删除 品牌 */
+      deleteBrand(row) {
+
+      },
       // 修改
       edit(param) {
         upBrand(param).then(res => {
@@ -930,6 +937,10 @@
           };
         });
       },
+      /** 时间格式化 */
+      timeFormatter(timeVal) {
+        return dateFormat(timeVal *1000, 'Y-m-d')
+      },
       // 时间戳转换为 标准时间格式
       toStandTime(val) {
         let date = new Date(val * 1000)

src/views/system/shop/index.vue

 <template>
-  <div class="app-container" v-loading="loading">
+  <div class="app-container">
     <el-card class="box-card">
       <div slot="header" class="clearfix">
         <div style="display: flex;flex-direction: row;justify-content: space-between;padding: 0 20px;">
@@ -17,29 +17,25 @@
           <div slot="header" class="clearfix">
             <p>企业认证信息</p>
           </div>
-          <div>
-            <el-form ref="mainForm" :model="mainForm" :rules="mainRules" label-width="180px">
-              <el-form-item label="执照类型：" prop="license_type">
-                <el-select v-model="mainForm.license_type" placeholder="请选择..." :disabled="isMainItem"
-                           style="width: 400px;">
-                  <el-option
-                    v-for="item in zzOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
-              </el-form-item>
-              <el-form-item label="营业执照电子版：" prop="license">
-                <div class="demo-image__preview">
+          <el-form ref="mainForm" :model="mainForm" label-width="180px" class="main-form-con"
+                     size="small">
+
+              <el-form-item label="营业执照：" prop="license">
+                <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                   <div style="padding-right:6px;">
-                    <div class="demo-image__preview">
-                      <el-image v-for="(item,index) in licenseFileList" :key="index"
-                                style="width: 100px; height: 100px;border: 1px dashed #c0ccda;border-radius: 6px;margin: 0 5px;"
-                                :src="item"
-                                :preview-src-list="getPreviewImgList(item)">
-                      </el-image>
-                    </div>
+                    <el-upload
+                      :disabled="true"
+                      :class="['uploadData',{ 'hiden-dom': licenseImgFileList.length >= 1 }]"
+                      action="#"
+                      list-type="picture-card"
+                      :on-preview="handleLicenseImgview"
+                      :file-list='licenseImgFileList'
+                    >
+                      <i class="el-icon-plus"></i>
+                    </el-upload>
+                    <el-dialog :visible.sync="isLicenseVisible">
+                      <img width="100%" :src="licenseImgUrl" alt="">
+                    </el-dialog>
                   </div>
                   <div>
               <span class="tips-text">
@@ -47,69 +43,66 @@
               </span>
                   </div>
                   <div style="width:380px;line-height: 24px;padding-top: 6px;">
-                    <!--                    <span class="tips-text">图片大小在2MB以内，支持png,jpg格式，最多可上传2张</span>-->
-                    <span class="tips-text">点击图片,查看大图</span>
+                    <span class="tips-text">点击可查看大图</span>
                   </div>
                 </div>
               </el-form-item>
 
               <el-form-item label="企业名称：" prop="organization_name" inline-message="true">
                 <el-input v-model="mainForm.organization_name" :disabled="isMainItem" style="width: 400px;"></el-input>
-                <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的完整名称填写</span>
-              </el-form-item>
-
-              <el-form-item label="营业执照详细地址：" prop="organization_address">
-                <el-input v-model="mainForm.organization_address" :disabled="isMainItem"
-                          style="width: 400px;"></el-input>
-                <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上的详细地址填写</span>
-              </el-form-item>
-
-              <el-form-item :gutter="20" label="营业期限：" prop="license_expires_time">
-                <el-date-picker type="date" placeholder="选择日期" v-model="periodConcreteTime"
-                                style="width: 300px;" :disabled="isMainItem"></el-date-picker>
-                <el-checkbox v-model="periodLongTermVal" :disabled="isMainItem"
-                             style="padding-left:15px;" >长期
-                </el-checkbox>
-                <span class="tips-text"><i class="el-icon-warning h-warning"></i>具体时间和长期，二者必填一个</span>
               </el-form-item>
 
-              <el-form-item label="法定代表人证件类型：" prop="idcard_type">
-                <el-select v-model="mainForm.idcard_type" :disabled="isMainItem" placeholder="请选择..."
-                           style="width: 400px;">
-                  <el-option
-                    v-for="item in idcardTypeOptions"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  ></el-option>
-                </el-select>
+              <el-form-item label="统一社会代码：" prop="license_number" inline-message="true">
+                <el-input v-model="mainForm.license_number" :disabled="isMainItem" style="width: 400px;"></el-input>
               </el-form-item>
 
-              <el-form-item label="法定代表人姓名：" prop="real_name">
-                <el-input v-model="mainForm.real_name" :disabled="isMainItem" style="width: 400px;"></el-input>
-                <span class="tips-text"><i class="el-icon-warning h-warning"></i>请按照营业执照上登记的法人填写</span>
+              <el-form-item label="营业期限：" prop="license_expires_time">
+                <el-date-picker
+                  style="width:400px;"
+                  v-model="periodConcreteTime"
+                  type="daterange"
+                  range-separator="至"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  value-format="yyyy-MM-dd"
+                  :disabled="isMainItem"
+                />
+                <el-checkbox v-model="periodLongTermVal" :disabled="isMainItem" style="padding-left:15px;">长期</el-checkbox>
               </el-form-item>
 
-              <el-form-item label="法定代表人证件号：" prop="idcard_number">
-                <el-input v-model="mainForm.idcard_number" :disabled="isMainItem" style="width: 400px;"></el-input>
-              </el-form-item>
-
-              <el-form-item label="有效期至：" prop="idcard_expires_time">
-                <el-date-picker type="date" placeholder="选择日期" v-model="validityConcreteTime"
-                                style="width: 300px;" :disabled="isMainItem"></el-date-picker>
-                <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;" :disabled="isMainItem">长期</el-checkbox>
-              </el-form-item>
-
-              <el-form-item label="法人证件电子版：" prop="idcard_front">
-                <div class="demo-image__preview">
-                  <div style="padding-right:6px;">
-                    <div class="demo-image__preview">
-                      <el-image v-for="(item,index) in idcardFileList" :key="index"
-                                style="width: 100px; height: 100px;border: 1px dashed #c0ccda;border-radius: 6px;margin: 0 5px;"
-                                :src="item"
-                                :preview-src-list="getPreviewImgList(item)">
-                      </el-image>
+              <el-form-item label="法人身份证：">
+                <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
+                  <!-- 身份证正面 -->
+                  <div style="padding: 0 20px;">
+                    <el-upload
+                      :disabled="true"
+                      :class="['uploadData',{ 'hiden-dom': idcardImgFileList.length >= 1 }]"
+                      list-type="picture-card"
+                      action="#"
+                      :on-preview="handleIdcardPositiveImgview"
+                      :file-list='idcardImgFileList'
+                    >
+                      <i class="el-icon-plus"></i>
+                    </el-upload>
+                    <el-dialog :visible.sync="idcardPositiveVisible">
+                      <img width="100%" :src="idcardPositiveImgUrl" alt="">
+                    </el-dialog>
                   </div>
+                  <!-- 身份证反面 -->
+                  <div style="padding: 0 20px;">
+                    <el-upload
+                      :disabled="true"
+                      :class="['uploadData',{ 'hiden-dom': idcardBackImgFileList.length >= 1 }]"
+                      list-type="picture-card"
+                      action="#"
+                      :on-preview="handleIdcardBackImgview"
+                      :file-list='idcardBackImgFileList'
+                    >
+                      <i class="el-icon-plus"></i>
+                    </el-upload>
+                    <el-dialog :visible.sync="dialogBackVisible">
+                      <img width="100%" :src="dialogBackImageUrl" alt="">
+                    </el-dialog>
                   </div>
                   <div>
                     <span class="tips-text">
@@ -117,21 +110,48 @@
                     </span>
                   </div>
                   <div style="width:380px;line-height: 24px;padding-top: 6px;">
-                    <span class="tips-text">点击图片,查看大图</span>
+                    <span class="tips-text">点击可查看大图</span>
+                  </div>
                 </div>
+                <div class="idcard-tips-con">
+                  <p>请上传身份证正面</p>
+                  <p>请上传身份证国徽面</p>
                 </div>
               </el-form-item>
+
+              <el-form-item label="法定姓名：" prop="real_name">
+                <el-input v-model="mainForm.real_name" :disabled="isMainItem" style="width: 400px;"></el-input>
+              </el-form-item>
+
+              <el-form-item label="法定代表人证件号：" prop="idcard_number">
+                <el-input v-model="mainForm.idcard_number" :disabled="isMainItem" style="width: 400px;"></el-input>
+              </el-form-item>
+
+              <el-form-item label="有效期至：" prop="idcard_expires_time">
+                <el-date-picker
+                  style="width:400px;"
+                  v-model="validityConcreteTime"
+                  type="daterange"
+                  range-separator="至"
+                  value-format="yyyy-MM-dd"
+                  start-placeholder="开始日期"
+                  end-placeholder="结束日期"
+                  :disabled="isMainItem"
+                />
+                <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;"
+                             :disabled="isMainItem">长期
+                </el-checkbox>
+              </el-form-item>
             </el-form>
-          </div>
         </el-card>
       </div>
+      <!-- 店铺信息 -->
       <div style="margin-top: 15px;">
         <el-card>
           <div slot="header" class="clearfix">
             <p>店铺信息</p>
           </div>
-          <div>
-            <el-form ref="storeForm" :model="storeForm" :rules="shopRules" label-width="180px">
+          <el-form ref="storeForm" :model="storeForm" label-width="180px">
 
               <el-form-item label="电商平台经验：" prop="is_business_experience">
                 <el-radio-group v-model="storeForm.is_business_experience" :disabled="isMainItem">
@@ -158,15 +178,21 @@
               </el-form-item>
 
               <el-form-item label="店铺LOGO：" prop="shop_logo">
-                <div class="demo-image__preview">
+                <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                   <div style="padding-right:6px;">
-                    <div class="demo-image__preview">
-                      <el-image v-for="(item,index) in logoFileList" :key="index"
-                                style="width: 100px; height: 100px;border: 1px dashed #c0ccda;border-radius: 6px;margin: 0 5px;"
-                                :src="item"
-                                :preview-src-list="getPreviewImgList(item)">
-                      </el-image>
-                    </div>
+                    <el-upload
+                      :disabled="true"
+                      :class="['uploadData',{ 'hiden-dom': logoImgFileList.length >= 1 }]"
+                      action="#"
+                      list-type="picture-card"
+                      :on-preview="handleShopLogoPreview"
+                      :file-list='logoImgFileList'
+                    >
+                      <i class="el-icon-plus"></i>
+                    </el-upload>
+                    <el-dialog :visible.sync="shopLogoVisible">
+                      <img width="100%" :src="shopLogoImgUrl" alt="">
+                    </el-dialog>
                   </div>
                   <div>
               <span class="tips-text">
@@ -174,7 +200,7 @@
               </span>
                   </div>
                   <div style="width:380px;line-height: 24px;padding-top: 6px;">
-                    <span class="tips-text">点击图片,查看大图</span>
+                    <span class="tips-text">点击可查看大图</span>
                   </div>
                 </div>
               </el-form-item>
@@ -190,55 +216,51 @@
               </el-form-item>
 
               <el-form-item>
-                <p style="width:580px;line-height:24px;font-size:14px;margin: 0;">
+                <p style="width:580px;line-height:24px;font-size:14px;margin: 0;color: #333;">
                   需要提交特殊产品资质的类目请将资质上传在此处，包括全国工业生产许可证、3C、医疗品械
                   生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</p>
               </el-form-item>
 
-              <el-form-item label="其他资质：" prop="business_auth">
-                <div class="demo-image__preview">
-                  <div style="padding-right:6px;">
-                    <div class="demo-image__preview">
-                      <el-image v-for="(item,index) in businessFileList" :key="index"
-                                style="width: 100px; height: 100px;border: 1px dashed #c0ccda;border-radius: 6px;margin: 0 5px;"
-                                :src="item"
-                                :preview-src-list="getPreviewImgList(item)">
-                      </el-image>
-                    </div>
-                  </div>
-                  <div>
-              <span class="tips-text">
-                <i class="el-icon-warning h-warning"></i>
+              <el-form-item label="其他资质：">
+                <div class="auth-con">
+                  <div v-for="(item,index) in qualificationList" :key="item.id" class="single-upload-con">
+                    <div v-show="!item.url" class="single-auth-img"></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>
                     </div>
-                  <div style="width:380px;line-height: 24px;padding-top: 6px;color: #333;">
-                    <span class="tips-text">点击图片,查看大图</span>
+                    <div class="single-title">{{ authTitleFormatter(item.content) }}</div>
                   </div>
                 </div>
               </el-form-item>
+
             </el-form>
-          </div>
         </el-card>
       </div>
     </el-card>
 
     <!--编辑-->
-    <el-dialog :title="title" :visible.sync="isOpen" width="60%" class="shopinf-edit">
-      <el-form ref="editForm" :model="editForm" :rules="eidtRules" label-width="180px">
+    <el-dialog title="编辑店铺信息" :visible.sync="isOpen" width="65%" class="shopinf-edit"
+               center :close-on-click-modal="false">
+      <el-form ref="editStoreForm" :model="editStoreForm" :rules="shopRules" label-width="180px" size="small">
 
         <el-form-item label="电商平台经验：" prop="is_business_experience">
-          <el-radio-group v-model="editForm.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="editForm.store_name" style="width: 400px;" placeholder="请输入店铺名称"></el-input>
+          <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="editForm.scope" multiple placeholder="请选择..." style="width: 400px;" @change="">
+          <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"
@@ -252,12 +274,12 @@
           <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
             <div style="padding-right:6px;">
               <el-upload
-                class="uploadData"
+                :class="['uploadData',{ 'hiden-dom': logoImgFileList.length >= 1 }]"
                 action="#"
                 list-type="picture-card"
                 :limit="1"
                 :on-exceed="showTip1"
-                :before-upload = "beforeUpLogoImg"
+                :before-upload = "beforeUpImg"
                 :http-request="uploadLogoImgs"
                 :on-preview="handlePictureCardPreview"
                 :on-remove="handleRemove"
@@ -265,7 +287,7 @@
               >
                 <i class="el-icon-plus"></i>
               </el-upload>
-              <el-dialog :visible.sync="dialogVisible">
+              <el-dialog :visible.sync="dialogVisible" append-to-body>
                 <img width="100%" :src="dialogImageUrl" alt="">
               </el-dialog>
             </div>
@@ -281,11 +303,11 @@
         </el-form-item>
 
         <el-form-item label="运营负责人：" prop="emergency_name" inline-message="true">
-          <el-input v-model="editForm.emergency_name" style="width: 400px;" placeholder="请输入运营负责人姓名"></el-input>
+          <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="editForm.emergency_tel" style="width: 400px;" placeholder="请输入联系电话"></el-input>
+          <el-input v-model="storeForm.emergency_tel" style="width: 400px;" placeholder="请输入联系电话"></el-input>
         </el-form-item>
 
         <el-form-item>
@@ -293,134 +315,145 @@
             生产许可证、化妆品生产企业许可证等，根据具体类目资质要求提交</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>
+        <el-form-item label="其他资质：">
+          <div class="auth-con">
+            <div v-for="(item,index) in qualificationList" :key="item.id" class="single-upload-con">
+              <div v-show="!item.url" class="single-auth-img" @click="upPreSpeImg(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 style="width:380px;line-height: 24px;padding-top: 6px;color: #333;">
-              <span class="tips-text">请上其他资质，单个文件大小在2MB以内，支持jpg,png格式，最多可上传20张</span>
+              <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>
           </div>
         </el-form-item>
 
         <el-form-item class="btnCen">
-          <el-button type="" @click="handleCancel" style="margin-right: 40px;">取 消</el-button>
+          <el-button type="" @click="handleCancel" style="margin-right: 20px;">取 消</el-button>
           <el-button type="primary" @click="handleAdd('editForm')">提交审核</el-button>
         </el-form-item>
 
       </el-form>
     </el-dialog>
+
+    <!-- 图片预览 -->
+    <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 {getGoodsType, getMainInf, getShopInf,upLoadImg, addShopInf} from '@/api/module/entry';
-
+  import {getGoodsType, getMainInf, getShopInf, upLoadImg, addShopInf, getUploadQualificationListData} from '@/api/module/entry';
   export default {
     name: "Shop",
     data() {
       let logoValidator = (rule, value, callback) => {
-        if(this.logoImgFileList.length > 0) {
+        if (this.logoImgFileList.length > 0) {
           callback();
-        }else if(this.logoImgFileList.length === 0) {
+        } else if (this.logoImgFileList.length === 0) {
           callback(new Error("店铺logo图片至少上传一张"));
         }
       };
       let busAuthValidator = (rule, value, callback) => {
-        if(this.businessImgFileList.length > 0) {
+        if (this.businessImgFileList.length > 0) {
           callback();
-        }else if(this.businessImgFileList.length === 0) {
+        } else if (this.businessImgFileList.length === 0) {
           callback(new Error("其他资质图片至少上传一张"));
         }
       };
       // 手机号码格式校验
       let checkTel = (rule, value, callback) => {
         const reg = /^1[3456789]\d{9}$/;
-        if(!reg.test(value)){
+        if (!reg.test(value)) {
           callback(new Error('手机号码格式有误'));
-        }else {
+        } else {
           callback();
         }
       };
       return {
-        loading: false,
-        isOpen: false,
         reviewResult: '加载中。。',
-        title: '',
-        isMainItem: true,// 主体/企业信息 单项 是否可以修改，目前暂时不能
-        // 执照类型
-        zzOptions: [
-          {label: "多证合一营业执照（统一社会信用代码）", value: 1},
-          {label: "多证合一营业执照（非统一社会信用代码）", value: 2},
-        ],
-        // 法人执照类型
-        idcardTypeOptions: [
-          {label: "大陆身份证", value: 1},
-          {label: "护照", value: 2},
-          {label: "港奥台居民通行证", value: 3},
-          {label: "台湾居民通行证", value: 4},
-        ],
-        scopeOptions: [],
-        // 营业期限
-        periodConcreteTime: null,
-        periodLongTermVal: false,
-        // 证件有效期
-        validityConcreteTime: null,
-        validityLongTermVal: false,
-        licenseFileList: [], // 营业执照图片
-        idcardFileList: [], // 法人证件照
-        logoFileList: [],  // 店铺logo
-        businessFileList: [], // 其他资质
+        isMainItem: true,// 主体/企业信息 是否可以修改，目前暂时不能
         mainForm: {
-          organization_type: '',
-          license_type: '',
           license: '',
           organization_name: '',
-          organization_address: '',
+          license_number: '',
+          license_start_time: '',
           license_expires_time: '',
-          idcard_type: '',
+          idcard_front: '',
+          idcard_back: '',
           real_name: '',
           idcard_number: '',
+          idcard_start_time: '',
           idcard_expires_time: '',
-          idcard_front: '',
-          //idcardback: 'jiazhuangwshifanmian'
         },
+        // 营业执照图片
+        licenseImgFileList: [],
+        isLicenseVisible: false,
+        licenseImgUrl: '',
+        // 营业期限
+        periodConcreteTime: [], // 区间时间
+        periodLongTermVal: false, // 是否长期
+        // 身份证 正面
+        idcardImgFileList: [],
+        idcardPositiveVisible: false,
+        idcardPositiveImgUrl: '',
+        // 身份证国徽面
+        idcardBackImgFileList: [],
+        idcardBackVisible: false,
+        idcardBackImgUrl: '',
+        //  身份证 有效期
+        validityConcreteTime: [],
+        validityLongTermVal: false,
+        // 店铺信息
         storeForm: {
           is_business_experience: '',
           store_name: '',
           scope: [],
           shop_logo: '',
-          business_auth: '',
           emergency_name: '',
+          emergency_tel: '',
+          business_auth: '',
         },
-        shopRules: {},
-        mainRules: {},
-        dialogImageUrl: '',
+        scopeOptions: [], // 经营类目
+        // 店铺logo 图片
+        logoImgFileList: [],
+        shopLogoVisible: false,
+        shopLogoImgUrl: '',
+        // 需要上传的资质
+        qualificationList: [],
+        qualificationUrl: '',
+        imgDialog: false,
+        // 编辑
+        isOpen: false,
+
+        //-------------------------
         dialogVisible: false,
+        // --------------------
+
         dialogImageUrl2: '',
         dialogVisible2: false,
-        logoImgFileList: [],
+        dialogBackImageUrl: '',
+        dialogBackVisible: false,
+        logoFileList: [],  // 店铺logo
+        businessFileList: [], // 其他资质
+
+        shopRules: {},
+
         businessImgFileList: [],
         editForm: {
           is_business_experience: 0,
@@ -437,12 +470,13 @@
           emergency_name: [{required: true, message: '运营负责人不能为空', trigger: 'blur'}],//
           emergency_tel: [
             {required: true, message: '联系人手机号码不能为空', trigger: 'blur'},
-            {required: true, validator: checkTel,trigger: 'blur' }
+            {required: true, validator: checkTel, trigger: 'blur'}
           ],
           business_auth: [{required: true, message: '店铺Logo至少上传一张图片', validator: busAuthValidator}],//
-        }
-      }
         },
+
+      }
+    }, // data end
     created() {
       // 获取经营一级类目
       getGoodsType().then(res => {
@@ -460,65 +494,112 @@
         arr.push(ele);
         return arr;
       },
-      // 获取 主体=企业 信息
+      /** 获取 主体即企业 信息 */
       getMain() {
         getMainInf().then(res => {
-          if (res.code === 1 && res.data) {
+          if (res.code == 1) {
             this.mainForm = res.data;
-            // 处理证件照
-            let licenseArr = [];
-            if (this.mainForm.license.indexOf(",") > 0) {
-              licenseArr = this.mainForm.license.split(",");
+
+            // 营业执照电子图片处理
+            let licenseImgArr = [];
+            let licenseImgUrl = {};
+            licenseImgArr = this.mainForm.license.split(",");
+            if (licenseImgArr.length > 0) {
+              licenseImgArr.forEach(item => {
+                licenseImgUrl = {};
+                if (item) {
+                  licenseImgUrl.url = item
+                  this.licenseImgFileList.push(licenseImgUrl)
+                }
+              });
+            } else {
+              this.licenseImgFileList = [];
+            }
+
+            // 身份证 正面数据处理
+            let idcardFrontImgArr = [];
+            let idcardFrontImgUrl = {};
+            idcardFrontImgArr = this.mainForm.idcard_front.split(",");
+            if (idcardFrontImgArr.length > 0) {
+              idcardFrontImgArr.forEach(item => {
+                idcardFrontImgUrl = {};
+                if (item) {
+                  idcardFrontImgUrl.url = item
+                  this.idcardImgFileList.push(idcardFrontImgUrl)
+                }
+              });
             } else {
-              licenseArr.push(this.mainForm.license);
+              this.idcardImgFileList = [];
             }
-            this.licenseFileList = licenseArr;
 
-            // 处理法人证件照
-            let idcardArr = [];
-            if (this.mainForm.idcard_front.indexOf(",") > 0) {
-              idcardArr = this.mainForm.idcard_front.split(",");
+            // 身份证 反面数据处理
+            let idcardBackImgArr = [];
+            let idcardBackImgUrl = {};
+
+            idcardBackImgArr = this.mainForm.idcard_back.split(",");
+            if (idcardBackImgArr.length > 0) {
+              idcardBackImgArr.forEach(item => {
+                idcardBackImgUrl = {};
+                if (item) {
+                  idcardBackImgUrl.url = item
+                  this.idcardBackImgFileList.push(idcardBackImgUrl)
+                }
+              });
             } else {
-              idcardArr.push(this.mainForm.idcard_front);
+              this.idcardBackImgFileList = [];
             }
-            this.idcardFileList = idcardArr;
 
-            if(this.mainForm.idcard_expires_time === 0) {
-              this.validityLongTermVal = true;
-            }else {
-              this.validityConcreteTime = this.toStandTime(this.mainForm.idcard_expires_time);
+            // 营业期限 日期格式处理
+            if (this.mainForm.license_expires_time == 0) {
+              this.periodLongTermVal = true
+              this.periodConcreteTime = [];
+            } else if (this.mainForm.license_expires_time > 0) {
+              this.periodLongTermVal = false;
+              this.periodConcreteTime = [];
+              let start = this.formatterTime(this.mainForm.license_start_time)
+              let end = this.formatterTime(this.mainForm.license_expires_time);
+              this.periodConcreteTime.push(start)
+              this.periodConcreteTime.push(end)
             }
 
-            if(this.mainForm.license_expires_time === 0) {
-              this.periodLongTermVal = true;
-            }else {
-              this.periodConcreteTime = this.toStandTime(this.mainForm.license_expires_time);
+            // 身份证 有效期 日期格式处理
+            if (this.mainForm.idcard_expires_time == 0) {
+              this.validityLongTermVal = true
+              this.validityConcreteTime = [];
+            } else if (this.mainForm.idcard_expires_time > 0) {
+              this.validityLongTermVal = false;
+              this.validityConcreteTime = [];
+              let start = this.formatterTime(this.mainForm.idcard_start_time)
+              let end = this.formatterTime(this.mainForm.idcard_expires_time);
+              this.validityConcreteTime.push(start)
+              this.validityConcreteTime.push(end)
             }
 
           }
         });
       },
+      /** 获取 店铺信息 */
       getShop() {
         getShopInf().then(res => {
-          if (res.code === 1 && res.data) {
+          if (res.code == 1) {
             // 审核状态
-            if(res.data.state === 1) {
+            if (res.data.state === 1) {
               this.reviewResult = '已通过';
-            }else if(res.data.state === 2) {
+            } else if (res.data.state === 2) {
               this.reviewResult = '未审核';
-            }else if(res.data.state === 3) {
+            } else if (res.data.state === 3) {
               this.reviewResult = '未通过';
-            }else {
+            } else {
               this.reviewResult = '';
             }
             // 处理  select 下拉回显数据格式
             this.storeForm.scope = [];
-            if(res.data.scope === '') {
+            if (res.data.scope === '') {
               this.storeForm.scope = [];
-            }else {
+            } else {
               let scopeListStr = res.data.scope.split(',');
               let scopeList = [];
-              for(let i = 0; i < scopeListStr.length; i++) {
+              for (let i = 0; i < scopeListStr.length; i++) {
                 scopeList.push(parseInt(scopeListStr[i]));
               }
               this.storeForm = res.data;
@@ -527,54 +608,78 @@
 
             // 店铺信息展示 start
             this.storeForm = res.data;
-            console.log("00",res.data);
-            // 店铺logo图片处理
-            let logoArr = [];
-            if (this.storeForm.shop_logo.indexOf(",") > 0) {
-              logoArr = this.storeForm.shop_logo.split(",");
-            } else {
-              logoArr.push(this.storeForm.shop_logo);
-            }
-            this.logoFileList = logoArr;
 
-            // 其他资质图片处理  business
-            let businessArr = [];
-            if (this.storeForm.business_auth.indexOf(",") > 0) {
-              businessArr = this.storeForm.business_auth.split(",");
-            } else {
-              businessArr.push(this.storeForm.business_auth);
+            // 店铺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)
                 }
-            this.businessFileList = businessArr;
-            // 店铺信息展示 end
-          }else if( res.code === 0 && res.msg) {
-            this.$message({
-              message: res.msg,
-              type: 'error'
-            });
-          }else {
-            this.$message({
-              message: "数据有误！",
-              type: 'error'
               });
+            } else {
+              this.logoImgFileList = [];
+            }
+
+            // 资质图片回显处理
+            this.qualificationList = this.storeForm.qualification ? this.storeForm.qualification : [];
+
+          } else if (res.code) {
+            this.$message({message: res.msg, type: 'error'});
           }
         });
       },
 
+
+
+      /** 预览 营业执照 */
+      handleLicenseImgview(file) {
+        this.licenseImgUrl = file.url;
+        this.isLicenseVisible = true;
+      },
+      /** 预览 身份证 正面 */
+      handleIdcardPositiveImgview(file) {
+        this.idcardPositiveImgUrl = file.url;
+        this.idcardPositiveVisible = true;
+      },
+      /** 预览 身份证 反面 */
+      handleIdcardBackImgview(file) {
+        this.idcardBackImgUrl = file.url;
+        this.idcardBackVisible = true;
+      },
+      /** 预览 店铺 logo */
+      handleShopLogoPreview(file) {
+        this.shopLogoImgUrl = file.url;
+        this.shopLogoVisible = true;
+      },
+      /** 预览 当前资质对应图片 */
+      viewSingleSpecImg(index,item) {
+        this.imgDialog = false;
+        if (!item.url) return;
+        this.imgDialog = true;
+        this.qualificationUrl = item.url
+      },
+
+
+
       // 修改 店铺信息的 回显数据
       showShopInf() {
         getShopInf().then(res => {
           if (res.code === 1 && res.data) {
             // 店铺信息修改  start
             //this.editForm = res.data;
-            console.log("处理后的格式555：",res.data);
 
             this.editForm.scope = [];
-            if(res.data.scope === '') {
+            if (res.data.scope === '') {
               this.editForm.scope = [];
-            }else {
+            } else {
               let scopeListStr = res.data.scope.split(',');
               let scopeList = [];
-              for(let i = 0; i < scopeListStr.length; i++) {
+              for (let i = 0; i < scopeListStr.length; i++) {
                 scopeList.push(Number(scopeListStr[i]));
               }
               this.editForm = res.data;
@@ -584,44 +689,44 @@
             // 店铺logo回显处理
             let logoList = {};
             let eidtLogoArr = [];
-            if(this.editForm.shop_logo.indexOf(",") > 0) {
+            if (this.editForm.shop_logo.indexOf(",") > 0) {
               eidtLogoArr = this.editForm.shop_logo.split(",");
-              for(let a = 0; a < eidtLogoArr.length; a++){
+              for (let a = 0; a < eidtLogoArr.length; a++) {
                 logoList = {};
                 logoList.url = eidtLogoArr[a];
                 this.logoImgFileList.push(logoList);
               }
-            }else if(this.editForm.shop_logo) {
+            } else if (this.editForm.shop_logo) {
               logoList.url = this.editForm.shop_logo;
               this.logoImgFileList = [];
               this.logoImgFileList.push(logoList);
-            }else {
+            } else {
               this.logoImgFileList = [];
             }
             // 资质图片回显处理
             let businessList = {};
             let editBusArr = [];
-            if(this.editForm.business_auth.indexOf(",") > 0) {
+            if (this.editForm.business_auth.indexOf(",") > 0) {
               editBusArr = this.editForm.business_auth.split(",");
-              for(let a = 0; a < editBusArr.length; a++){
+              for (let a = 0; a < editBusArr.length; a++) {
                 businessList = {};
                 businessList.url = editBusArr[a];
                 this.businessImgFileList.push(businessList);
               }
-            }else if(this.editForm.business_auth) {
+            } else if (this.editForm.business_auth) {
               businessList.url = this.editForm.business_auth;
               this.businessImgFileList = [];
               this.businessImgFileList.push(businessList);
-            }else {
+            } else {
               this.businessImgFileList = [];
             }
             // 店铺信息修改  end
-          }else if( res.code === 0 && res.msg) {
+          } else if (res.code === 0 && res.msg) {
             this.$message({
               message: res.msg,
               type: 'error'
             });
-          }else {
+          } else {
             this.$message({
               message: "数据有误！",
               type: 'error'
@@ -632,7 +737,6 @@
       // 编辑
       handleEdit() {
         this.isOpen = true;
-        this.title = '编辑店铺信息';
         this.showShopInf();
       },
       // 保存
@@ -650,57 +754,57 @@
       },
       save(formName) {
         let scoprStr = '';
-        for(let i = 0; i < this.editForm.scope.length; i++) {
+        for (let i = 0; i < this.editForm.scope.length; i++) {
           scoprStr += this.editForm.scope[i] + ',';
         }
-        this.editForm.scope = scoprStr.substring(0,scoprStr.length - 1);
+        this.editForm.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) {
+        if (this.logoImgFileList.length > 0) {
+          for (let i = 0; i < this.logoImgFileList.length; i++) {
+            if (i === 0) {
               this.editForm.shop_logo = this.logoImgFileList[i].url;
-            }else {
+            } else {
               this.editForm.shop_logo += ',' + this.logoImgFileList[i].url;
             }
           }
         }
 
         // 其他资质图片字段处理
-        if(this.businessImgFileList.length > 0) {
-          for(let i = 0; i < this.businessImgFileList.length; i++) {
-            if(i === 0) {
+        if (this.businessImgFileList.length > 0) {
+          for (let i = 0; i < this.businessImgFileList.length; i++) {
+            if (i === 0) {
               this.editForm.business_auth = this.businessImgFileList[i].url;
-            }else {
+            } else {
               this.editForm.business_auth += ',' + this.businessImgFileList[i].url;
             }
           }
         }
 
         this.$refs[formName].validate((valid) => {
-          if(valid) {
+          if (valid) {
             addShopInf(this.editForm).then(res => {
-              if(res.code === 1){
+              if (res.code === 1) {
                 this.getShop();
-                this.$message({message: '店铺信息修改成功', type:'success'});
+                this.$message({message: '店铺信息修改成功', type: 'success'});
                 this.isOpen = false;
-              }else if(res.code === 0 && res.msg) {
+              } else if (res.code === 0 && res.msg) {
                 // 处理 scope数据格式冲突
-                if(this.editForm.scope === '') {
+                if (this.editForm.scope === '') {
                   this.editForm.scope = [];
-                }else {
+                } else {
                   let scopeListStr = this.editForm.scope.split(',');
                   let scopeList = [];
-                  for(let i = 0; i < scopeListStr.length; i++) {
+                  for (let i = 0; i < scopeListStr.length; i++) {
                     scopeList.push(parseInt(scopeListStr[i]));
                   }
                   this.editForm.scope = scopeList;
                 }
-                if(res.msg) {
+                if (res.msg) {
                   this.$message({
                     message: res.msg,
                     type: 'error'
                   });
-                }else {
+                } else {
                   this.$message({
                     message: "数据开小差了，请稍后重试",
                     type: 'error'
@@ -708,17 +812,16 @@
                 }
               }
             });
-          }
-          else {
+          } else {
             // 因  scope字段是selcet的绑定值，必须为数组类型，但是，在传给后台的时候，是字符串类型，传入的时候需要处理，回显的时候也需要处理
             // 在校验时候就产出了这个bug,校验不通过的话，他已经被处理为字符串了，不通过的话，还原格式，不能还原数据
             //this.storeForm.scope = [];
-            if(this.storeForm.scope === '') {
+            if (this.storeForm.scope === '') {
               this.storeForm.scope = [];
-            }else {
+            } else {
               let scopeListStr = this.storeForm.scope.split(',');
               let scopeList = [];
-              for(let i = 0; i < scopeListStr.length; i++) {
+              for (let i = 0; i < scopeListStr.length; i++) {
                 scopeList.push(parseInt(scopeListStr[i]));
               }
               this.storeForm.scope = scopeList;
@@ -731,22 +834,53 @@
         this.resetForm('editForm');
         this.isOpen = false;
       },
-      showTip1(files,fileList){
+      showTip1(files, fileList) {
         this.$message({message: '最多上传1张图片', type: 'warning'});
       },
-      showTip20(files,fileList) {
+      showTip20(files, fileList) {
         this.$message({message: '最多上传20张图片', type: 'warning'});
       },
 
+      /** 上传 营业执照图片 */
+      uploadLicenseImages(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.licenseImgFileList.push({'url': res.data.image_url});
+              this.$message({type: 'success', message: '上传成功'});
+              this.$refs.mainForm.clearValidate('license');
+              // 图片识别
+              this.readLicenseImgInfo(this.licenseImgFileList);
+            } 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.licenseImgFileList.length; i++) {
+          if (file.uid === this.licenseImgFileList[i].uid) {
+            this.licenseImgFileList.splice(i, 1);
+          }
+        }
+      },
+
       // 上传店铺logo图片
       uploadLogoImgs(param) {
         this.getBase64(param.file).then((res) => {
           let result = res.split(",");
           this.Base64img = result[1];
-          let data = {"img_data":this.Base64img};
+          let data = {"img_data": this.Base64img};
           upLoadImg(data).then((res) => {
-            if(res && res.code ==  1){
-              this.logoImgFileList.push({'url':res.data.image_url});
+            if (res && res.code == 1) {
+              this.logoImgFileList.push({'url': res.data.image_url});
               this.$message({message: '上传成功', type: 'success'});
               this.$refs.storeForm.clearValidate('shop_logo');
             }
@@ -758,10 +892,10 @@
         this.getBase64(param.file).then((res) => {
           let result = res.split(",");
           this.Base64img = result[1];
-          let data = {"img_data":this.Base64img};
+          let data = {"img_data": this.Base64img};
           upLoadImg(data).then((res) => {
-            if(res && res.code ==  1){
-              this.businessImgFileList.push({'url':res.data.image_url});
+            if (res && res.code == 1) {
+              this.businessImgFileList.push({'url': res.data.image_url});
               this.$message({message: '上传成功', type: 'success'});
               this.$refs.storeForm.clearValidate('business_auth');
             }
@@ -769,16 +903,16 @@
         });
       },
       // 店铺logo图片上传格式和大小的校验
-      beforeUpLogoImg(file) {
-        let isImgSize = (file.size / 1024 ) > 500;
-        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
+      beforeUpImg(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) {
+        if (isImgSize) {
           this.$message({
             message: '上传图片大小不能超过500kb',
             type: "warning"
@@ -787,64 +921,220 @@
         }
       },
       // 其他资质图片上传 校验
-      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"
+      // 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;
+      //   }
+      // },
+
+      // 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);
+      //     }
+      //   }
+      // },
+      /** 上传身份证 正面 */
+      uploadIdcardPositive(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.idcardImgFileList.push({'url': res.data.image_url});
+              this.$message({type: 'success', message: '上传成功'});
+              this.$refs.mainForm.clearValidate('idcard_front');
+              this.readIdcardPositive(this.idcardImgFileList);
+            } else {
+              this.$message({type: 'error', message: res.message ? res.message : '上传失败'});
+            }
           });
-          return false;
+        });
+      },
+      /** 识别 身份证 正面 */
+      readIdcardPositive(fileList) {
+        if (!Array.isArray(fileList) || !fileList[0].url) return
+        let data = {img: fileList[0].url}
+        getIdcardImgInfoData(data).then(res => {
+          if (res.code == 1) {
+            this.mainForm.real_name = res.data.words_result['姓名'].words ? res.data.words_result['姓名'].words : '';
+            this.mainForm.idcard_number = res.data.words_result['公民身份号码'].words ? res.data.words_result['公民身份号码'].words : '';
           }
-        if(isImgSize) {
-          this.$message({
-            message: '上传图片大小不能超过2M',
-            type: "warning"
         });
-          return false;
+      },
+      // handlePictureCardPreview2(file) {
+      //   this.dialogImageUrl2 = file.url;
+      //   this.dialogVisible2 = true;
+      // },
+      handleRemove2(file, fileList) {
+        for (let i = 0; i < this.idcardImgFileList.length; i++) {
+          if (file.uid === this.idcardImgFileList[i].uid) {
+            this.idcardImgFileList.splice(i, 1);
+          }
         }
       },
-
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
+      /** 上传身份证 反面 */
+      uploadIdcardBack(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.idcardBackImgFileList.push({'url': res.data.image_url});
+              this.$message({type: 'success', message: '上传成功'});
+              this.$refs.mainForm.clearValidate('idcard_back');
+              this.readIdcardBack(this.idcardBackImgFileList);
+            } else {
+              this.$message({type: 'error', message: res.message ? res.message : '上传失败'});
+            }
+          });
+        });
       },
-      handleRemove(file,fileList) {
-        for(let i = 0; i < this.logoImgFileList.length; i++) {
-          if(file.uid === this.logoImgFileList[i].uid) {
-            this.logoImgFileList.splice(i,1);
+      /** 识别 身份证 反面 */
+      readIdcardBack(fileList) {
+        if (!Array.isArray(fileList) || !fileList[0].url) return
+        let data = {img: fileList[0].url}
+        getIdcardImgInfoData(data).then(res => {
+          if (res.code == 1) {
+            // 身份证 有效 XXXXXXXX日 => xx-xx-xx
+            let endStr = res.data.words_result['失效日期'].words ? res.data.words_result['失效日期'].words : '';
+            if (endStr == '长期') {
+              this.validityConcreteTime = [];
+              this.validityLongTermVal = true;
+            } else {
+              let beginStr = res.data.words_result['签发日期'].words ? res.data.words_result['签发日期'].words : '';
+              let reg = /^(\d{4})(\d{2})(\d{2})$/;
+              let begin = beginStr.replace(reg, "$1-$2-$3");
+              let end = endStr.replace(reg, "$1-$2-$3");
+              this.validityConcreteTime = [];
+              this.validityConcreteTime.push(begin);
+              this.validityConcreteTime.push(end);
+              this.validityLongTermVal = false;
             }
           }
+        });
       },
-      handlePictureCardPreview2(file) {
-        this.dialogImageUrl2 = file.url;
-        this.dialogVisible2 = true;
+      /** 预览 身份证反面 */
+      handleIdcardBackPreview(file) {
+        this.dialogBackImageUrl = file.url;
+        this.dialogBackVisible = 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);
+      /** 删除 身份证反面 */
+      handleBackRemove2(file) {
+        for (let i = 0; i < this.idcardBackImgFileList.length; i++) {
+          if (file.uid === this.idcardBackImgFileList[i].uid) {
+            this.idcardBackImgFileList.splice(i, 1);
+          }
+        }
+      },
+      /** 营业期限 选择区间时间时 */
+      periodLongTermChange() {
+        if (Array.isArray(this.periodConcreteTime) && this.periodConcreteTime.length == 2) {
+          this.periodLongTermVal = false;
+        }
+      },
+      /** 营业期限 选择 长期时 */
+      periodConcreteChange() {
+        if (this.periodLongTermVal) {
+          this.periodConcreteTime = [];
+        }
+      },
+      /** 身份证有效期  选择区间时间时 */
+      validityConcreteTimeChange() {
+        if (Array.isArray(this.validityConcreteTime) && this.validityConcreteTime.length == 2) {
+          this.validityLongTermVal = false;
+        }
+      },
+      /** 身份证有效期 选择 长期时 */
+      validityLongTermValChange() {
+        if (this.validityLongTermVal) {
+          this.validityConcreteTime = [];
+        }
+      },
+
+
+
+
+      /** 删除单个 经营类目 触发 */
+      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 : [];
+              }
+            })
           }
         }
       },
 
       // 图片转换为base64位
       getBase64(file) {
-        return new Promise(function(resolve, reject) {
+        return new Promise(function (resolve, reject) {
           let reader = new FileReader();
           let imgResult = "";
           reader.readAsDataURL(file);
-          reader.onload = function() {
+          reader.onload = function () {
             imgResult = reader.result;
           };
-          reader.onerror = function(error) {
+          reader.onerror = function (error) {
             reject(error);
           };
-          reader.onloadend = function() {
+          reader.onloadend = function () {
             resolve(imgResult);
           };
         });
       },
+      /** 资质类目 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
+      },
 
       // 时间戳转换为 标准时间格式
       toStandTime(val) {
@@ -863,18 +1153,39 @@
 
 <style lang="scss" type="text/stylus" scoped>
 
-  .shopinf-edit{
-    /deep/.el-dialog {
+  .shopinf-edit {
+    ///deep/.el-dialog {
+    //  height: 80%;
+    //  overflow : hidden;
+    //}
+    ///deep/.el-dialog__body{
+    //  height: calc(100% - 60px);
+    //  overflow-x: hidden;
+    //  overflow-y: scroll;
+    //}
+
+  }
+
+  /* 弹窗 样式 重置 */
+  .shopinf-edit >>> .el-dialog {
+    width: 60%;
     height: 80%;
-      overflow : hidden;
+    overflow: hidden;
   }
-    /deep/.el-dialog__body{
+
+  .shopinf-edit >>> .el-dialog .el-dialog__body {
     height: calc(100% - 60px);
-      overflow-x: hidden;
-      overflow-y: scroll;
+    padding: 10px 20px 20px 40px;
+    overflow: auto;
   }
 
+  /* 弹窗 样式 重置 ---- end ---- */
+
+  .main-form-con {
+    //margin-left: 100px;
   }
+
+
   /deep/ .el-card__body {
     height: calc(100% - 80px);
     margin: 10px 0;
@@ -890,6 +1201,7 @@
 
   /deep/ .speTip {
     color: #c0ccda;
+    font-size: 14px;
   }
 
   .text-v-c {
@@ -897,8 +1209,8 @@
     display: -webkit-flex;
   }
 
-  .demo-image__preview{
-    width:100%;
+  .demo-image__preview {
+    width: 100%;
     height: 100%;
     display: flex;
     flex-direction: row;
@@ -938,6 +1250,117 @@
     }
   }
 
+  .hiden-dom >>> .el-upload--picture-card {
+    display: none !important;
+  }
+
+  .idcard-tips-con {
+    display: flex;
+    flex-direction: row;
+    justify-content: normal;
+    justify-items: center;
+  }
+
+  .idcard-tips-con > p {
+    margin: 0;
+    padding: 0 15px;
+  }
+
+  /*** 资质 样式  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;
+  }
+
+  .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 ***/
+
   // 提示语 样式 start
   .tips-text {
     font-size: 14px;
@@ -948,13 +1371,23 @@
   .h-warning:before {
     color: #e3c300;
   }
+
   // 提示语样式  end
 
   .btnCen {
-    /deep/.el-form-item__content {
-      margin-left: 0!important;
-      text-align : center;
+    /deep/ .el-form-item__content {
+      margin-left: 0 !important;
+      text-align: center;
       //margin-top: 30px;
     }
   }
+  /* 预览 资质图片 */
+  .img-dialog-con >>> .el-dialog__body {
+    text-align : center;
+  }
+
+  .img-spe {
+    //width: 80%;
+    margin: 0 auto;
+  }
 </style>