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-coderef="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"export default {name: "Login",options: {styleIsolation: 'shared', // 解除样式隔离},data() {const validateCode = (rule, value, callback) => {const reg = /^[+-]?(0|([1-9]\d*))(\.\d+)?$/gif(!reg.test(value)){callback(new Error('请输入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.isLoginthis.$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>