mplace_source/pages/login/login.vue

<template>
	<view class="app">
		<view>
			<view class="logo">
				源代宝系统
			</view>
			<view class="tabs">
				<!-- <text :class="loginType == 1 ? 'cur' : ''" @click="loginType = 1; error='';">密码登录</text> -->
				<!-- <text :class="loginType == 2 ? 'cur' : ''" @click="loginType = 2; error='';">手机号登录</text> -->
			</view>
			
			<block v-if="loginType == 1">
				<view class="form-item">
					<text class="label">手机号</text>
					<view class="intput-area">
						<input type="number" placeholder="请填写手机号" v-model="mobile" />
					</view>
				</view>
				<view class="form-item">
					<view class="label">密码 <!--text class="icon-eye"></text--></view>
					<view class="intput-area">
						<input type="password" placeholder="请输入密码" v-model="pass" />
						<!-- <text>忘记密码</text> -->
					</view>
				</view>
			</block>
			<block v-else>
				<view class="form-item">
					<text class="label">手机号</text>
					<view class="intput-area">
						<input type="number" placeholder="请填写手机号" v-model="mobile" />
					</view>
				</view>
				<view class="form-item">
					<text class="label">验证码</text>
					<view class="intput-area">
						<input type="number" placeholder="请输入验证码" v-model="code" />
						<text v-if="!mobileValiting" class="enable" @click="getCode">获取验证码</text>
						<text v-if="mobileValiting" class="disabled">重新发送({{timelimit}})</text>
					</view>
				</view>
			</block>
			<view class="err-tips" v-if="error">
				{{error}}
			</view>
			<view class="flex flex-direction zaiui-btn-view" style="margin-top: 20upx;">
				<view class="cu-btn bg-red" @click="doLogin">
					登录
				</view>
			</view>
		</view>
		<!-- <view class="button" @click="pay">
			支付测试
		</view> -->
		<view class="xieyi">
			<text class="icon-checkbox checked"></text>我已阅读并同意<navigator url="/pages/assets/singlepage/singlepage?id=service" class="link">《用户服务协议》</navigator>和<navigator url="/pages/assets/singlepage/singlepage?id=yinsizhengce" class="link">《隐私政策》</navigator>
		</view>
		<!-- <iframe :src="payurl" ></iframe> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	
	export default {
		data() {
			return {
				loginType: 2,
				code: '',
				mobile: '',
				error: '',
				mobileValiting: 0,
				countdownStart: 0,
				timelimit: 60,
				pass: '',
				payurl: '',
				suser: ''
			};
		},
		methods: {
			...mapMutations(['setUserInfo']),
			pay() {
				this.req({
					url: 'service/agent/?l=auth.reg&sign=http%3A%2F%2Fzsmatest.nongxiaohe.com%2Fdata%2Fupload%2F9%2F2022%2F03%2F25%2F25ff280b871c75ba618666c43c1dcd6a.png&type=1&idcard=140224198312254712&name=qinj&idcard_back=http%3A%2F%2Fzsmatest.nongxiaohe.com%2Fdata%2Fupload%2F9%2F2022%2F02%2F26%2F734611c162a9606a5f947734d303658c.png&idcard_front=http%3A%2F%2Fzsmatest.nongxiaohe.com%2Fdata%2Fupload%2F9%2F2022%2F02%2F26%2F734611c162a9606a5f947734d303658c.png&code=1060&mobile=17316135130&company_name=&company_number=&company_pic=&area=110000%2C110100&role=6&code=&source_id=&pay_pic=&pay_type=1',
					data: {
						refer: location.origin + '/pages/dailishang/apply/success' //'http://daili.churenyiliao.com/pages/dailishang/apply/success'
					},
					success: res => {
						if(res.data.status == 1) {
							console.log(res.data.data.pay.order)
							location.href = res.data.data.pay.order;
						}else {
							this.error = res.data.msg
						}
					}
				})
			},
			countDown() {
				this.timelimit = 60 - Math.floor((Date.now() - this.countdownStart)/1000);
				if(this.timelimit > 0) {
					setTimeout(() => {
						this.countDown()
					}, 500)
				}else {
					this.mobileValiting = false;
				}
			},
			getCode() {
				uni.showLoading({
					mask: true
				})
				this.req({
					url: '?l=data.sms',
					data: {
						mobile: this.mobile.trim(),
					},
					success: res => {
						if(res.data.status == 1) {
							this.error = '';
							this.mobileValiting = 1;
							this.countdownStart = Date.now()
							this.countDown()
							let code = res.data.data.match(/::(\d*)/);
							
							this.code = code ? code[1] : '';
						}else {
							this.error = res.data.msg
						}
						uni.hideLoading()
					}
				})
			},
			doLogin() {
				let reqParams = {
					mobile: this.mobile.trim(),
					account: 'wechat',
					env: 2,
					applet_code: '',
					invite: '88151'
				};
				
				if(!this.mobile || !/^1\d{10}$/.test(this.mobile.trim())) {
					uni.showToast({
						icon: 'error',
						title: '手机号码不正确'
					})
					return
				}
				
				if(this.loginType == 1) {
					reqParams.pass = this.pass;
					if(!this.pass) {
						uni.showToast({
							icon: 'error',
							title: '请输入密码'
						})
						return
					}
				} else {
					reqParams.code = this.code;
					if(!this.code) {
						uni.showToast({
							icon: 'error',
							title: '请输入验证码'
						})
						return
					}
				}
				console.log(reqParams)
				this.req({
					url: '?l=data.login',
					data: reqParams,
					success: res => {
						if(res.data.status == 1) {
							uni.setStorage({
							  key: 'baseToken',
							  data: {
								 t: res.data.data.t,
								 mobile: this.mobile.trim()
							  }
							})
							this.setUserInfo({
								t: res.data.data.t,
								mobile: this.mobile.trim()
							})
							this.code = ''
							this.mobile = ''
							this.error = ''
							this.pass = ''
							
							if (res.data.data.t) {
								if(getCurrentPages().length < 2) {
									uni.reLaunch({
										url: `/pages/app/index`
									})
								} else {
								  uni.navigateBack({
									success: function () {
									  getCurrentPages().forEach(page => {
										typeof page.$vm.globalLoginedCallback === "function" && page.$vm.globalLoginedCallback()
									  })
									}
								  })
								}
							}
						}else {
							this.error = res.data.msg
						}
					}
				})
			}
		},
		onLoad() {
			if(this.userInfo.t) {
				uni.switchTab({
					url: '/pages/app/index'
				})
			}
		}
	}
