登录页调整样式 增加重置密码

qingyiay

2023-10-16 546863eae7d337d47260d63a4b3733f7313ce52d

登录页调整样式 增加重置密码

 api/globalApi.js

@@ -449,5 +449,12 @@
    appSaveContact: {
        url: '/wrzs/tmtaskcoalcontact/appSave',
        method: 'POST'
    },
    /**
     * @description 查询是否有此用户
     */
    phoneAndCard: {
        url: '/wrzs/userentity/phoneAndCard',
        method: 'GET'
    }
}

 api/publicInterface.js

@@ -3,8 +3,9 @@


import { BaseUrl as wrBaseUrl } from '@/api/request.js'
const BaseUrl = 'http://192.168.31.14:9999'
// const BaseUrl = 'https://mx.jzeg.cn:9096'
// const BaseUrl = 'http://192.168.0.110:9999'
// const BaseUrl = 'http://192.168.0.102:9999'
const BaseUrl = 'https://mx.jzeg.cn:9096'
// const BaseUrl = 'http://192.168.31.18:9999' 
// const BaseUrl = 'http://192.168.0.100:9999'
// const BaseUrl = 'http://192.168.0.108:9999'
@@ -63,6 +64,7 @@
    vehicleColour,
    bodyofcarJpg
}) {
    console.log(bodyofcarJpg);
    uni.showLoading({ title: '加载中...' })
    return new Promise((resolve, reject) => {
        uni.request({

 api/request.js

@@ -100,11 +100,12 @@
    500: responseError
}

const BaseUrl = "http://192.168.31.14:9997"
const webSocketUrl = "ws://192.168.31.14:9997/wrzs/ws/info"
// const BaseUrl = "http://192.168.0.110:9896"
// const webSocketUrl = "ws://192.168.0.110:9896/wrzs/ws/info"

// const BaseUrl = "http://localhost:9997";
// const webSocketUrl = "ws://localhost:9997/wrzs/ws/info"
// const BaseUrl = "http://192.168.0.102:9896"
// const webSocketUrl = "ws://192.168.0.102:9896/wrzs/ws/info"

export const onlineurl = "https://mx.jzeg.cn:9096";
// const BaseUrl = "http://192.168.0.100:9997";
// const webSocketUrl = "ws://192.168.0.100:9997/wrzs/ws/info"
@@ -112,8 +113,8 @@
// const BaseUrl = "http://192.168.0.108:9997";
// const webSocketUrl = "ws://192.168.0.108:9997/wrzs/ws/info"
// 线上生产
// const BaseUrl = "https://mx.jzeg.cn:9096";
// const webSocketUrl = "wss://mx.jzeg.cn:9096/wrzs/ws/info"
const BaseUrl = "https://mx.jzeg.cn:9096";
const webSocketUrl = "wss://mx.jzeg.cn:9096/wrzs/ws/info"


// 请求拦截

 pages.json

@@ -247,7 +247,25 @@
            }

        }
    ],
        ,{
            "path" : "pages/login/forgetPassword/forgetPassword",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/login/resetPassword/resetPassword",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
    "subPackages": [{
            "root": "pages/register",
            "pages": [{

 pages/login/forgetPassword/forgetPassword.vue

New file
@@ -0,0 +1,120 @@
<template>
    <view class="main">
        <u-form :model="modelForm"
            label-position="top"
            :rules="rules"
            ref="uForm"
            label-width="80px">
            <u-form-item prop="phone"
                label="手机号"
                required
                borderBottom>
                <u--input v-model="modelForm.phone"
                    border="surround"
                    placeholder="请输入手机号"></u--input>
            </u-form-item>
            <u-form-item prop="idCard"
                label="身份证号"
                required
                borderBottom>
                <u--input v-model="modelForm.idCard"
                    border="surround"
                    placeholder="请输入身份证号"></u--input>
            </u-form-item>
            <u-form-item>
                <view class="process-button">
                    <u-button type="primary"
                        text="验证"
                        :loading="processLoading"
                        @click.stop="process"></u-button>
                </view>
            </u-form-item>
        </u-form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                modelForm: {
                    phone: '',
                    idCard: ''
                },
                processLoading: false,
                rules: {
                    phone: [{
                            required: true,
                            message: '请输入手机号',
                            // blur和change事件触发检验
                            trigger: ['blur', 'change']
                        },
                        {
                            min: 11,
                            max: 11,
                            message: '请输入合法手机号'
                        },
                        {
                            validator: (rule, value, callback) => {
                                return uni.$u.test.mobile(value);
                            },
                            message: '手机号码格式不正确',
                            trigger: ['change', 'blur']
                        }
                    ],
                    idCard: [{
                            type: 'string',
                            required: true,
                            message: '请输入身份证号',
                            trigger: ['blur', 'change']
                        },
                        {
                            pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                            message: '身份证号格式不正确',
                            trigger: ['blur', 'change']
                        }
                    ],
                }
            }
        },
        onReady() {
            this.$refs.uForm.setRules(this.rules)
        },
        methods: {
            process() {
                this.$refs.uForm.validate().then(res => {
                    this.processLoading = true;
                    this.$reqGet('phoneAndCard', { phone: this.modelForm.phone, idCard: this.modelForm.idCard })
                        .then(res => {
                            this.processLoading = false;
                            if (res.code === 0) {
                                uni.$u.toast('验证成功,即将跳转重置密码界面')
                                setTimeout(() => {
                                    uni.navigateTo({
                                        url: `/pages/login/resetPassword/resetPassword?userInfo=${JSON.stringify(res.data)}`
                                    })
                                }, 1000)
                            } else {
                                uni.$u.toast(res.msg ? res.msg : '验证失败')
                            }
                        })

                }).catch(errors => {
                    uni.$u.toast('请填写完整信息')
                })
            }
        }
    }
</script>

<style lang="scss"
    scoped>
    .main {
        width: 94%;
        margin: vww(10) auto;

        .process-button {
            margin-top: vww(20);
        }
    }
</style>

 pages/login/login.vue

@@ -12,13 +12,11 @@
                type="primary"
                text="微信一键登录"></u-button>
        </view>
        <!-- <view class="loginBtn">
            <u-button @click.stop="jumpBindBack"
                type="primary"
                text="一键绑定测试"></u-button>
        </view> -->
        <view class="register"
            @click="PrivacyAgreementHandle"><text>注册</text></view>
        <view class="utils-block">
            <view @click="forgetPassword"><text>忘记密码?</text></view>
            <view @click="PrivacyAgreementHandle"><text>新用户注册</text></view>
        </view>

        <view class="login-bottom-box">
            <view class="copyright">冀中能源无人值守微信小程序</view>
            <view class="copyright">小程序仅供已拥有系统账号特定内部人员使用</view>
@@ -173,6 +171,11 @@
            openPopup() {
                console.log('打开了');
            },
            forgetPassword() {
                uni.navigateTo({
                    url: '/pages/login/forgetPassword/forgetPassword'
                })
            },
            PrivacyAgreementHandle() {
                uni.navigateTo({
                    url: '/pages/login/PrivacyAgreementText/PrivacyAgreementText'
@@ -190,26 +193,6 @@
    }

    .login {
        // height: 100vh;
        // display: flex;
        // align-items: center;

        // .loginBtn {
        //   margin: 0 auto;
        //   width: 80%;

        //   .u-button {
        //     .u-icon {
        //       .u-icon__icon {
        //         font-size: vww(20) !important;
        //       }
        //     }
        //   }

        //   .u-button--success {
        //     border-style: none;
        //   }
        // }
        .loginBtn {
            margin-top: vww(20);

@@ -218,6 +201,15 @@
            }
        }

        .utils-block {
            width: 80%;
            margin: vww(20) auto;
            display: flex;
            justify-content: space-between;
            color: #497bff;
            font-size: vww(17);
        }

        .logo {
            width: 80%;
            font-size: 64rpx;

 pages/login/resetPassword/resetPassword.vue

New file
@@ -0,0 +1,108 @@
<template>
    <view class="main">
        <u-form :model="modelForm"
            label-position="top"
            :rules="rules"
            ref="uForm"
            label-width="80px">
            <u-form-item prop="password"
                label="密码"
                required
                borderBottom>
                <u--input v-model="modelForm.password"
                    border="surround"
                    placeholder="请输入密码"
                    type='password'></u--input>
            </u-form-item>
            <u-form-item prop="secondPassword"
                label="二次确认"
                required
                borderBottom>
                <u--input v-model="modelForm.secondPassword"
                    border="surround"
                    placeholder="请再次输入密码"
                    type='password'></u--input>
            </u-form-item>
            <u-form-item>
                <view class="process-button">
                    <u-button type="primary"
                        text="确定"
                        :loading="processLoading"
                        @click.stop="process"></u-button>
                </view>
            </u-form-item>
        </u-form>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                userInfo: {},
                modelForm: {
                    password: '',
                    secondPassword: ''
                },
                processLoading: false,
                rules: {
                    password: {
                        type: 'string',
                        required: true,
                        message: '请填写密码',
                        trigger: ['blur', 'change']
                    },
                    secondPassword: {
                        type: 'string',
                        required: true,
                        message: '请填写二次密码',
                        trigger: ['blur', 'change']
                    }
                }
            }
        },
        onLoad(params) {
            this.userInfo = JSON.parse(params.userInfo)
        },
        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('校验失败')
                })
            }
        }
    }
</script>

<style lang="scss"
    scoped>
    .main {
        width: 94%;
        margin: vww(10) auto;

        .process-button {
            margin-top: vww(20);
        }
    }
</style>

 pages/register/register.vue

@@ -224,12 +224,13 @@
                        },
                        {
                            pattern: /^([1-6][1-9]|50)\d{4}(18|19|20)\d{2}((0[1-9])|10|11|12)(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                            message: '身份证号格式不正确'
                            message: '身份证号格式不正确',
                            trigger: ['blur', 'change']
                        }
                    ],
                    phone: [{
                            required: true,
                            message: '此项为必填项',
                            message: '请输入手机号',
                            // blur和change事件触发检验
                            trigger: ['blur', 'change']
                        },
@@ -242,7 +243,7 @@
                            validator: (rule, value, callback) => {
                                return uni.$u.test.mobile(value);
                            },
                            message: '手机号码不正确',
                            message: '手机号码格式不正确',
                            trigger: ['change', 'blur']
                        }
                    ],