159 lines
3.5 KiB
Vue
159 lines
3.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="pd-lr-20">
|
||
<view class="oldpsd mg-t-20" style="display: flex;align-items: baseline;">
|
||
<up-icon name="lock-fill" size="15" />
|
||
<span style="margin-left: 4rpx;">原密码</span>
|
||
</view>
|
||
<input class="oldpsdinp" type="text" v-model="state.formData.paswOld" placeholder="输入原密码" />
|
||
|
||
<view class="oldpsd mg-t-20" style="display: flex;align-items: baseline;">
|
||
<up-icon name="lock-fill" size="15" />
|
||
<span style="margin-left: 4rpx;">新密码</span>
|
||
</view>
|
||
<input class="newpsdinp bottom" type="password" v-model="state.passwordNew" placeholder="请输入新的密码" @blur="newCode" />
|
||
<input class="newpsdinp" type="password" v-model="state.formData.paswNew" placeholder="再次输入确认密码" @blur="newCode2" />
|
||
<view class="txt">
|
||
<view :class="state.isTrue?'red':''">{{ state.tstxt }}</view>
|
||
</view>
|
||
|
||
<up-button class="mg-t-20" text="提交" @click="onsubmit"></up-button>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { reactive } from 'vue';
|
||
import { sm2 } from 'sm-crypto'
|
||
import { env } from '@/utils/.env.js'
|
||
import { changePwdApi } from '@/api/auth.js'
|
||
|
||
const state = reactive({
|
||
isTrue: false,
|
||
tstxt: '请正确输入',
|
||
passwordNew: '',
|
||
formData: {} as any,
|
||
})
|
||
|
||
const newCode = () => {
|
||
if (state.passwordNew.length >= 6 && state.passwordNew.length <= 15) {
|
||
state.tstxt = '99999'
|
||
state.isTrue = true
|
||
} else {
|
||
state.isTrue = false
|
||
state.tstxt = '请输入6-15位，字母或数字'
|
||
}
|
||
}
|
||
|
||
const newCode2 = () => {
|
||
if (state.formData.paswNew != state.passwordNew) {
|
||
state.isTrue = false
|
||
state.tstxt = '两次密码不一致'
|
||
}
|
||
}
|
||
|
||
const onsubmit = () => {
|
||
if (!state.isTrue) return uni.showToast({ title: state.tstxt, icon: 'none' })
|
||
|
||
state.formData.passwordOld = sm2.doEncrypt(state.formData.paswOld, env.smKey, 1)
|
||
state.formData.passwordNew = sm2.doEncrypt(state.formData.paswNew, env.smKey, 1)
|
||
changePwdApi(state.formData).then((res : any) => {
|
||
console.log(res);
|
||
if (res.code == 200) {
|
||
uni.showToast({ title: '修改成功', icon: 'none' })
|
||
setTimeout(() => {
|
||
uni.navigateBack()
|
||
}, 1000)
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.pd-lr-20 {
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.mg-t-20 {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.red {
|
||
color: #ff0000 !important;
|
||
}
|
||
|
||
.oldpsdinp {
|
||
height: 104rpx;
|
||
margin-bottom: 40rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
padding-left: 24rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.content {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #F5F6F8;
|
||
|
||
.oldpsd {
|
||
padding-left: 24rpx;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 30rpx;
|
||
color: #656565;
|
||
}
|
||
|
||
.newpsdinp {
|
||
height: 104rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
padding-left: 24rpx;
|
||
font-size: 28rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.bottom {
|
||
border-bottom: 1rpx solid #F2F2F2;
|
||
}
|
||
|
||
.txt {
|
||
margin-top: 16rpx;
|
||
display: flex;
|
||
padding: 0rpx 24rpx;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
view:first-child {
|
||
font-size: 20rpx;
|
||
color: #9A9A9A;
|
||
}
|
||
|
||
view:last-child {
|
||
font-size: 20rpx;
|
||
color: #FF2442;
|
||
}
|
||
}
|
||
|
||
.success {
|
||
width: 90%;
|
||
margin: 190rpx auto 0rpx;
|
||
}
|
||
|
||
::v-deep.u-icon__icon {
|
||
margin-top: 2px;
|
||
margin-right: 5px !important;
|
||
font-size: 35rpx !important;
|
||
}
|
||
}
|
||
|
||
::v-deep.u-button--info {
|
||
color: white !important;
|
||
width: 90%;
|
||
border-radius: 30px !important;
|
||
background: $uni-color-primary !important;
|
||
}
|
||
</style> |