JP-Equipment-Jingli/pages/index/index.vue

<template>
	<view class="">
		<view class="backgroundView">
		
		
		<view class="background">

		</view>
	
		<view class="logo">
			<img src="../../assets/img/loginLogo@1x.png" alt="">
		</view>
		<view class="title">
			设备工器具管理系统
		</view>
		

		<view class="login">
			<view class="login-box">
				<!-- 登录身份 -->
				<!-- <view class="identity">
					<view class="icon">
						<img src="../../assets/img/riFill-account-box-fill@1x.png" alt="">
					</view>
					<view class="tips">
						请选择登录身份
					</view>
					<view class="unfold" @click="changeoptionShow()">
						<u-icon name="arrow-down"></u-icon>

					</view>
					<view class="options" v-if="optionShow">
						<view class="item">选项1</view>
						<view class="item">选项2</view>
						<view class="item">选项3</view>
					</view>
				</view> -->

				<!-- 手机号 -->
				<view class="tel">
					<view class="icon">

						<img src="../../assets/img/riFill-smartphone-fill@1x.png" alt="">
					</view>
					<view class="tips">
						<!-- <view class="input">
					</view> -->
					<u-input class="telInput"   v-model="form.phone"  :placeholderStyle="{}" height="80"  input-align="left" type="number" placeholder="请填写手机号码" />
					
					<!-- <view class="verification-code" @click="getPhoneNumber2"	 >获取</view> -->
			<!-- 		<button type="default" class="verification-code" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
 -->
					</view>
				</view>
				<!-- 验证码 -->
				<view class="pwd">
					<view class="icon">
						<img src="../../assets/img/riFill-message-3-fill Copy@1x.png" alt="">

					</view>

					<view class="tips">
						<view class="input">
							<u-input type="number"  v-model="form.code" 
							:placeholderStyle="{}" height="80" input-align="left" placeholder="请填写验证码" />
						</view>
						<view class="verification-code"  @click="getCode"  >{{codeTips}}</view>
						<u-verification-code :seconds="sendMsgSecond" ref="uCode" @change="codeChange" @end="end" @start="start">
						</u-verification-code>
					</view>
				</view>
			
			<view class="login-btn">
				<u-button type="primary" @click="finish()" >登录</u-button>
			</view>
			</view>
		

		</view>
	
		</view>
	</view>
</template>

<script>
	
	import * as API from '@/apis/pagejs/index.js'
	import {
		checkPhone
	} from '@/apis/utils'
	export default {
		data() {
			return {
				form: {
					name: '',
					phone: '',
					code: '',
				},
				codeTips: '',
				isSendMsgIng: false,
				sendMsgSecond: 60 * 2,
				optionShow: false
			}
		},
		onLoad(){
				
		},
		onReady() {
			this.getOpenId()
		},
		methods: {
			getOpenId(){
				var openId= this.carhelp.getOpenId();
				
				if(openId){
					this.getInfo()
				}else{
					setTimeout(()=>{
						this.getOpenId()
					},1000)
				}
					
			},
			getPhoneNumber(e){
				    console.log(e)

			},
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.findByOpenId({
					openId: this.carhelp.getOpenId(),
					noerror:true,
				}).then((res) => {
					
					this.carhelp.setPersonInfo(res.data.regUser );
					this.carhelp.setToken(res.data.token);
					this.carhelp.setPersonInfoPlus(res.data);
					
					uni.redirectTo({
						url:"/pages/otherFunctions/homePage"
					})
				}).catch(error => {
					uni.hideLoading();
					
					//this.getPhone()
					
				})
			},
			codeChange(text) {
				this.codeTips = text;
			},
			//倒计时
					
			end() {
				this.sendMsgSecond = 2 * 60;
				this.isSendMsgIng = false;
			},
			finish() {
					
				if (!this.carhelp.getOpenId()) {
					// uni.showToast({
					// 	title: "请使用“微信”访问本系统登录"
					// })
					// return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: "请输入手机号"
					})
					return
				}
				if (!this.form.code) {
					uni.showToast({
						title: "请输入验证码"
					})
					return
				}
					
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var headImg = "";
				var userInfo = this.carhelp.get("xpgj_wx_user_info")
				if (userInfo) {
					
					headImg = userInfo.headimgurl;
				}
					
					
				API.validateCode({
					verifyCode: this.form.code,
					telephone: this.form.phone,
					openId: this.carhelp.getOpenId(),
					headImg: headImg
				}).then((response) => {
					this.loginset(response)
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			loginset(response){
				var token = response ? response.data.token : '';
				this.carhelp.setToken(token);
				this.carhelp.setPersonInfo(response.data.regUser);
				this.carhelp.setPersonInfoPlus(response.data)
				//this.gotoUrl("pages/user/index")
				uni.redirectTo({
					url:"/pages/otherFunctions/homePage"
				})
			},
			start() {
				if (!this.isSendMsgIng) {
					
					
					uni.showLoading({
						title: "加载中",
						mask: true,
					})
					API.getVerifyCode(this.form.phone).then((response) => {
					
					
						uni.hideLoading();
						this.carhelp.set("getvcodetime", new Date().getTime());
					
						if (!"") {
							//倒计时
							uni.showToast({
								title: "发送成功"
							})
						} else {
							uni.showToast({
								title: "您的验证码已经发送[5分钟有效]，请勿重复点击"
							})
						}
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
					
					
				}
			},
			// 获取验证码
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					
				} else {
					
					uni.showToast({
						title: '倒计时结束后再发送',
						icon: "none"
					})
					return
				}
					
				var checkPhoneResult = checkPhone(this.form.phone);
					
				if (checkPhoneResult !== true) {
					uni.showToast({
						title: checkPhoneResult,
					
					})
					return;
				}
				this.$refs.uCode.start();
			},
			changeoptionShow() {
				this.optionShow = !this.optionShow
			}
		}
	}
