<template>
|
<view class="u-page">
|
|
<view class="u-demo-block">
|
<view class="u-demo-block__content">
|
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
|
<u--form labelPosition="left" :rules="rules" :model="userInfo" ref="subAccountForm"
|
:labelWidth="labelWidth">
|
<u-form-item required label="子账号名称" prop="name" borderBottom>
|
<u--input v-model="userInfo.name" border="none" placeholder="请输入子账号名称" clearable></u--input>
|
</u-form-item>
|
|
<u-form-item required label="联系人" prop="contact" borderBottom>
|
<u--input v-model="userInfo.contact" border="none" placeholder="请输入联系人" clearable></u--input>
|
</u-form-item>
|
|
<u-form-item required label="手机" prop="phone" borderBottom>
|
<u--input type="number" v-model="userInfo.phone" border="none" placeholder="请输入手机号码" clearable></u--input>
|
|
</u-form-item>
|
<u-form-item required label="验证码" prop="smsCode" borderBottom>
|
<u--input type="number" v-model="userInfo.smsCode" border="none" placeholder="请填写验证码" clearable></u--input>
|
<u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini"
|
:disabled="disabled1"></u-button>
|
</u-form-item>
|
|
<u-form-item required label="密码" prop="password" borderBottom>
|
<u--input type="password" v-model="userInfo.password" border="none" placeholder="请输入密码" clearable></u--input>
|
</u-form-item>
|
<u-form-item required label="账号状态" prop="isEnabled" borderBottom>
|
<u-switch v-model="userInfo.isEnabled" size="50" @change="handleSwitchchange"></u-switch>
|
</u-form-item>
|
</u--form>
|
<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
|
<u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
labelWidth: '180',
|
tips: '获取验证码',
|
disabled1: false,// 校验是否禁用
|
timer: null, // 倒计时计时器
|
count:60,
|
// #ifdef PUB_SUPPLIER
|
apitype: 'supplier',
|
// #endif
|
// #ifdef PUB_PARTNER
|
apitype: 'partner',
|
// #endif
|
// #ifdef PUB_CUSTOMER
|
apitype: 'customer',
|
// #endif
|
userInfo: {
|
id: '',
|
name: '',
|
contact: '',
|
phone: '',
|
smsCode: '',
|
password: '',
|
isEnabled: true,
|
},
|
rules: {
|
'name': [{
|
type: 'string',
|
required: true,
|
message: '请输入子账号名称',
|
trigger: ['blur', 'change']
|
}
|
// , {
|
// validator: (rule, value, callback) => {
|
// return uni.$u.test.chinese(value);
|
// },
|
// message: "姓名必须为中文",
|
// trigger: ["change", "blur"],
|
// }
|
],
|
'contact': {
|
type: 'string',
|
required: true,
|
message: '请输入联系人',
|
trigger: ['blur', 'change']
|
},
|
|
|
'phone': [{
|
type: 'string',
|
required: true,
|
message: '请输入电话号码',
|
trigger: ['blur', 'change']
|
}, {
|
pattern: /^1[3-9]\d{9}$/,
|
message: '请输入有效的手机号码',
|
trigger: ['blur', 'change'],
|
},
|
],
|
|
'smsCode': {
|
type: 'string',
|
required: true,
|
message: '请输入验证码',
|
trigger: ['blur', 'change']
|
},
|
|
'password': [{
|
type: 'string',
|
required: true,
|
message: '请输入密码',
|
trigger: ['blur', 'change']
|
},
|
{
|
validator: (rule, value, callback) => {
|
if (!value) {
|
callback(new Error('请输入密码'));
|
} else if (value.length < 8 || value.length > 20) {
|
callback(new Error('密码长度需为 8 到 20 位'));
|
} else {
|
callback(); // 校验通过
|
}
|
},
|
trigger: ['blur', 'change']
|
},
|
]
|
|
},
|
|
}
|
},
|
onReady() {
|
// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
|
this.$refs.subAccountForm.setRules(this.rules)
|
},
|
onUnload() {
|
// 组件销毁时清除计时器
|
if (this.timer) {
|
clearInterval(this.timer);
|
}
|
},
|
onLoad(options) {
|
this.userInfo.id = options.id || ''
|
if(this.userInfo.id){
|
this.getSubAccount()
|
// 修改topbar标题
|
uni.setNavigationBarTitle({
|
title: '子账号修改'
|
});
|
}
|
},
|
onShow() {
|
this.getList();
|
},
|
methods: {
|
|
async getSubAccount(){
|
const {
|
code,data
|
} = await this.$http.request('get', '/api/supplierSub/getById', {
|
params: {
|
id:this.userInfo.id
|
}
|
})
|
if (code == 0) {
|
this.userInfo = {
|
...data
|
}
|
this.userInfo.password=''
|
} else {
|
|
}
|
},
|
validatePhone(phone) {
|
const phoneRegex = /^[1][3-9]\d{9}$/; // 简单的中国大陆手机号正则
|
return phoneRegex.test(phone);
|
},
|
async getCode() {
|
|
// 校验手机号格式
|
if (!this.validatePhone(this.userInfo.phone)) {
|
uni.showToast({
|
title: '请输入有效的手机号码',
|
icon: 'none'
|
});
|
return;
|
}
|
if (this.disabled1) return; // 防止重复点击
|
|
const {
|
code
|
} = await this.$http.request('post', '/api/sms/send/code', {
|
data: {
|
tel: this.userInfo.phone,
|
userType: this.apitype.toLowerCase()
|
}
|
})
|
if (code == 0) {
|
uni.$u.toast('验证码已发送');
|
this.startCountdown(); // 开始倒计时
|
} else {
|
|
}
|
|
|
},
|
startCountdown() {
|
this.disabled1 = true; // 禁用按钮
|
this.tips = `${this.count}秒后重试`; // 设置按钮文本
|
|
this.timer = setInterval(() => {
|
if (this.count > 1) {
|
this.count--;
|
this.tips = `${this.count}秒后重试`;
|
} else {
|
this.resetCountdown(); // 倒计时结束，重置状态
|
}
|
}, 1000);
|
},
|
|
|
resetCountdown() {
|
clearInterval(this.timer); // 清除计时器
|
this.timer = null;
|
this.count = 60; // 重置秒数
|
this.tips = '获取验证码'; // 重置按钮文本
|
this.disabled1 = false; // 启用按钮
|
},
|
|
submit() {
|
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
this.$refs.subAccountForm.validate().then(async res => {
|
uni.$u.toast('校验通过')
|
const {
|
code
|
} = await this.$http.request('post', '/api/supplierSub/addOrUpdate', {
|
data: {
|
... this.userInfo
|
}
|
})
|
if (code == 0) {
|
uni.$u.toast('新增子账号成功');
|
uni.navigateTo({
|
url: '/sub_pages/supplier/sub-account/sub-account-list'
|
})
|
|
|
} else {
|
uni.$u.toast('新增子账号失败')
|
}
|
}).catch(errors => {
|
uni.$u.toast('请填写完整信息')
|
})
|
},
|
reset() {
|
this.$refs.subAccountForm.resetFields()
|
this.$refs.subAccountForm.clearValidate()
|
this.userInfo={
|
id: '',
|
name: '',
|
contact: '',
|
phone: '',
|
smsCode: '',
|
password: '',
|
isEnabled: true,
|
}
|
|
},
|
|
async handleSwitchchange(e){
|
if(this.userInfo.id){
|
// 账号的启用，禁用
|
const {
|
code,data
|
} = await this.$http.request('get', '/api/supplierSub/page/isEnable', {
|
params: {
|
id:this.userInfo.id
|
}
|
})
|
if (code == 0) {
|
uni.$u.toast('状态修改成功！');
|
} else {
|
this.userInfo.isEnabled=!e
|
uni.$u.toast('状态修改失败！');
|
}
|
// 还是需要将状态信息重新获取下
|
// const {code2,data2} =await this.getSubAccountById()
|
// if(code2==0){
|
// this.userInfo.isEnabled=data2.isEnabled
|
// }
|
}
|
},
|
|
async getSubAccountById(){
|
return await this.$http.request('get', '/api/supplierSub/getById', {
|
params: {
|
id:this.userInfo.id
|
}
|
})
|
|
},
|
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.u-page {
|
background-color: #f7f8fa;
|
fonst-size: 14px;
|
padding: 15px 15px 40px 15px;
|
|
.u-demo-block {
|
flex: 1;
|
margin-bottom: 23px
|
}
|
}
|
|
.u-page2 {
|
background-color: #f7f8fa;
|
padding: 15px 15px 40px 15px;
|
|
.u-demo-block {
|
flex: 1;
|
margin-bottom: 23px
|
}
|
|
.u-demo-block__title {
|
font-size: 14px;
|
color: #8f9ca2;
|
margin-bottom: 8px;
|
display: flex;
|
flex-direction: row
|
}
|
|
.u-demo-block__content {
|
display: flex;
|
flex-direction: column
|
}
|
|
.image-icon {
|
width: 30rpx;
|
height: 30rpx;
|
}
|
|
.u-button--plain.data-v-3bf2dba7 {
|
background-color: #00BCD4 !important;
|
}
|
|
.u-button--plain.u-button--primary.data-v-3bf2dba7 {
|
color: #FFFFFF;
|
}
|
|
.u-button--primary.data-v-3bf2dba7 {
|
color: #fff;
|
border-color: #00BCD4 !important;
|
border-width: 1px;
|
border-style: solid;
|
border-radius: 10rpx;
|
width: 200rpx;
|
}
|
|
.u-demo-block {
|
padding: 10rpx;
|
background-color: #FFFFFF;
|
border-radius: 50rpx;
|
background-color: #00AF68;
|
margin: 20rpx;
|
|
.tixian {
|
margin-top: 30rpx;
|
margin-bottom: 30rpx;
|
}
|
}
|
|
.u-demo-block-2 {
|
margin: 30rpx;
|
padding: 10rpx;
|
background-color: #FFFFFF;
|
border-radius: 10rpx;
|
}
|
|
.title {
|
text-align: center;
|
font-size: 30rpx;
|
color: #909399;
|
margin: 10rpx;
|
}
|
|
.grid-text-white {
|
color: white;
|
}
|
|
.grid-text {
|
font-size: 14px;
|
color: #909399;
|
padding: 10rpx 0 20rpx 0rpx;
|
/* #ifndef APP-PLUS */
|
box-sizing: border-box;
|
/* #endif */
|
}
|
|
.statis_val {
|
font-size: 16px;
|
color: black;
|
// font-weight: bold;
|
}
|
|
.margin-10 {
|
margin: 10rpx;
|
}
|
}
|
</style>
|
