linwenxin 1 سال پیش
والد
کامیت
be666efbdc
1فایلهای تغییر یافته به همراه222 افزوده شده و 199 حذف شده
  1. 222 199
      src/views/setting/organizationManagement/settledManagement/index.vue

+ 222 - 199
src/views/setting/organizationManagement/settledManagement/index.vue

@@ -6,15 +6,11 @@
       <div class="tips">说明:开通商户账号是指开通商城后台管理系统的总登录账号。</div>
 
       <el-card shadow="never" class="my-card">
-        <el-form class="my-form" ref="step1Form" :model="step1Form" :rules="step1FormRules" label-width="100px" label-position="right">
+        <el-form class="my-form" ref="step1Form" :model="step1Form" :rules="step1FormRules" label-width="100px"
+          label-position="right">
           <el-form-item label="商户账号" prop="account">
             <el-input v-model="step1Form.account" autocomplete="off" placeholder="请输入商户账号"></el-input>
-            <el-popover
-              class="question"
-              placement="right-start"
-              title="账号设置"
-              width="260"
-              trigger="hover"
+            <el-popover class="question" placement="right-start" title="账号设置" width="260" trigger="hover"
               content="账号设置需按数字、字母组合设置至少12位账号">
               <svg-icon icon-class="question" slot="reference" />
             </el-popover>
@@ -35,37 +31,30 @@
             <el-input v-model="step1Form.email" autocomplete="off" placeholder="请输入电子邮箱"></el-input>
           </el-form-item>
           <el-form-item label="地址" prop="address">
-			<div style="display:flex;">
-				<el-input placeholder="请选择地址" autocomplete="off" readonly style="margin-right: 20px;" v-model="step1Form.address"></el-input>
-				<geographicalPosi :formData="step1Form" @selectPosi="selectAddress"></geographicalPosi>
-			</div>
+            <div style="display:flex;">
+              <el-input placeholder="请选择地址" autocomplete="off" readonly style="margin-right: 20px;"
+                v-model="step1Form.address"></el-input>
+              <geographicalPosi :formData="step1Form" @selectPosi="selectAddress"></geographicalPosi>
+            </div>
           </el-form-item>
           <el-form-item label="登录密码" prop="newPassword">
-            <el-input v-model="step1Form.newPassword" ref="password1" autocomplete="off" placeholder="请输入登录密码" :type="passwordType1"></el-input>
+            <el-input v-model="step1Form.newPassword" ref="password1" autocomplete="off" placeholder="请输入登录密码"
+              :type="passwordType1"></el-input>
             <span class="show-pwd" @click="showPwd(1)">
               <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
             </span>
-            <el-popover
-              class="question"
-              placement="right-start"
-              title="密码设置"
-              width="260"
-              trigger="hover"
+            <el-popover class="question" placement="right-start" title="密码设置" width="260" trigger="hover"
               content="密码设置需按数字、字母组合设置至少12位密码">
               <svg-icon icon-class="question" slot="reference" />
             </el-popover>
           </el-form-item>
           <el-form-item label="确认密码" prop="confirmPassword">
-            <el-input v-model="step1Form.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码" :type="passwordType2"></el-input>
+            <el-input v-model="step1Form.confirmPassword" ref="password2" autocomplete="off" placeholder="请再次输入密码"
+              :type="passwordType2"></el-input>
             <span class="show-pwd" @click="showPwd(2)">
               <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
             </span>
-            <el-popover
-              class="question"
-              placement="right-start"
-              title="密码设置"
-              width="260"
-              trigger="hover"
+            <el-popover class="question" placement="right-start" title="密码设置" width="260" trigger="hover"
               content="确认密码需要和登录密码保持一致">
               <svg-icon icon-class="question" slot="reference" />
             </el-popover>
@@ -78,19 +67,15 @@
       <div class="setting_title">商城配置</div>
       <el-divider></el-divider>
       <el-form label-width="100px" label-position="right">
