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="6" 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="getPhoneNumber"
				 @getphonenumber="getphone">
					<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>

			<u-popup v-model="show" mode="center" :mask-close-able="false" border-radius="16">
				<view style="width: 500rpx;height: 400rpx;position: relative;" class="flex flex-direction align-center justify-center">
					<view class="text-xl text-bold" style="position: absolute;top:30rpx">
						提示
					</view>
					<view class="text-gray margin-top-sm text-lg padding-lr-sm">
						需要获取用户个人信息及资料方便后续注册
					</view>
					<button open-type="getUserInfo" style="width: 100%;font-size: 32rpx;position: absolute;bottom: 0;" @getuserinfo="wxLogin">确认授权</button>
				</view>
			</u-popup>

			<!-- 底部信息 -->
			<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';
	import store from '@/store'
	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"
				},
				show: false
			}
		},
		// 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: async function() {
				//获取验证码
				if (_this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				let res = await this.$request.post("/api/v1/common/sendVerifyCode", {
					phone: this.phoneData,
					type: 1
				})
				console.log(res)
				if (res.status == 0) {
					this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				}
				// _this.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
			},
			startReg: function() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (!this.imgitem.istrue) {
					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 != 6) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码不正确'
					});
					return false;
				}
				uni.login({
					success: (res) => {
						_this.isRotate = true
						this.$request.post("/api/v1/common/wxLogin", {
							wechat_code: res.code,
							phone: this.phoneData,
							verify_code: this.verCode
						}).then(res => {
							if (res.status == 0) {
								if (res.data.token) {
									store.commit('setJwt', res.data.token);
									store.commit('setUser', res.data);
									store.commit('login');
									uni.showToast({
										title: "登录成功",
										icon: "none"
									}, 1500)
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1500)
								}
							}
						}).catch(err => {

						})

					}
				})
			},
			getphone: async function(e) {
				if (this.imgitem.istrue) {
					_this.istrue = true
					uni.login({
						success: (res) => {
							this.$request.post("/api/v1/common/getPhoneNumber", {
								wechat_code: res.code,
								iv: e.detail.iv,
								encryptData: e.detail.encryptedData
							}).then(data => {
								console.log(data)
								if (data.status == 0) {
									this.show = true
								} else {
									_this.istrue = false
									uni.showToast({
										title: "授权失败",
										icon: "none"
									})
								}
							}).catch(err => {

							})
						}
					})
				} else {
					uni.showToast({
						title: "请先同意协议",
						icon: "none"
					})
				}

			},
			wxLogin: async function(e) {
				if (e.detail.errMsg == "getUserInfo:fail auth deny") {
					uni.showToast({
						title: '微信登录失败',
						icon: "none"
					});
					return;
				}
				user.loginByWeixin(e.detail.userInfo)
					.then(res => {
						this.show = false
						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"
						});
					});
			},
			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>