jianbing/pages/login/login.vue

<template>
	<view class="login">
		<view class="u-flex u-row-center logo">
			<u-image :src="cloudPath + 'img/login-logo.png'" width="574rpx" height="432rpx"></u-image>
		</view>
		
		<view class="u-text-center text-gray">
			<view>小程序需要登录注册才能使用相关功能，申请获取以下权限</view>
			<!-- <view class="u-m-t-20">获得你的公开信息(昵称、头像、手机号码等)</view> -->
		</view>
		
		<view class="u-m-t-56">
			<!-- #ifdef MP -->
			<!-- <view class="u-m-b-32">
				<u-button @click="mpLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">快捷登录</u-button>
			</view> -->
			<!-- #endif -->
			<view>
				<u-button @click="mobileLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">手机号登录/注册</u-button>
			</view>
			<!-- <u-button @click="testLogin" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">测试账号一键登录</u-button> -->
		</view>
		
		<view class="u-m-t-32 u-flex u-row-center">
			<view>
				<u-checkbox v-model="form.allow" shape="circle" :active-color="themeColor">
				    <view class="sm row-start">
				        已阅读并同意
				    </view>
				</u-checkbox>
			</view>
	
			<view class="u-flex protocol">
				<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=0">
				    《服务协议》
				</navigator>
				和
				<navigator :style="{color: themeColor}" hover-class="none" url="/pages/server_explan/server_explan?type=1">
				    《隐私政策》
				</navigator>
			</view>
		</view>
		
		<mplogin v-model="mpLoginPopup" @close="mpLoginPopup = false" @update="handleSubmitInfo"/>
		<mobile-login v-model="mobilePopup" @close="mobilePopup = false" @update="handleSubmitMobile"/>
	</view>
</template>

<script>
	import { mapMutations, mapActions, mapGetters } from 'vuex'
	import { uploadFile } from "@/utils/tools";
	import {
		accountLogin,
	    authLogin,
	    updateUser,
		mobileLogin
	} from '@/api/app'
	import { getWxCode, getUserInfo } from '@/utils/login'
	import { isWeixinClient, currentPage, client } from '@/utils/tools'
	import Cache from '@/utils/cache'
	import { BACK_URL } from '@/config/cachekey'
	
	export default {
		data() {
			return {
				form: {
					allow: false
				},
				loginData: {},
				mpLoginPopup: false,
				mobilePopup: false
			}
		},
		
		onLoad() {
	
		},
		
		methods: {
			...mapMutations(['LOGIN', 'LOGOUT']),
			...mapActions(['getUser']),
			
			// 小程序快捷登录
			async mpLogin() {
				if (!this.form.allow) {
					this.$toast({
						title: "请您先阅读并同意服务协议和隐私政策",
					})
					return false
				}
				
				const {
				    userInfo: { avatarUrl, nickName, gender }
				} = await getUserInfo()
				
				uni.showLoading({
				    title: '登录中',
				    mask: true
				})
				
				const wxCode = await getWxCode()
				const {code, data, msg} = await authLogin({
				    code: wxCode,
				    nickname: nickName || '', //支付宝小程序没有直接获取昵称
				    headimgurl: avatarUrl,
					// client
				})
				if (code == 1) {
				    if (data.is_new_user) {
				        uni.hideLoading()
						this.mpLoginPopup = true
						this.loginData = data
				    } else {
				        this.loginHandle(data)
				    }
				} else {
				    this.$toast({title: msg})
				}
			},
			
			// 更新新注册的用户信息
			async handleSubmitInfo(e) {
			    const loginData = this.loginData || {}
			    const res = await updateUser(e, loginData.token)
				
			    if (res.code == 1) {
			        this.loginHandle(loginData)
			    }
			},
			
			// 手机登录
			mobileLogin() {
				if (!this.form.allow) {
					return this.$toast({
						title: "请您先阅读并同意服务协议和隐私政策",
					})
				}
				this.mobilePopup = true
			},
			
			// 更新新注册的用户信息
			async handleSubmitMobile(e) {
				console.log("🚀 ~ handleSubmitMobile ~ e:", e)
				const wxCode = await getWxCode()
				const res = await accountLogin({ account: e.mobile, code: wxCode, client })
				if (res.code == 1) {
					this.loginHandle(res.data)
				}
			},
			
			// 登录结果处理
			async loginHandle(data) {
			    this.LOGIN(data)
			    uni.hideLoading()
			    const inviteCode = Cache.get('INVITE_CODE')
			    if (inviteCode) {
			        inputInviteCode({
			            code: inviteCode
			        })
			    }
			    // #ifdef H5
			    location.replace('/mobile' + (Cache.get(BACK_URL) || '/'))
			    Cache.remove(BACK_URL)
			    //#endif
			    // #ifndef H5
			    uni.navigateBack({
			        success() {
			            // 刷新上一页
			            const { onLoad, options } = currentPage()
			            onLoad && onLoad(options)
			        }
			    })
			    //#endif
			},

			// 测试账号一键登录
			async testLogin() {
				const { code, data } = await accountLogin({
                    account: '15005837859',
                    password: 'wang199765',
                    client
                })
                if (code == 1) {
                    this.loginHandle(data)
                }
			}
		},
		computed: {
			...mapGetters(['appConfig']),
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	.login {
		margin: 0 64rpx;
		
		.logo {
			padding-top: 150rpx;
		}
		
		.protocol {
			margin-top: -4rpx;
			margin-left: -20rpx;
		}
	}
</style>