forked from ccsens_fe/tall-mui-3
14 changed files with 367 additions and 46 deletions
|
After Width: | Height: | Size: 195 B |
@ -0,0 +1,149 @@ |
|||
<template> |
|||
<view class="wrap flex justify-center items-center"> |
|||
<view class="wrap-con"> |
|||
<h1 class="text-3xl text-center mb-10">修改密码</h1> |
|||
<u-form :model="form" ref="uForm" :errorType="errorType"> |
|||
<!-- 手机号 --> |
|||
<u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" prop="account" label-width="160" class="bg-white"> |
|||
<u-input type="text" placeholder="账户" :border="border" v-model="form.account" /> |
|||
</u-form-item> |
|||
<view class="mt-1 text-sm text-red-500" v-if="showAccountTips">{{ accountTips }}</view> |
|||
|
|||
<u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" prop="passwordOld" label-width="160" class="bg-white mt-6"> |
|||
<u-input type="password" placeholder="旧密码" :border="border" v-model="form.passwordOld" /> |
|||
</u-form-item> |
|||
<view class="mt-1 text-sm text-red-500" v-if="showPasswordOldTips">{{ passwordOldTips }}</view> |
|||
|
|||
<u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" prop="passwordNew" label-width="160" class="bg-white mt-6"> |
|||
<u-input type="password" placeholder="新密码" :border="border" v-model="form.passwordNew" /> |
|||
</u-form-item> |
|||
<view class="mt-1 text-sm text-red-500" v-if="showPasswordNewTips">{{ passwordNewTips }}</view> |
|||
</u-form> |
|||
|
|||
<view class="flex justify-end my-8 text-sm"> |
|||
<text class="text-blue cursor-pointer" @click="$emit('changeShow')">返回登录</text> |
|||
</view> |
|||
|
|||
<u-button @click="submit" type="primary" class="btn">确认修改</u-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapMutations } from 'vuex'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
border: true, |
|||
form: { |
|||
account: '', // 账号 |
|||
passwordOld: '', // 旧密码 |
|||
passwordNew: '', // 新密码 |
|||
}, |
|||
accountTips: '', |
|||
passwordOldTips: '', |
|||
passwordNewTips: '', |
|||
showAccountTips: false, |
|||
showPasswordOldTips: false, |
|||
showPasswordNewTips: false, |
|||
checked: false, |
|||
errorType: ['message'], |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
...mapMutations('user', ['setToken', 'setUser', 'setFirstInter']), |
|||
|
|||
async submit() { |
|||
// 验证 |
|||
if (this.verifyAccount() && this.verifyPasswordOld() && this.verifyPasswordNew()) { |
|||
try { |
|||
await this.$u.api.changePasswordByAccount(this.form); |
|||
this.$t.ui.showToast('密码修改成功, 即将返回登录'); |
|||
setTimeout(() => this.$emit('changeShow'), 2000); |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
this.$t.ui.showToast(error.msg || '密码修改失败'); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 账号验证 |
|||
verifyAccount() { |
|||
if (!this.form.account) { |
|||
this.showAccountTips = true; |
|||
this.accountTips = '请输入账号'; |
|||
return false; |
|||
} else { |
|||
this.showAccountTips = false; |
|||
return true; |
|||
} |
|||
}, |
|||
|
|||
// 旧密码验证 |
|||
verifyPasswordOld() { |
|||
if (!this.form.passwordOld) { |
|||
this.showPasswordOldTips = true; |
|||
this.passwordOldTips = '请输入旧密码'; |
|||
return false; |
|||
} |
|||
|
|||
const reg = /^[a-zA-Z0-9._-]{6,20}$/; |
|||
if (!reg.test(this.form.passwordOld)) { |
|||
this.passwordOldTips = '请输入6-20位字母、数字、汉字或字符"_ - ."'; |
|||
return false; |
|||
} |
|||
this.showPasswordOldTips = false; |
|||
return true; |
|||
}, |
|||
|
|||
// 新密码验证 |
|||
verifyPasswordNew() { |
|||
if (!this.form.passwordNew) { |
|||
this.showPasswordNewTips = true; |
|||
this.passwordNewTips = '请输入新密码'; |
|||
return false; |
|||
} |
|||
|
|||
const reg = /^[a-zA-Z0-9._-]{6,20}$/; |
|||
if (!reg.test(this.form.passwordNew)) { |
|||
this.passwordNewTips = '请输入6-20位字母、数字、汉字或字符"_ - ."'; |
|||
return false; |
|||
} |
|||
this.showPasswordNewTips = false; |
|||
return true; |
|||
}, |
|||
|
|||
/** |
|||
* 没有手机号 跳转绑定手机号的界面 |
|||
* @param {string} phone |
|||
*/ |
|||
async noPhone(phone) { |
|||
if (!phone) { |
|||
this.$u.route('/pages/phone-bind/phone-bind'); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.wrap-con { |
|||
width: 400px; |
|||
} |
|||
|
|||
.text-blue { |
|||
color: #2979ff; |
|||
} |
|||
|
|||
.btn { |
|||
line-height: 35px; |
|||
font-size: 1rem; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,143 @@ |
|||
<template> |
|||
<view class="wrap flex justify-center items-center"> |
|||
<view class="wrap-con"> |
|||
<h1 class="text-3xl text-center mb-10">{{ project && project.id ? project.name : '时物链条' }}</h1> |
|||
<u-form :model="form" ref="uForm" :errorType="errorType"> |
|||
<!-- 手机号 --> |
|||
<u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" prop="account" label-width="160" class="bg-white"> |
|||
<u-input type="text" placeholder="账户" :border="border" v-model="form.account" /> |
|||
</u-form-item> |
|||
<view class="mt-1 text-sm text-red-500" v-if="showAccountTips">{{ accountTips }}</view> |
|||
|
|||
<u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" prop="password" label-width="160" class="bg-white mt-6"> |
|||
<u-input type="password" placeholder="密码" :border="border" v-model="form.password" /> |
|||
</u-form-item> |
|||
<view class="mt-1 text-sm text-red-500" v-if="showPasswordTips">{{ passwordTips }}</view> |
|||
</u-form> |
|||
|
|||
<view class="flex justify-between my-8 text-sm"> |
|||
<u-checkbox-group> |
|||
<u-checkbox v-model="checked"><text class="pl-2">自动登录</text></u-checkbox> |
|||
</u-checkbox-group> |
|||
<text class="text-blue cursor-pointer" @click="$emit('changeShow')">修改密码</text> |
|||
</view> |
|||
|
|||
<!-- TODO: 报错 ？？？ --> |
|||
<u-button @click="submit" type="primary" class="btn">登 录</u-button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapState, mapMutations } from 'vuex'; |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
border: true, |
|||
form: { |
|||
account: '', // 账号 |
|||
password: '', // 密码 |
|||
}, |
|||
accountTips: '', |
|||
passwordTips: '', |
|||
showAccountTips: false, |
|||
showPasswordTips: false, |
|||
checked: false, |
|||
errorType: ['message'], |
|||
}; |
|||
}, |
|||
|
|||
computed: mapState('project', ['project']), |
|||
|
|||
methods: { |
|||
...mapMutations('user', ['setToken', 'setUser', 'setFirstInter']), |
|||
|
|||
async submit() { |
|||
// 验证 |
|||
if (this.verifyAccount() && this.verifyPassword()) { |
|||
try { |
|||
const { account, password } = this.form; |
|||
const params = { |
|||
client: this.$t.user.clients['h5'], |
|||
type: this.$t.user.types['username'], |
|||
data: { identifier: account, credential: password }, |
|||
}; |
|||
const data = await this.$u.api.signin(params); |
|||
if (data && data.token) { |
|||
this.setUser(data); |
|||
this.setToken(data.token); |
|||
this.noPhone(data.phone); |
|||
this.setFirstInter(true); |
|||
this.$t.ui.showToast('登录成功'); |
|||
} else { |
|||
this.$t.ui.showToast('返回数据异常'); |
|||
} |
|||
} catch (error) { |
|||
console.error('error: ', error); |
|||
this.$t.ui.showToast(error || '登录失败'); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
// 账号验证 |
|||
verifyAccount() { |
|||
if (!this.form.account) { |
|||
this.showAccountTips = true; |
|||
this.accountTips = '请输入账号'; |
|||
return false; |
|||
} else { |
|||
this.showAccountTips = false; |
|||
return true; |
|||
} |
|||
}, |
|||
|
|||
// 密码验证 |
|||
verifyPassword() { |
|||
if (!this.form.password) { |
|||
this.showPasswordTips = true; |
|||
this.passwordTips = '请输入密码'; |
|||
return false; |
|||
} |
|||
|
|||
const reg = /^[a-zA-Z0-9._-]{6,20}$/; |
|||
if (!reg.test(this.form.password)) { |
|||
this.passwordTips = '请输入6-20位字母、数字、汉字或字符"_ - ."'; |
|||
return false; |
|||
} |
|||
this.showPasswordTips = false; |
|||
return true; |
|||
}, |
|||
|
|||
/** |
|||
* 没有手机号 跳转绑定手机号的界面 |
|||
* @param {string} phone |
|||
*/ |
|||
async noPhone(phone) { |
|||
if (!phone) { |
|||
this.$u.route('/pages/phone-bind/phone-bind'); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.wrap { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
.wrap-con { |
|||
width: 400px; |
|||
} |
|||
|
|||
.text-blue { |
|||
color: #2979ff; |
|||
} |
|||
|
|||
.btn { |
|||
line-height: 35px; |
|||
font-size: 1rem; |
|||
} |
|||
</style> |
|||
@ -1,27 +0,0 @@ |
|||
<template> |
|||
<view> |
|||
<u-button size="mini" @click="openPage">登录</u-button> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
|
|||
watch: {}, |
|||
|
|||
methods: { |
|||
// 打开项目详情 |
|||
openPage() { |
|||
this.$u.route('pages/index/index', { |
|||
u: '1218763410024566784', |
|||
p: '1435920484033372160', |
|||
}); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped></style> |
|||
@ -1,5 +1,6 @@ |
|||
const state = { |
|||
token: '', |
|||
user: null, |
|||
firstInter: false, |
|||
}; |
|||
export default state; |
|||
|
|||
Loading…
Reference in new issue