2024-01-03 14:19:05 +08:00

143 lines
2.9 KiB
Vue

<template>
<view class="login-box">
<view class="uni-header no-padding">
<view class="uni-title">{{$t('user.renew.text.title')}}</view>
</view>
<view class="uni-container">
<uni-forms ref="form" v-model="formData" :rules="rules">
<uni-forms-item name="password" labelWidth="35">
<uni-easyinput prefixIcon="locked-filled" @confirm="submitForm" type="password"
v-model="formData.password" :placeholder="$t('user.renew.field.password')">
</uni-easyinput>
</uni-forms-item>
<uni-forms-item name="password_confirm" labelWidth="35">
<uni-easyinput prefixIcon="locked-filled" @confirm="submitForm" type="password"
v-model="formData.password_confirm" :placeholder="$t('user.renew.field.passwordConfirm')">
</uni-easyinput>
</uni-forms-item>
<view class="uni-button-group">
<button class="uni-button uni-button-full" type="primary" :loading="loading" :disabled="loading"
@click="submitForm">{{$t('user.renew.button.save')}}</button>
</view>
</uni-forms>
</view>
</view>
</template>
<script>
import {
mapGetters,
mapActions,
mapMutations
} from 'vuex';
let App = getApp();
import config from '@/config.js'
export default {
data() {
return {
...config.navBar,
loading: false,
formData: {
password: '',
password_confirm: ''
},
rules: {
password: {
rules: [{
required: true,
errorMessage: '请输入新密码',
},
{
minLength: 6,
errorMessage: '密码长度大于{minLength}个字符',
}
]
},
password_confirm: {
rules: [{
required: true,
errorMessage: '请输入确认密码',
},
{
minLength: 6,
errorMessage: '确认密码长度大于{minLength}个字符',
}
]
}
}
}
},
onLoad() {
let _this = this;
},
methods: {
...mapActions({
init: 'app/init'
}),
/**
* 提交登录
*/
submitForm() {
let _this = this;
_this.$refs.form.validate().then(result => {
//数据验证没有问题
App._post_form('user/renew', result, result => {
App.showSuccess(result.msg);
}, false, () => {});
}).catch(err => {
console.log('表单提交错误');
});
}
}
}
</script>
<style>
page {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background-color: #fff;
}
.login-box {
flex: 1;
overflow: hidden;
/* #ifndef H5 */
padding: 0;
max-width: 350px;
max-height: 300px;
margin-left: calc(50% - 200px);
/* #endif */
/* #ifdef H5 */
margin: 0 auto;
position: relative;
top: 100px;
padding: 30px 40px 80px 40px;
max-width: 350px;
max-height: 300px;
border-radius: 10px;
box-shadow: 0 0 20px #efefef;
background-color: #FFF;
/* #endif */
}
.no-padding {
padding: 0;
}
.admin-logo {
display: flex;
justify-content: center;
margin-bottom: 30px;
}
.admin-logo image {
height: 40px;
}
</style>