-        <el-upload
-          class="avatar-uploader"
-          :action="baseURL + 'common/upload'"
-          :headers="myHeaders"
-          :show-file-list="false"
-          :on-success="uploadSuccess"
-          :before-upload="beforeUpload">
+        <el-upload class="avatar-uploader" :action="baseURL + 'common/upload'" :headers="myHeaders"
+          :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
         </el-upload>
         <el-form-item label="主logo:" prop="imgUrl">
           <div class="images">
             <div class="main-img">
               <div class="img" v-if="img1_url" @mouseover="img1_hover = true;" @mouseout="img1_hover = false;">
-                <el-image ref="img1" :src="img1_url" :preview-src-list="[img1_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
+                <el-image ref="img1" :src="img1_url" :preview-src-list="[img1_url]" style="width: 120px; height: 120px"
+                  fit="contain"></el-image>
                 <div class="mask" v-show="img1_hover">
                   <i class="el-icon-zoom-in" @click="previewImage('img1')"></i>
                   <i class="el-icon-upload2" @click="uploadImage('img1')"></i>
@@ -101,7 +86,9 @@
               </div>
             </div>
             <div class="tmp-img">
-              <el-image :src="require('@/assets/template/template_1.png')" :preview-src-list="[require('@/assets/template/template_1.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
+              <el-image :src="require('@/assets/template/template_1.png')"
+                :preview-src-list="[require('@/assets/template/template_1.png')]"
+                style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
               <div class="tmp">示例图</div>
             </div>
           </div>
@@ -113,7 +100,8 @@
           <div class="images">
             <div class="main-img">
               <div class="img" v-if="img2_url" @mouseover="img2_hover = true;" @mouseout="img2_hover = false;">
-                <el-image ref="img2" :src="img2_url" :preview-src-list="[img2_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
+                <el-image ref="img2" :src="img2_url" :preview-src-list="[img2_url]" style="width: 120px; height: 120px"
+                  fit="contain"></el-image>
                 <div class="mask" v-show="img2_hover">
                   <i class="el-icon-zoom-in" @click="previewImage('img2')"></i>
                   <i class="el-icon-upload2" @click="uploadImage('img2')"></i>
@@ -124,7 +112,9 @@
               </div>
             </div>
             <div class="tmp-img">
-              <el-image :src="require('@/assets/template/template_2.png')" :preview-src-list="[require('@/assets/template/template_2.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
+              <el-image :src="require('@/assets/template/template_2.png')"
+                :preview-src-list="[require('@/assets/template/template_2.png')]"
+                style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
               <div class="tmp">示例图</div>
             </div>
           </div>
@@ -136,7 +126,8 @@
           <div class="images">
             <div class="main-img">
               <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
-                <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
+                <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px"
+                  fit="contain"></el-image>
                 <div class="mask" v-show="img3_hover">
                   <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
                   <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
@@ -147,7 +138,9 @@
               </div>
             </div>
             <div class="tmp-img">
-              <el-image :src="require('@/assets/template/template_3.png')" :preview-src-list="[require('@/assets/template/template_3.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
+              <el-image :src="require('@/assets/template/template_3.png')"
+                :preview-src-list="[require('@/assets/template/template_3.png')]"
+                style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
               <div class="tmp">示例图</div>
             </div>
           </div>
@@ -159,39 +152,41 @@
 
 
         <!-- --------------------------- -->
-        <!-- <el-form-item label="头像logo:" prop="imgUrl">
+        <el-form-item label="头像logo:" prop="imgUrl">
           <div class="images">
             <div class="main-img">
-              <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
-                <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
-                <div class="mask" v-show="img3_hover">
-                  <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
-                  <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
+              <div class="img" v-if="qrcode1_url" @mouseover="qrcode1_hover = true;" @mouseout="qrcode1_hover = false;">
+                <el-image ref="qrcode1" :src="qrcode1_url" :preview-src-list="[qrcode1_url]" style="width: 120px; height: 120px"
+                  fit="contain"></el-image>
+                <div class="mask" v-show="qrcode1_hover">
+                  <i class="el-icon-zoom-in" @click="previewImage('qrcode1')"></i>
+                  <i class="el-icon-upload2" @click="uploadImage('qrcode1')"></i>
                 </div>
               </div>
