demo.vue示例

<template>
    <view class="container">
        <form @submit="formSubmit">
            <view class="box">
                <view class="ct_view title">
                    正在修改登录密码
                </view>
                <view class="ct_view">
                    原登录密码
                    <view class="input_view">
                        <input type="text" :password="pwd" value="" placeholder="请输入登录密码" placeholder-class="pStyle" name="loginPwd" v-model="loginPwd"  v-on:input = "changeColor" />
                        <view :class="[!pwd ? 'icon iconfont iconopeneye' : 'icon iconfont iconcloseeye']" @click="showPwd(1)"></view>
                    </view>
                </view>
                <view class="ct_view">
                    新登录密码
                    <view class="input_view">
                        <input type="text" :password="newPwd" value="" placeholder="请输入新登录密码" placeholder-class="pStyle" name="loginNewPwd" v-model="loginNewPwd"  v-on:input = "changeColor" />
                        <view :class="[!newPwd ? 'icon iconfont iconopeneye' : 'icon iconfont iconcloseeye']" @click="showPwd(2)"></view>
                    </view>
                </view>
                <view class="ct_view">
                    确认新登录密码
                    <view class="input_view">
                        <input type="text" :password="confirmPwd" value="" placeholder="请输入新登录密码" placeholder-class="pStyle" name="confirmLPwd" v-model="confirmLPwd"  v-on:input = "changeColor" />
                        <view :class="[!confirmPwd ? 'icon iconfont iconopeneye' : 'icon iconfont iconcloseeye']" @click="showPwd(3)"></view>
                    </view>
                </view>                
            </view>
            <button form-type="submit" :class="btnColor ? '' : 'active'">确定</button>
        </form>        
    </view>
</template>

<script>
    
    export default {
        components: {
        },
        data() {
            return {
                pwd: true,
                newPwd: true,
                confirmPwd: true,
                loginPwd:'',
                loginNewPwd:'',
                confirmLPwd:'',
                btnColor:true
            }
        },
        methods: {

//填完表单控制按钮颜色
            changeColor(){
                if(this.loginPwd.length >=1 && this.loginNewPwd.length >=1 && this.confirmLPwd.length >=1){
                    this.btnColor = false;
                }else{
                    this.btnColor = true;
                }
            },
            showPwd(cur) {
                switch (cur){
                    case 1:
                        this.pwd = !this.pwd;
                        break;
                    case 2:
                        this.newPwd = !this.newPwd;
                        break;
                    case 3:
                        this.confirmPwd = !this.confirmPwd;
                        break;        
                    default:
                        break;
                }
                
            },
            formSubmit(e){
                let res = e.detail.value
                if(res.loginNewPwd !== res.confirmLPwd){
                    uni.showToast({
                        icon:'none',
                        title:'确认新密码不一致',
                        duration:2000
                    })
                }else{
                    uni.showToast({
                        icon:'none',
                        title:'修改成功',
                        duration:2000,
                        success() {
                            uni.navigateTo({
                                url:'../../login/login'
                            })
                        }
                    })
                }
            }
        },
    }
</script>

<style>
    page{
        background: #101324;
        border-top: 1upx solid #2A304A;
    }
    .title{
        color: #9BABCF !important;
    }
    .box{
        width: 698upx;
        margin: 20upx auto;
    }
    .ct_view{
        width: 698upx;
        padding: 20upx 0;
        margin: 0 auto;
        font-size: 24upx;
        color: #FFFFFF;
        line-height: 50upx;
        border-bottom: 1upx solid #303650;
    }
    .pStyle{
        font-size: 28upx;
        color: #919CA7;
    }
    input{
        font-size: 28upx;
        color: #FFFFFF;
    }
    .input_view{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    button{
        width: 650upx;
        height: 98upx;
        font-size: 30upx;
        color: #FFFFFF;
        margin: 100upx auto;
        background: #9BABCF;
        line-height: 98upx;
        border-radius: 50upx;
    }
    .active{
        background-color: #00AFFE;
    }
</style>