yl-gzh/pages/login/index.vue

<template>
	<view style="width: 100%;height: 100%;">
		<image src="../../static/images/card.jpg" style="width: 100%;height: 100%;" mode="scaleToFill"
			@click="keyHideStatus">
			<uni-forms ref="baseForm" id="form1" :modelValue="formData" :rules="rules">
				<view class="cardBody">
					<view class="card " :style="'height:'+height+' ;'">
						<view class="phoneText global-font" @click="keyHideStatus">
							账号
						</view>
						<view @click="keyHideStatus">
							<uni-forms-item name="username">
								<input class="inputClass" :style="'height:'+inputHeight+';'" ref="userInput"
									v-model="formData.username" :adjust-position="false" @focus="openUsername"
									@blur="closeUsername" />
							</uni-forms-item>
						</view>

						<view class="phoneText global-font" @click="keyHideStatus">
							密码（初始密码为身份证号后6位）
						</view>
						<view>
							<uni-forms-item name="password">
								<input id="ins" class="inputClass" :style="'height:'+inputHeight+';'"
									v-model="formData.password" :password="showPassword" @blur="close()"
									@focus="open" />
								<tki-float-keyboard ref="keyb" :mode="keyMode" :type="keyType" :title="title"
									@del="keyDel" @val="keyVal" @show="keyShow" @hide="keyHide"></tki-float-keyboard>
							</uni-forms-item>
						</view>
						<view>
							<button class="buttonClass" @click="to">登录</button>
						</view>
						<!-- <view class="zcText">
							<text class="global-font" @click="register">注册账号</text>
						</view> -->
						<view class="mzText" id="protocol">
							<radio :checked="protocol" @click="radioChange"></radio>
							<view class="global-font">已阅读并同意</view>
							<view class="global-font">
								<navigator url="/pages/protocol/yonghuxieyi" hover-class="none">《用户协议》</navigator>
							</view>
							<view class="global-font">和</view>
							<view class="global-font">
								<navigator url="/pages/protocol/yinsizhengce" hover-class="none">《隐私政策》</navigator>
							</view>
						</view>
					</view>
				</view>
			</uni-forms>
		</image>

	</view>


</template>

