登录流程优化

pages/login/modules/agreement.js

@@ -1,60 +0,0 @@
-// pages/login/modules/agreement.js
-Component({
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-        isAgree: {
-            type: Boolean
-        },
-        callBack: {
-            type: Function
-        }
-    },
-
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-        /* 修改授权 */
-        isAgreeChange() {
-            let isAgree = !this.data.isAgree
-            this.setData({
-                isAgree
-            })
-            this.triggerEvent("callBack", isAgree)
-            wx.setStorageSync('isAgree', isAgree);
-        },
-        checkTheAgreement() {
-            wx.showLoading({
-                title: '加载中...',
-            })
-            wx.downloadFile({
-                url: 'https://yossys80658.obs.cn-east-2.myhuaweicloud.com/system/E%E8%AE%A2%E5%8D%95%E9%9A%90%E7%A7%81%E4%BF%9D%E6%8A%A4.docx',
-                success: (res) => {
-                    wx.openDocument({
-                        filePath: res.tempFilePath,
-                        success:(s)=>{
-                            wx.hideLoading();
-
-                        },
-                        fail: (err) => {
-                            wx.hideLoading();
-                            wx.showToast({
-                                title: '读取失败,请稍后再试',
-                                icon: "none"
-                            })
-                        }
-                    })
-                },
-                fail: (err) => {
-                    wx.hideLoading();
-                    wx.showToast({
-                        title: '读取失败,请稍后再试',
-                        icon: "none"
-                    })
-                }
-            })
-        }
-    }
-})

pages/login/modules/agreement.json

@@ -1,6 +0,0 @@
-{
-    "component": true,
-    "usingComponents": {
-        "van-checkbox": "@vant/weapp/checkbox/index"
-    }
-}

pages/login/modules/agreement.scss

@@ -1,19 +0,0 @@
-/* 登录协议 */
-.agreement {
-	display: flex;
-	width: 100%;
-	justify-content: center;
-
-	.con {
-			width: 316rpx;
-			text-align: center;
-			font-size: 24rpx !important;
-			font-family: PingFang SC-Regular, PingFang SC;
-			color: #666666 !important;
-			margin-left: -20rpx;
-
-			text {
-					color: #3874F6;
-			}
-	}
-}

pages/login/modules/agreement.wxml

@@ -1,3 +0,0 @@
-<view class="agreement">
-    <van-checkbox icon-size="28rpx" label-class='con' value="{{ isAgree }}" bind:change="isAgreeChange">已阅读并同意<text catchtap="checkTheAgreement">《隐私协议》</text></van-checkbox>
-</view>

pages/login/modules/login.js

