|
|
@@ -1,39 +1,127 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- <view :style="{height: statusBarHeight + 'px'}"></view>
|
|
|
- <u-navbar back-text="返回" title="找回密码"></u-navbar>
|
|
|
- 忘记密码
|
|
|
+ <u-form :model="forgetForm" ref="forgetForm" label-width="160"
|
|
|
+ :label-style="{ color: '#000', fontSize: '30rpx'}">
|
|
|
+ <u-form-item label="手机号" prop="shoujihao" :border-bottom="false">
|
|
|
+ <u-input height="80" placeholder="请输入手机号"
|
|
|
+ border-color="#d0d0d0" v-model="forgetForm.shoujihao"
|
|
|
+ :border="true" class="form-item-input" type="number" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="验证码" prop="yanzhengma" :border-bottom="false">
|
|
|
+ <u-input height="80" placeholder="请输入验证码" border-color="#d0d0d0" v-model="forgetForm.yanzhengma"
|
|
|
+ :border="true" class="form-item-input" />
|
|
|
+ </u-form-item>
|
|
|
+ <u-form-item label="新密码" prop="xinmima" :border-bottom="false">
|
|
|
+ <u-input height="80" placeholder="请输入新密码" border-color="#d0d0d0" v-model="forgetForm.xinmima"
|
|
|
+ :border="true" class="form-item-input" type="password" />
|
|
|
+ </u-form-item>
|
|
|
+ <view class="form-button" @click="submit">
|
|
|
+ 确认
|
|
|
+ </view>
|
|
|
+ </u-form>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import {
|
|
|
+ msg
|
|
|
+ } from "@/utils/common.js"
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- statusBarHeight: 0,
|
|
|
- navBarHeight:0
|
|
|
+ forgetForm: {
|
|
|
+ shoujihao: '', //账号
|
|
|
+ yanzhengma: "", //密码
|
|
|
+ xinmima: '', // 确认密码
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ yanzhengma: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入账号',
|
|
|
+ trigger: ['blur']
|
|
|
+ }],
|
|
|
+ xinmima: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入密码',
|
|
|
+ trigger: ['blur']
|
|
|
+ }],
|
|
|
+ shoujihao: [{
|
|
|
+ required: true,
|
|
|
+ message: '请输入手机号码',
|
|
|
+ trigger: ['blur']
|
|
|
+ }, {
|
|
|
+ pattern: /^1[3-9]\d{9}$/,
|
|
|
+ message: '请输入正确的手机号',
|
|
|
+ trigger: ['blur']
|
|
|
+ }]
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
- onReady() {
|
|
|
- const that = this;
|
|
|
- uni.getSystemInfo({
|
|
|
- success(e) {
|
|
|
- that.statusBarHeight = e.statusBarHeight;
|
|
|
- let custom = uni.getMenuButtonBoundingClientRect();
|
|
|
- that.navBarHeight = custom.height + (custom.top - e.statusBarHeight) * 2;
|
|
|
- }
|
|
|
- })
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ const that = this;
|
|
|
+ that.$refs.forgetForm.validate((valid) => {
|
|
|
+ console.log(valid, that.forgetForm.xingbie, 456);
|
|
|
+ if (valid) {
|
|
|
+ msg("数据验证成功")
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ back() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1,
|
|
|
+ animationType: 'pop-out',
|
|
|
+ animationDuration: 200
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
- onLoad() {
|
|
|
+ onLoad() {},
|
|
|
+ onReady() {
|
|
|
+ this.$refs.forgetForm.setRules(this.rules);
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+<style lang="scss">
|
|
|
+ .u-form-item {
|
|
|
+ padding: 30rpx 0 !important;
|
|
|
+ }
|
|
|
+ .u-form-item .u-input--border{
|
|
|
+ border-radius: 16rpx !important;
|
|
|
+ }
|
|
|
+ .u-form-item .u-form-item--left__content__label {
|
|
|
+ display: block !important;
|
|
|
+ text-align: justify;
|
|
|
+ text-align-last: justify;
|
|
|
+ padding: 0 20rpx 0 10rpx;
|
|
|
+ }
|
|
|
|
|
|
+ .u-input {
|
|
|
+ background-color: #f7f7f7 !important;
|
|
|
+ }
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
background-color: #ffffff;
|
|
|
- padding: 0 20rpx;
|
|
|
+ padding: 0 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-item-input {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-button {
|
|
|
+ background: linear-gradient(90deg, #006af5, #21b0fc);
|
|
|
+ border-radius: 20rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ margin: 50rpx 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-tip {
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
}
|
|
|
</style>
|
littleblue55