|
|
@@ -0,0 +1,199 @@
|
|
|
+<template>
|
|
|
+ <el-dialog :title="titleMap[mode]" v-model="visible" :width="660" destroy-on-close @closed="$emit('closed')" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
+ <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="账号名称" prop="truename">
|
|
|
+ <el-input v-model="formData.truename" clearable placeholder="请输入"></el-input>
|
|
|
+ <div class="el-form-item-msg"></div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="mode=='add'">
|
|
|
+ <el-form-item label="登录账号" prop="username">
|
|
|
+ <el-input v-model="formData.username" clearable placeholder="请输入登录账号"></el-input>
|
|
|
+ <div class="el-form-item-msg">不设置登录账号可以使用手机号码登录</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="mode=='edit'">
|
|
|
+ <el-form-item label="登录账号">
|
|
|
+ <el-input v-model="dataForm.username" :disabled="true" clearable placeholder="请输入登录账号"></el-input>
|
|
|
+ <div class="el-form-item-msg">不设置登录账号可以使用手机号码登录</div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="mode=='add'">
|
|
|
+ <el-form-item prop="mobile" :label="$t('login.mobilePlaceholder')">
|
|
|
+ <el-input v-model="formData.mobile" clearable :placeholder="$t('login.mobilePlaceholder')">
|
|
|
+ <template #prepend>+86</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="mode=='add'">
|
|
|
+ <el-form-item prop="yzm" :label="$t('login.smsPlaceholder')">
|
|
|
+ <div class="login-msg-yzm">
|
|
|
+ <el-input v-model="formData.yzm" clearable :placeholder="$t('login.smsPlaceholder')"></el-input>
|
|
|
+ <el-button @click="getYzm" :disabled="disabled">{{this.$t('login.smsGet')}}<span v-if="disabled"> ({{time}})</span></el-button>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12" v-if="mode=='add'">
|
|
|
+ <el-form-item prop="captcha" :label="$t('login.code')">
|
|
|
+ <div class="login-msg-yzm">
|
|
|
+ <el-input v-model="formData.captcha" clearable :placeholder="$t('login.codeErr')"></el-input>
|
|
|
+ <el-tooltip placement="top-start" :content="$t('login.codeTips')">
|
|
|
+ <div class="captcha" @click="getCaptcha"><img :src="captcha.base64" /></div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="登录密码" prop="password">
|
|
|
+ <el-input type="password" v-model="formData.password" clearable show-password placeholder="请输入登录密码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="确认密码" prop="password2">
|
|
|
+ <el-input type="password" v-model="formData.password2" clearable show-password placeholder="请再次输入密码"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="visible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" :loading="isSaveing" @click="submit()">提交</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ mode:"add",
|
|
|
+ titleMap:{
|
|
|
+ add:"新增账号",
|
|
|
+ edit:"编辑账号"
|
|
|
+ },
|
|
|
+ rules:{
|
|
|
+ truename: [
|
|
|
+ {required: true, message: '请输入'}
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ {required: true, message: '请输入登录密码'}
|
|
|
+ ],
|
|
|
+ password2: [
|
|
|
+ {required: true, message: '请再次输入密码'},
|
|
|
+ {validator: (rule, value, callback) => {
|
|
|
+ if (value !== this.formData.password) {
|
|
|
+ callback(new Error('两次输入密码不一致!'));
|
|
|
+ }else{
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ ],
|
|
|
+ mobile: [
|
|
|
+ { required: true, message: this.$t('login.mobileError'), trigger: 'blur' },
|
|
|
+ {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ const phoneReg = /^1[3-9]\d{9}$/ // 手机号正则
|
|
|
+ const landlineReg = /^(?:(?:\d{3}-)?\d{8}|^(?:\d{4}-)?\d{7,8})(?:-\d+)?$/
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error('请输入联系方式'))
|
|
|
+ } else if (!phoneReg.test(value) && !landlineReg.test(value)) {
|
|
|
+ callback(new Error('请输入有效的手机号码号码'))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ trigger: 'blur'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ yzm: [
|
|
|
+ {required: true, message: this.$t('login.smsError')}
|
|
|
+ ],
|
|
|
+ captcha: [
|
|
|
+ {required: true, message: this.$t('login.codeErr')}
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ visible: false,
|
|
|
+ isSaveing: false,
|
|
|
+ formData:{},
|
|
|
+ captcha:{},
|
|
|
+ dataForm:{}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ open(mode = 'add'){
|
|
|
+ this.mode = mode;
|
|
|
+ this.visible = true;
|
|
|
+ if (mode == 'add') {
|
|
|
+ this.getCaptcha();
|
|
|
+ }
|
|
|
+ return this
|
|
|
+ },
|
|
|
+ async getCaptcha(){
|
|
|
+ var resp = await this.$API.common.captcha.get();
|
|
|
+ if (resp.code == 0) {
|
|
|
+ return this.$message.error(resp.msg);
|
|
|
+ }
|
|
|
+ this.captcha = resp.data;
|
|
|
+ },
|
|
|
+ async getYzm(){
|
|
|
+ var field = ["mobile","captcha"];
|
|
|
+ this.$refs.dialogForm.validateField(field, async (valid) => {
|
|
|
+ if(!valid){
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ var resp = await this.$API.common.sms.post({"mobile":this.formData.mobile,"code":this.formData.captcha,"key":this.captcha.key,"scene":"register"});
|
|
|
+ if (resp.code == 0) {
|
|
|
+ this.getCaptcha();
|
|
|
+ return this.$message.error(resp.msg);
|
|
|
+ }
|
|
|
+ this.$message.success(resp.msg)
|
|
|
+ this.disabled = true
|
|
|
+ this.time = 60
|
|
|
+ var t = setInterval(() => {
|
|
|
+ this.time -= 1
|
|
|
+ if(this.time < 1){
|
|
|
+ clearInterval(t)
|
|
|
+ this.disabled = false
|
|
|
+ this.time = 0
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //表单注入数据
|
|
|
+ setData(data){
|
|
|
+ console.log(data)
|
|
|
+ if (this.mode == 'edit') {
|
|
|
+ this.formData.truename = data.truename;
|
|
|
+ this.formData.id = data.id;
|
|
|
+ }
|
|
|
+ this.dataForm = data;
|
|
|
+ },
|
|
|
+ async submit(){
|
|
|
+ var validate = await this.$refs.dialogForm.validate().catch(()=>{});
|
|
|
+ if(!validate){ return false }
|
|
|
+ let submitData = JSON.parse(JSON.stringify(this.formData));
|
|
|
+ submitData.password = this.$TOOL.crypto.MD5(this.formData.password)
|
|
|
+ submitData.password2 = this.$TOOL.crypto.MD5(this.formData.password2)
|
|
|
+ if (this.mode == 'add') {
|
|
|
+ submitData.scene = "register";
|
|
|
+ submitData.type = 3;
|
|
|
+ submitData.store_id = this.dataForm.store_id;
|
|
|
+ submitData.agent_id = this.dataForm.agent_id;
|
|
|
+ submitData.vip_at = this.$TOOL.dateFormat(this.dataForm.vip_at, "yyyy-MM-dd");
|
|
|
+ }
|
|
|
+ this.isSaveing = true;
|
|
|
+ var resp = await this.$API.user.save.post(submitData);
|
|
|
+ this.isSaveing = false;
|
|
|
+ if (resp.code == 0) {
|
|
|
+ return this.$message.error(resp.msg);
|
|
|
+ }
|
|
|
+ this.$message.success(resp.msg);
|
|
|
+ this.visible = false;
|
|
|
+ this.$emit("success");
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|