ソースを参照

短信验证码登录

zhengjinyi 2 年 前
コミット
abe24679f4
4 ファイル変更401 行追加287 行削除
  1. 21 4
      common/css/iconfont.scss
  2. 0 86
      mixins/cmSysMixins.js
  3. 352 197
      pages/login/login.vue
  4. 28 0
      services/user.service.js

+ 21 - 4
common/css/iconfont.scss

@@ -1,8 +1,14 @@
+// @font-face {
+//   font-family: "iconfont"; /* Project id 1519039 */
+//   src: url('/common/fonts/iconfont.woff2?t=1668502271099') format('woff2'),
+//        url('/common/fonts/iconfont.woff?t=1668502271099') format('woff'),
+//        url('/common/fonts/iconfont.ttf?t=1668502271099') format('truetype');
+// }
 @font-face {
   font-family: "iconfont"; /* Project id 1519039 */
-  src: url('/common/fonts/iconfont.woff2?t=1668502271099') format('woff2'),
-       url('/common/fonts/iconfont.woff?t=1668502271099') format('woff'),
-       url('/common/fonts/iconfont.ttf?t=1668502271099') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_1519039_ow9hswsn3r.woff2?t=1671427765583') format('woff2'),
+       url('//at.alicdn.com/t/c/font_1519039_ow9hswsn3r.woff?t=1671427765583') format('woff'),
+       url('//at.alicdn.com/t/c/font_1519039_ow9hswsn3r.ttf?t=1671427765583') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +19,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-duanxin:before {
+  content: "\e747";
+}
+
+.icon-mima:before {
+  content: "\e748";
+}
+
+.icon-shouji:before {
+  content: "\e746";
+}
+
 .icon-biaoqian1:before {
   content: "\e742";
 }
@@ -624,4 +642,3 @@
 .icon-wodebeifenx:before {
   content: "\e611";
 }
-

+ 0 - 86
mixins/cmSysMixins.js

@@ -1,86 +0,0 @@
-// 统计数据
-import Vue from 'vue'
-const defaultParams = {
-    pagePath: '', //页面路径
-    accessDuration: 0, //浏览时长初始值为 0
-    pageType: '', //页面类型
-    pageLabel: '', //页面标签
-    userId: 0, //用户Id
-    productId: 0 //商品Id
-}
-const cmSysMixins = {
-    data() {
-        return {
-            cmSysParams:Object.assign({}, defaultParams),
-            clearTimeSet: null,
-            enterTime:null,
-            outTime:null
-        }
-    },
-    onLoad() {
-        let that = this
-        // this.cmSysVitaSetTime() // 页面加载完成后开始计时
-        // uni.addInterceptor('navigateTo', { //监听跳转
-        //     success(e) {
-        //         console.log('navigateTo============')
-        //         that.cmSysVitaMixins()
-        //     }
-        // })
-        // uni.addInterceptor('redirectTo', { //监听关闭本页面跳转
-        //     success(e) {
-        //         console.log('redirectTo============')
-        //         that.cmSysVitaMixins()
-        //     }
-        // })
-        // uni.addInterceptor('switchTab', { //监听tabBar跳转
-        //     success(e) {
-        //         console.log('switchTab============')
-        //         that.cmSysVitaMixins()
-        //     }
-        // })
-        // uni.addInterceptor('navigateBack', { //监听tabBar跳转
-        //     success(e) {
-        //         console.log('navigateBack============')
-        //         that.cmSysVitaMixins()
-        //     }
-        // })
-    },
-    methods: {
-        async cmSysVitaSetTime() {
-            //设置定时器
-            const userInfo = await this.$api.getStorage()
-            const pages = getCurrentPages()
-            const currentPage = pages[pages.length - 1]
-            this.cmSysParams.pagePath = `/${currentPage.route}`
-            this.cmSysParams.userId = userInfo ? userInfo.userId : 0
-            this.clearTimeSet = setInterval(() => {
-                this.cmSysParams.accessDuration++
-            }, 1000)
-        },
-        cmSysVitaMixins() { // 上送后台接口,将浏览时长等信息传到后台,离开当前路由后调用
-            console.log(`页面路径:${this.cmSysParams.pagePath}`, `停留:${this.cmSysParams.accessDuration}s`,
-                `标签:${this.cmSysParams.pageLabel}`)
-            console.log('上送用户参数', this.cmSysParams)
-            // this.userRecordStatistics(this.cmSysParams)
-            this.cmSysParams = Object.assign({}, defaultParams)
-            clearInterval(this.clearTimeSet) // 离开页面后清除定时器
-        },
-        userRecordStatistics(cmSysParams){// 上送用户行为记录接口
-            this.UserService.userRecordStatistics(cmSysParams)
-			    .then(response => {
-			        console.log('<-------上送用户行为记录成功------>')
-			    })
-			    .catch(error => {
-			        console.log('<-------上送用户行为记录异常------>')
-			    })
-        },
-    //     onHide(){
-			 // this.cmSysVitaMixins()
-    //     },
-    //     onUnload(){
-    //         this.cmSysVitaMixins()
-    //     }
-    }
-}
-
-export default cmSysMixins

+ 352 - 197
pages/login/login.vue

@@ -3,249 +3,404 @@
 		<view class="login-main">
 			<image class="logo" src="https://static.caimei365.com/app/img/icon/logo@2x.png" mode=""></image>
 		</view>
-		<view class="login-form">
+		<view class="login-form" v-if="loginType === 0">
 			<view class="login-input">
-				<input type="text" 
-					   v-model="params.mobileOrEmail"  
-					   maxlength="30" 
-					   class="input" 
-					   placeholder="请输入邮箱/手机号"
+				<text class="iconfont icon-shouji"></text>
+				<input
+					type="text"
+					v-model="codeParams.mobile"
+					maxlength="11"
+					class="input"
+					placeholder="请输入邮箱/手机号"
+					@input="handleMobile"
 				/>
 			</view>
 			<view class="login-input">
-				<input v-show="isShowEye" type="text" v-model="params.password"  maxlength="18" class="input" placeholder="请输入密码" autocomplete="new-password"/>
-				<input v-show="!isShowEye" type="password" v-model="params.password"  :password="true" maxlength="18" class="input" placeholder="请输入密码" autocomplete="new-password"/>
-				<view class="iconfont" :class="isShowEye ? iconEyen : iconEyes"  @click="passwordClick"></view>
+				<text class="iconfont icon-duanxin"></text>
+				<input
+					type="text"
+					v-model="codeParams.code"
+					maxlength="6"
+					class="input code"
+					placeholder="请输入短信验证码"
+					@input="handleSmsCode"
+				/>
+				<view class="code-btn" @click.stop="handleMobileCode" >
+					{{ mobileCodeText }}
+				</view>
+			</view>
+			<view class="login-input link">
+				<view class="login-reg" @click.stop="navigatorRegirst('/pages/login/register-select')">免费注册</view>
+				<view class="login-pwd" @click.stop="handeleLogin(1)">密码登录</view>
+			</view>
+		</view>
+		<view class="login-form" v-if="loginType === 1">
+			<view class="login-input">
+				<text class="iconfont icon-shouji"></text>
+				<input
+					type="text"
+					v-model="accountParams.mobileOrEmail"
+					maxlength="30"
+					class="input"
+					placeholder="请输入邮箱/手机号"
+					@input="handleMobileOrEmail"
+				/>
+			</view>
+			<view class="login-input">
+				<text class="iconfont icon-mima"></text>
+				<input
+					type="text"
+					v-model="accountParams.password"
+					maxlength="18"
+					class="input"
+					placeholder="请输入密码"
+					autocomplete="new-password"
+					@input="handlePassword"
+				/>
 			</view>
 			<view class="login-input link">
 				<view class="login-reg" @click.stop="navigatorRegirst('/pages/login/register-select')">免费注册</view>
-				<view class="login-pwd" @click.stop="this.$api.navigateTo('/pages/login/password')">忘记密码?</view>
+				<view class="login-pwd" @click.stop="handeleLogin(0)">验证码登录</view>
 			</view>
 		</view>
-		<view class="login-btn"  @click="confirmLogin">账号登录</view>
-		<view class="login-btn-last" @click.stop="this.$api.navigateTo(`/pages/login/logincode?data=${getOption}`)">邀请码登录></view>
+		<button class="login-btn" :disabled="isDisabled" :class="isDisabled ? 'disabled' : ''"  @click="handleSubLogin">登录</button>
+		<view class="login-text" v-if="loginType === 1" @click.stop="this.$api.navigateTo('/pages/login/password')">忘记密码?</view>
+		<view class="login-btn-last" @click.stop="this.$api.navigateTo(`/pages/login/logincode?data=${getOption}`)"
+			>邀请码登录></view
+		>
 	</view>
 </template>
 
 <script>
-	import { mapState,mapMutations } from 'vuex'
-	import authorize from '@/common/config/authorize.js' 
-	import wxLogin from '@/common/config/wxLogin.js'
-	export default{
-		data() {
-			return{
-				isShowEye:false,
-				iconEyes:'icon-yanjing_yincang_o',
-				iconEyen:'icon-yanjing_xianshi_o',
-				getOption:'',	//页面传递参数
-				params:{
-					mobileOrEmail:'',//用户登录账号
-					password:'',//用户登录密码	
-					unionId:''
-				}
-			}
+import { mapState, mapMutations } from 'vuex'
+import authorize from '@/common/config/authorize.js'
+import wxLogin from '@/common/config/wxLogin.js'
+export default {
+	data() {
+		return {
+			getOption: '', //页面传递参数
+			accountParams: {
+				mobileOrEmail: '', //用户登录账号
+				password: '', //用户登录密码
+				unionId: ''
+			},
+			codeParams:{
+				mobile: '', //用户登录手机号
+				code:'',
+				unionId: ''
+			},
+			smsCodeParams:{
+				mobile: '', //用户登录手机号
+			},
+			loginType: 0,
+			isMobileDisabled: false, //手机验证码按钮控制
+			mobilCount: '', //倒计时
+			mobileCodeText: '获取验证码',
+			mobilTime: null,
+			isDisabled:true
+		}
+	},
+	onLoad(option) {
+		this.getOption = JSON.stringify(option)
+	},
+	computed: {
+		...mapState(['hasLogin', 'isWxAuthorize', 'isLoginType'])
+	},
+	methods: {
+		...mapMutations(['login']),
+		handleMobileOrEmail(e){//
+			this.accountParams.mobileOrEmail = e.detail.value
+			this.handldeCheckInput()
 		},
-		onLoad(option) {
-			this.getOption = JSON.stringify(option)
+		handlePassword(e){
+			this.accountParams.password = e.detail.value
+			this.handldeCheckInput()
 		},
-		computed: {
-			...mapState(['hasLogin','isWxAuthorize','isLoginType'])
+		handleMobile(e){
+			this.codeParams.mobile = this.smsCodeParams.mobile =  e.detail.value
+			this.handldeCheckInput()
 		},
-		methods:{
-			...mapMutations(['login']),
-			async confirmLogin(){
-				if( this.params.mobileOrEmail == ''){
-					this.$util.msg('请输入账户名',2000)
-					return
-				}
-				if( this.params.password == ''){
-					this.$util.msg('请输入密码',2000)
-					return
+		handleSmsCode(e){
+			this.codeParams.code = e.detail.value
+			this.handldeCheckInput()
+		},
+		handldeCheckInput(){
+			// 监听控制按钮
+			if(this.loginType === 0){
+				if(this.codeParams.mobile !== "" && this.codeParams.code !==""){
+					this.isDisabled =false;
+				}else{
+					this.isDisabled =true;
 				}
-				this.AorganizationLogin()
-			},
-			AorganizationLogin(){
-				this.UserService.AorganizationLogin(this.params)
-					.then(response =>{
-						if(response.code === 0){
-							this.storeUpdataeStatus(response.data)
-							this.$api.navigateTo(`/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&codeType=${response.code}`)
-						}else if(response.code === -3){
-							this.$util.modal('','您的企业账号审核未通过,请修改资料','前往修改','',false,() =>{
-								this.$store.commit('updateStatus',response.data)
-								this.$api.navigateTo('/pages/login/apply-supplier')
-							})
-						}else{
-							this.$util.msg(response.msg,2000)
-						}
-					})
-			},
-			storeUpdataeStatus(data){
-				uni.setStorageSync('token',data.token)
-				this.$store.commit('updateStatus',data)
-				this.login(data)
-			},
-			navigatorRegirst(url){
-				// 友盟埋点注册入口点击事件
-				if(process.env.NODE_ENV != 'development'){
-					this.$uma.trackEvent('Um_Event_Regiest', {
-						Um_Key_PageName: '立即注册',
-						Um_Key_SourcePage: '登录页面',
-					})
+			}else{
+				if(this.accountParams.mobileOrEmail !== "" && this.accountParams.password !==""){
+					this.isDisabled =false;
+				}else{
+					this.isDisabled =true;
 				}
-				this.$api.navigateTo(url)
-			},
-			passwordClick() { //密码显隐操作
-				this.isShowEye = !this.isShowEye
-			},
-			async InitAuthorize(){ //是否已授权 0:为取消授权 1:为已授权 2:为未操作
-				wxLogin.wxLoginQuick()	
 			}
 		},
-		onShow() {
-			this.$api.getStorage().then((resolve) =>{
-				this.params.unionId = resolve.unionId ?  resolve.unionId : 0
+		handeleLogin(type) {
+			this.loginType = type
+		},
+		handleMobileCode() {
+			// 获取短信验证码
+			if( this.smsCodeParams.mobile == ''){
+				this.$util.msg('请输入手机号',2000);
+				return
+			}
+			if(!this.$reg.isMobile(this.smsCodeParams.mobile)){
+				this.$util.msg('请输入正确的手机号',2000);
+				return
+			}
+			this.isMobileDisabled = true;
+			this.userLoginCode(this.smsCodeParams)
+		},
+		userLoginCode(params){
+			// 获取登录短息验证码
+			this.UserService.userLoginCode(params).then(response =>{
+				this.$util.msg('获取验证码成功',2000);
+				const TIME_COUNT = 60;
+			 	if (!this.mobilTime) {
+			   		this.mobilCount = TIME_COUNT;
+			   		this.isMobileDisabled = true;
+			   		this.mobilTime = setInterval(() => {
+			   			if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
+			     			this.mobilCount--
+			     			this.mobileCodeText = this.mobilCount +'s'
+			    		} else {
+			         		this.isMobileDisabled = false;
+			         		clearInterval(this.mobilTime)
+			         		this.mobilTime = null
+							this.mobileCodeText = '获取验证码'
+			    		}
+			   		},1000)
+			  	}
+			}).catch( error =>{
+				this.$util.msg(error.msg,2000);
+				this.isMobileDisabled = false;
+			})
+		},
+		async handleSubLogin() {
+			const _storage = await this.$api.getStorage()
+			this.accountParams.unionId = this.codeParams.unionId = _storage.unionId ? _storage.unionId : ''
+			if(this.loginType === 0){
+				this.userCodeLogin()
+			}else{
+				this.userPasswordLogin()
+			}
+		},
+		userCodeLogin(){
+			// 短信验证码登录
+			this.UserService.userCodeLogin(this.codeParams).then(response => {
+				this.updataeStatus(response)
+			})
+		},	
+		userPasswordLogin() {
+			// 账号密码登录
+			this.UserService.AorganizationLogin(this.accountParams).then(response => {
+				this.updataeStatus(response)
 			})
-			this.InitAuthorize()
+		},
+		updataeStatus(response) {// 处理返回数据
+			if (response.code === 0) {
+				uni.setStorageSync('token', response.data.token)
+				this.$store.commit('updateStatus', response.data)
+				this.login(response.data)
+				this.$api.navigateTo(
+					`/pages/login/bindwechat?data=${JSON.stringify(this.getOption)}&codeType=${response.code}`
+				)
+			} else if (response.code === -3) {
+				this.$util.modal('', '您的企业账号审核未通过,请修改资料', '前往修改', '', false, () => {
+					this.$store.commit('updateStatus', response.data)
+					this.$api.navigateTo('/pages/login/apply-supplier')
+				})
+			} else {
+				this.$util.msg(response.msg, 2000)
+			}
+		},
+		navigatorRegirst(url) {
+			// 友盟埋点注册入口点击事件
+			if (process.env.NODE_ENV != 'development') {
+				this.$uma.trackEvent('Um_Event_Regiest', {
+					Um_Key_PageName: '立即注册',
+					Um_Key_SourcePage: '登录页面'
+				})
+			}
+			this.$api.navigateTo(url)
+		},
+		async checkedAuthorize() {
+			//是否已授权 0:为取消授权 1:为已授权 2:为未操作
+			wxLogin.wxLoginQuick()
 		}
+	},
+	onShow() {
+		this.checkedAuthorize()
 	}
+}
 </script>
 
 <style lang="scss">
-	.login{
+.login {
+	width: 100%;
+	height: auto;
+	.model-warp.none {
+		display: none;
+	}
+	.model-warp.show {
+		display: block;
+	}
+	.login-main {
 		width: 100%;
-		height: auto;
-		.model-warp.none{
-			display: none;			
-		}
-		.model-warp.show{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: 189rpx;
+		padding: 60rpx 0 40rpx 0;
+		margin-bottom: 70rpx;
+		.logo {
+			width: 467rpx;
+			height: 189rpx;
 			display: block;
 		}
-		.login-main{
+	}
+	.login-input {
+		width: 600rpx;
+		height: 88rpx;
+		padding: 24rpx 0;
+		margin: 0 auto;
+		margin-bottom: 30rpx;
+		background: #ffffff;
+		position: relative;
+		box-sizing: border-box;
+		border-bottom: 1px solid #e1e1e1;
+		.input {
 			width: 100%;
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			height: 189rpx;
-			padding:60rpx 0 40rpx 0;
-			margin-bottom: 70rpx;
-			.logo{
-				width:467rpx;
-				height: 189rpx;
-				display: block;
-			}
-		}
-		.login-input{
-			width: 600rpx;
-			height: 88rpx;
-			padding: 24rpx 0;
-			margin: 0 auto;
-			margin-bottom: 30rpx;
-			background: #FFFFFF;
-			position: relative;
+			height: 100%;
+			background: #ffffff;
+			font-size: $font-size-28;
+			line-height: 88rpx;
+			color: #333333;
+			padding-left: 100rpx;
 			box-sizing: border-box;
-			border-bottom: 1px solid #e1e1e1;
-			.input{
-				width: 100%;
-				height: 100%;
-				background: #FFFFFF;
-				font-size: $font-size-28;
-				line-height: 88rpx;
-				color: #333333;
-			}
-			.iconfont{
-				position: absolute;
-				right: 0;
-				top: 0;
-				font-size: 44rpx;
-				color: #999999;
-				font-weight: bold;
-				z-index: 99;
-				width: 96rpx;
-				height: 96rpx;
-				line-height: 96rpx;
-				text-align: center;
-			}
-			&.link{
-				background: #FFFFFF;
-				margin-bottom: 40rpx;
-				padding: 0 0;
-				line-height: 40rpx;
-				font-size: $font-size-28;
-				border-bottom: none;
-				.login-reg{
-					float: left;
-					color: $color-system;
-				}
-				.login-pwd{
-					float: right;
-					color: $text-color;
-				}
+			&.code{
+				padding-right: 200rpx;
 			}
 		}
-		.login-btn{
-			width: 600rpx;
-			height: 88rpx;
-			border-radius: 44rpx;
-			font-size: $font-size-28;
-			line-height: 88rpx;
-			color: #FFFFFF;
-			margin: 0 auto;
+		.code-btn{
+			width: 200rpx;
+			height: 80rpx;
+			position: absolute;
+			right: 0;
+			top: 0;
+			line-height: 80rpx;
 			text-align: center;
-			background: $btn-confirm;
+			color: $color-system;
+			font-size: $font-size-26;
 		}
-		.login-btn-last{
-			width: 600rpx;
-			height: 86rpx;
-			font-size: $font-size-28;
+		.iconfont {
+			position: absolute;
+			left: 0;
+			top: 0;
+			font-size: 48rpx;
+			color: #333333;
+			width: 100rpx;
+			height: 88rpx;
 			line-height: 88rpx;
-			color: $color-system;
-			margin: 0 auto;
-			text-align: center;
-			margin-top: 100rpx;
+			text-align: left;
 		}
-		.login-tel{
-			width: 702rpx;
+		&.link {
+			background: #ffffff;
+			margin-bottom: 40rpx;
+			padding: 0 0;
+			line-height: 40rpx;
 			font-size: $font-size-28;
-			line-height: 80rpx;
-			margin: 0 auto;
-			color: $text-color;
-			text-align: center;
-			margin-top: 150rpx;
+			border-bottom: none;
+			.login-reg {
+				float: left;
+				color: $color-system;
+			}
+			.login-pwd {
+				float: right;
+				color: $text-color;
+			}
 		}
-		.model-authorization{
-			width: 100%;
-			height: 100%;
-			position: fixed;
-			top: 0;
+	}
+	.login-btn {
+		width: 600rpx;
+		height: 88rpx;
+		border-radius: 44rpx;
+		font-size: $font-size-28;
+		line-height: 88rpx;
+		color: #ffffff;
+		margin: 0 auto;
+		text-align: center;
+		background: $btn-confirm;
+		&.disabled{
+			background: #E2E2E2;
+		}
+	}
+	.login-text {
+		width: 600rpx;
+		height: 88rpx;
+		font-size: $font-size-28;
+		line-height: 88rpx;
+		color: #333333;
+		margin: 0 auto;
+		text-align: center;
+	}
+	.login-btn-last {
+		width: 600rpx;
+		height: 86rpx;
+		font-size: $font-size-28;
+		line-height: 88rpx;
+		color: $color-system;
+		margin: 0 auto;
+		text-align: center;
+		margin-top: 100rpx;
+	}
+	.login-tel {
+		width: 702rpx;
+		font-size: $font-size-28;
+		line-height: 80rpx;
+		margin: 0 auto;
+		color: $text-color;
+		text-align: center;
+		margin-top: 150rpx;
+	}
+	.model-authorization {
+		width: 100%;
+		height: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 999;
+		.authorization {
+			width: 518rpx;
+			height: 320rpx;
+			position: absolute;
+			background: rgba(255, 255, 255, 0.7);
 			left: 0;
-			z-index: 999;
-			.authorization{
-				width: 518rpx;
-				height: 320rpx;
+			right: 0;
+			bottom: 0;
+			top: 0;
+			margin: auto;
+			.to-btn {
 				position: absolute;
-				background: rgba(255,255,255,.7);
+				top: 0;
 				left: 0;
 				right: 0;
 				bottom: 0;
-				top: 0;
 				margin: auto;
-				.to-btn{
-					position: absolute;
-					top: 0;
-					left: 0;
-					right: 0;
-					bottom: 0;
-					margin: auto;
-					width: 70%;
-					height: 88rpx;
-					font-size: $font-size-28;
-					line-height: 88rpx;
-					color: #FFFFFF;
-					text-align: center;
-					border-radius: 44rpx;
-				}
+				width: 70%;
+				height: 88rpx;
+				font-size: $font-size-28;
+				line-height: 88rpx;
+				color: #ffffff;
+				text-align: center;
+				border-radius: 44rpx;
 			}
 		}
 	}
+}
 </style>

+ 28 - 0
services/user.service.js

@@ -60,6 +60,34 @@ export default class UserService {
 
         })
     }
+	
+    /**
+	 * 短信验证登录
+	 * @param mobileOrEmail 邮箱或手机
+	 * @param password	密码
+	 * @param unionId	微信unionId
+	 */
+    userCodeLogin(data = {}) {
+        return this.AjaxService.post({
+            url: '/user/login/codeLogin',
+            data,
+            isLoading: true,
+            isStatus: true,
+
+        })
+    }
+    /**
+	 * 获取登录验证码
+	 * @param mobile 手机号
+	 */
+    userLoginCode(data = {}) {
+        return this.AjaxService.get({
+            url: '/user/login/code',
+            data,
+            isLoading: true
+        })
+    }
+	
     /* 查询机构资料*/
     OrganizationUpdateModifyInfo(data = {}) {
         return this.AjaxService.get({