From 4d500e767fe380cf856ed8f44187cf9e9fa94137 Mon Sep 17 00:00:00 2001
From: liudan <18634735655@163.com>
Date: Thu, 19 Dec 2024 00:03:05 +0800
Subject: [PATCH] 1

---
 pages/login/components/main - 副本.vue | 354 +++++++++++++++++++++++
 pages/login/components/main.vue          | 158 +++++++++-
 static/phone.png                         | Bin 0 -> 455 bytes
 static/psw.png                           | Bin 0 -> 713 bytes
 4 files changed, 505 insertions(+), 7 deletions(-)
 create mode 100644 pages/login/components/main - 副本.vue
 create mode 100644 static/phone.png
 create mode 100644 static/psw.png

diff --git a/pages/login/components/main - 副本.vue b/pages/login/components/main - 副本.vue
new file mode 100644
index 0000000..3874bb2
--- /dev/null
+++ b/pages/login/components/main - 副本.vue	
@@ -0,0 +1,354 @@
+<template>
+  <view class="container">
+
+    <!-- 页面头部 -->
+    <view class="header">
+      <view class="title">
+        <text>手机号登录</text>
+      </view>
+      <view class="sub-title">
+        <text>未注册的手机号登录后将自动注册</text>
+      </view>
+    </view>
+    <!-- 表单 -->
+    <view class="login-form">
+      <!-- 手机号 -->
+      <view class="form-item">
+        <input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
+      </view>
+      <!-- 图形验证码 -->
+      <view class="form-item">
+        <input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
+        <view class="form-item--parts">
+          <view class="captcha" @click="getCaptcha()">
+            <image class="image" :src="captcha.base64"></image>
+          </view>
+        </view>
+      </view>
+      <!-- 短信验证码 -->
+      <view class="form-item">
+        <input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
+        <view class="form-item--parts">
+          <view class="captcha-sms" @click="handelSmsCaptcha()">
+            <text v-if="!smsState" class="activate">获取验证码</text>
+            <text v-else class="un-activate">重新发送({{ times }})秒</text>
+          </view>
+        </view>
+      </view>
+      <!-- 登录按钮 -->
+      <view class="login-button" @click="handleLogin">
+        <text>登录</text>
+      </view>
+    </view>
+
+    <!-- 微信授权手机号一键登录 -->
+    <!-- #ifdef MP-WEIXIN -->
+    <MpWeixinMobile v-if="isMpWeixinMobile" :isParty="isParty" :partyData="partyData" />
+    <!-- #endif -->
+
+  </view>
+</template>
+
+<script>
+  import store from '@/store'
+  import * as CaptchaApi from '@/api/captcha'
+  import * as Verify from '@/utils/verify'
+  import MpWeixinMobile from './mp-weixin-mobile'
+
+  // 倒计时时长(秒)
+  const times = 60
+
+  // 表单验证场景
+  const GET_CAPTCHA = 10
+  const SUBMIT_LOGIN = 20
+
+  export default {
+    components: {
+      MpWeixinMobile
+    },
+
+    props: {
+      // 是否存在第三方用户信息
+      isParty: {
+        type: Boolean,
+        default: () => false
+      },
+      // 第三方用户信息数据
+      partyData: {
+        type: Object
+      },
+      // 是否显示微信小程序端 一键授权手机号
+      isMpWeixinMobile: {
+        type: Boolean,
+        default: () => false
+      },
+    },
+
+    data() {
+      return {
+        // 正在加载
+        isLoading: false,
+        // 图形验证码信息
+        captcha: {},
+        // 短信验证码发送状态
+        smsState: false,
+        // 倒计时
+        times,
+        // 手机号
+        mobile: '',
+        // 图形验证码
+        captchaCode: '',
+        // 短信验证码
+        smsCode: ''
+      }
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    created() {
+      // 获取图形验证码
+      this.getCaptcha()
+    },
+
+    methods: {
+
+      // 获取图形验证码
+      getCaptcha() {
+        const app = this
+        CaptchaApi.image()
+          .then(result => app.captcha = result.data)
+      },
+
+      // 点击发送短信验证码
+      handelSmsCaptcha() {
+        const app = this
+        if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
+          app.sendSmsCaptcha()
+        }
+      },
+
+      // 表单验证
+      formValidation(scene = GET_CAPTCHA) {
+        const app = this
+        // 验证获取短信验证码
+        if (scene === GET_CAPTCHA) {
+          if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
+            return false
+          }
+        }
+        // 验证提交登录
+        if (scene === SUBMIT_LOGIN) {
+          if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
+            return false
+          }
+        }
+        return true
+      },
+
+      // 验证手机号
+      validteMobile(str) {
+        if (Verify.isEmpty(str)) {
+          this.$toast('请先输入手机号')
+          return false
+        }
+        if (!Verify.isMobile(str)) {
+          this.$toast('请输入正确格式的手机号')
+          return false
+        }
+        return true
+      },
+
+      // 验证图形验证码
+      validteCaptchaCode(str) {
+        if (Verify.isEmpty(str)) {
+          this.$toast('请先输入图形验证码')
+          return false
+        }
+        return true
+      },
+
+      // 验证短信验证码
+      validteSmsCode(str) {
+        if (Verify.isEmpty(str)) {
+          this.$toast('请先输入短信验证码')
+          return false
+        }
+        return true
+      },
+
+      // 请求发送短信验证码接口
+      sendSmsCaptcha() {
+        const app = this
+        app.isLoading = true
+        CaptchaApi.sendSmsCaptcha({
+            form: {
+              captchaKey: app.captcha.key,
+              captchaCode: app.captchaCode,
+              mobile: app.mobile
+            }
+          })
+          .then(result => {
+            // 显示发送成功
+            app.$toast(result.message)
+            // 执行定时器
+            app.timer()
+          })
+          .catch(() => app.getCaptcha())
+          .finally(() => app.isLoading = false)
+      },
+
+      // 执行定时器
+      timer() {
+        const app = this
+        app.smsState = true
+        const inter = setInterval(() => {
+          app.times = app.times - 1
+          if (app.times <= 0) {
+            app.smsState = false
+            app.times = times
+            clearInterval(inter)
+          }
+        }, 1000)
+      },
+
+      // 点击登录
+      handleLogin() {
+        const app = this
+        if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
+          app.submitLogin()
+        }
+      },
+
+      // 确认登录
+      submitLogin() {
+        const app = this
+        app.isLoading = true
+        store.dispatch('Login', {
+            smsCode: app.smsCode,
+            mobile: app.mobile,
+            isParty: app.isParty,
+            partyData: app.partyData,
+            refereeId: store.getters.refereeId
+          })
+          .then(result => {
+            // 显示登录成功
+            app.$toast(result.message)
+            // 相应全局事件订阅: 刷新上级页面数据
+            uni.$emit('syncRefresh', true)
+            // 跳转回原页面
+            setTimeout(() => app.onNavigateBack(1), 2000)
+          })
+          .catch(err => {
+            // 跳转回原页面
+            if (err.result.data.isBack) {
+              setTimeout(() => app.onNavigateBack(1), 2000)
+            }
+          })
+          .finally(() => app.isLoading = false)
+      },
+
+      /**
+       * 登录成功-跳转回原页面
+       */
+      onNavigateBack(delta = 1) {
+        const pages = getCurrentPages()
+        if (pages.length > 1) {
+          uni.navigateBack({
+            delta: Number(delta || 1)
+          })
+        } else {
+          this.$navTo('pages/index/index')
+        }
+      }
+
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    padding: 100rpx 60rpx;
+    min-height: 100vh;
+    background-color: #fff;
+  }
+
+  // 页面头部
+  .header {
+    margin-bottom: 60rpx;
+
+    .title {
+      color: #191919;
+      font-size: 54rpx;
+    }
+
+    .sub-title {
+      margin-top: 20rpx;
+      color: #b3b3b3;
+      font-size: 28rpx;
+    }
+  }
+
+  // 输入框元素
+  .form-item {
+    display: flex;
+    align-items: center;
+    padding: 18rpx;
+    border-bottom: 1rpx solid #f3f1f2;
+    margin-bottom: 30rpx;
+    height: 96rpx;
+
+    &--input {
+      font-size: 28rpx;
+      letter-spacing: 1rpx;
+      flex: 1;
+      height: 100%;
+    }
+
+    &--parts {
+      min-width: 100rpx;
+    }
+
+    // 图形验证码
+    .captcha {
+      height: 60rpx;
+
+      .image {
+        display: block;
+        width: 192rpx;
+        height: 100%;
+      }
+    }
+
+    // 短信验证码
+    .captcha-sms {
+      font-size: 28rpx;
+      line-height: 50rpx;
+      padding-right: 20rpx;
+
+      .activate {
+        color: $main-bg;
+      }
+
+      .un-activate {
+        color: #9e9e9e;
+      }
+    }
+  }
+
+
+  // 登录按钮
+  .login-button {
+    width: 100%;
+    height: 86rpx;
+    margin-top: 80rpx;
+    background: linear-gradient(to right, $main-bg, $main-bg2);
+    color: $main-text;
+    border-radius: 80rpx;
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+    letter-spacing: 5rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+</style>
\ No newline at end of file
diff --git a/pages/login/components/main.vue b/pages/login/components/main.vue
index 3874bb2..7730ba7 100644
--- a/pages/login/components/main.vue
+++ b/pages/login/components/main.vue
@@ -4,14 +4,48 @@
     <!-- 页面头部 -->
     <view class="header">
       <view class="title">
-        <text>手机号登录</text>
+        <text>欢迎使用</text>
       </view>
-      <view class="sub-title">
+    <!--  <view class="sub-title">
         <text>未注册的手机号登录后将自动注册</text>
-      </view>
+      </view> -->
     </view>
+	<view class="tabs">
+		<view class="tabItem" v-for="item in tabList" @click="changeTab(item)" :key="item.id">
+			<text :class="item.id==activeIndex?'activeText':''">{{item.name}}</text>
+			<view class="flag" v-if="activeIndex==item.id"></view>
+		</view>
+		
+	</view>
+	<!-- 密码登录 -->
+	<view class="mimaForm" v-if="activeIndex==1">
+		<view class="formItem">
+			<image src="../../../static/phone.png" mode=""></image>
+			<u-input v-model="value" type="text"  height="90" />
+		</view>
+		<view class="formItem">
+			<image src="../../../static/psw.png" mode=""></image>
+			<u-input v-model="value" type="password" height="90" />
+		</view>
+		<!-- <u-checkbox-group class="checkBox" > -->
+		<view class="xinxi">
+			<u-checkbox v-model="checked" active-color="#F92404" @change="changeHandle">
+				<view class="infoText">
+					我已认真阅读并同意<text>《服务协议》</text>、<text>《隐私政策》</text>
+				</view>
+			</u-checkbox>
+		</view>
+		<view class="loginBtn">
+			登录
+		</view>
+		<view class="tool">
+			<text class="forget">忘记密码</text>
+			<text class="register">注册账号</text>
+		</view>
+		<!-- </u-checkbox-group> -->
+	</view>
     <!-- 表单 -->
-    <view class="login-form">
+    <view class="login-form" v-if="activeIndex==2">
       <!-- 手机号 -->
       <view class="form-item">
         <input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
@@ -43,7 +77,7 @@
 
     <!-- 微信授权手机号一键登录 -->
     <!-- #ifdef MP-WEIXIN -->
-    <MpWeixinMobile v-if="isMpWeixinMobile" :isParty="isParty" :partyData="partyData" />
+    <!-- <MpWeixinMobile v-if="isMpWeixinMobile" :isParty="isParty" :partyData="partyData" /> -->
     <!-- #endif -->
 
   </view>
@@ -99,7 +133,13 @@
         // 图形验证码
         captchaCode: '',
         // 短信验证码
-        smsCode: ''
+        smsCode: '',
+		activeIndex:1,
+		tabList:[
+			{id:1,name:'密码登录'},
+			{id:2,name:'验证码登录'},
+		],
+		checked:false
       }
     },
 
