mabao/pages/login/login.vue

<template>
	<view class="register">

		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/loginlogo.png"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<wInput v-model="phoneData" type="text" maxlength="11" placeholder="手机号"></wInput>
				<wInput v-model="verCode" type="number" maxlength="4" placeholder="验证码" isShowCode ref="runCode" @setCode="getVerCode()"></wInput>
			</view>

			<wButton class="wbutton" text="登 录" :rotate="isRotate" @click.native="startReg()" bgColor="linear-gradient(to right, rgba(11,115,185,0.7), rgba(11,115,185,0.6))"></wButton>
			<view class="flex justify-between align-center" style="margin-top: 60rpx;">
				<button style="margin-top: 20rpx;" :class="['buttonBorder',!istrue?'dlbutton':'dlbutton_loading']" open-type="getUserInfo"
				 @getuserinfo="wxLogin">
					<view :class="istrue?'rotate_loop':''">
						<text v-if="istrue" class="cuIcon cuIcon-loading1 "></text>
						<view v-if="!istrue">
							<slot name="text">微信授权一键登录</slot>
						</view>
					</view>
				</button>
				<button style="margin-top: 20rpx;color:#0B73B9 ;" class="buttonBorder dlbutton" @click="toindex()">
					<slot name="text">游客登录</slot>
				</button>
			</view>


			<!-- 底部信息 -->
			<view class="footer">
				<view class="flex align-center">
					<image @click="isqueren" :src="imgitem.name" mode="" style="width: 30rpx;height: 30rpx;"></image>
					<text style="color: #0B73B9;">《超级宝妈宝》</text>
					<text style="color: #999999;">服务协议</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var _this;
	import wInput from '../../components/watch-input.vue' //input
	import wButton from '../../components/watch-button.vue' //button
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		data() {
			return {
				//logo图片 base64
				phoneData: '', // 用户/电话
				verCode: "", //验证码
				showAgree: true, //协议是否选择
				isRotate: false, //是否加载旋转
				istrue: false,
				num: 1,
				imgitem: {
					istrue: false,
					name: "https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/xieyi.png"
				}
			}
		},
		// onShow() {
		// 	uni.checkSession({
		// 		success() {
		// 			console.log("已登录")
		// 			return;
		// 		},
		// 		fail() {
		// 			uni.navigateTo({
		// 				url: "../doctor_related/doctor_info"
		// 			})
		// 		}
		// 	})
		// },
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
		},
		methods: {
			isShowAgree() {
				//是否选择协议
				_this.showAgree = !_this.showAgree;
			},
			getVerCode() {
				//获取验证码
				if (_this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				setTimeout(function() {
					_this.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '模拟倒计时终止'
					});
				}, 3000)
			},
			startReg() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.showAgree == false) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请先同意《协议》'
					});
					return false;
				}
				if (this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				if (this.verCode.length != 4) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				console.log("注册成功")
				_this.isRotate = true
				setTimeout(function() {
					_this.isRotate = false
				}, 3000)
			},
			wxLogin: async function(e) {
				if (this.imgitem.istrue) {
					_this.istrue = true
					if (e.detail.errMsg == "getUserInfo:fail auth deny") {
						uni.showToast({
							title: '微信登录失败',
							icon: "none"
						});
						return;
					}
					user.loginByWeixin(e.detail.userInfo)
						.then(res => {
							console.log(res)
							if (res.status == 0) {
								uni.showToast({
									title: "登录成功",
									icon: "none",
									duration: 2000
								})
							}
							setTimeout(function() {
								_this.istrue = false
								uni.navigateBack({
									delta: 1
								})
							}, 2000)
						})
						.catch(res => {
							uni.showToast({
								title: '微信登录失败',
								icon: "none"
							});
						});
				}else{
					uni.showToast({
						title:"请先同意协议",
						icon:"none"
					})
				}
			},
			toindex() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			isqueren() {
				this.num++
				if (this.num % 2 == 0) {
					this.imgitem.name = "https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/xieyixuan.png"
					this.imgitem.istrue = true

				} else {
					this.imgitem.name = "https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/xieyi.png"
					this.imgitem.istrue = false
				}
			}
		}
	}
</script>

<style>
	@import url("../../components/colorui/icon.css");
	@import url("./css/main.css");

	page {
		background-color: #fff;
	}

	.dlbutton {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #84BB43;
		font-size: 30rpx;
		white-space: nowrap;
		overflow: hidden;
		width: 294rpx;
		height: 88rpx;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 255.6));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
		border-radius: 2.5rem;
		margin-top: 0rpx;
	}

	.dlbutton_loading {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #84BB43;
		font-size: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 255.6));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.4);
		border-radius: 2.5rem;
		margin-top: 0rpx;
	}

	.buttonBorder {
		border: none;
		border-radius: 2.5rem;
		-webkit-box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .2);
		box-shadow: 0 0 60rpx 0 rgba(0, 0, 0, .2);
		-webkit-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-moz-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-ms-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		-o-transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
		transition: all 0.4s cubic-bezier(.57, .19, .51, .95);
	}

	/* 旋转动画 */
	.rotate_loop {
		-webkit-transition-property: -webkit-transform;
		-webkit-transition-duration: 1s;
		-moz-transition-property: -moz-transform;
		-moz-transition-duration: 1s;
		-webkit-animation: rotate 1s linear infinite;
		-moz-animation: rotate 1s linear infinite;
		-o-animation: rotate 1s linear infinite;
		animation: rotate 1s linear infinite;
	}

	@-webkit-keyframes rotate {
		from {
			-webkit-transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(360deg)
		}
	}

	@-moz-keyframes rotate {
		from {
			-moz-transform: rotate(0deg)
		}

		to {
			-moz-transform: rotate(359deg)
		}
	}

	@-o-keyframes rotate {
		from {
			-o-transform: rotate(0deg)
		}

		to {
			-o-transform: rotate(359deg)
		}
	}

	@keyframes rotate {
		from {
			transform: rotate(0deg)
		}

		to {
			transform: rotate(359deg)
		}
	}

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