-              <div class="add" v-else @click="uploadImage('img3')">
+              <div class="add" v-else @click="uploadImage('qrcode1')">
                 <i class="el-icon-plus avatar-uploader-icon"></i>
               </div>
             </div>
           </div>
-        </el-form-item> -->
+        </el-form-item>
         <!-- --------------------------- -->
-        <!-- <el-form-item label="头像logo:" prop="imgUrl">
+        <el-form-item label="头像logo:" prop="imgUrl">
           <div class="images">
             <div class="main-img">
-              <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
-                <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
-                <div class="mask" v-show="img3_hover">
-                  <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
-                  <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
+              <div class="img" v-if="qrcode2_url" @mouseover="qrcode2_hover = true;" @mouseout="qrcode2_hover = false;">
+                <el-image ref="qrcode2" :src="qrcode2_url" :preview-src-list="[qrcode2_url]" style="width: 120px; height: 120px"
+                  fit="contain"></el-image>
+                <div class="mask" v-show="qrcode2_hover">
+                  <i class="el-icon-zoom-in" @click="previewImage('qrcode2')"></i>
+                  <i class="el-icon-upload2" @click="uploadImage('qrcode2')"></i>
                 </div>
               </div>
-              <div class="add" v-else @click="uploadImage('img3')">
+              <div class="add" v-else @click="uploadImage('qrcode2')">
                 <i class="el-icon-plus avatar-uploader-icon"></i>
               </div>
             </div>
           </div>
-        </el-form-item> -->
+        </el-form-item>
         <!-- --------------------------- -->
 
 
@@ -202,9 +197,10 @@
       <div class="setting_title">微信配置</div>
       <el-divider></el-divider>
       <!-- <div class="tips">说明:企微配置是指通过配置企业微信将企微用户和系统打通,实现企业微信用户信息同平台互通,聊天会话信息同步</div> -->
-      <div class="tips" style="margin-top: 20px">商户名称:{{step1Form.nickName}}</div>
+      <div class="tips" style="margin-top: 20px">商户名称:{{ step1Form.nickName }}</div>
 
-      <el-form class="my-form2" ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="200px" label-position="right">
+      <el-form class="my-form2" ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="200px"
+        label-position="right">
         <!-- <el-card shadow="never" class="my-card">
           <div class="title">1.配置企业ID</div>
           <div class="box">指引:进入<el-link type="primary" :underline="false" href="https://element.eleme.io" target="_blank">企业微信</el-link>打开【我的企业】,将企业ID分别复制并填写到下方输入框中</div>
@@ -269,17 +265,14 @@
       <div class="footer" :class="classObj">
         <el-button @click="changeStep(0)" v-show="step > 1">上一步</el-button>
         <el-button @click="changeStep(1)" v-show="step < 3">下一步</el-button>
-        <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
-        <el-popconfirm
-          title="确定关闭吗?"
-          @confirm="goBack"
-          style="margin-left: 10px;"
-        >
+        <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交'
+        }}</el-button>
+        <el-popconfirm title="确定关闭吗?" @confirm="goBack" style="margin-left: 10px;">
           <el-button slot="reference">关 闭</el-button>
         </el-popconfirm>
       </div>
     </div>
-    
+
   </div>
 </template>
 
