|
|
@@ -3,47 +3,96 @@
|
|
|
<div v-show="step == 1">
|
|
|
<div class="setting_title">开通账号</div>
|
|
|
<el-divider></el-divider>
|
|
|
- <div class="tips">说明：开通商户账号是指开通商城后台管理系统的总登录账号。</div>
|
|
|
+ <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
|
|
|
+ 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-input
|
|
|
+ v-model="mainForm.account"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入商户账号"
|
|
|
+ ></el-input>
|
|
|
<el-popover
|
|
|
class="question"
|
|
|
placement="right-start"
|
|
|
title="账号设置"
|
|
|
width="260"
|
|
|
trigger="hover"
|
|
|
- content="账号设置需按数字、字母组合设置至少12位账号">
|
|
|
+ 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-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-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-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-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-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-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-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>
|
|
|
+ <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'" />
|
|
|
+ <svg-icon
|
|
|
+ :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'"
|
|
|
+ />
|
|
|
</span>
|
|
|
<el-popover
|
|
|
class="question"
|
|
|
@@ -51,14 +100,23 @@
|
|
|
title="密码设置"
|
|
|
width="260"
|
|
|
trigger="hover"
|
|
|
- content="密码设置需按数字、字母组合设置至少12位密码">
|
|
|
+ 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>
|
|
|
+ <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'" />
|
|
|
+ <svg-icon
|
|
|
+ :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'"
|
|
|
+ />
|
|
|
</span>
|
|
|
<el-popover
|
|
|
class="question"
|
|
|
@@ -66,7 +124,8 @@
|
|
|
title="密码设置"
|
|
|
width="260"
|
|
|
trigger="hover"
|
|
|
- content="确认密码需要和登录密码保持一致">
|
|
|
+ content="确认密码需要和登录密码保持一致"
|
|
|
+ >
|
|
|
<svg-icon icon-class="question" slot="reference" />
|
|
|
</el-popover>
|
|
|
</el-form-item>
|
|
|
@@ -76,121 +135,121 @@
|
|
|
|
|
|
<div class="page-footer">
|
|
|
<div class="footer" :class="classObj">
|
|
|
- <el-button type="primary" @click="clickSubmitForm" :loading="formLoading">{{ formLoading ? '提交中 ...' : '提 交' }}</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="clickSubmitForm"
|
|
|
+ :loading="formLoading"
|
|
|
+ >{{ formLoading ? "提交中 ..." : "提 交" }}</el-button
|
|
|
+ >
|
|
|
<el-popconfirm
|
|
|
title="确定关闭吗？"
|
|
|
@onConfirm="goBack"
|
|
|
- style="margin-left: 10px;"
|
|
|
+ style="margin-left: 10px"
|
|
|
>
|
|
|
<el-button slot="reference">关 闭</el-button>
|
|
|
</el-popconfirm>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getToken } from '@/utils/auth'
|
|
|
+import { getToken } from "@/utils/auth";
|
|
|
import { addAccount } from "@/api/merchant";
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
var validateAccount = (rule, value, callback) => {
|
|
|
- if (value === '') {
|
|
|
- callback(new Error('请输入商户账号'));
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请输入商户账号"));
|
|
|
} else if (value.length < 12) {
|
|
|
- callback(new Error('账号长度至少12位'));
|
|
|
+ callback(new Error("账号长度至少12位"));
|
|
|
} else if (/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(value) == false) {
|
|
|
- callback(new Error('账号必须包含数字和字母'));
|
|
|
+ callback(new Error("账号必须包含数字和字母"));
|
|
|
} else {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
var validatePass3 = (rule, value, callback) => {
|
|
|
- if (value === '') {
|
|
|
- callback(new Error('请输入登录密码'));
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请输入登录密码"));
|
|
|
} else if (value.length < 12) {
|
|
|
- callback(new Error('密码长度至少12位'));
|
|
|
+ callback(new Error("密码长度至少12位"));
|
|
|
} else if (/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(value) == false) {
|
|
|
- callback(new Error('密码必须包含数字和字母'));
|
|
|
+ callback(new Error("密码必须包含数字和字母"));
|
|
|
} else {
|
|
|
- if (this.mainForm.confirmPassword !== '') {
|
|
|
- this.$refs.mainForm.validateField('confirmPassword');
|
|
|
+ if (this.mainForm.confirmPassword !== "") {
|
|
|
+ this.$refs.mainForm.validateField("confirmPassword");
|
|
|
}
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
var validatePass4 = (rule, value, callback) => {
|
|
|
- if (value === '') {
|
|
|
- callback(new Error('请再次输入密码'));
|
|
|
+ if (value === "") {
|
|
|
+ callback(new Error("请再次输入密码"));
|
|
|
} else if (value !== this.mainForm.newPassword) {
|
|
|
- callback(new Error('两次输入密码不一致'));
|
|
|
+ callback(new Error("两次输入密码不一致"));
|
|
|
} else {
|
|
|
callback();
|
|
|
}
|
|
|
};
|
|
|
return {
|
|
|
baseURL: process.env.VUE_APP_BASE_API,
|
|
|
- myHeaders: {'x-token': getToken()},
|
|
|
+ myHeaders: { "x-token": getToken() },
|
|
|
step: 1,
|
|
|
mainForm: {
|
|
|
- account: '', // 账号
|
|
|
- nickName: '', // 用户名
|
|
|
- appName: '', // 小程序名称
|
|
|
- chargePerson: '', // 负责人
|
|
|
- phone: '', // 联系电话
|
|
|
- kingdeeId: '',
|
|
|
- kingdeeName: '',
|
|
|
- email: '', // 电子邮箱
|
|
|
- address: '', // 地址
|
|
|
- newPassword: '', // 登录密码
|
|
|
- confirmPassword: '', // 确认密码
|
|
|
+ account: "", // 账号
|
|
|
+ nickName: "", // 用户名
|
|
|
+ appName: "", // 小程序名称
|
|
|
+ chargePerson: "", // 负责人
|
|
|
+ phone: "", // 联系电话
|
|
|
+ kingdeeId: "",
|
|
|
+ kingdeeName: "",
|
|
|
+ email: "", // 电子邮箱
|
|
|
+ address: "", // 地址
|
|
|
+ newPassword: "", // 登录密码
|
|
|
+ confirmPassword: "", // 确认密码
|
|
|
},
|
|
|
mainFormRules: {
|
|
|
account: [
|
|
|
- { required: true, validator: validateAccount, trigger: 'blur' }
|
|
|
+ { required: true, validator: validateAccount, trigger: "blur" },
|
|
|
],
|
|
|
nickName: [
|
|
|
- { required: true, message: '请输入用户名', trigger: 'blur' }
|
|
|
- ],
|
|
|
- appName: [
|
|
|
- { required: true, message: '请输入用户名', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入用户名", trigger: "blur" },
|
|
|
],
|
|
|
+ appName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
|
|
|
chargePerson: [
|
|
|
- { required: true, message: '请输入负责人', trigger: 'blur' }
|
|
|
- ],
|
|
|
- phone: [
|
|
|
- { required: true, message: '请输入联系电话', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入负责人", trigger: "blur" },
|
|
|
],
|
|
|
+ phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
|
|
|
kingdeeId: [
|
|
|
- { required: true, message: '请输入金蝶主体账号', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入金蝶主体账号", trigger: "blur" },
|
|
|
],
|
|
|
kingdeeName: [
|
|
|
- { required: true, message: '请输入金蝶主体密码', trigger: 'blur' }
|
|
|
+ { required: true, message: "请输入金蝶主体密码", trigger: "blur" },
|
|
|
],
|
|
|
newPassword: [
|
|
|
- { required: true, validator: validatePass3, trigger: 'blur' }
|
|
|
+ { required: true, validator: validatePass3, trigger: "blur" },
|
|
|
],
|
|
|
confirmPassword: [
|
|
|
- { required: true, validator: validatePass4, trigger: 'blur' }
|
|
|
+ { required: true, validator: validatePass4, trigger: "blur" },
|
|
|
],
|
|
|
},
|
|
|
- passwordType1: 'password',
|
|
|
- passwordType2: 'password',
|
|
|
+ passwordType1: "password",
|
|
|
+ passwordType2: "password",
|
|
|
|
|
|
formLoading: false,
|
|
|
- }
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
sidebar() {
|
|
|
- return this.$store.state.app.sidebar
|
|
|
+ return this.$store.state.app.sidebar;
|
|
|
},
|
|
|
classObj() {
|
|
|
return {
|
|
|
hideSidebar: !this.sidebar.opened,
|
|
|
- openSidebar: this.sidebar.opened
|
|
|
- }
|
|
|
+ openSidebar: this.sidebar.opened,
|
|
|
+ };
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -200,25 +259,25 @@ export default {
|
|
|
|
|
|
// 显示隐藏密码
|
|
|
showPwd(num) {
|
|
|
- if(num == 1) {
|
|
|
- if (this.passwordType1 === 'password') {
|
|
|
- this.passwordType1 = ''
|
|
|
+ if (num == 1) {
|
|
|
+ if (this.passwordType1 === "password") {
|
|
|
+ this.passwordType1 = "";
|
|
|
} else {
|
|
|
- this.passwordType1 = 'password'
|
|
|
+ this.passwordType1 = "password";
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.password1.focus()
|
|
|
- })
|
|
|
+ this.$refs.password1.focus();
|
|
|
+ });
|
|
|
}
|
|
|
- if(num == 2) {
|
|
|
- if (this.passwordType2 === 'password') {
|
|
|
- this.passwordType2 = ''
|
|
|
+ if (num == 2) {
|
|
|
+ if (this.passwordType2 === "password") {
|
|
|
+ this.passwordType2 = "";
|
|
|
} else {
|
|
|
- this.passwordType2 = 'password'
|
|
|
+ this.passwordType2 = "password";
|
|
|
}
|
|
|
this.$nextTick(() => {
|
|
|
- this.$refs.password2.focus()
|
|
|
- })
|
|
|
+ this.$refs.password2.focus();
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
|
|
|
@@ -228,7 +287,7 @@ export default {
|
|
|
if (valid) {
|
|
|
this.submitForm();
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
// 提交表单
|
|
|
@@ -247,61 +306,63 @@ export default {
|
|
|
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;
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ };
|
|
|
+ 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 {
|
|
|
+.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-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>
|
chen