uniapp-uni-easyinput使用

代码如下

<template><view class="login":style="{'paddingTop': menuContentTop}"><view class="title">{{passwordTel ? passwordTel : isLogin ?'登录':'注册'}}</view><view class="helloTip" v-show="isLogin && !passwordTel">您好，欢迎来到顶医！</view><view class="content"><u--form
                :model="formData":rules="rules"
                ref="refFormData"><u-form-item prop="phone" borderBottom><u--input placeholder="请输入手机号" v-model="formData.phone" border="none"><template slot="suffix" v-if="!isLogin || passwordTel"><u-code
                                ref="uCode"
                                @change="codeChange"
                                seconds="60"
                                changeText="X秒重新获取"></u-code><u-button @tap="getCode":text="tips":plain="true" size="small" style="border: none;background: none;"></u-button></template></u--input></u-form-item><u-form-item prop="code" borderBottom v-if="!isLogin || passwordTel"><u--input v-model="formData.code" placeholder="请输入验证码" border="none"></u--input></u-form-item></u--form><uni-forms
                :modelValue="uniFormData":rules="uniRules"
                ref="uniFormData"
                validate-trigger="blur"><uni-forms-item name="password"><uni-easyinput type="password"
                            v-model="uniFormData.password":placeholder="passwordTel ? '请输入新密码' : '请输入密码'"
                            placeholderStyle="color: rgb(192, 196, 204); font-size: 15px;":inputBorder="false"></uni-easyinput></uni-forms-item><uni-forms-item name="confirmPassword" borderBottom v-if="!isLogin || passwordTel"><uni-easyinput type="password"
                        v-model="uniFormData.confirmPassword":placeholder="passwordTel ? '请再次输入新密码' : '请再次输入密码'"
                        placeholderStyle="color: rgb(192, 196, 204); font-size: 15px;":inputBorder="false"></uni-easyinput></uni-forms-item></uni-forms></view><view class="btn"><u-button type="primary":text="passwordTel ? '提交' : isLogin ? '登录' : '注册'" @click="handelSubmit"></u-button><view class="text" v-if="!passwordTel"><text @click="changePassword">忘记密码</text><text class="setColor" @click="toggleStatus">{{isLogin ?'新用户注册':'已有账号？去登录'}}</text></view><view class="text" v-if="passwordTel === '密码找回'"><text class="setColor" @click="backLogin">返回登录</text></view></view><u-toast ref="uToast"/></view></template><script>import{ mapState }from'vuex'import{ sendSms, registerByApp, updatePassword }from"@/api/user.js"exportdefault{name:"Login",options:{styleIsolation:'shared',// 解除样式隔离},data(){constvalidateCode=(rule, value, callback)=>{const reg =/^[+-]?(0|([1-9]\d*))(\.\d+)?$/gif(!reg.test(value)){callback(newError('请输入6位数字验证码'))}callback()}return{formData:{phone:'',code:'',},rules:{phone:[{required:true,message:'请输入手机号',trigger:['blur'],},{validator:(rule, value, callback)=>{return uni.$u.test.mobile(value);},message:'请输入正确手机号',trigger:['blur'],}],code:[{required:true,len:6,message:'请输入6位数字验证码',trigger:['blur'],},{validator: validateCode,trigger:['blur'],},],},isLogin:true,tips:'',checkboxValue1:[],changeLoginStatus:null,// 挑战到登录页是否改变登录/注册状态uniFormData:{password:'',confirmPassword:'',},uniRules:{password:{rules:[{required:true,errorMessage:'请输入密码'}],},confirmPassword:{rules:[{required:true,errorMessage:'请再次输入密码'},{validateFunction:(rule,value,data,callback)=>{if(this.uniFormData.confirmPassword !==this.uniFormData.password){callback('两次输入的密码不一致');}return}},],},}}},computed:{...mapState("user",['passwordTel','menuContentTop','userOpenId'])},watch:{changeLoginStatus:{handler(newVal){if(newVal)this.isLogin =false},immediate:true}},onReady(){// 兼容微信小程序this.$refs.refFormData.setRules(this.rules)this.$refs.uniFormData.setRules(this.uniRules)},onLoad(data){this.changeLoginStatus = data.changeLoginStatus
        },onShow(){this.$common._removeStorage('token')},methods:{codeChange(text){this.tips = text;},getCode(){if(!this.formData.phone){this.$common._showToast('请输入手机号')return}if(this.$refs.uCode.canGetCode){this.$refs.uCode.start();sendSms({phone:this.formData.phone }).then(res=>{// 这里此提示会被this.start()方法中的提示覆盖this.$refs.uToast.show({message:'验证码已发送',})})}},// 切换登录/注册及其他toggleStatus(){this.reset()this.isLogin =!this.isLogin
                this.$store.commit('user/CHANGE_PASSWORD_TEL','')},// 返回登录backLogin(){this.toggleStatus()this.isLogin =true},// 修改密码changePassword(){this.reset()this.$store.commit('user/CHANGE_PASSWORD_TEL','密码找回')},// 登录/注册handelSubmit(){this.$refs.refFormData.validate().then(res=>{this.$refs.uniFormData.validate().then(res=>{// 校验通过if(this.isLogin){if(this.passwordTel){// 忘记密码，修改密码this.updatePassword()}else{this.$store.dispatch('user/loginByAccount',{phone:this.formData.phone,password:this.uniFormData.password })}}else{this.registerByApp()}})}).catch(err=>{this.$refs.uniFormData.validate().then()})},// 注册registerByApp(){registerByApp({userPhone:this.formData.phone,verifyCode:this.formData.code,userPwd:this.uniFormData.password,openId:this.userOpenId
                }).then(res=>{this.$store.dispatch('user/loginByAccount',{phone:this.formData.phone,password:this.uniFormData.password })})},// 忘记密码updatePassword(){updatePassword({userPhone:this.formData.phone,verifyCode:this.formData.code,userPwd:this.uniFormData.password,}).then(res=>{this.$common._showToast('密码修改成功')if(this.passwordTel ==='修改密码'){// 个人中心-修改密码this.$store.commit('user/CHANGE_PASSWORD_TEL','')this.$common._jumpToUrl('../personalCenter/personalCenter',2)}else{// 登录-忘记密码this.isLogin =truethis.$store.commit('user/CHANGE_PASSWORD_TEL','')this.reset()}}).catch(err=>{this.reset()})},// 重置reset(){this.$refs.refFormData.resetFields()this.$refs.refFormData.clearValidate()this.$refs.uniFormData.clearValidate()this.uniFormData.password =''this.uniFormData.confirmPassword =''}}}</script><style lang="scss" scoped>
    @import'@/static/css/form.scss';/deep/{.content {.u-button:before {background: none;}}
        uni-label {
            font-size: 24rpx;color: #00000099;
            uni-text {color: #1683FB;}}.uni-easyinput__content-input {
            padding-left:0!important;}
        uni-radio-group {display: flex;
            align-items: center;}/* #ifdef MP-WEIXIN */
        radio-group {display: flex;
            align-items: center;}/* #endif */.uni-forms-item {
            border-bottom: 1px solid rgba(214,215,217,0.8);
            margin-bottom:0;padding: 10rpx 0;}.uni-forms-item__error.msg--active {position: initial;
            margin-left: 45px;}}.login {
        box-sizing: border-box;
        min-height: 100vh;.title {color: #3D3D3D;
            font-weight:700;
            font-size: 40rpx;
            box-sizing: border-box;padding: 120rpx 76rpx 0;}.helloTip {opacity:0.3;padding:0 76rpx;
            margin-top: 26rpx;}.content {
            margin-top: 100rpx;
            box-sizing: border-box;padding:0 76rpx;}.btn {
            margin-top: 128rpx;
            box-sizing: border-box;padding:0 76rpx;.text {
                margin-top: 36rpx;color: #3D3D3D;display: flex;
                justify-content: space-between;.setColor {color: #1683FB;}}}}</style>