zfire-newmall-admin/src/views/setting/organizationManagement/settledManagement/index.vue

<template>
  <div class="app-container">
    <div v-show="step == 1">
      <div class="setting_title">开通账号</div>
      <el-divider></el-divider>
      <div class="tips"></div>
      <el-card shadow="never" class="my-card">
        <div slot="header" class="clearfix">
          <span>商户信息  <span style="font-size: 12px;margin-left: 10px;">说明：开通商户账号是指开通商城后台管理系统的总登录账号。</span></span>
        </div>
        <el-form class="my-form" ref="step1Form" :model="step1Form" :rules="step1FormRules" label-width="140px" size="mini">
          <el-row :gutter="20">
            <el-col :span="6">
              <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"
                  content="账号设置需按数字、字母组合设置至少12位账号">
                  <svg-icon icon-class="question" slot="reference" />
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="账户昵称" prop="nickName">
                <el-input v-model="step1Form.nickName" autocomplete="off" placeholder="请输入账户昵称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="小程序名称" prop="appName">
                <el-input v-model="step1Form.appName" autocomplete="off" placeholder="请输入小程序名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="负责人" prop="chargePerson">
                <el-input v-model="step1Form.chargePerson" autocomplete="off" placeholder="请输入负责人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model="step1Form.phone" autocomplete="off" placeholder="请输入联系电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="step1Form.email" autocomplete="off" placeholder="请输入电子邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <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>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="登录密码" prop="newPassword">
                <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"
                  content="密码设置需按数字、字母组合设置至少12位密码">
                  <svg-icon icon-class="question" slot="reference" />
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="确认密码" prop="confirmPassword">
                <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"
                  content="确认密码需要和登录密码保持一致">
                  <svg-icon icon-class="question" slot="reference" />
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="到期时间" prop="expireTime">
                <el-date-picker style="width: 100%;" v-model="step1Form.expireTime" type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="辅材配件权限" prop="moduleMaterialPart">
                <el-switch v-model="step1Form.moduleMaterialPart" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="延保权限" prop="moduleYb">
                <el-switch v-model="step1Form.moduleYb" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工程维保权限" prop="moduleWb">
                <el-switch v-model="step1Form.moduleWb" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品出入库" prop="joinCode">
                <el-switch v-model="step1Form.joinCode" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="租聘业务" prop="moduleZl">
                <el-switch v-model="step1Form.moduleZl" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二手商城" prop="moduleEs">
                <el-switch v-model="step1Form.moduleEs" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否允许到店支付" prop="storePay">
                <el-switch v-model="step1Form.storePay" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <div v-show="step == 2">
      <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>
        <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>
                <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>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('img1')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </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>
              <div class="tmp">示例图</div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：400*400</span>
          </div>
        </el-form-item>
        <el-form-item label="通用logo：" prop="imgUrl">
          <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>
                <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>
                </div>
              </div>
              <div class="add" v-else @click="uploadImage('img2')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </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>
              <div class="tmp">示例图</div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：280*60</span>
          </div>
        </el-form-item>
        <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>
              </div>
              <div class="add" v-else @click="uploadImage('img3')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </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>
              <div class="tmp">示例图</div>
            </div>
          </div>
          <div class="tips">
            <span>建议尺寸：400*400</span>
          </div>
        </el-form-item>



        <!-- --------------------------- -->
        <el-form-item label="小程序二维码：" prop="imgUrl">
          <div class="images">
            <div class="main-img">
              <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('qrcode1')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
        </el-form-item>
        <!-- --------------------------- -->
        <el-form-item label="公众号二维码：" prop="imgUrl">
          <div class="images">
            <div class="main-img">
              <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('qrcode2')">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </div>
            </div>
          </div>
        </el-form-item>
        <!-- --------------------------- -->


      </el-form>
    </div>

    <div v-show="step == 3">
      <div class="setting_title">微信配置</div>
      <el-divider></el-divider>
      <!-- <div class="tips" style="margin-top: 20px">商户名称：{{ step1Form.nickName }}</div> -->
      <el-card>
        <div slot="header" class="clearfix">
          <span>商户名称：{{ step1Form.nickName }}</span>
        </div>
        <el-form class="my-form2" ref="step3Form" :model="step3Form" :rules="step3FormRules" label-width="130px" size="mini">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="服务商appId" prop="appId">
                <el-input v-model="step3Form.appId" autocomplete="off" placeholder="请输入服务商appId"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="服务商商户号" prop="merchantId">
                <el-input v-model="step3Form.merchantId" autocomplete="off" placeholder="请输入服务商商户号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="服务商商户密钥" prop="merchantKey">
                <el-input v-model="step3Form.merchantKey" autocomplete="off" placeholder="请输入服务商商户密钥"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="小程序appid" prop="appletAppid">
                <el-input v-model="step3Form.appletAppid" autocomplete="off" placeholder="请输入小程序appid"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="小程序密钥" prop="appletSecret">
                <el-input v-model="step3Form.appletSecret" autocomplete="off" placeholder="请输入小程序密钥"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="子商户号Id" prop="childMerchantId">
                <el-input v-model="step3Form.childMerchantId" autocomplete="off" placeholder="请输入子商户号Id"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="微信订阅模版" prop="templateId">
                <el-input v-model="step3Form.templateId" autocomplete="off" placeholder="请输入微信订阅模版"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公众号appid" prop="pubAppId">
                <el-input v-model="step3Form.pubAppId" autocomplete="off" placeholder="请输入公众号appid"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公众号密钥" prop="pubAppSecret">
                <el-input v-model="step3Form.pubAppSecret" autocomplete="off" placeholder="请输入公众号密钥"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="改派通知" prop="pubTemplateId1">
                <el-input v-model="step3Form.pubTemplateId1" autocomplete="off" placeholder="请输入工单派工，改派通知"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发货通知" prop="pubTemplateId2">
                <el-input v-model="step3Form.pubTemplateId2" autocomplete="off" placeholder="请输入商城订单支付成功提醒发货通知"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维权订单提醒" prop="pubTemplateId3">
                <el-input v-model="step3Form.pubTemplateId3" autocomplete="off" placeholder="请输入商城维权订单提醒"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="支付成功通知" prop="pubTemplateId4">
                <el-input v-model="step3Form.pubTemplateId4" autocomplete="off" placeholder="请输入订单支付成功（含全部销售订单和延保）"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="维保费用申请" prop="pubTemplateId5">
                <el-input v-model="step3Form.pubTemplateId5" autocomplete="off" placeholder="请输入维保的费用申请"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="安维费用发放通知" prop="pubTemplateId6">
                <el-input v-model="step3Form.pubTemplateId6" autocomplete="off" placeholder="请输入安维费用发放通知"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="抢单新单通知" prop="pubTemplateId7">
                <el-input v-model="step3Form.pubTemplateId7" autocomplete="off" placeholder="请输入安维费用发放通知"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <div class="page-footer">
      <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 slot="reference">关 闭</el-button>
        </el-popconfirm>
      </div>
    </div>

  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { addAccount } from "@/api/merchant";