@@ -4,6 +4,7 @@ function loginMsg(res) {
 	wx.removeStorageSync('siteP');
 	wx.removeStorageSync('banner_list');
 	wx.removeStorageSync('templetList');
+	wx.setStorageSync('isAgree', true)
 	wx.setStorageSync('account_list', res.account_list);
 	if (res.account_list.length == 1) {
 		wx.setStorageSync('userrole', res.account_list[0].usertype == 1 ? '业务员' : '经销商');

pages/login/modules/phone.js

@@ -1,7 +1,7 @@
 let loginMsg = require("./login"),
     md5 = require("../../../utils/md5"),
     _Http = getApp().globalData.http,
-    Check = require("../../../utils/Check"),
+    deleteMark = require("../../../utils/Check"),
     downCount = null;
 
 Component({
@@ -13,7 +13,8 @@ Component({
         phonenumber: '',
         password: '',
         showText: "获取验证码",
-        memory: true
+        memory: true,
+        focus: false
     },
     lifetimes: {
         attached: function () {
@@ -21,14 +22,19 @@ Component({
             this.setData({
                 ...wx.getStorageSync('loginMsg')
             });
-            setTimeout(this.allowOrNot, 300)
+            setTimeout(() => {
+                this.allowOrNot();
+            }, 100)
         }
     },
     methods: {
         /* 获取验证码 */
         getPassword() {
+            this.setData({
+                focus: false
+            })
             if (this.data.showText != "获取验证码") return;
-            if (!Check.CheckPhoneNumber(this.data.phonenumber)) return;
+            if (!deleteMark.CheckPhoneNumber(this.data.phonenumber)) return;
             _Http.getpassword({
                 "phonenumber": this.data.phonenumber,
                 "systemclient": "wechatsaletool"
@@ -40,7 +46,8 @@ Component({
                 })
                 if (res.code != 1) return;
                 this.setData({
-                    showText: 30
+                    showText: 30,
+                    focus: true
                 })
                 downCount = setInterval(() => {
                     let showText = this.data.showText;

pages/login/modules/phone.wxml

@@ -4,8 +4,8 @@
 </van-cell>
 <van-cell>
     <text slot='icon' class="iconfont icon-a-biaoqianlanxiaoxixuanzhong" />
-    <input class="input" type="number" bindinput="inputChange" data-name="password" value="{{password}}" placeholder="请输入验证码" />
-    <view slot='right-icon' class="right-icon" catchtap="getPassword">
+    <input class="input" focus='{{focus}}' type="number" bindinput="inputChange" data-name="password" value="{{password}}" placeholder="请输入验证码" />
+    <view slot='right-icon' class="right-icon" style="opacity:{{phonenumber.length==11?'1':'.5'}} ;" catchtap="{{phonenumber.length==11?'getPassword':''}}">
         {{showText=='获取验证码'?showText:showText+'s'}}
     </view>
 </van-cell>

pages/login/phone.js

@@ -1,13 +1,10 @@
-import Toast from '@vant/weapp/toast/toast';
 Page({
-
-	/**
-	 * 页面的初始数据
-	 */
 	data: {
 		isAgree: false,
 		disabled: true, //是否禁用
 		loading: false, //登陆中
+		register: null,
+		showDialog: false
 	},
 	onLoad(options) {
 		if (wx.getStorageSync('isAgree')) this.setData({
@@ -17,12 +14,55 @@ Page({
 			devCount: 0
 		})
 	},
+	/* 修改授权 */
+	isAgreeChange() {
+		let isAgree = !this.data.isAgree
+		this.setData({
+			isAgree
+		})
+		wx.setStorageSync(isAgree)
+	},
+	/* 查看隐私协议 */
+	checkTheAgreement() {
+		wx.showLoading({
+			title: '加载中...',
+		})
+		wx.downloadFile({
+			url: 'https://yossys80658.obs.cn-east-2.myhuaweicloud.com/system/E%E8%AE%A2%E5%8D%95%E9%9A%90%E7%A7%81%E4%BF%9D%E6%8A%A4.docx',
+			success: (res) => {
+				wx.openDocument({
+					filePath: res.tempFilePath,
+					success: (s) => {
+						wx.hideLoading();
+					},
+					fail: (err) => {
+						wx.hideLoading();
+						wx.showToast({
+							title: '读取失败,请稍后再试',
+							icon: "none"
+						})
+					}
+				})
+			},
+			fail: (err) => {
+				wx.hideLoading();
+				wx.showToast({
+					title: '读取失败,请稍后再试',
+					icon: "none"
+				})
+			}
+		})
+	},
 	/* 微信登录 */
 	wechatLogin() {
-		if (!this.data.isAgree) return Toast({
-			message: '请阅读并勾选用户协议',
-			position: 'bottom'
-		});
+		if (this.data.loading) return
+		if (!this.data.isAgree) {
+			this.data.register = this.wechatLogin
+			this.setData({
+				showDialog: true
+			})
+			return
+		}
 		wx.login({
 			success(res) {
 				if (res.code) {
@@ -48,22 +88,24 @@ Page({
 	/* 用户登录 */
 	userLogin() {
 		if (this.data.loading || this.data.disabled) return;
-		if (!this.data.isAgree) return Toast({
-			message: '请阅读并勾选用户协议',
-			position: 'bottom'
-		});
+		if (!this.data.isAgree) {
+			this.data.register = this.userLogin
+			this.setData({
+				showDialog: true
+			})
+			return
+		}
 		this.setData({
 			loading: true
 		})
 		this.selectComponent('#login').handleLogin();
 	},
-	/* 授权 */
-	agreementChange({
-		detail
-	}) {
+	onConfirm() {
 		this.setData({
-			isAgree: detail
+			showDialog: false,
+			isAgree: true
 		})
+		this.data.register()
 	},
 	todev() {
 		if (this.data.devCount == 5) {

pages/login/phone.json

@@ -1,10 +1,10 @@
 {
     "navigationBarTitleText": "账户登录",
     "usingComponents": {
-        "Agreement": "./modules/agreement",
         "van-divider": "@vant/weapp/divider/index",
         "account": "./modules/account",
-        "van-toast": "@vant/weapp/toast/index",
-        "phone": "./modules/phone"
+        "phone": "./modules/phone",
+        "van-dialog": "@vant/weapp/dialog/index",
+        "van-checkbox": "@vant/weapp/checkbox/index"
     }
 }

pages/login/phone.scss

@@ -30,4 +30,36 @@ page {
     font-size: 28rpx;
     font-family: PingFang SC-Regular, PingFang SC;
     color: #FFFFFF;
+}
+
+.dialog {
+    display: flex;
+    justify-content: center;
+    padding: 80rpx 0;
+
+    .navigator {
+        color: var(--assist);
+        font-weight: bold;
+    }
+}
+
+/* 登录协议 */
+.agreement {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+
+    .con {
+        width: 316rpx;
+        text-align: center;
+        font-size: 24rpx !important;
+        font-family: PingFang SC-Regular, PingFang SC;
+        color: #666666 !important;
+        margin-left: -20rpx;
+
+        text {
+            color: #3874F6;
+            font-weight: bold;
+        }
+    }
 }

pages/login/phone.wxml

@@ -2,24 +2,28 @@
 	<image src="/static/image/logo.png" bindtap="todev" />
 </view>
 
-<!-- 手机号登录/账号登录  -->
-<phone id='login' wx:if="{{false}}" />
-<account wx:else id='login' />
-
+<!-- 手机号登录  -->
+<phone id='login' />
+<!-- 账号登录 -->
+<account id='login' />
 <view style="width: 100vw; text-align: center;margin-top: 60rpx;margin-bottom: 40rpx;">
-    <van-button disabled='{{disabled}}' custom-class='login' bindtap="userLogin" loading='{{loading}}' loading-text="登陆中..." color='linear-gradient(90deg, #3874F6 0%, #095DE0 100%);'>登录</van-button>
+	<van-button disabled='{{disabled}}' custom-class='login' bindtap="userLogin" loading='{{loading}}' loading-text="登陆中..." color='linear-gradient(90deg, #3874F6 0%, #095DE0 100%);'>登录</van-button>
 </view>
-
 <!-- 隐私协议 -->
-<Agreement isAgree='{{isAgree}}' bindcallBack='agreementChange' />
-
+<view class="agreement">
+	<van-checkbox icon-size="28rpx" label-class='con' value="{{ isAgree }}" bind:change="isAgreeChange">已阅读并同意<text catchtap="checkTheAgreement">《隐私协议》</text></van-checkbox>
+</view>
 <!-- 快捷登录 -->
-<block >
-    <view style="height: 100rpx;" />
-    <van-divider contentPosition="center">其他登录方式</van-divider>
-    <view style="width: 100%; text-align: center;">
-        <text class="iconfont icon-a-wodebangdingweixin" style="font-size: 100rpx; color:#07C160;" bindtap="wechatLogin" />
-    </view>
+<block>
+	<view style="height: 100rpx;" />
+	<van-divider contentPosition="center">其他登录方式</van-divider>
+	<view style="width: 100%; text-align: center;">
+		<text class="iconfont icon-a-wodebangdingweixin" style="font-size: 100rpx; color:#07C160;" bindtap="wechatLogin" />
+	</view>
 </block>
 
-<van-toast id="van-toast" />
+<van-dialog use-slot show='{{ showDialog }}' confirmButtonText='同意并获取' confirm-button-color='var(--assist)' show-cancel-button bind:confirm='onConfirm'>
+	<view class="dialog">
+		请阅读并同意 <navigator class="navigator" url="#" bind:tap="checkTheAgreement">《隐私协议》</navigator>
+	</view>
+</van-dialog>