| | |
| | | <template> |
| | | <view class="container"> |
| | | <view class="detailBox"> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">原始密码</div> |
| | | <u-input input-align="right" v-model="passwordForm.oldPassword" type="password" placeholder="请输入" |
| | | class="input-item" /> |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">新密码</div> |
| | | <u-input input-align="right" v-model="passwordForm.newPassword" type="password" placeholder="请输入" |
| | | class="input-item" /> |
| | | <div class="detailCon"> |
| | | <div class="orderRow"> |
| | | <!-- type="password" :password-icon="passwordIcon" --> |
| | | <div class="rowTitle">原始密码</div> |
| | | <input type="password" v-model="passwordForm.oldPassword" placeholder="请输入" class="input-item" /> |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">新密码</div> |
| | | <input type="password" v-model="passwordForm.newPassword" placeholder="请输入" class="input-item" /> |
| | | |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">确认密码</div> |
| | | <u-input input-align="right" v-model="passwordForm.newPassword1" type="password" placeholder="请输入" |
| | | class="input-item" /> |
| | | </div> |
| | | <div class="orderRow"> |
| | | <div class="rowTitle">确认密码</div> |
| | | <input type="password" v-model="passwordForm.newPassword1" placeholder="请输入" class="input-item" /> |
| | | </div> |
| | | </div> |
| | | </view> |
| | | <view class="btngroup"> |
| | | <u-button color="#AEAEAE" class="custom-style" shape="circle" @click="reset">重置</u-button> |
| | | <u-button color="#1D6FE9" class="custom-style" shape="circle" @click="submit">提交</u-button> |
| | | <u-button |
| | | :color="submitLoading ? '#AEAEAE' : '#1D6FE9'" |
| | | class="custom-style" |
| | | shape="circle" |
| | | text="提交" |
| | | :loading="submitLoading" |
| | | loading-text="提交中" |
| | | loading-mode="circle" |
| | | :loading-size="13" |
| | | @click="submit" |
| | | /> |
| | | </view> |
| | | </view> |
| | | </template> |
| | |
| | | updateInfo, |
| | | updatePassword |
| | | } from '@/api/user/index.js'; |
| | | |
| | | const passwordIcon = { |
| | | show: 'fas fa-eye', // 显示密码时的图标 |
| | | hide: 'fas fa-eye-slash' // 隐藏密码时的图标 |
| | | } |
| | | const userStore = useUserStore(); |
| | | const passwordForm = ref({ |
| | | oldPassword: '', |
| | | newPassword: '', |
| | | newPassword1: '', |
| | | }); |
| | | const submitLoading = ref(false); |
| | | // 校验密码不能包含中文 |
| | | const validatePasswordNoChinese = (password) => { |
| | | const chineseRegex = /[\u4e00-\u9fa5]/; |
| | | if (chineseRegex.test(password)) { |
| | | |
| | | uni.showToast({ |
| | | title: '密码不能包含中文字符', |
| | | icon: 'none', |
| | | duration: 2000 |
| | | }); |
| | | return false; |
| | | } |
| | | return true; |
| | | }; |
| | | // 校验密码复杂度(长度≥6位,包含字母和数字) |
| | | const validatePasswordStrength = (password) => { |
| | | if (password.length < 6) { |
| | | |
| | | uni.showToast({ |
| | | title: '密码长度不能少于6位', |
| | | icon: 'none', |
| | | duration: 2000 |
| | | }); |
| | | return false; |
| | | } |
| | | return true; |
| | | }; |
| | | const clearForm = () => { |
| | | passwordForm.value = { |
| | | oldPassword: '', |
| | |
| | | clearForm(); |
| | | }; |
| | | const submit = () => { |
| | | if (submitLoading.value) return; |
| | | // 原始密码校验 |
| | | if (!passwordForm.value.oldPassword) { |
| | | |
| | | uni.showToast({ |
| | | title: '请输入原始密码', |
| | | icon: 'none', |
| | | duration: 2000 |
| | | }); |
| | | return; |
| | | } |
| | | // 中文校验 |
| | | if (!validatePasswordNoChinese(passwordForm.value.newPassword)) return; |
| | | // 新密码校验 |
| | | if (!passwordForm.value.newPassword) { |
| | | |
| | | uni.showToast({ |
| | | title: '请输入新密码', |
| | | icon: 'none', |
| | | duration: 2000 |
| | | }); |
| | | return; |
| | | } |
| | | // 确认密码校验 |
| | | if (passwordForm.value.newPassword !== passwordForm.value.newPassword1) { |
| | | |
| | | uni.showToast({ |
| | | title: '两次输入的新密码不一致', |
| | | icon: 'none', |
| | | duration: 2000 |
| | | }); |
| | | return; |
| | | } |
| | | |
| | | // 复杂度校验 |
| | | if (!validatePasswordStrength(passwordForm.value.newPassword)) return; |
| | | submitLoading.value = true; |
| | | updatePassword(md5(passwordForm.value.oldPassword), |
| | | md5(passwordForm.value.newPassword), |
| | | md5(passwordForm.value.newPassword1)).then(res => { |
| | |
| | | uni.showToast({ |
| | | title: '修改信息成功', |
| | | icon: 'none', |
| | | duration: 2000 |
| | | duration: 1500 |
| | | }); |
| | | clearForm(); |
| | | userStore.setUserInfo(null) |
| | | uni.redirectTo({ |
| | | url: '/pages/login/index' |
| | | }) |
| | | uni.removeStorageSync('rememberedUser'); |
| | | setTimeout(() => { |
| | | uni.reLaunch({ |
| | | url: '/pages/login/index' |
| | | }) |
| | | }, 1500); |
| | | return |
| | | |
| | | } else { |
| | | uni.showToast({ |
| | |
| | | duration: 2000 |
| | | }); |
| | | } |
| | | submitLoading.value = false; |
| | | |
| | | }).catch(() => { |
| | | submitLoading.value = false; |
| | | }); |
| | | |
| | | }; |
| | |
| | | |
| | | <style lang="scss" scoped> |
| | | .container { |
| | | |
| | | width: 100%; |
| | | |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | |
| | | background: url('/src/static/images/user/allBg.svg') no-repeat center center; |
| | | background-size: cover; |
| | | |
| | | background-attachment: fixed; |
| | | |
| | | |
| | | } |
| | | |
| | | .detailBox { |
| | | margin-top: 20px; |
| | | width: 351px; |
| | | margin-top: 40rpx; |
| | | width: 702rpx; |
| | | |
| | | min-height: 163px; |
| | | min-height: 326rpx; |
| | | background: #FFFFFF; |
| | | border-radius: 6px; |
| | | border-radius: 12rpx; |
| | | box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); |
| | | |
| | | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); |
| | | .detailCon { |
| | | padding: 0 24rpx; |
| | | } |
| | | |
| | | .orderRow { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | height: 48px; |
| | | border-bottom: 1px solid #f5f5f5; |
| | | height: 96rpx; |
| | | border-bottom: 2rpx solid #f5f5f5; |
| | | color: #7b7b7b; |
| | | padding: 0 12px; |
| | | |
| | | |
| | | .rowTitle { |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | font-weight: 400; |
| | | font-size: 15px; |
| | | font-size: 30rpx; |
| | | color: #222324; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | ::v-deep .u-input { |
| | | input.input-item { |
| | | text-align: right; |
| | | border: none !important; |
| | | background: transparent !important; |
| | | } |
| | | |
| | | ::v-deep .u-input__input { |
| | | border: none !important; |
| | | box-shadow: none !important; |
| | | background: transparent !important; |
| | | padding: 0 !important; |
| | | margin: 0 !important; |
| | | height: auto !important; |
| | | |
| | | outline: none; |
| | | font-size: 30rpx; |
| | | color: #222324; |
| | | font-family: Source Han Sans CN, Source Han Sans CN; |
| | | } |
| | | :deep(.uni-input-placeholder) { |
| | | color: #D5D5D5; |
| | | } |
| | | input.input-item::placeholder { |
| | | font-size: 30rpx; |
| | | } |
| | | } |
| | | } |
| | |
| | | .btngroup { |
| | | display: flex; |
| | | position: absolute; |
| | | bottom:75px; |
| | | bottom: 150rpx; |
| | | } |
| | | |
| | | .u-button:first-child { |
| | | margin-right: 15px; |
| | | :deep(.u-button:first-child) { |
| | | margin-right: 30rpx !important; |
| | | } |
| | | |
| | | .custom-style { |
| | | width: 138px; |
| | | height: 38px; |
| | | width: 276rpx; |
| | | height: 76rpx; |
| | | } |
| | | </style> |
| | | :deep(.u-button){ |
| | | width: 276rpx !important; |
| | | height: 76rpx !important; |
| | | } |
| | | </style> |