import geographicalPosi from '@/components/geographicalPosi/index.vue'
export default {
  components: { geographicalPosi },
  data() {
    var validateAccount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入商户账号'));
      } else if (value.length < 12) {
        callback(new Error('账号长度至少12位'));
      } else if (/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(value) == false) {
        callback(new Error('账号必须包含数字和字母'));
      } else {
        callback();
      }
    };
    var validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码'));
      } else if (value.length < 12) {
        callback(new Error('密码长度至少12位'));
      } else if (/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(value) == false) {
        callback(new Error('密码必须包含数字和字母'));
      } else {
        if (this.step1Form.confirmPassword !== '') {
          this.$refs.step1Form.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass4 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.step1Form.newPassword) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { 'x-token': getToken() },
      step: 1,
      step1Form: {
        account: '', // 账号
        nickName: '', // 用户名
        appName: '', // 小程序名称
        chargePerson: '', // 负责人
        phone: '', // 联系电话
        email: '', // 电子邮箱
        lat: '',
        lng: '',
        address: '', // 地址
        newPassword: '', // 登录密码
        confirmPassword: '', // 确认密码
        qrcode1: '',
        qrcode2: '',
        expireTime: '',
        moduleMaterialPart: false,
        moduleYb: false,
        moduleWb: false,
        storePay: false,
      },
      step1FormRules: {
        account: [
          { required: true, validator: validateAccount, trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请选择GPS地址', trigger: 'blur' }
        ],
        appName: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        chargePerson: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, validator: validatePass3, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validatePass4, trigger: 'blur' }
        ],
      },
      passwordType1: 'password',
      passwordType2: 'password',

      uploadImageType: null,
      img1_url: '',
      img1_hover: false,
      img2_url: '',
      img2_hover: false,
      img3_url: '',
      img3_hover: false,
      qrcode1_url: '',
      qrcode1_hover: false,
      qrcode2_url: '',
      qrcode2_hover: false,

      step3Form: {
        enterpriseId: '',
        listSecret: '',
        listSyncSecret: '',
        appAgentId: '',
        appSecret: '',
        appId: '',
        merchantId: '',
        merchantKey: '',
        appletAppid: '',
        appletSecret: '',
        childMerchantId: '',
        templateId: '',
        pubAppId: '',
        pubAppSecret: '',
        pubTemplateId1:'',
        pubTemplateId2:'',
        pubTemplateId3:'',
        pubTemplateId4:'',
        pubTemplateId5:'',
        pubTemplateId6:'',
        pubTemplateId7:'',
      },
      step3FormRules: {
      },
      formLoading: false,
    }
  },
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened
      }
    },
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },

    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 (this.passwordType1 === 'password') {
          this.passwordType1 = ''
        } else {
          this.passwordType1 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password1.focus()
        })
      }
      if (num == 2) {
        if (this.passwordType2 === 'password') {
          this.passwordType2 = ''
        } else {
          this.passwordType2 = 'password'
        }
        this.$nextTick(() => {
          this.$refs.password2.focus()
        })
      }
    },

    // 下一步
    nextStep() {
      this.$refs.step1Form.validate((valid) => {
        if (valid) {
          this.step = 2;
        }
      })
    },

    uploadImage(type) {
      this.uploadImageType = type;
      document.querySelector('.avatar-uploader input').click();
    },

    // 上传图片
    uploadSuccess(res, file) {
      this[this.uploadImageType + '_url'] = res.data.url;
    },

    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ['jpg', 'jpeg', 'png'];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$errorMsg('只支持上传jpg/jpeg/png文件!');
        return false;
      }
    },

    // 预览图片
    previewImage(type) {
      this.$refs[type].showViewer = true;
    },

    // 切换步骤
    changeStep(type) {
      if (type == 1) {
        this.step++;
      } else {
        this.step--;
      }
    },

    // 点击 提交表单
    clickSubmitForm() {
      // 验证第一步
      this.$refs.step1Form.validate((valid) => {
        if (valid) {
          // 验证第二步
          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 {
                this.step = 3;
              }
            })
          } else {
            this.$errorMsg('请完善商城配置');
            this.step = 2;
          }
        } else {
          this.step = 1;
        }
      })
    },

    // 提交表单
    submitForm() {
      this.$refs.step3Form.validate((valid) => {
        if (valid) {
          this.formLoading = true;
          let params = {
            type: 1,
            userName: this.step1Form.account,
            nickName: this.step1Form.nickName,
            minAppName: this.step1Form.appName,
            linkName: this.step1Form.chargePerson,
            linkPhone: this.step1Form.phone,
            email: this.step1Form.email,
            lat: this.step1Form.lat,
            lng: this.step1Form.lng,
            address: this.step1Form.address,
            password: this.step1Form.confirmPassword,
            expireTime: this.step1Form.expireTime,
            moduleMaterialPart: this.step1Form.moduleMaterialPart,
            moduleYb: this.step1Form.moduleYb,
            moduleWb: this.step1Form.moduleWb,
            storePay: this.step1Form.storePay,
            
            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,
            secret3: this.step3Form.listSyncSecret,
            agentId1: this.step3Form.appAgentId,
            secret1: this.step3Form.appSecret,
            appId: this.step3Form.appId,
            mchId: this.step3Form.merchantId,
            mchKey: this.step3Form.merchantKey,
            appletAppid: this.step3Form.appletAppid,
            appletSecret: this.step3Form.appletSecret,
            subMchId: this.step3Form.childMerchantId,
            template: this.step3Form.templateId,
            pubAppId: this.step3Form.pubAppId,
            pubAppSecret: this.step3Form.pubAppSecret,
            pubTemplateId1: this.step3Form.pubTemplateId1,
            pubTemplateId2: this.step3Form.pubTemplateId2,
            pubTemplateId3: this.step3Form.pubTemplateId3,
            pubTemplateId4: this.step3Form.pubTemplateId4,
            pubTemplateId5: this.step3Form.pubTemplateId5,
            pubTemplateId6: this.step3Form.pubTemplateId6,
            pubTemplateId7: this.step3Form.pubTemplateId7,
          }
          addAccount(params).then(res => {
            this.$successMsg('开通成功');
            setTimeout(() => {
              this.goBack();
            }, 1500)
          }).finally(res => {
            this.formLoading = false;
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.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;
    margin: 20px 0;
    line-height: 18px;

    ::v-deep .el-link {
      vertical-align: unset;
    }
  }
}

.my-form {
  width: 100%;
  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;
  }
}

.images {
  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;
    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>