@@ -288,7 +281,7 @@ import { getToken } from '@/utils/auth'
 import { addAccount } from "@/api/merchant";
 import geographicalPosi from '@/components/geographicalPosi/index.vue'
 export default {
-	components: {geographicalPosi},
+  components: { geographicalPosi },
   data() {
     var validateAccount = (rule, value, callback) => {
       if (value === '') {
@@ -326,7 +319,7 @@ export default {
     };
     return {
       baseURL: process.env.VUE_APP_BASE_API,
-      myHeaders: {'x-token': getToken()},
+      myHeaders: { 'x-token': getToken() },
       step: 1,
       step1Form: {
         account: '', // 账号
@@ -335,11 +328,13 @@ export default {
         chargePerson: '', // 负责人
         phone: '', // 联系电话
         email: '', // 电子邮箱
-				lat: '',
-				lng: '',
+        lat: '',
+        lng: '',
         address: '', // 地址
         newPassword: '', // 登录密码
         confirmPassword: '', // 确认密码
+        qrcode1:'',
+        qrcode2:''
       },
       step1FormRules: {
         account: [
@@ -348,7 +343,7 @@ export default {
         nickName: [
           { required: true, message: '请输入用户名', trigger: 'blur' }
         ],
-		address: [
+        address: [
           { required: true, message: '请选择GPS地址', trigger: 'blur' }
         ],
         appName: [
@@ -377,6 +372,10 @@ export default {
       img2_hover: false,
       img3_url: '',
       img3_hover: false,
+      qrcode1_url:'',
+      qrcode1_hover:false,
+      qrcode2_url:'',
+      qrcode2_hover:false,
 
       step3Form: {
         enterpriseId: '',
@@ -427,16 +426,16 @@ export default {
     goBack() {
       this.$router.go(-1);
     },
-		
-		selectAddress(res){
-			this.step1Form.lng = res.center[0]
-			this.step1Form.lat = res.center[1]
-			this.step1Form.address = res.name
-		},
-		
+
+    selectAddress(res) {
+      this.step1Form.lng = res.center[0]
+      this.step1Form.lat = res.center[1]
+      this.step1Form.address = res.name
+    },
+
     // 显示隐藏密码
     showPwd(num) {
-      if(num == 1) {
+      if (num == 1) {
         if (this.passwordType1 === 'password') {
           this.passwordType1 = ''
         } else {
@@ -446,7 +445,7 @@ export default {
           this.$refs.password1.focus()
         })
       }
-      if(num == 2) {
+      if (num == 2) {
         if (this.passwordType2 === 'password') {
           this.passwordType2 = ''
         } else {
@@ -493,10 +492,10 @@ export default {
 
     // 切换步骤
     changeStep(type) {
-      if(type == 1) {
-        this.step ++;
-      }else {
-        this.step --;
+      if (type == 1) {
+        this.step++;
+      } else {
+        this.step--;
       }
     },
 
@@ -506,20 +505,20 @@ export default {
       this.$refs.step1Form.validate((valid) => {
         if (valid) {
           // 验证第二步
-          if(this.img1_url && this.img2_url && this.img3_url) {
+          if (this.img1_url && this.img2_url && this.img3_url && this.qrcode1_url && this.qrcode2_url) {
             // 验证第三步
             this.$refs.step3Form.validate((valid) => {
               if (valid) {
                 this.submitForm();
-              }else {
+              } else {
                 this.step = 3;
               }
             })
-          }else {
+          } else {
             this.$errorMsg('请完善商城配置');
             this.step = 2;
           }
-        }else {
+        } else {
           this.step = 1;
         }
       })
@@ -538,14 +537,16 @@ export default {
             linkName: this.step1Form.chargePerson,
             linkPhone: this.step1Form.phone,
             email: this.step1Form.email,
-			lat: this.step1Form.lat,
-			lng: this.step1Form.lng,
+            lat: this.step1Form.lat,
+            lng: this.step1Form.lng,
             address: this.step1Form.address,
             password: this.step1Form.confirmPassword,
 
             minLogo1: this.img1_url,
             minLogo2: this.img2_url,
             minLogo3: this.img3_url,
+            qrcode1: this.qrcode1_url,
+            qrcode2: this.qrcode2_url,
 
             corpId: this.step3Form.enterpriseId,
             secret2: this.step3Form.listSecret,
@@ -560,6 +561,8 @@ export default {
             subMchId: this.step3Form.childMerchantId,
             template: this.step3Form.templateId,
           }
+          console.log(params)
+          return 
           addAccount(params).then(res => {
             this.$successMsg('开通成功');
             setTimeout(() => {
@@ -576,130 +579,150 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .setting_title {
-    padding-left: 0;
-  }
-  .tips {
+.setting_title {
+  padding-left: 0;
+}
+
+.tips {
+  font-size: 14px;
+}
+
+.my-card {
+  margin-top: 20px;
+
+  .box {
+    background: rgb(235, 240, 249);
+    padding: 10px;
     font-size: 14px;
-  }
-  .my-card {
-    margin-top: 20px;
-    .box {
-      background: rgb(235, 240, 249);
-      padding: 10px;
-      font-size: 14px;
-      margin: 20px 0;
-      line-height: 18px;
-      ::v-deep .el-link {
-        vertical-align: unset;
-      }
+    margin: 20px 0;
+    line-height: 18px;
+
+    ::v-deep .el-link {
+      vertical-align: unset;
     }
   }
-  .my-form {
-    width: 450px;
-    margin: 0 auto;
-  }
-  .show-pwd {
-    position: absolute;
-    right: 15px;
-    top: 0;
-    font-size: 16px;
-    cursor: pointer;
-    user-select: none;
-  }
-  .question {
-    position: absolute;
-    right: -30px;
-    top: 0;
-    font-size: 20px;
-    cursor: pointer;
-    user-select: none;
-  }
-  .my-form2 {
-    ::v-deep input {
-      width: 400px;
-    }
+}
+
+.my-form {
+  width: 450px;
+  margin: 0 auto;
+}
+
+.show-pwd {
+  position: absolute;
+  right: 15px;
+  top: 0;
+  font-size: 16px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.question {
+  position: absolute;
+  right: -30px;
+  top: 0;
+  font-size: 20px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.my-form2 {
+  ::v-deep input {
+    width: 400px;
   }
-  .tips {
-    margin-top: 10px;
-    span {
-      display: inline-block;
-      width: 300px;
-      text-align: center;
-      line-height: 32px;
-      background: #ffefef;
-      font-size: 14px;
-      color: #f66460;
-    }
+}
+
+.tips {
+  margin-top: 10px;
+
+  span {
+    display: inline-block;
+    width: 300px;
+    text-align: center;
+    line-height: 32px;
+    background: #ffefef;
+    font-size: 14px;
+    color: #f66460;
   }
-  .images {
+}
+
+.images {
+  display: flex;
+  flex-wrap: wrap;
+
+  .main-img {
     display: flex;
-    flex-wrap: wrap;
-    .main-img {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 120px;
-      margin-right: 20px;
-      .img {
-        border: 1px dashed #eaeaea;
-        border-radius: 5px;
-        overflow: hidden;
-        position: relative;
-        .el-image {
-          display: block;
-        }
-        .mask {
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 120px;
-          height: 120px;
-          background: rgba($color: #000000, $alpha: 0.3);
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          i {
-            font-size: 20px;
-            color: #ffffff;
-            cursor: pointer;
-            margin: 0 8px;
-          }
-        }
-      }
-      .text {
-        font-size: 14px;
-        color: #666666;
-      }
-    }
-    .add {
-      width: 120px;
-      height: 120px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 120px;
+    margin-right: 20px;
+
+    .img {
       border: 1px dashed #eaeaea;
       border-radius: 5px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      i {
-        font-size: 30px;
-        color: #999;
-      }
-    }
-    .tmp-img {
+      overflow: hidden;
       position: relative;
-      .tmp {
+
+      .el-image {
+        display: block;
+      }
+
+      .mask {
         position: absolute;
         left: 0;
         top: 0;
-        line-height: 20px;
-        padding: 0 8px;
-        background: #f66460;
-        border-radius: 0 0 10px 0;
-        font-size: 12px;
-        color: #ffffff;
+        width: 120px;
+        height: 120px;
+        background: rgba($color: #000000, $alpha: 0.3);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+          font-size: 20px;
+          color: #ffffff;
+          cursor: pointer;
+          margin: 0 8px;
+        }
       }
     }
+
+    .text {
+      font-size: 14px;
+      color: #666666;
+    }
+  }
+
+  .add {
+    width: 120px;
+    height: 120px;
+    border: 1px dashed #eaeaea;
+    border-radius: 5px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    i {
+      font-size: 30px;
+      color: #999;
+    }
+  }
+
+  .tmp-img {
+    position: relative;
+
+    .tmp {
+      position: absolute;
+      left: 0;
+      top: 0;
+      line-height: 20px;
+      padding: 0 8px;
+      background: #f66460;
+      border-radius: 0 0 10px 0;
+      font-size: 12px;
+      color: #ffffff;
+    }
   }
-</style>
+}</style>