no message

pages/login/index.vue

@@ -30,13 +30,7 @@
               <view class="login-send text-color-dominant sys-size-28 sys-weight-400" >忘记密码？</view>
             </view>
           </view>
-
-          <view class="input-agreement" @click="setIsConsent" :class="{'apply-shake':consentShake}">
-            <image class="agreement-agree" v-if="isConsent" src="/static/img/login/Checked1@3x.png" mode="aspectFill"></image>
-            <image class="agreement-agree" v-else src="/static/img/login/Checked2@3x.png" mode="aspectFill"></image>
-            <view class="agreement-text text-color-666 sys-size-24">已阅读并同意</view>
-            <view class="agreement-text text-color-dominant sys-size-24">《隐私政策》</view>
-          </view>
+          <agreement v-model="isConsent" ref="agreement"></agreement>
 
           <view
               class="input-but sys-background-dominant text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
@@ -66,9 +60,11 @@
   import tools from "@/service/tools";
   import {login} from "@/api/login";
   import EnInput from "@/components/en-from/en-input/index.vue";
+  import Agreement from "@/pages/login/model/agreement.vue";
 
   export default {
     components: {
+      Agreement,
       EnInput
 
     },
@@ -124,11 +120,12 @@
         }else if(type===3){
           this.codedShake=true
         }else if(type===4){
-          this.consentShake=true
+          this.$refs.agreement.setIsConsent()
         }
         setTimeout(()=>{
           this.phoneShake=false
           this.passwordShake=false
+          this.codedShake=false
         },500)
       },
       login() {
@@ -311,20 +308,7 @@
             text-align: center;
           }
         }
-        .input-agreement{
-          margin-top: 25rpx;
-          display: flex;
-          justify-content: flex-start;
-          align-items: center;
-          .agreement-agree{
-            width: 32rpx;
-            height: 32rpx;
-            transition: .5s ease;
-          }
-          .agreement-text{
-            margin-left: 18rpx;
-          }
-        }
+
         .input-but{
           margin-top: 40rpx;
           width: 100%;

pages/login/model/agreement.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="input-agreement" @click="setIsConsent" :class="{'apply-shake':consentShake}">
+    <image class="agreement-agree" v-if="isConsent" src="/static/img/login/Checked1@3x.png" mode="aspectFill"></image>
+    <image class="agreement-agree" v-else src="/static/img/login/Checked2@3x.png" mode="aspectFill"></image>
+    <view class="agreement-text text-color-666 sys-size-24">已阅读并同意</view>
+    <view class="agreement-text text-color-dominant sys-size-24">《隐私政策》</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name:'agreement',
+  data() {
+    return {
+      isConsent:false,
+      consentShake:false
+    };
+  },
+  methods:{
+    setIsConsent(){
+      this.isConsent=!this.isConsent
+      this.$emit('input', this.isConsent)
+    },
+    setConsentShake(){
+      this.consentShake=true
+      setTimeout(()=>{
+        this.consentShake=false
+      },500)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.input-agreement{
+  margin-top: 25rpx;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .agreement-agree{
+    width: 32rpx;
+    height: 32rpx;
+    transition: .5s ease;
+  }
+  .agreement-text{
+    margin-left: 18rpx;
+  }
+}
+</style>

pages/login/register.vue

@@ -1,16 +1,185 @@
 <template>
   <view class="page-box login-box">
-    <view class="login-form sys-radius-50 ">
+    <view class="login-form sys-radius-50 sys-background-fff">
+      <view class="from-box animate__animated animate__fadeIn">
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.nickname==='' && isShake)}" >
+          <en-input type="text" class="login-input" placeholder="请输入昵称"  v-model="accountData.nickname" ></en-input>
+        </view>
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.name==='' && isShake)}" >
+          <en-input type="text" class="login-input" placeholder="请输入姓名"  v-model="accountData.name" ></en-input>
+        </view>
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.phone==='' && isShake)}" >
+          <en-input type="number" class="login-input" placeholder="请输入手机号"  v-model="accountData.phone" ></en-input>
+        </view>
+        <view class="input-item  input-send sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.code==='' && isShake)}">
+          <en-input type="number" class="login-input" placeholder="请输入验证码"  v-model="loginData.code" maxlength="6"></en-input>
+          <view class="login-send text-color-dominant sys-size-28 sys-weight-400" @click="getVerifiedCode" v-if="timeNum<=0">发送验证码</view>
+          <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>{{ timeNum }} s</view>
+        </view>
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.password==='' && isShake)}" >
+          <en-input type="password" class="login-input" placeholder="请输入密码"  v-model="accountData.password" ></en-input>
+        </view>
+        <view class="input-item  sys-from-background-color sys-radius-30 animate__animated" :class="{'animate__shakeX':(accountData.passwordTwo==='' && isShake)}">
+          <en-input type="password" class="login-input" placeholder="请再次输入密码"  v-model="accountData.passwordTwo" ></en-input>
+        </view>
+      </view>
+      <agreement v-model="isConsent" ref="agreement"></agreement>
 
