uniapp 按鈕動態監聽

 

 

 

 

<template>
    <view class="main-container">
        <view class="list">
            <view class="item" :id="index">
                <view class="text">
                    輸入密碼
                </view>
                <view class="arrow">
                    <input value="" type="password" v-model="password1" placeholder="請輸入新密碼(6-20位數字)" class="input-class" placeholder-class="pcl"/>
                </view>
            </view>
            <view class="item" :id="index">
                <view class="text">
                    確認密碼
                </view>
                <view class="arrow">
                    <input value="" type="password" v-model="password2" placeholder="請再次輸入密碼" class="input-class" placeholder-class="pcl"/>
                </view>
            </view>
        </view>

        <view class="save-pwd" :class="!disabled ? 'active': ''" @tap="clickSave" :disabled="disabled">
            保存{{disabled}}
        </view>
    </view>
</template>

<script>
    const app = getApp()
    export default {
        data() {
            return {
                password1: '',
                password2: '',
                disabled:true,
            }
        },
        //監聽按鈕的顏色
        watch:{
            password1(val){
                this.OnBtnChange();
            },
            password2(val){
                this.OnBtnChange();
            },
        },

        methods:{
            // 改變按鈕狀態
            OnBtnChange(){
                if( this.password1 && this.password2 ){
                    this.disabled=false;
                    console.log('this.disabled',this.disabled)
                    return;
                }
                this.disabled=true;
            },

            clickSave() {
                if(this.password1.trim().length < 6) {
                    uni.showToast({
                        title:'密碼不足6位',
                        icon:'none'
                    })
                } else if(this.password1.trim().length > 20) {
                    uni.showToast({
                        title:'密碼超過20位',
                        icon:'none'
                    })
                }
                if(!this.password1 || !this.password2 || this.password1.trim() !== this.password2.trim()) {
                    uni.showToast({
                        title:'兩次密碼不一致',
                        icon:'none'
                    })
                    return false;
                }

                this.$http.post('updatepwd', {
                    userId: app.globalData.userId,
                    password: this.password1
                },{token: 'token'}).then(([error, res])=>{
                    if(res.data.code == 1) {
                        uni.showToast({
                            title:'密碼更新成功',
                            icon:'none',
                        })

                        setTimeout(() => {
                            uni.navigateBack({
                                delta:1
                            })
                        },1000)
                    }

                })
            }
        }
    }
</script>

<style>
    .main-container {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        background: #FFFFFF;
        opacity: 1;
        padding-top: 30rpx;
        border-top: 30rpx solid #FBFAF9;
    }
    .list {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-color: #FFFFFF;
    }
    .item {
        width: 670rpx;
        height: 140rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .item:last-child {
        border: 0;
    }
    .item .text {
        height: 140rpx;
        line-height: 140rpx;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 700;
        color: #000000;
        opacity: 0.8;

    }
    .item .arrow {
        height: 100%;
        flex: 1 0 516rpx;
        border-bottom: 2rpx solid rgba(0,0,0,0.1);
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .pcl {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        opacity: 0.4;
        text-indent: 20rpx;
    }
    .input-class {
        width: 450rpx;
        padding-left: 15rpx;
        font-size: 32rpx;
    }
    .save-pwd {
        width: 304rpx;
        height: 88rpx;
        background: #FFFFFF;
        border: 2rpx solid #989898;
        opacity: 1;
        border-radius: 46px;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #999999;
        opacity: 1;
        margin: 100rpx auto 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .active{
        background: #4DB046;
        color: #ffffff;
        border: 0;
    }
</style>