</script>
<style lang="scss">
	// @import '../../../common/common.scss';
</style>
<style lang="scss">
	page {
		height: 100%;
		background-color: #F7F7F7;
		display: flex;
		flex-direction: column;
	}
	.app {
		flex: 1;
		box-sizing: border-box;
		padding: 0 48upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.logo {
			padding: 62upx 0 108upx;
			margin: 0 auto;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #e54d42;
			font-size: 52upx;
			letter-spacing: 1upx;
			image {
				width: 80upx;
				height: 80upx;
				display: block;
				margin-right: 24upx;
			}
		}
		
		.tabs {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-bottom: 42upx;
			text {
				position: relative;
				font-size: 32upx;
				margin: 0 32upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				
				&:after {
					content: '';
					width: 40upx;
					height: 6upx;
					margin-top: 8upx;
					border-radius: 2upx;
					background-color: transparent;
				}
				
				&.cur {
					color: #e54d42;
					&:after {
						background-color: #e54d42;
					}
				}
			}
		}
	}
	.form-item {
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-bottom: 2upx solid #999999;
		padding: 38upx 0 0;
		.label {
			width: 100%;
			color: #444444;
			font-size: 28upx;
			font-family: PingFangSC-Medium, PingFang SC;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bolder;
			
			text {
				opacity: 0.4;
				&.light {
					opacity: 1;
				}
			}
		}
		.intput-area {
			display: flex;
			justify-content: space-between;
			font-size: 26upx;
			line-height: 106upx;
			input {
				height: 106upx;
				flex: 1;
				font-size: 54upx;
				font-family: DINAlternate-Bold, DINAlternate;
				
			}
			.uni-input-placeholder {
				font-size: 28upx;
			}
		}
		text {
			color: #999999;
			&.enable {
				color: #e54d42;
			}
		}
	}
	.err-tips {
		color: #AB0000;
		font-size: 24upx;
		display: block;
		margin-top: 24upx;
	}
	.ctrls {
		margin-top: 100upx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		
		.button {
			flex: 1;
			margin: 0 15upx;
			white-space: nowrap;
		}
	}
	.xieyi {
		// position: absolute;
		// bottom: 32upx;
		// left: 48upx;
		// right: 48upx;
		margin: 64upx 0 32upx;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		
		.link {
			color: #e54d42;
		}
		.icon-checkbox {
			margin-right: 8upx;
		}
	}
	
	
</style>