kitchendDevice/pageTwo/login/login.vue

<template>
	<view class="content">
		<view class="top">
			<image :src="configBox.logo"></image>
			<text>{{configBox.title}}</text>
		</view>
		<view class="edit">
			<view class="editem">
				<view class="input">
					<input class="uni-input" v-model="phone" placeholder="请输入手机号" />
				</view>
				<view class="input yanzheng">
					<view class="yanzhengma">
						<input class="uni-input" v-model="code" placeholder="请输入验证码" />
					</view>
					<button class="code" type="none" @tap="handleCode" v-model="codeInfo"
						:disabled="disabled">{{second<60 ? second+'S后重发':'获取验证码'}}
					</button>
				</view>
			</view>
			<view class="btnlogin" @click="handleTelLogin">登录</view>
		</view>
		<view class="btnGroup">
			<view class="wxbtn">
				<text>其他登录方式</text>
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<icon class="t-icon t-icon-weixin"></icon>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				phone: "",
				code: "",
				disabled: false,
				second: 60,
				value: 1,
			}
		},
		computed: {
			...mapState(["configBox", "themeColor"]),
		},
		onLoad(options) {
			// 导航栏颜色
			let that = this
			if (!uni.getStorageSync('sessionid')) {
				// that.$store.dispatch('getsessionId')
			}
		},
		methods: {
			// 登录、
			handleTelLogin() {
				let that = this
				if (!this.phone) {
					that.$tools.msg("请输入手机号")
					return
				}
				if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
					that.$tools.msg("请输入正确的手机号码")
					return
				}
				if (!that.code) {
					that.$tools.msg("请输入验证码")
					return
				}
				this.$model.getvisitordelogin({
					phone: that.phone,
					code: that.code,
					isvrcode: true,
					sessionId: uni.getStorageSync('sessionid'),
				}).then(res => {
					if (res.code != 0) {
						that.$tools.msg(res.message)
						return
					}
					uni.setStorageSync('token', res.data.token)
					uni.setStorageSync('refreshtoken', res.data.refreshtoken)
					uni.setStorageSync('sessionid', res.data.sessionid)
					that.$store.commit('changeVisitorInfo', res.data)
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}).catch(err => {})
			},
			// 获取验证码
			handleCode() {
				let that = this
				that.code = ""
				if (!that.phone) {
					that.$tools.msg("请输入手机号")
					return
				}
				if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
					that.$tools.msg("请输入正确的手机号码")
					return
				}
				// 
				that.$model.getSendCode({
					phone: that.phone
				}).then(res => {
					console.log(res)
					if (res.code != 0) {
						that.$tools.msg(res.message)
						return
					}
					that.disabled = true
					let interval = setInterval(() => {
						--that.second
					}, 1000)
					setTimeout(() => {
						clearInterval(interval)
						that.disabled = false
						that.second = 60
					}, 60000)
				}).catch(err => {})
			},
			// 授权
			getPhoneNumber(res) {
				let that = this
				if (res.detail.errMsg == 'getPhoneNumber:ok') {
					this.$model.getregister({
						sessionId: uni.getStorageSync('sessionid'),
						encryptedData: res.detail.encryptedData,
						iv: res.detail.iv,
					}).then(res => {
						if (res.code != 0) return
						uni.setStorageSync('token', res.data.token)
						uni.setStorageSync('iswxphone', res.data.iswxphone)
						uni.setStorageSync('refreshtoken', res.data.refreshtoken)
						uni.setStorageSync('sessionid', res.data.sessionid)
						uni.reLaunch({
							url: "/pages/index/index"
						})
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0;
		height: 100vh;
		background-color: #fff;
	}

	.top {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		padding: 80px 0 0;

		image {
			width: 70px;
			height: 70px;
			margin: auto;
			margin-bottom: 15px;
			border-radius: 50%;
		}

		text {
			display: block;
			width: 100%;
			text-align: center;
		}
	}

	.edit {
		width: 75%;
		height: auto;
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		font-size: 14px;
		margin: 40px auto 15px;

		.ts {
			text-align: left;
			margin-bottom: 10px;
			color: #999;
		}

		.editem {
			position: relative;
			display: flex;
			align-items: center;
			font-size: 28upx;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		.input {
			width: 100%;
			border-bottom: #dfdfdf 1px solid;
			padding: 0 10px;
			height: 35px;
			line-height: 35px;
			margin-bottom: 15px;
			display: flex;
			// border-radius: 10px;
			position: relative;

			input {
				height: 35px;
				line-height: 35px;
				width: 100%;
			}
		}

		.yanzhengma {
			input {
				height: 35px;
				line-height: 35px;
				position: absolute;
				left: 10px;
				right: 120px;
				width: auto;
			}
		}

		.code {
			width: 110px;
			background: #dfdfdf;
			font-size: 12px;
			margin: 0;
			border-radius: 10px;
			text-align: center;
			position: absolute;
			right: 2.5px;
			top: 2.5px;
		}

		.btnlogin {
			width: 100%;
			margin: 20px 0;
			height: 38px;
			line-height: 38px;
			background: $mainColor;
			font-weight: 700;
			border-radius: 10px;
			text-align: center;
			color: #fff !important;
		}


	}

	.btnGroup {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		background-color: inherit;
		line-height: inherit;
		position: absolute;
		bottom: 100rpx;

		.wxbtn {
			width: 100%;

			icon {
				width: 35px;
				height: 35px;
			}

			text {
				width: 100%;
				font-size: 14px;
				color: #999;
				display: block;
				text-align: center;
				margin-bottom: 10px;
			}

			button {
				line-height: initial;
				background: #fff;
				display: flex;
				flex-wrap: wrap;
				padding: 0;
				justify-content: center;
			}

			button::after {
				display: none;
			}
		}
	}
</style>