From 83b6d61b9e8d0360bb3aa363610a38e680c7b1c9 Mon Sep 17 00:00:00 2001
From: yangan <yangan0921@163.com>
Date: 星期五, 23 八月 2024 11:10:31 +0800
Subject: [PATCH] feat:一键登录loading问题
---
pages/login/resetPassword/resetPassword.vue | 334 ++++++++++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 288 insertions(+), 46 deletions(-)
diff --git a/pages/login/resetPassword/resetPassword.vue b/pages/login/resetPassword/resetPassword.vue
index a9f0586..4ab6b80 100644
--- a/pages/login/resetPassword/resetPassword.vue
+++ b/pages/login/resetPassword/resetPassword.vue
@@ -5,23 +5,68 @@
:rules="rules"
ref="uForm"
label-width="80px">
+ <template v-if="isShowPassword">
+ <u-form-item
+ prop="originalPassword"
+ label="鍘熷瘑鐮�"
+ required
+ borderBottom>
+ <u-input v-if='inputType==="password"'
+ v-model="modelForm.originalPassword"
+ border="surround"
+ placeholder="瀵嗙爜搴旂敱8-16浣嶆暟瀛椼�佸瓧姣嶃�佺鍙风粍鎴愩��"
+ :type='inputType' />
+ <u-input v-else
+ v-model="modelForm.originalPassword"
+ border="surround"
+ placeholder="瀵嗙爜搴旂敱8-16浣嶆暟瀛椼�佸瓧姣嶃�佺鍙风粍鎴愩��"
+ :type='inputType' />
+ </u-form-item>
+ </template>
<u-form-item prop="password"
- label="瀵嗙爜"
+ label="鏂板瘑鐮�"
required
borderBottom>
- <u--input v-model="modelForm.password"
+ <u-input v-if='inputType==="password"'
+ v-model="modelForm.password"
border="surround"
- placeholder="璇疯緭鍏ュ瘑鐮�"
- type='password'></u--input>
+ placeholder="瀵嗙爜搴旂敱8-16浣嶆暟瀛椼�佸瓧姣嶃�佺鍙风粍鎴愩��"
+ :type='inputType' />
+ <u-input v-else
+ v-model="modelForm.password"
+ border="surround"
+ placeholder="瀵嗙爜搴旂敱8-16浣嶆暟瀛椼�佸瓧姣嶃�佺鍙风粍鎴愩��"
+ :type='inputType' />
</u-form-item>
+ <view class="intensity">
+ <view class="psdText">瀵嗙爜寮哄害</view>
+ <view
+ class="line"
+ :class="[level.includes('low') ? 'low' : '']"></view>
+ <view
+ class="line"
+ :class="[level.includes('middle') ? 'middle' : '']"></view>
+ <view
+ class="line"
+ :class="[level.includes('high') ? 'high' : '']"></view>
+ <div class="warningtext">
+ 瀵嗙爜搴旂敱8-16浣嶆暟瀛椼�佸瓧姣嶃�佺鍙风粍鎴愩�傝涓嶈浣跨敤瀹规槗琚寽鍒扮殑瀵嗙爜
+ </div>
+ </view>
<u-form-item prop="secondPassword"
- label="浜屾纭"
+ label="纭瀵嗙爜"
required
borderBottom>
- <u--input v-model="modelForm.secondPassword"
+ <u-input v-if='inputType==="password"'
+ v-model="modelForm.secondPassword"
border="surround"
placeholder="璇峰啀娆¤緭鍏ュ瘑鐮�"
- type='password'></u--input>
+ type='password' />
+ <u-input v-else
+ v-model="modelForm.secondPassword"
+ border="surround"
+ placeholder="璇峰啀娆¤緭鍏ュ瘑鐮�"
+ type='text' />
</u-form-item>
<u-form-item>
<view class="process-button">
@@ -31,6 +76,18 @@
@click.stop="process"></u-button>
</view>
</u-form-item>
+ <u-form-item prop="checkboxValue">
+ <u-checkbox-group v-model="checkboxValue"
+ @change="checkChange">
+ <u-checkbox label="鏄剧ず瀵嗙爜"
+ name="鏄剧ず"
+ iconSize="32"
+ label-size="32"
+ size="40"
+ shape="circle">
+ </u-checkbox>
+ </u-checkbox-group>
+ </u-form-item>
</u-form>
</view>
</template>
@@ -38,58 +95,203 @@
<script>
export default {
data() {
+ const validatePass = (rule, value, callback) => {
+ if (this.modelForm.password !== "") {
+ if (value !== this.modelForm.password) {
+ callback(new Error("涓ゆ杈撳叆瀵嗙爜涓嶄竴鑷�!"));
+ } else {
+ callback();
+ }
+ } else {
+ callback();
+ }
+ };
+ const checkPassword = (rule, value, callback) => {
+ // let roles = this.$store.getters.roles;//褰撳墠鐢ㄦ埛瑙掕壊id
+ // let passL = 8;
+ // if (roles.concat(1)){
+ // passL = 10
+ // }
+ let passL = 8;
+ this.level = []
+ if(!value) {
+ return callback('瀵嗙爜涓嶈兘涓虹┖')
+ }
+ if(value.length < passL) {
+ return callback(`瀵嗙爜涓嶈兘灏戜簬${passL}浣峘)
+ }
+ if(value.length > 16) {
+ return callback('瀵嗙爜涓嶈兘澶т簬16浣�')
+ }
+ //鏍￠獙鏄暟瀛�
+ const regex1 = /^\d+$/
+ // 鏍￠獙瀛楁瘝
+ const regex2 = /^[A-Za-z]+$/
+ // 鏍￠獙绗﹀彿
+ const regex3 =
+ /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]路~锛丂#锟�%鈥︹��&*锛堬級鈥斺�擻-+={}|銆娿�嬶紵锛氣�溾�濄�愩�戙�侊紱鈥�'锛屻�傘�乚+$/
+ if(regex1.test(value)) {
+ this.level.push('low')
+ return callback('瀵嗙爜寮哄害杩囦綆')
+ }else if(regex2.test(value)) {
+ this.level.push('low')
+ return callback('瀵嗙爜寮哄害杩囦綆')
+ }else if(regex3.test(value)) {
+ this.level.push('low')
+ return callback('瀵嗙爜寮哄害杩囦綆')
+ }else if(/^[A-Za-z\d]+$/.test(value)) {
+ this.level.push('low')
+ this.level.push('middle')
+ return callback('瀵嗙爜寮哄害杩囦綆')
+ }else if(
+ /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]路~锛丂#锟�%鈥︹��&*锛堬級鈥斺�擻-+={}|銆娿�嬶紵锛氣�溾�濄�愩�戙�侊紱鈥�'锛屻�傘�乗d]+$/.test(
+ value
+ )
+ ) {
+ this.level.push('low')
+ this.level.push('middle')
+ return callback('瀵嗙爜寮哄害杩囦綆')
+ }else if(
+ /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]路~锛丂#锟�%鈥︹��&*锛堬級鈥斺�擻-+={}|銆娿�嬶紵锛氣�溾�濄�愩�戙�侊紱鈥�'锛屻�傘�丄-Za-z]+$/.test(
+ value
+ )
+ ) {
+ this.level.push('low')
+ this.level.push('middle')
+ return callback('瀵嗙爜寮哄害杩囦綆')
+ } else if (
+ /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]路~锛丂#锟�%鈥︹��&*锛堬級鈥斺�擻-+={}|銆娿�嬶紵锛氣�溾�濄�愩�戙�侊紱鈥�'锛屻�傘�丄-Za-z\d]+$/.test(
+ value
+ )
+ ) {
+ this.level.push('low')
+ this.level.push('middle')
+ this.level.push('high')
+ }
+ return callback()
+ };
return {
+ isShowPassword: true,
+ level:[], //瀵嗙爜寮哄害鏁扮粍
userInfo: {},
+ checkboxValue: [],
+ inputType: 'password',
+ isFocus: false,
modelForm: {
- password: '',
- secondPassword: ''
+ originalPassword:'', //鍘熷瀵嗙爜
+ password: '', //鏂板瘑鐮�
+ secondPassword: '', //浜屾纭瀵嗙爜
+ username:'',
+ userId:''
},
processLoading: false,
rules: {
- password: {
- type: 'string',
- required: true,
- message: '璇峰～鍐欏瘑鐮�',
- trigger: ['blur', 'change']
- },
- secondPassword: {
- type: 'string',
- required: true,
- message: '璇峰～鍐欎簩娆″瘑鐮�',
- trigger: ['blur', 'change']
- }
+ originalPassword: [{
+ type: 'string',
+ required: this.isShowPassword,
+ message: '璇峰～鍐欏瘑鐮�',
+ trigger: ['blur', 'change']
+ }
+ ],
+ password:[{
+ required: true,
+ validator: checkPassword,
+ trigger: 'change'
+ }],
+ secondPassword: [{
+ required: true,
+ validator: validatePass,
+ trigger: "blur"
+ }]
}
}
},
+ computed: {
+ roleType() {
+ return uni.getStorageSync('roleType')
+ },
+ userId() {
+ if(uni.getStorageSync('userId')) {
+ this.modelForm.userId = uni.getStorageSync('userId')
+ }
+ return uni.getStorageSync('userId')
+ }
+ },
onLoad(params) {
- this.userInfo = JSON.parse(params.userInfo)
+ if (this.roleType === 3) {
+ this.userInfo = JSON.parse(params.userInfo)
+ } else {
+ if(params.phone && params.idCard){
+ this.getUserInfo(params.phone, params.idCard)
+ }
+ }
+ if(params.userInfo) {
+ console.log(JSON.parse(params.userInfo),'userInfo====')
+ this.modelForm.username = JSON.parse(params.userInfo).username
+ this.modelForm.userId = JSON.parse(params.userInfo).userId.toString() //userId
+ if(JSON.parse(params.userInfo).isShowPassword) {
+ this.isShowPassword = false
+ }else {
+ this.isShowPassword = true
+ }
+ }else {
+ this.isShowPassword = true
+ }
},
onReady() {
this.$refs.uForm.setRules(this.rules)
},
methods: {
- process() {
- if (this.modelForm.password !== this.modelForm.secondPassword) return uni.$u.toast('瀵嗙爜涓嶄竴鑷�,璇锋鏌�')
- this.userInfo.password = this.modelForm.secondPassword;
- this.processLoading = true;
- this.$refs.uForm.validate().then(res => {
- this.$reqAllJson('appUpdateById', this
- .userInfo, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {
- this.processLoading = false;
- if (res.code === 0) {
- this.$u.toast('淇敼鎴愬姛,鍗冲皢鍥炲埌棣栭〉')
- setTimeout(() => {
- uni.reLaunch({
- url: '/pages/login/login'
- })
- }, 800)
- } else {
- this.$u.toast(res.msg ? res.msg : '淇敼澶辫触')
- }
- })
- }).catch(errors => {
- uni.$u.toast('鏍￠獙澶辫触')
+ getClass() {
+ // [level.includes('low') ? 'low' : '']
+ if(this.level.includes('low')) {
+ return 'low'
+ }else {
+ return ''
+ }
+ },
+ getUserInfo(phone, idCard) {
+ this.$reqGet('phoneAndCard', { phone, idCard }).then(res => {
+ if (res.code === 0) {
+ this.userInfo = res.data
+ } else {
+ uni.$u.toast('鍔犺浇澶辫触')
+ }
})
+
+ },
+ checkChange(name) {
+ this.inputType = name.length === 0 ? 'password' : ''
+ this.isFocus = true
+ },
+ process() {
+ console.log(this.userInfo,'userInfo======')
+ if(!this.level.includes('middle') && !this.level.includes('high')) {
+ return this.$u.toast('瀵嗙爜寮哄害澶急')
+ }
+ this.$refs.uForm.validate().then(res => {
+ this.processLoading = true;
+ this.$reqAllJson('appUpdateById', this.modelForm, { method: 'PUT', 'Content-type': 'application/json' }).then(res => {
+ this.processLoading = false;
+ if (res.code === 0) {
+ this.$u.toast('淇敼鎴愬姛,鍗冲皢鍥炲埌棣栭〉')
+ setTimeout(() => {
+ uni.reLaunch({
+ url: '/pages/login/login'
+ })
+ }, 800)
+ } else {
+ this.$u.toast(res.msg ? res.msg : '淇敼澶辫触')
+ }
+ }).catch(e => {
+ // uni.$u.toast('鏍￠獙澶辫触')
+ }).finally(() => {
+ this.processLoading = false;
+ })
+ })
+ // }).catch(errors => {
+ // uni.$u.toast('鏍￠獙澶辫触')
+ // })
}
}
}
@@ -98,11 +300,51 @@
<style lang="scss"
scoped>
.main {
- width: 94%;
- margin: vww(10) auto;
+ width: 100%;
+ padding: vww(20);
+ box-sizing: border-box;
.process-button {
margin-top: vww(20);
}
+ .intensity {
+ width: 100%;
+ margin-top: 10rpx;
+ .psdText {
+ font-size: 14px;
+ margin-right: 10px;
+ }
+
+ .line {
+ display: inline-block;
+ width: 70rpx;
+ height: 8rpx;
+ background: #d8d8d8;
+ border-radius: 6rpx;
+ margin-right: 16rpx;
+
+ &.low {
+ background: #f4664a;
+ }
+
+ &.middle {
+ background: #ffb700;
+ }
+
+ &.high {
+ background: #2cbb79;
+ }
+ }
+
+ .level {
+ margin: 0 32rpx 0 16rpx;
+ }
+
+ .warningtext {
+ color: #5a5a5a;
+ font-size: 24rpx;
+ margin-top: 10rpx;
+ }
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.1