<script>
	import config from '@/config.js'
	import {
		setToken,
		setOpenid,
		setUser,
		getOpenid
	} from '@/common/auth.js'
	import {
		Login,
		GetOpenId
	} from '@/api/login.js'
	import {
		showConfirm
	} from '../../common/common'
	import tkiFloatKeyboard from '@/components/tki-float-keyboard/tki-float-keyboard.vue'
	export default {
		components: {
			tkiFloatKeyboard
		},
		data() {
			return {
				// 键盘
				// 键盘类型  keyboard 普通键盘，car 汽车键盘，number 数字键盘
				keyMode: 'keyboard',
				// type 键盘可用区域，配合mode属性使用  默认值：0
				//mode = keyboard 时 type = 0 全部、 1 字母加数字、 2 符号、 3 字母、 4 数字、 5 字母加符号、6 数字加符号
				//mode = car 时 type = 0 全部、 1 字母加数字、 2 省、 3 字母加数字加特、 4 字母、 5 数字
				//mode = number 时 type = 0 全部、 1 禁用.
				keyType: 0,
				title: '密码键盘',
				keyShowStatus: false,
				showPassword: true,
				height: '42vh',
				inputHeight: '5vh',
				formData: {
					// username: 'lrry220103000000',
					// password: 'sckj12356',
					username: '',
					password: '',
					// code: "081X2kll21UGPc4HRlml27WxeO3X2kl6",
					username: '15143018068',
					password: 'sckj12356',
					openid: "",
				},
				rules: {
					username: {
						rules: [{
							required: true,
							errorMessage: '账号不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					},
				},
				defaultPhoneHeight: '', //屏幕默认高度
				nowPhoneHeight: '', //屏幕现在的高度
				show: false,
				protocol: false,
			}
		},
		onLoad() {
			// 测试openid
			// setOpenid('owaO0uKdXNGMx7Zsy2jOZ0ZKsJGs')
			if (!getOpenid()) {
				this.getCode(config.appid)
			}
		},
		mounted() {
			//监听软键盘获取当前屏幕高度的事件
			this.defaultPhoneHeight = window.innerHeight
			window.onresize = () => {
				this.nowPhoneHeight = window.innerHeight
			}
		},
		watch: {
			//软键盘弹起事件
			nowPhoneHeight() {
				if (this.defaultPhoneHeight != this.nowPhoneHeight) {
					//手机键盘被唤起了。
					this.show = true
				} else {
					//手机键盘被关闭了。
					this.show = false
				}
			}
		},
		methods: {
			radioChange(e) {
				console.log("123", e);
				this.protocol = !this.protocol
			},
			openUsername() {
				setTimeout(() => {
					if (this.show) {
						this.height = '58vh'
						this.inputHeight = '8vh'
					}
				}, 140)

			},
			closeUsername() {
				this.height = '42vh'
				this.inputHeight = '5vh'
			},
			keyHideStatus() {
				if (this.keyShowStatus) this.$refs.keyb._keyHide()
			},
			keyVal(v) {
				this.formData.password += v
			},
			keyDel(d) {
				this.formData.password = this.formData.password.substring(0, this.formData.password.length - 1)
			},
			keyShow(h) {
				this.keyShowStatus = true
			},
			keyHide(h) {
				this.keyShowStatus = false
			},
			change(e) {
				this.formData.password += e
				console.log('change', e)
			},
			confirm(e) {
				console.log('confirm', e)
			},
			backspace(e) {
				this.formData.password = this.formData.password.substring(0, this.formData.password.length - 1)
				console.log('backspace', e)
			},
			changeCarInputMode(e) {
				this.title = e;
			},
			open() {
				uni.hideKeyboard()
				this.$refs.keyb._keyShow();
				console.log("打开");
			},
			close() {
				console.log("关闭");
			},
			register() {
				if (!this.protocol) {
					let ele = document.getElementById('protocol')
					if (ele) {
						ele.classList.add('shake')
						setTimeout(() => {
							ele.classList.remove('shake')
						}, 800)
					}
					return
				}
				uni.navigateTo({
					url: '/pages/lr/register?code=' + this.formData.code
					// url: '/pages/info/add?code=' + this.formData.code
				})
			},
			getCode(appid) { // 非静默授权，第一次有弹框
				let local = window.location.href; // 获取页面url
				console.log("local:", local, appid)
				let code = this.getUrlCode().code; // 截取code
				if (code && code !== '') { // 如果有code
					// 拿到code去请求openId并存在本地 ?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
					GetOpenId({
						code: code
					}).then(res => {
						setOpenid(res.data)
						this.formData.openid = res.data
					})
				}
				//  else {
				// 	window.location.href =
				// 		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=${new Date().getTime()}#wechat_redirect`
				// }
			},
			getUrlCode() { // 截取url中的code方法
				let url = location.search;
				console.log("utl:", url)
				let theRequest = {};
				if (url.indexOf("?") !== -1) {
					console.log("utl1:", url)
					let str = url.substr(1);
					let strs = str.split("&");
					for (let i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
					}
				}
				console.log("theRequest:", theRequest)
				return theRequest
			},
			to() {

				if (!this.protocol) {
					let ele = document.getElementById('protocol')
					if (ele) {
						ele.classList.add('shake')
						setTimeout(() => {
							ele.classList.remove('shake')
						}, 800)
					}
					return
				}


				uni.hideKeyboard()
				this.$refs['baseForm'].validate().then(res => {
					uni.showLoading({
						title: '登录中...'
					})
					if (!this.formData.openid) this.formData.openid = getOpenid()
					Login(this.formData).then(e => {
						uni.hideLoading()
						if (e.code == 200) {

							setUser(e.data.sysUser)
							setToken(e.data.token.access_token)
							uni.switchTab({
								url: '/pages/index/index'
							})
							
							// uni.navigateTo({
							// 	url:'/pages/test/index'
							// })
						}
					})

				}).catch(err => {
					console.log(err);
				})

			}
		}
	}
</script>

<style scoped>
	.cardBody {
		display: flex;
		align-items: center;
		flex-direction: column;

		position: absolute;
		/* bottom: 20vh; */
		top: 37vh;
		left: 12vw;
	}

	.card {
		width: 76vw;
		/* height: 42vh; */
		border-radius: 2.8vw;
		background: rgba(255, 255, 255, 1);
		box-shadow: 5px 6px 18px rgba(0, 0, 0, 0.08);

	}

	.phoneText {
		margin-top: 3vh;
		margin-left: 4vw;
		width: 80vw;
		height: 3vh;
		font-size: 2.8vw;
		line-height: 2vh;
		color: rgba(116, 127, 158, 1);
		text-align: left;
		vertical-align: top;

	}

	.global-font {}

	.zcText {
		position: absolute;
		margin-top: 2vh;
		margin-left: 4vw;
		width: 68vw;
		height: 5vh;
		font-size: 2.8vw;
		color: rgba(116, 127, 158, 1);
		font-weight: 500;
		line-height: 2vh;
		text-align: center;
		vertical-align: top;
	}

	.inputClass {
		margin-top: 1vh;
		margin-left: 4vw;
		width: 68vw;
		/* height: 5vh; */
		border-radius: 5.8vw;
		border: 1px solid rgba(176, 179, 199, 1);
		text-indent: 4vw;
	}

	.buttonClass {
		margin-top: 4vh;
		margin-left: 4vw;
		width: 68vw;
		/* height: 5vh; */
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 5.8vw;
		/* border: 1px solid rgba(176, 179, 199, 1); */
		background: #28d87d;
		color: white;
		height: 5vh;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow:0rpx 4rpx 10rpx 1rpx rgba(40, 216, 125,0.4);
	}

	.mzText {
		position: absolute;
		margin-top: 4vh;
		margin-left: 4vw;
		width: 68vw;
		height: 5vh;
		font-size: 2.8vw;
		color: rgba(116, 127, 158, 1);
		font-weight: 500;
		line-height: 2vh;
		text-align: center;
		vertical-align: top;
		display: flex;
		align-items: center;
	}

	radio {
		transform: scale(0.7);
	}


	.shake {
		animation: shake 800ms ease-in-out;
	}

	@keyframes shake {

		10%,
		90% {
			transform: translate3d(-1px, 0, 0);
		}

		20%,
		80% {
			transform: translate3d(+2px, 0, 0);
		}

		30%,
		70% {
			transform: translate3d(-4px, 0, 0);
		}

		40%,
		60% {
			transform: translate3d(+4px, 0, 0);
		}

		50% {
			transform: translate3d(-4px, 0, 0);
		}
	}
</style>