+      <view
+          class="input-but sys-background-dominant text-color-fff sys-size-30 sys-radius-100 sys-weight-600"
+          :class="{'sys-selected-but':isRegister,'sys-unselected-but':!isRegister}"
+          @click="register"
+      >注册</view>
+
+
+    </view>
+
+    <view class="register-box">
+      <view class="register-text sys-weight-400 sys-size-24 text-color-666">已有账号？</view>
+      <view class="register-text text-color-dominant sys-size-24 sys-weight-400" @click="goToUrl(1)">去登录</view>
     </view>
 
   </view>
 </template>
 
 <script>
+import EnInput from "../../components/en-from/en-input/index.vue";
+import tools from "../../service/tools";
+import {commonSend} from "../../api/common";
+import Agreement from "@/pages/login/model/agreement.vue";
+
 export default {
+  components: {Agreement, EnInput},
   data() {
-    return {};
+    return {
+      accountData:{
+        'openid':'',
+        'phone':'',
+        'password':'',
+        'passwordTwo':'',
+        'code':'',
+        'wxCode':'',
+        'name':'',
+        'nickname':'',
+        'head_img':'',
+      },
+      timeNum:0,
+      timer:null,
+      isAJAX:false,
+      isConsent: true,
+      isRegister: false,
+      isShake: false,
+    };
+  },
+  watch:{
+    'accountData': {
+      handler() {
+        this.verifyData(false)
+      },
+      deep: true
+    },
+  },
+  methods:{
+    goToUrl(type){
+      uni.navigateTo({
+        'url':'/pages/login/index'
+      })
+    },
+    verifyData(type){
+      let isRegister=true;
+      if(!this.accountData.nickname){
+        isRegister=false
+        if(type)tools.error('请输入昵称');
+      }
+      if(!this.accountData.name){
+        isRegister=false
+        if(type)tools.error('请输入姓名');
+      }
+      if(!this.accountData.password){
+        isRegister=false
+        if(type)tools.error('请输入密码');
+      }
+      if(!this.accountData.passwordTwo){
+        isRegister=false
+        if(type)tools.error('请确认密码');
+      }
+      if(this.accountData.password!==this.accountData.passwordTwo){
+        isRegister=false
+        if(type)tools.error('密码输入不一致');
+      }
+      if(!this.accountData.code){
+        isRegister=false
+        if(type)tools.error('请输入验证码');
+      }
+      this.isRegister=isRegister
+    },
+    register(){
+      this.verifyData(true)
+      if(!this.isRegister){
+        return ;
+      }
+      if(this.isAJAX){
+        return
+      }
+      this.isAJAX = true
+      uni.login({
+        provider: "weixin",
+        success: (loginRes) => {
+          this.accountData.wxCode=loginRes.code;
+          register(this.accountData).then((res)=>{
+            if(res.code===1){
+              tools.setLoginData(res.data,false)
+              tools.success('注册成功')
+              setTimeout(()=>{
+                this.isAJAX = false;
+                uni.reLaunch({
+                  url: '/pages/login/module/fill-in-data'
+                });
+              },1500)
+            }else {
+              this.isAJAX = false;
+              tools.error(res.msg)
+            }
+          })
+
+        },
+        fail: (loginRes) => {
+          this.isAJAX = false;
+          tools.error("获取授权信息失败");
+        },
+      });
+    },
+    getVerifiedCode() {
+      if (this.timeNum > 0) {
+        return;
+      }
+      if (this.accountData.phone === '') {
+        tools.error("请输入手机号码")
+        return;
+      }
+      let regPhone = /^(?:(?:\+|00)86)?1\d{10}$/;
+      if (!regPhone.test(this.accountData.phone)) {
+        tools.error("手机号码格式错误")
+        return;
+      }
+      commonSend({
+        'phone': this.accountData.phone,
+        'send_type': 'register'
+      }).then((res) => {
+        if (res.code === 1) {
+          tools.success(res.msg);
+          this.timeNum = 60;
+          this.timer = setInterval(() => {
+            this.timeNum--;
+            if (this.timeNum <= 0) {
+              clearInterval(this.timer);
+            }
+          }, 1000);
+        } else {
+          tools.error(res.msg);
+        }
+      })
+    },
   }
 }
 </script>
@@ -18,10 +187,55 @@ export default {
 <style lang="scss">
 @import "/static/css/login.css";
 .page-box{
+  padding-top: 370rpx;
   .login-form{
     margin: 0 30rpx;
     border-radius: 50rpx;
-    background-color: rgba(255,255,255,0.5);
+    padding: 40rpx 45rpx;
+    .input-item{
+      height: 96rpx;
+      padding: 28rpx 40rpx;
+      box-sizing: border-box;
+      margin-top: 30rpx;
+      .login-input{
+        width: 100%;
+      }
+    }
+    .input-item:first-child{
+      margin-top: 0;
+    }
+    .input-send{
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      .login-input{
+        width:calc(100% - 140rpx) ;
+      }
+      .login-send{
+        width: 140rpx;
+        text-align: center;
+      }
+    }
+    .input-but{
+      margin-top: 40rpx;
+      width: 100%;
+      height: 96rpx;
+      line-height: 96rpx;
+      text-align: center;
+    }
+  }
+  .register-box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 60rpx;
+    .register-text{
+      height: 34rpx;
+      line-height: 34rpx;
+    }
+    .register-text:last-child{
+      margin-right: 5rpx;
+    }
   }
 }