supply-front/src/views/merchant/create_account.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">
        <el-form
          class="my-form"
          ref="mainForm"
          :model="mainForm"
          :rules="mainFormRules"
          label-width="120px"
          label-position="right"
        >
          <el-form-item label="商户账号" prop="account">
            <el-input
              v-model="mainForm.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-form-item label="账户昵称" prop="nickName">
            <el-input
              v-model="mainForm.nickName"
              autocomplete="off"
              placeholder="请输入账户昵称"
            ></el-input>
          </el-form-item>
          <el-form-item label="负责人" prop="chargePerson">
            <el-input
              v-model="mainForm.chargePerson"
              autocomplete="off"
              placeholder="请输入负责人"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="phone">
            <el-input
              v-model="mainForm.phone"
              autocomplete="off"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="金蝶主体账号" prop="kingdeeId">
            <el-input
              v-model="mainForm.kingdeeId"
              autocomplete="off"
              placeholder="请输入金蝶主体账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="金蝶主体名称" prop="kingdeeName">
            <el-input
              v-model="mainForm.kingdeeName"
              autocomplete="off"
              placeholder="请输入金蝶主体名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input
              v-model="mainForm.email"
              autocomplete="off"
              placeholder="请输入电子邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="address">
            <el-input
              v-model="mainForm.address"
              placeholder="请输入地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="newPassword">
            <el-input
              v-model="mainForm.newPassword"
              ref="password1"
              auto-complete="new-password"
              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-form-item label="确认密码" prop="confirmPassword">
            <el-input
              v-model="mainForm.confirmPassword"
              ref="password2"
              auto-complete="confirm-password"
              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-form>
      </el-card>
    </div>

    <div class="page-footer">
      <div class="footer" :class="classObj">
        <el-button
          type="primary"
          @click="clickSubmitForm"
          :loading="formLoading"
          >{{ formLoading ? "提交中 ..." : "提 交" }}</el-button
        >
        <el-popconfirm
          title="确定关闭吗？"
          @onConfirm="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";

export default {
  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.mainForm.confirmPassword !== "") {
          this.$refs.mainForm.validateField("confirmPassword");
        }
        callback();
      }
    };
    var validatePass4 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.mainForm.newPassword) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      baseURL: process.env.VUE_APP_BASE_API,
      myHeaders: { "x-token": getToken() },
      step: 1,
      mainForm: {
        account: "", // 账号
        nickName: "", // 用户名
        appName: "", // 小程序名称
        chargePerson: "", // 负责人
        phone: "", // 联系电话
        kingdeeId: "",
        kingdeeName: "",
        email: "", // 电子邮箱
        address: "", // 地址
        newPassword: "", // 登录密码
        confirmPassword: "", // 确认密码
      },
      mainFormRules: {
        account: [
          { required: true, validator: validateAccount, trigger: "blur" },
        ],
        nickName: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        appName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        chargePerson: [
          { required: true, message: "请输入负责人", trigger: "blur" },
        ],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        kingdeeId: [
          { required: true, message: "请输入金蝶主体账号", trigger: "blur" },
        ],
        kingdeeName: [
          { required: true, message: "请输入金蝶主体密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, validator: validatePass3, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, validator: validatePass4, trigger: "blur" },
        ],
      },
      passwordType1: "password",
      passwordType2: "password",

      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);
    },

    // 显示隐藏密码
    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();
        });
      }
    },

    // 点击 提交表单
    clickSubmitForm() {
      this.$refs.mainForm.validate((valid) => {
        if (valid) {
          this.submitForm();
        }
      });
    },

    // 提交表单
    submitForm() {
      this.formLoading = true;
      let params = {
        adminCompanyName: this.mainForm.nickName,
        useOrgNumber: this.mainForm.kingdeeId,
        useOrgName: this.mainForm.kingdeeName,
        adminUser: {
          userName: this.mainForm.account,
          adminCompanyName: this.mainForm.nickName,
          linkName: this.mainForm.chargePerson,
          linkPhone: this.mainForm.phone,
          email: this.mainForm.email,
          address: this.mainForm.address,
          password: this.mainForm.confirmPassword,
        },
      };
      addAccount(params)
        .then((res) => {
          this.$successMsg("开通成功");
          setTimeout(() => {
            this.$router.push({
              path: "/merchant/merchant_list",
              query: {},
            });
          }, 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: 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;
}
</style>