@@ -112,7 +152,13 @@
     },
 
     methods: {
-
+		changeHandle(val){
+			
+			this.checked = val;
+		},
+		changeTab(item){
+			this.activeIndex=item.id
+		},
       // 获取图形验证码
       getCaptcha() {
         const app = this
@@ -229,6 +275,9 @@
             mobile: app.mobile,
             isParty: app.isParty,
             partyData: app.partyData,
+			squied_smsCode:null,
+			squied_mobile:'',
+			password:'',
             refereeId: store.getters.refereeId
           })
           .then(result => {
@@ -351,4 +400,99 @@
     justify-content: center;
     align-items: center;
   }
+  .tabs{
+	  display: flex;
+	  text{
+		
+		  font-family: Source Han Sans SC;
+		  font-weight: 400;
+		  font-size: 32rpx;
+		  color: #999999;
+	  }
+	  .flag{
+		  width: 110rpx;
+		  height: 8rpx;
+		  background: #F92404;
+		  border-radius: 4rpx;
+		  margin: 12rpx auto;
+	  }
+	  .activeText{
+		 
+		  font-family: Source Han Sans SC;
+		  font-weight: 400;
+		  font-size: 32rpx;
+		  color: #222222;
+	  }
+	  .tabItem{
+		  margin-right: 60rpx;
+	  }
+  }
+  
+</style>
+<style lang="scss">
+.mimaForm{
+    .formItem{
+	  position: relative;
+	  margin-top: 20rpx;
+	  background: #F7F7F7;
+	  border-radius: 45px;
+	  border: 1px solid #EAEAEA;
+	  padding-left: 60rpx;
+	  padding-right: 30rpx;
+	  image{
+		  width:30rpx;
+		  height:30rpx;
+		  position: absolute;
+		 
+		  z-index: 1;
+		  top: 50%;
+		  transform: translateY(-50%);
+		  left: 20rpx;
+	  }
+    }
+	.xinxi{
+		margin-top:43rpx;
+		.infoText{
+			
+			font-family: Source Han Sans SC;
+			font-weight: 400;
+			font-size: 24rpx;
+			color: #999999;
+			text{
+				color: #F92404;
+			}
+		}
+	}
+	.loginBtn{
+		padding:30rpx 0;
+		background: #F92404;
+		border-radius: 45px;
+		font-family: Source Han Sans SC;
+		font-weight: 400;
+		font-size: 34rpx;
+		color: #FFFFFF;
+		text-align: center;
+		margin-top:60rpx;
+	}
+	.tool{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top:29rpx;
+		.forget{
+		
+			font-family: Source Han Sans SC;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #999999;
+		}
+		.register{
+			
+			font-family: Source Han Sans SC;
+			font-weight: 400;
+			font-size: 28rpx;
+			color: #F92404;
+		}
+	}
+}
 </style>
\ No newline at end of file
diff --git a/static/phone.png b/static/phone.png
new file mode 100644
index 0000000000000000000000000000000000000000..87882bace8ed1dc4626dc927f08a4686f9742b71
GIT binary patch
literal 455
zcmV;&0XY7NP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px$fk{L`R7gwhmpx7cF%X5{fPw-m3J@hfT`oX{Xef|q;2NGpf+8n~a)MB7v6E{g
z6{4Vlih`DozY;-#Hbh8akWoSbcCy}tZe3bqfA;8k{D$BdBC-Y`2CxfY&J~kk?i0Wz
zfMaHU{vA)Q4chH?M^z62^Z<NhfVe^y04xzv*BEn@2`nNn00wEAZr1DdezVzh9?*B7
zMx&vvR;wIE(F1^aW?l^er_8*O^S0m1MC1`b6bkM!^ZJzFC!6j9Y_sST%}`uLs)KbV
zB89kqvQ~&|RO)Q4E}m2IoF--<ZvlB@=B<glj|mWwdjQL!-{K;Gi)p|B_5i$xf>)-5
zj+VcMg8Qnv?}HPOb&*h2uL~uja{%Q~u(yCDNwPyk*8UEN$QWa8JT`f@zmtgE0;mjO
zSIlhv_n(nh)!rM6$TfiNA?b{n4`vDW+S@peE2UEDR8<G6dQz*^?mXaJ_I9kHx2D~~
xTxLJFp-+;eLqs!aVN|tStyVL)F#q1PeF3&AIWCL*^DY1Y002ovPDHLkV1oGF!;Js{

literal 0
HcmV?d00001

diff --git a/static/psw.png b/static/psw.png
new file mode 100644
index 0000000000000000000000000000000000000000..d0838b687fd0c42111047b3cdca089c8e2733d1d
GIT binary patch
literal 713
zcmV;)0yh1LP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00001b5ch_0Itp)
z=>Px%gGod|R7gwh);(wxK@<n@|JxAd<OEUiBaMY(r9m-;f?Ap)qETW{M9(6(Z=w(o
zv=Icw>l7_6a`WyE!4EJoRltvkm7s!xg~Ttgv<OB;h!{A??UR9=1iahb3zwwO>6U#n
zKj!W1dqY^DL2+GGC2MV`=XnPKYyz+pz=W#418~n6b02`lT`v}Ft!*Qs8vr(kEc^z*
zF=if(gGa(5(g|P?z#;&Fs*VuR69D6?x`v3_0qmK^CW)xa_x(pvcqm*b6k3BIcm-fF
zfcF3nSKCpsSln7Jmj?iBRMip@ZDHn*VR$GkA};{!0PvwyDsAuU>zk;xSbu;2ist6#
zmjKoSc*e}TW(8YocN5W5H@T^)X=hJQ&-1AC<#M@p&+|rHoacFM>2&&atvNM!Y^}Xa
zL}vhuGIMJbT6v$(=Rc|Hh9C$o_V)H(s2diMVF3G7wP1|#<HFY3J4AF8zyLEJnGO8d
zomN%7VvIRk2Yj7~PO9p#F~<E7RY%QKi-;=-9YmDzegAx1SVXP@I1ONknY$xlYwaZ>
zIxr(}9e^Z&Zvei;g#oMuu-sKO0G})KRCT}@lc_xa*|CWHoQCQ!>I(hJ%&V%wKL9LK
zRhO!_buAelyp4!X0T^TEmN2-(81t}Eu(h^}h=w9z0DGDFK^QC|E2pNW63Jw8GL=ew
zkBB|wx>rMBYwaKrbraDo-}h7V28+mD*DwIwWabn9;h7l_k;Z-Fe=pUQQw`uYGasL~
z!<EfuTM~)Hl5)BHi<!q70;}r6R4!G`c%B#QiW;Y^20`Gi#;%{&tktfKxl8(7jd5mP
vU9Cx61F(Ot)aibF?k{+*z{nfOe8ay1OP^#eh;H;P00000NkvXXu0mjfn3qAy

literal 0
HcmV?d00001