</script>

<style lang="scss" scoped>
	 
	page {
		background-color: #fff;
	}

	uni-image {
		width: 100%;
		height: 512px;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
	}
	.backgroundView{
		
		    background-image: url('http://rccs.oss-cn-hangzhou.aliyuncs.com/Jp-jingli/login.jpg');
		    background-size: contain;
	}
	.background {
		width: 100%;
		height: 512px;
		//background: linear-gradient(180deg, rgba(0, 45, 194, 1) 0%, rgba(0, 59, 254, 0.76) 49%, rgba(1, 122, 255, 0.5) 100%);
		position: relative;
		//z-index: 111;
		opacity: 0.5;
		padding-top: 300px;
	}

	.title {
		font-family: 'Alibaba-PuHuiTi-Regular';
		text-align: center;
		color: rgba(255, 255, 255, 1);
		font-size: 56rpx;
		position: absolute;
		top: 217px;
		left: 0;
		right: 0;
		z-index: 999;
		opacity: 1;

	}

	.logo {
		width: 144rpx;
		height: 144rpx;
		line-height: 144rpx;
		border-radius: 12px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		position: absolute;
		top: 133px;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;

		img {
			width: 90%;
			height: 90%;
			vertical-align: middle;
		}
	}

	.login-box {
		position: absolute;
		border-radius: 24px 24px 0px 0px;
		background-color: rgba(255, 255, 255, 1);
		padding: 88rpx 96rpx;
		top: 410px;
		left: 0;
		right: 0;
		z-index: 999;

		.tel {
			/deep/.u-input {}
		}

		.pwd {
			/deep/.u-input {}
		}






		.tel,
		.pwd,
		.identity {
			width: 558rpx;
			background-color: rgba(244, 245, 249, 1);
			position: relative;
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			color: rgba(183, 172, 172, 1);
			margin: auto;
			margin-bottom: 36rpx;
			border: 1px solid rgba(193, 204, 223, 1);
			border-radius: 8px;

			/deep/.u-input__input {
				font-size: 32rpx;
			}

			.icon {
				width: 14%;
				text-align: center;
				color: #B0B8C8;

				img {
					width: 32rpx;
					height:32rpx;
					vertical-align: middle;
				}
			}


			.tips {

				text-indent: 16rpx;
				padding-right: 16rpx;
				display: flex;
				justify-content: space-between;

				/deep/uni-input {
					height: 80rpx !important;
					line-height: 80rpx !important;
					color: #A7ACB4;
				}

				.input {
					width: 60%;
				}
			}


		}

		// 验证码
		.verification-code {
			color: #1F4A99;
			line-height: 80rpx;
			font-family: 'Alibaba-PuHuiTi-Regular';
			color: rgba(0, 59, 254, 1);
			font-size: 12px;
		}

		.unfold {
			margin-left: auto;
			margin-right: 24rpx;
		}

		.options {

			background-color: #fff;
			z-index: 999;
			position: absolute;
			top: 80rpx;
			left: 40px;
			right: 4rpx;
			box-shadow: 0px 2px 4px #A7ACB4;
			color: #101010;

			.item {
				padding-left: 16rpx;
				line-height: 72rpx;
			}
		}
		.login-btn{
			margin-top: 80rpx;
			/deep/uni-button{
				border-radius: 8px;
				background-color: rgba(0, 59, 254, 1);
				color: #fff;
				height: 88rpx;
				line-height: 88rpx;
			}
		}
		
	}
</style>