【记录27】vant UI 登录+注册

vant UI组件的写的一个移动端登录注册的案例

<template>
<!-- 登录 --><div :style="background_login" style="height:100vh;"><div style="height:35vh;line-height:35vh;text-align:center;"><span style="font-size:1.5rem;margin-bottom:15vh;color:#fff;"><b>某某系统管理平台</b></span></div><!-- 登录 --><div class="dv_content" v-show="loginShow"><van-form @submit="onSubmit" style="margin-top:0vh;"><van-field class="vanbcell"v-model="username"name="username"label=""borderplaceholder="手机号"clearable:rules="[{ required: true, message: '请填写用户名' }]"><template #left-icon><van-icon name="manager" size="25" color="#A2A2A2" /></template></van-field><van-field class="vanbcell" style="margin-top:20px;"v-model="password"name="password"show-passwordright-icon="eye"label=""placeholder="密码":type="!passwordStatus?'password':'text'"@click-right-icon="passwordStatus=!passwordStatus":rules="[{ required: true, message: '请填写密码' }]"><template #left-icon><van-icon name="lock"  size="25" color="#AAA" /></template></van-field><div style="margin: 16px;"><van-button  v-show="subShow" round block size="normal" type="info" native-type="submit">提交</van-button><van-button v-show="subShowGo" loading round block size="normal" disabled type="info" loading-text="登录中..."></van-button></div></van-form><div @click="registerHandle()"  style="text-align:center;"> <span style="color:block;font-family:'仿宋';">注册</span></div></div><!-- 注册 --><div v-show="registerShow" class="register"><van-form @submit="onSubmitRegister" style="margin-top:5vh;"><van-field class="vanbcell"v-model="username"name="username"requiredlabel="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-field class="vanbcell"v-model="phone_number"requiredtype="tel"name="phone_number"label="手机号"placeholder="手机号":rules="[{ pattern: phoneReg, required: true, message: '请填写正确的手机号' }]"/><van-field class="vanbcell"v-model="password"requiredname="password"label="密码"right-icon="eye"placeholder="密码":type="!passwordStatus2?'password':'text'"@click-right-icon="passwordStatus2=!passwordStatus2":rules="[{ pattern: passwordReg, required: true, message: '请填写数字大小写字母特殊字符混合的8~12位密码' }]"/><van-field class="vanbcell"v-model="agin_password"requiredname="agin_password"label="确认密码"right-icon="eye":type="!passwordStatus3?'password':'text'"@click-right-icon="passwordStatus3=!passwordStatus3"placeholder="确认密码":rules="[{ validator, required: true, message: '请与上面密码保持一致' }]"/><div style="margin: 16px;"><van-button class="but" v-show="subShow" round block type="info" native-type="submit">注册提交</van-button><van-button class="but" v-show="subShowGo" loading round block disabled type="info" loading-text="登录中..."></van-button></div></van-form><div @click="returnHandle()" style="text-align:center;"> <span style="color:block;fontt-family:'仿宋';" >返回登录</span></div></div></div>
</template>
<script>
import { Notify,Toast,Dialog } from 'vant'
// import { login } from '../api/login.js'
export default {name: "",data() {return {username: '',password: '',phone_number: '',agin_password: '',user_company: '',background_login: {backgroundImage:"url(" + require("../images/008.png") + ")",backgroundRepeat:"np-repeat",backgroundSize:"100% 100%",},passwordStatus: false,  //密码显影passwordStatus2: false,  //passwordStatus3: false, //subShowGo: false,subShow: true,loginShow: true,registerShow: false,phoneReg: /^(13|14|15|16|17|18|19)[0-9]\d{8}$/,passwordReg: /^(?![A-Za-z0-9]+$)(?![a-z0-9_!@#$%^&*()+.]+$)(?![A-Za-z_!@#$%^&*()+.]+$)(?![A-Z0-9_!@#$%^&*()+.]+$)[a-zA-Z0-9_!@#$%^&*()+.]{8,12}$/}},created() {},mounted() {// this.$router.go()},methods: {validator(val) { //手机号验证if(val !== this.password) {return false}},//登录提交onSubmit(values) {console.log(values);this.subShowGo = truethis.subShow = falselet params = valuesconsole.log(params, 'login');console.log(sessionStorage.getItem('base_url_3'));this.$http.post(sessionStorage.getItem('base_url_3')+'/api/account/login/',params, { timeout:3000 }).then((res) => {console.log(res.data);if(res.data.code == 200) {sessionStorage.setItem('token',res.data.data)Notify({ type: 'success', message: '登录成功' });console.log(res.data.name);sessionStorage.setItem('loginUser',res.data.name)this.$router.push('/admin')Toast.success('登录成功');}else if(res.data.code == 400) {Toast.fail(res.data.msg);console.log(res.data.msg);}else{Toast.fail(res.data.msg);}this.subShowGo = falsethis.subShow = true}).catch((err)=>{console.log('请求失败'+err);Toast.fail('请求失败');this.subShowGo = falsethis.subShow = true})},//返回登录returnHandle() {console.log('0000');this.loginShow = truethis.registerShow = false},//注册registerHandle() {this.loginShow = falsethis.registerShow = true},//注册提交onSubmitRegister(values) {console.log(values);const params = {name: values.username,phone_number: values.phone_number,password: values.password,user_company: values.user_company,user_addr: '',user_contact: '',user_contact_phone: '',user_charge: '',user_tax: '',user_level: ''}console.log(params);console.log(sessionStorage.getItem('base_url_4'));// this.$http.post(sessionStorage.getItem('base_url_4')+'/api/register-user-info/',params).then(res => {this.$http.post(sessionStorage.getItem('base_url_4')+'/api/self-register-user-info/',params).then(res => {console.log(res);if(res.data.code == 200){Notify({type:'success', message:'注册成功'})Dialog.alert({title: '温馨提示',message: '注册信息已提交，等待管理员审核',}).then(() => {// on close});}else{Toast.fail(res.data.msg)// Dialog.confirm({//     title: '温馨提示',//     message: '注册信息已提交，等待管理员审核',//     beforeClose,// })}}).catch(err => {console.log(err,'请求失败');Toast.fail('请求失败')})}}
}
</script>
<style>.dv_content{position: relative;top: 0vh;;background-color: rgba(255,255,255,0.1);text-align: -webkit-center;text-align: center;}.register {position: relative;top: -10vh;;background-color: rgba(255,255,255,0.1);text-align: -webkit-center;text-align: center;}.vanbcell {position: relative;display: -webkit-box;display: -webkit-flex;display: flex;box-sizing: border-box;width: 100%;padding: 10px 16px;overflow: hidden;color: #323233;font-size: 14px;line-height: 24px;background-color: rgba(255, 255, 255, 0.274);}.butn {color: black;}/* .but {margin: 20px 50px;} */
</style>

有用，直接拿走不谢

【记录27】vant UI 登录+注册相关推荐

c#网页设计 UI —登录注册界面
打包了资源设置了下载积分突然发现比较自己下载过人家的设置积分自己真是设置的最低分(/捂脸 )--初出茅庐多多指教这几天学过了c#知识点前段时间做了坦克大战最近写了个极简易的界面-包括页面 ...
Vue项目实战——【基于 Vue3.x + Vant UI】实现一个多功能记账本（登录注册页面，验证码）
基于 Vue3.x + Vant UI 的多功能记账本(四) 文章目录基于 Vue3.x + Vant UI 的多功能记账本(四) 项目演示 1.登录注册页面 2.图片验证码 3.修改 axios ...
Lance老师UI系列教程第三课-QQ登录注册界面的实现（android-2012最新版）
分类: android UI教程2012-08-06 22:37 3731人阅读评论(6) 收藏举报 uiandroidqqlayoutbutton UI系列教程第三课:腾讯登录注册界面的实现今 ...
UI设计灵感|App的登录注册页面案例参考
良好的交互细节是每一个优秀 App 的共同品质,而多数 App 被用户抛弃就是因为登录注册页面的问题,只有从用户场景和视角来思考产品,便能设计出打动人心的 App. 集设网www.ijishe.com ...
闲云旅游网03（基于vue+element ui）登录注册功能开发
登录功能项目GitHub地址:https://github.com/q2419068625/xianyun 新建登录注册页的布局新建了登录的表单绑定了数据到data rules表单的验证提交数 ...
基于Servlet+JSP+JavaBean开发模式的用户登录注册
基于Servlet+JSP+JavaBean开发模式的用户登录注册一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复 ...
javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
javaweb学习总结(二十二)：基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
javaweb学习总结——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...

【记录27】vant UI 登录+注册

【记录27】vant UI 登录+注册相关推荐

最新文章

热门文章