mabaoDoctor/pages/beifen.vue

<template>
	<view style="width: 100%;height: 100%;">
		<!-- logo -->
		<view style="height: 30vh;" class="flex justify-center align-center">
			<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/logo.png" style="width: 404rpx;height: 156rpx;"></image>
		</view>
		<!--
		登录：
			输入框：   手机号  验证码
			按钮：     登录  一键授权  暂不登录
			下划线：   注册账号  账号密码登录
		-->
		<!-- 输入框 -->
		<view style="height: 30vh;padding: 0 100rpx;">
			<!-- 手机号 -->
			<view style="padding-bottom: 36rpx;display: flex;border-bottom: 1rpx solid #E0E0E0;margin-bottom: 60rpx;">
				<!-- 图标 手机图标-->
				<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/phone.png" style="width: 32rpx;height: 32rpx;margin-right: 20rpx;"></image>
				<!-- 线条 方向是竖-->
				<view style="margin-right: 20rpx;">
					<u-line color="#D8D8D8" direction="col" />
				</view>
				<input v-model="phoneData" placeholder="请输入手机号" style="height: 28rpx;" />
			</view>
			<!-- 验证码 -->
			<view style="padding-bottom: 36rpx;display: flex;border-bottom: 1rpx solid #E0E0E0;margin-bottom: 60rpx" v-if="!ispwdlogin">
				<!-- 图标 手机图标-->
				<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/Verification.png" style="width: 32rpx;height: 32rpx;margin-right: 20rpx;"></image>
				<!-- 线条 方向是竖-->
				<view style="margin-right: 20rpx;">
					<u-line color="#D8D8D8" direction="col" />
				</view>
				<wInput v-model="verCode" type="number" maxlength="6" placeholder="请输入验证码" isShowCode ref="runCode" @setCode="getVerCode()"></wInput>
			</view>
			<!-- 密码 -->
			<view style="padding-bottom: 36rpx;display: flex;border-bottom: 1rpx solid #E0E0E0;margin-bottom: 60rpx" v-if="ispwdlogin">
				<!-- 图标 手机图标-->
				<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/password.png" style="width: 32rpx;height: 32rpx;margin-right: 20rpx;"></image>
				<!-- 线条 方向是竖-->
				<view style="margin-right: 20rpx;">
					<u-line color="#D8D8D8" direction="col" />
				</view>
				<input v-model="password" placeholder="请输入密码" :password="true" style="height: 28rpx;" />
			</view>
		</view>
		<!-- 按钮 -->
		<view style="height: 30vh;padding: 0 80rpx;">
			<!-- 登录 -->
			<u-button @click="startReg()" type="primary" shape="circle" :loading="isRotate" :custom-style="customStyle">登录</u-button>

			<view class="flex align-center justify-between" style="margin: 70rpx 0 100rpx 0;">
				<button :class="" open-type="getUserInfo" style="box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);border-radius: 60rpx;border: 0.3rpx solid #dedede;"
				 @getuserinfo="getinfo">
					<view :class="rotate_loop" style="font-size: 30rpx;color: #84BB43;">
						<slot name="text">微信授权一键登录</slot>
					</view>
				</button>
				<button @click="toindex()"  style="width: 45%;font-size: 30rpx;border-radius: 60rpx;box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);border: 0.3rpx solid #dedede;color: #7a7a7a;"  :custom-style="customStyle" :class="buttonBorder">暂不登录</button>
			</view>
			<!-- <view class="flex align-center justify-between" style="margin: 70rpx 0 100rpx 0;">
				<u-button open-type="getUserInfo" @getuserInfo="getinfo" shape="circle" style="width: 50%;font-size: 30rpx;color:#84BB43;" :custom-style="customStyle"
				 hair-line="false">微信授权一键登录</u-button>
				<u-button @click="toindex()" shape="circle" style="width: 45%;font-size: 30rpx;" hair-line="false">暂不登录</u-button>
			</view> -->
			<view class="flex align-center justify-between">
				<view style="width: 50%;text-align: center;">
					<text style="text-decoration:underline; color: #666666;" @click="goreg">注册账号</text>
				</view>
				<view style="width: 50%;text-align: center;">
					<text style="text-decoration:underline ; color: #666666;" @click="ispwd">{{ispwdlogin?'验证码':'账号密码'}}登录</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
	import request from '../../common/request.js'
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	import store from '@/store'
	import auth from '../../common/authorize.js'
	// import IMService from "../../common/goeasyimutil.js"
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		data() {
			return {
				//一键登录按钮样式
				customStyle: {
					boxShadow: '0px 0px 16px 0px rgba(0, 0, 0, 0.08)',
				},
				//logo图片 base64
				phoneData: '', // 用户/电话
				verCode: "", //验证码
				password: "", //密码
				ispwdlogin: false, //是否使用密码登录
				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
			}
		},
		onLoad() {
			const jwt = store.getters['getJwt'];
			uni.checkSession({
				success() {
					uni.navigateTo({
						url: '../index/index'
					})
					return;
				},
				fail() {
					uni.navigateTo({
						url: "../doctor_related/doctor_info"
					})
				}
			})
		},
		components: {
			wInput,
			wButton,
		},
		mounted() {
			_this = this;
		},
		methods: {

			//验证码点击事件
			getVerCode: async function() {
				//获取验证码
				if (_this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				console.log(_this.phoneData)
				let res = await this.$request.post("common/putverfiy", {
					'phone': _this.phoneData
				});
				if (res.status == 0) {
					uni.setStorageSync('verfiyCode', res.data);
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码发送，请查收'
					});
					this.$refs.runCode.$emit('runCode'); //触发倒计时（一般用于请求成功验证码后调用）
					setTimeout(function() {
						_this.$refs.runCode.$emit('runCode', 0); //假装模拟下需要 终止倒计时
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '模拟倒计时终止'
						});
					}, 3000)
				} else {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请求失败'
					});
				}



			},

			//点击登录
			startReg: async function() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.phoneData.length != 11) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '手机号不正确'
					});
					return false;
				}
				if (this.ispwdlogin) {
					// 账号密码登陆
					if (this.password < 6) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '密码位数不低于6位'
						});
						return false;
					}
					// 发送登陆
					let res = await this.$request.post('common/passLogin', {
						'phone': this.phoneData,
						'password': this.password
					});
					if (res.status == 0) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '登陆成功'
						});
						store.commit('setJwt', res.data.token);
						store.commit('setUser', res.data);
						store.commit('login');
						// 写一个跳转到首页
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
							uni.switchTab({
								url: "../index/index"
							})
						}, 2000)
						return false;
					} else {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: res.message
						});
						return false;
					}




				} else {
					if (this.verCode.length != 4) {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '验证码不正确'
						});
						return false;
					}
					let code = uni.getStorageSync('verfiyCode')

					if (code == null || code == '') {
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '验证码错误'
						});
						return false;
					} else {
						if (this.verCode == code) {
							// 发送登陆
							let res = await this.$request.post('common/phoneLogin', {
								'phone': this.phoneData
							});

							if (res.status == 0) {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: '登陆成功'
								});
								uni.removeStorage('verfiyCode')
								store.commit('setJwt', res.data.token);
								store.commit('setUser', res.data);
								store.commit('login');

								// 写一个跳转到首页
								setTimeout(function() {
									uni.navigateBack({
										delta: 1
									})
									uni.switchTab({
										url: "../index/index"
									})
								}, 2000)
								return false;
							} else {
								uni.showToast({
									icon: 'none',
									position: 'bottom',
									title: res.message
								});
								return false;
							}
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '验证码错误'
							});
							return false;
						}
					}
				}



				_this.isRotate = true
				setTimeout(function() {
					_this.isRotate = false
				}, 3000)
			},
			toindex() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			goreg() {
				uni.navigateTo({
					url: "./reg"
				})
			},
			ispwd() {
				this.ispwdlogin = !this.ispwdlogin
			},
			// 一键登录
			getinfo: async function(e) {
				let that = this;
				let meToken = user.loginByWeixin(e.detail.userInfo).then(res => {
					console.log('返回的res',res)
					if (res.status == 0) {
						uni.showToast({
							title: "登录成功",
							icon: "none",
							duration: 2000
						})
						console.log(res.data);
						if (typeof res.data.token != 'undefined') {
							console.log('我登录来 ！');
							getApp().globalData.imService = new IMService();
							let loginResult = getApp().globalData.imService.login({
								uuid: res.data.data.flag,
								name: res.data.data.name,
								avatar: res.data.data.avatar
							});
							if (loginResult) {
								//连接IM
								getApp().globalData.imService.connectIM();
							}
							store.commit('setJwt', res.data.token);
							store.commit('setUser', res.data);
							store.commit('login');
							uni.showToast({
								title: "登录成功",
								icon: "none",
								duration: 2000
							})
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								})
								uni.switchTab({
									url: "../index/index"
								})
							}, 2000)
						} else {
							that.session_key = res.data.session_key
							that.openid = res.data.openid
							that.show = true
						}
					}
				})
			},


			getPhoneNumber: async function(e) {
				let res = await this.$request.post("api/v2/common/getPhoneNumber", {
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData,
					session_key: this.session_key,
					openid: this.openid
				})
				this.show = false
				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",
							duration: 2000
						})
						// 写一个跳转到首页
						setTimeout(function() {
							uni.navigateBack({
								delta: 1
							})
							uni.switchTab({
								url: "../index/index"
							})
						}, 2000)
					}
				}
			}
		}
	}
</script>

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

	page {
		background-color: #fff;
	}
</style>