property/user_ui/pages/login.vue

<template>
	<view class="regbox" v-if="loginflag">
		<image :src="lbg" class="navbg"></image>
		<image :src="fbg" class="fbg"></image>
		<view class="wymain">
			<image :src="headimg" class="headimg"></image>
			<!-- 微信登录 -->
			<!-- #ifdef MP-WEIXIN -->
			<button type="primary" class="rbtn" open-type="getUserInfo" @getuserinfo="getuserinfo">
				<image :src="vxtab" class="vxtab"></image>
				<text class="btn-txt">微信一键登录</text>
			</button>
			<!-- #endif -->
			<button type="primary" class=" rbtn" @click="getlogin(1)">
				<image :src="zhtab" class="zhtab"></image>
				<text class="btn-txt">账号密码登录</text>
			</button>
			<button type="primary" class=" rbtn" @click="getlogin(2)">
				<image :src="yzmtab" class="yzmtab"></image>
				<text class="btn-txt">短信验证码登录 </text>
			</button>
			<view class="line"></view>
			<view class="rbtn btna" @click="getregister">还没账号？去注册</view>
		</view>

		
		<phone-btn :type="typeflag" @getPhoneNumber='getPhoneNumber' @getClose="getClose"></phone-btn>
	</view>
</template>

<script>
	import * as base64 from "base-64"
	// import {getUserProfile} from "@/api/system/user.js"
	import {
		getToken
	} from '@/utils/auth'
	import phoneBtn from "@/components/toptab/phonebtn.vue"
	export default {
		components: {
			phoneBtn
		},
		data() {
			return {
				lbg: require('@/static/images/mine/lbg.png'),
				fbg: require('@/static/images/mine/fbg.png'),
				vxtab: require('@/static/images/mine/vxtab.png'),
				zhtab: require('@/static/images/mine/zhtab.png'),
				yzmtab: require('@/static/images/mine/yzmtab.png'),
				fbg: require('@/static/images/mine/fbg.png'),
				headimg: require('@/static/logo.png'),
				typeflag: false,
				loginflag: false,
				loginForm: {
					username: "",
					code: "",
					password: '',
				},
			}
		},

		methods: {
			handlePrivacy() {
				this.$tab.navigateTo(`/pages/agreement`)
			},
			getlogin(e){
				this.$tab.navigateTo(`/mine/pages/tlogin?type=${e}`)
			},
			getregister(){
				this.$tab.navigateTo(`/mine/pages/register`)
			},
			async getuserinfo(e) {
				// if(!this.checkflag){
				//  this.$toast("请同意用户协议")
				//  return
				// }
				// 判断是不是有学校
				const {
					iv,
					encryptedData
				} = e.detail
				const {
					nickName,
					avatarUrl,
					...userInfo
				} = e.detail.userInfo
				// console.log(e.detail)
				try {
					uni.login({
						provider: 'weixin',
						success: (res) => {
							// 获取用户信息
							if (res.code) {
								this.avatarUrl = avatarUrl
								this.nickName = nickName
								this.code = res.code
								this.userInfo = e.detail.userInfo
								uni.setStorageSync('userInfo', e.detail.userInfo)
								uni.setStorageSync('lcheckflag', true)
								this.typeflag = true;
							}
						}
					})
				} catch (e) {
					//TODO handle the exception
				}
		 },
			getClose() {
				this.typeflag = false
			},
		 getPhoneNumber(data) {
				var that = this;
				var params = data
				that.$store.dispatch('Login', params).then(() => {
					that.$modal.closeLoading()
					that.$toast('登录成功')
					that.typeflag = false;
					that.loginSuccess(data)
				}).catch(() => {
					// if (this.captchaEnabled) {
					//   this.getCode()
					// }
				})
			},
			// 登录成功后，处理函数
			loginSuccess(result) {
				// 设置用户信息
				var that = this;
				this.$store.dispatch('GetInfo').then(res => {
					this.$tab.reLaunch('/pages/index/index')
				})
			},
		},

		onLoad: function() {
			if (getToken()) {
				this.$tab.reLaunch('/pages/index/index')
				// 判断有什么角色
			} else {
				this.loginflag = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
.navbg{width: 100%;height: 100vh;}
.fbg{width: 100%;height: 750rpx;position: absolute;bottom: 0;left: 0;}
.wymain{z-index: 2;position: relative;padding: 320rpx 60rpx;}
.headimg{width: 110rpx;height: 110rpx;margin:0 auto 128rpx;display: block;}

.rbtn {height: 84rpx;margin-bottom:60rpx;font-weight: bold;font-size: 28rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center;background: #0156FE;
border-radius: 10rpx;
	.vxtab{width: 38rpx;height: 32rpx;margin-right: 18rpx;}
	.zhtab{width: 30rpx;height: 34rpx;margin-right: 22rpx;}
	.yzmtab{width: 30rpx;height: 25rpx;margin-right: 22rpx;}
	&.btna{background: #D9E6FF;color: #0156FE;}
}
.line{width: 60rpx;height: 6rpx;background: #CDCDCD;margin: 0 auto 60rpx;}
</style>