juliancheng/pages/login/login.vue

<template>
	<view class="register" style="height: 100%;">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image src="../../static/index/logo.jpeg" mode="widthFix"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<view class="text-bold text-black text-xl">
					欢迎使用聚联诚集团
				</view>
				<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, rgb(241,197,84), rgb(241,197,84))"></wButton>
			<!-- <view class="flex justify-between align-center" style="margin-top: 60rpx;">
				<button v-if="!isphoneNum" 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 v-else 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> -->

			<!-- <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">
					<text style="color: #999999;">温馨提示：未注册聚联诚集团的手机号，登录时将自动注册</text>
				</view>
			</view>
		</view>
		<!-- <u-no-network></u-no-network> -->
	</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,
				isphoneNum: false
			}
		},
		// onShow() {
		// 	uni.checkSession({
		// 		success() {
		// 			console.log("已登录")
		// 			return;
		// 		},
		// 		fail() {
		// 			uni.navigateTo({
		// 				url: "../doctor_related/doctor_info"
		// 			})
		// 		}
		// 	})
		// },
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
			// this.getCode()
		},
		onLoad() {
			// this.isphone()
		},
		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/User/sendCode", {
					phone: this.phoneData
				})
				console.log(res)
				if (res.code == 200) {
					this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
				}
				// _this.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
			},
			startReg: async function() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					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;
				}
				_this.isRotate = true
				let res = await this.$request.post("/api/User/login", {
					phone: this.phoneData,
					code: this.verCode,
					up_id: parseInt(uni.getStorageSync('up_id'))
				})
				console.log(res)
				if (res.code == 200) {
					store.commit('setJwt', res.data.token);
					store.commit('setUser', res.data);
					store.commit('login');
					uni.setStorageSync('phone', this.phoneData)
					_this.isRotate = false
					uni.showToast({
						title: "登录成功",
						icon: "none"
					}, 1000)
                    if(!res.data.realname){
                        // 姓名必填 完善个人信息
                        setTimeout(function() {
    						uni.redirectTo({
    							url: "/pages/mine/info"
    						})
    					}, 2000);
                    } else {
    					setTimeout(() => {
    						uni.navigateBack({
    							delta: 1
    						})
    						// uni.switchTab({
    						// 	url:"../index/index"
    						// })
    					}, 1000)
                    }
				} else {
                    uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: res.message
					});
                    _this.isRotate = false
                }

			},
			isphone: async function() {

			},
			getphone: async function(e) {
				if (this.imgitem.istrue) {
					_this.istrue = true

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

			},
			wxLogin: async function(e) {
				if (e.detail.errMsg == "getUserInfo:fail auth deny") {
					uni.showToast({
						title: '微信登录失败',
						icon: "none"
					});
					return;
				}
				if (this.imgitem.istrue) {

				} 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;
		height: 100%;
	}

	.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>