计算属性:当计算属性内绑定的值改变了,内部set会自动计算改变的值(想当与这里的phoneNo)
当手机号输入超过4位数字即显示获取验证码的按钮,否则禁用
<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
</view>
<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
<input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
<view class="action">
<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
</view>
</view>
<view class="padding text-center margin-top">
<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
@tap="onSMSLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
</button>
<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
@tap="loginWay=1">账户登录
</button>
</view>
computed: {
isSendSMSEnable() {
return this.smsCountDown <= 0 && this.phoneNo.length > 4;
},
getSendBtnText() {
if (this.smsCountDown > 0) {
return this.smsCountDown + '秒后发送';
} else {
return '发送验证码';
}
},
canSMSLogin() {
return this.userName.length > 4 && this.smsCode.length > 4;
},
canPwdLogin() {
return this.userName.length > 4 && this.password.length > 4;
},
},