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

<template>
	<view class="lgn-page">
		<view class="pos-abt-all" style="z-index: 0;overflow: hidden;">
			<tpx-image width="750" mode="widthFix" :src="getCdnUrl('login/bg.png')"></tpx-image>
			<view class="yunduo">
				<tpx-image width="750" mode="widthFix" :src="getCdnUrl('login/bg-yun.png')"></tpx-image>
			</view>
		</view>
		<view class="pos-rlt" style="z-index: 1;">
			<view>
				<u-image custom-style="margin: 160rpx auto 0 auto;" width="140" height="140" :src="getCdnUrl('logo.png')"></u-image>
				<u-text margin="70rpx 0 0 0" size="60" text="探路物流 速运全球" color="#fff" bold="true" align="center"></u-text>	
			</view>
			<view style="margin-top: 90rpx;" class="pl-30 pr-30">
				
				<u-row custom-style="margin-top: 30rpx;">
					<u-input type="nickname" v-model="submitLogin.nickName" placeholder="昵称"
						color="#fff" font-size="30" placeholder-style="color: #FFF;"
						custom-style="padding: 20rpx 60rpx;background: rgba(255,255,255,0.2); border: 2px solid #FFFFFF;border-radius: 16rpx;" 
					></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="手机号"
						color="#fff" font-size="30"
						custom-style="padding: 20rpx 60rpx;background: rgba(255,255,255,0.2); border: 2px solid #FFFFFF;border-radius: 16rpx;" 
						placeholder-style="color: #FFF;"
					>
						<template #suffix>
							<button class="btn-open clr-wht font-28" open-type="getPhoneNumber" 
								@getphonenumber="getPhoneNumber" style="background: rgba(255,255,255,0.2);"
							>
								获取手机号
							</button>
						</template>
					</u-input>
				</u-row>
				
				<view style="margin-top: 70rpx;">
					<u-button v-if="!pageLoading" @click="handleConfirmLogin" custom-style="height:90rpx;font-size:32rpx;color: #B12D29;font-weight: bold;;box-shadow: 0rpx 12rpx 21rpx 0rpx rgba(177,45,41,0.32);border-radius: 16rpx;">登录</u-button>
				</view>
				
			</view>
		</view>
	</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 } 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: '',
			}
		},
		computed: {
			
		},
		created() {
			this.initData()
		},
		methods: {
			commodHeaders(){
				return {
					...getCommonReqData().header,
					"Oms-X-Token": this.token,
				}
			},
			async initData(){
				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,
					})
					this.pageLoading = false
					let seInfo = getSessionUserInfo()
					// 手动退出的场景，不做自动登录
					if(!seInfo.logout){
						await checkParams(this.submitLogin, this.submitValidConfig, false)
						this.loginSucceed()
					}
				}
				this.pageLoading = false
			},
			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 {
		background-color: #B12D29;
		position: relative;
		min-height: 100%;
		background-size: 100% auto; 
		background-repeat: no-repeat;
	}
	.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>