智慧养老login代码

最新推荐文章于 2024-07-15 22:17:25 发布

饿饿00

最新推荐文章于 2024-07-15 22:17:25 发布

阅读量458

点赞数 7

文章标签：前端

本文链接：https://blog.csdn.net/m0_74283983/article/details/135475113

版权

文章描述了一个基于uni-app开发的应用，展示了手机验证码和账号密码登录的界面设计，包括输入验证和用户隐私政策确认，以及登录过程中的接口调用和错误处理。

摘要由CSDN通过智能技术生成

<template>
   <view class="">
       <view class="titleImg" style="text-align: center;">
           <image src="../../static/uni.png" mode="" style="width: 150px;height: 150px;"></image>
       </view>
       <view class="main">
           <view class="phoneLogin" v-show="flag">
               <view class="titleText">
                   <h1 style="font-weight: 500;">手机验证码登录</h1>
                   <p style="color: #aaa;font-size: 14px;margin-top: 10px;">欢迎使用智慧养老</p>
               </view>
               <view class="userData">
                   <p>手机号码</p>
                   <u-input v-model="phoneNum" class="inputClass" type="text" border="" placeholder="+86 | 请输入手机号" />
                   <p>验证码</p>
                   <view class="capt">
                       <u-input v-model="captNum" class="inputClass" type="text" border="" placeholder="请输入验证码" />
                       <button @click="getCapt()">获取验证码</button>
                   </view>
               </view>
           </view>
           <view class="pwdLogin" v-show="!flag">
               <view class="titleText">
                   <h1 style="font-weight: 500;">账号密码登录</h1>
                   <p style="color: #aaa;font-size: 14px;margin-top: 10px;">欢迎使用智慧养老</p>
               </view>
               <view class="userData">
                   <p>账号</p>
                   <u-input v-model="idNum" class="inputClass" type="text" border="" placeholder="请输入账号" />
                   <p>密码</p>
                   <u-input v-model="pwdNum" class="inputClass" type="password" border="" placeholder="输入密码" />
                   <span @click="forget()">忘记密码?</span>
               </view>
           </view>
           <view class="login">
               <u-radio-group>
                   <u-checkbox shape="square" v-model="checked">
                       我已阅读并同意
                       <span @click="policy()">《用户隐私政策》</span>
                   </u-checkbox>
               </u-radio-group>
               <u-button type="primary" style="margin-top: 10px;" @click="login()">登录</u-button>
               <view class="router">
                   <a href="javascript:0" @click="flag=!flag,text = flag?'账号密码登录':'免密登录'">{{text}}</a>
                   <a href="javascript:0" @click="gotoReg()">注册新用户</a>
               </view>
           </view>
       </view>
   </view>
</template>

           },
           gotoReg() {
               uni.navigateTo({
                   url: '/pages/reg/reg'
               })
           },
           login() {
               if (!this.flag) {
                   uni.request({
                       url: 'http://127.0.0.1:5502/loginWithoutCode',
                       data: {
                           "username": this.idNum,
                           "password": this.pwdNum
                       },
                       method: 'POST',
                       success: (res) => {
                           console.log(this.idNum,this.pwdNum)
                           console.log(res)
                           if (res.data.code == 200) {
                               this.token = 'xixi'
                               uni.switchTab({
                                   url: '/pages/index/index'
                               })
                           } else {
                               uni.showToast({
                                   icon: 'error',
                                   title: res.data.msg
                               })
                           }
                       }
                   })
               } else {
                   uni.request({
                       url: 'http://127.0.0.1:5502/mobileLogin',
                       data: {
                           "userName": this.phoneNum,
                           "code": this.captNum
                       },
                       method: 'POST',
                       success: (res) => {
                           console.log(res)
                           if (res.data.code == 200) {
                               uni.switchTab({
                                   url: '/pages/index/index'
                               })
                           } else {
                               uni.showToast({
                                   icon: 'error',
                                   title: res.data.msg
                               })
                           }
                       }
                   })
               }

           },
           forget() {
               uni.navigateTo({
                   url: '/pages/login/forget'
               })
           }
       }
   }
</script>

   .main {
       margin-top: 40px;
       padding: 20px;
   }

   .userData {
       margin-top: 40px;
       position: relative;
   }

   .userData .inputClass {
       margin-top: 10px;
       background-color: #F2F7FB;
       width: 100%;
       height: 35px;
       margin-bottom: 10px;
   }

   .userData .capt {
       position: relative;
   }

   .userData button {
       border: 0px;
       background-color: transparent;
       position: absolute;
       font-size: 10px;
       color: #559DF1;
       right: 0;
       top: 5px;
   }

   .userData button::after {
       border: none;
   }

   .userData span {
       position: absolute;
       right: 0;

color: #aaa;
}

   .login {
       margin-top: 10px;
   }

   .login span {
       color: #3489F0;
   }

   .router {
       margin-top: 10px;
       display: flex;
       justify-content: space-between;
   }

   .router a {
       text-decoration: none;
       color: #3489F0;
   }
</style>