emis-sapp/components/buns-api/login/mp-login.vue

<template>
	<view style="position: relative;height: 400rpx;">
		<tpx-layout>
			<template #body>
				<u-row custom-style="margin-top: 30rpx;">
					<u-input v-model="submitLogin.nickName" type="nickname" placeholder="昵称"
						font-size="30"
						placeholder-style=""
					></u-input>
					<view class="ml-40">
						<button class="btn-open avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						  <u-image v-if="submitLogin.avatarUrl" :src="submitLogin.avatarUrl" width="100" height="100" mode="aspectFill"/>
						  <view v-else class="avatar-empty">头像</view>
						</button> 
					</view>
				</u-row>
				
				<u-row custom-style="margin-top: 30rpx;">
					<u-input v-model="submitLogin.phoneNumber" placeholder="手机号"
						font-size="30"
						placeholder-style=""
					>
						<template #suffix>
							<button class="btn-open clr-wht font-28" open-type="getPhoneNumber" 
								@getphonenumber="getPhoneNumber" style=""
							>
								<text class="clr-prm">获取手机号</text>
							</button>
						</template>
					</u-input>
				</u-row>
			</template>
			
			<template #footer>
				<u-button v-if="!pageLoading" @click="handleConfirmLogin" type="primary" custom-style="height:66rpx;font-size:32rpx;border-radius: 16rpx;">登录</u-button>
			</template>
		</tpx-layout>
	</view>
</template>

<script>
	import { uniPromiseApi, showLoading, hideLoading } from "@/common/untool"
	import { USERKEY } from "@/store/actionKey"
	import { checkParams } from "@/common/validate"
	import * as apiService from "@/common/api"
	import { getCommonReqData } from "@/common/manageServer"
	import { doRequest } from "@/common/upload"
	import { getSessionUserInfo, getSessionXToken } from "@/session"
	
	export default {
		data() {
			return {
				pageLoading: true,
				submitLogin: {
					code: '',
					nickName: '',
					avatarUrl: '',
					phoneNumber: '',
				},
				submitValidConfig: {
					nickName: { required: true, requiredMsg: '昵称不能为空' },
					avatarUrl: { required: true, requiredMsg: '头像不能为空' },
					phoneNumber: { required: true, requiredMsg: '手机号不能为空' },
				},
				token: '',
				isLogined: !!getSessionXToken()
			}
		},
		computed: {
			
		},
		created() {
			try{
				this.initData()
			}catch(e){
				console.error("created -- initData ==========", e)
			}
			this.pageLoading = false
		},
		methods: {
			commodHeaders(){
				return {
					...getCommonReqData().header,
					"Oms-X-Token": this.token,
				}
			},
			async initData(){
				if(!this.isLogined) {
					await this.autoLogin()
					if(this.token) {
						// 如果用户信息已绑定，直接触发登录成功
						const res = await apiService.getInfoByApp({ _loading: true }, this.commodHeaders())
						let userInfo = res?.user || {}
						Object.assign(this.submitLogin , {
							nickName: userInfo.nickName,
							avatarUrl: userInfo.avatar,
							phoneNumber: userInfo.phonenumber,
						})
						try{
							await checkParams(this.submitLogin, this.submitValidConfig, false)
							this.loginSucceed()
						}catch(err){
							this.$emit("needLoginInput")
							console.error("auto login checkParams err=====", err)
						}
					}
				}
			},
			async onChooseAvatar(res) {
				let tmpFilePath = res.detail.avatarUrl
				let upRes = await doRequest(tmpFilePath, { header: this.commodHeaders() })
				this.submitLogin.avatarUrl = upRes.url
			},
			async autoLogin(){
				let token = ''
				showLoading()
				try{
					let lg = await uniPromiseApi('login', {})
					let code = lg.res.code
					this.submitLogin.code = code
					let res = await apiService.loginByMP(this.submitLogin)
					token = res.token
					this.token = token
				}catch(e){
					console.error("autoLogin error=====", e)
				}
				hideLoading()
				return token
			},
			async getPhoneNumber(e){
				let bPhoneRes = await apiService.bindPhone(e?.detail || {}, this.commodHeaders())
				this.submitLogin.phoneNumber = bPhoneRes.phone
			},
			handleNicknamereview(e){
				console.log(e)
			},
			async handleConfirmLogin() {
				await checkParams(this.submitLogin, this.submitValidConfig)
				await this.autoLogin()
				this.loginSucceed()
			},
			async loginSucceed(){
				let token = this.token
				await this.$store.dispatch(USERKEY.UPDATETOKEN, { token })
				this.$emit("succeedBack")
			}
		}
	}
</script>

<style scoped lang="scss">
	.lgn-page {
		position: relative;
		min-height: 100%;
	}
	.yunduo{
		position: absolute;
		bottom: 0rpx;
		left: 0;
		right: 0;
	}
	.avatar-empty{
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		text-align: center;
		border-radius: 10rpx;
		font-size: 28rpx;
		color: $uni-color-primary;
	}
</style>