gas-station-ticket-uniapp-240822/pages/login/login.vue

<template>
	<view class="login">
		<view class="title">
			帧视界
		</view>
		<view class="title">
			申请获取你的头像、昵称
		</view>

		<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<view class="line">
				<view class="">
					头像
				</view>
				<view class="">
					<image :src="avatarUrl" v-if="avatarUrl" style="width: 60rpx;height: 60rpx;" mode=""></image>

					<image src="/static/image/tabbar/6.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image>
				</view>
			</view>
		</button>

		<view class="line">
			<view class="">
				昵称
			</view>
			<view class="">
				<input type="nickname" placeholder="请输入昵称" style="text-align: right;" v-model="nickname" />
			</view>
		</view>

		<view @click="login" class="btn">
			授权登录
		</view>

	</view>
</template>

<script>
	import api from '@/utils/api.js'
	
	export default {
		data() {
			return {
				avatarUrl: '',
				nickname: '',
			};
		},
		onShow() {},
		methods: {
			onChooseAvatar(res) {
				console.log(res);
				this.avatarUrl = res.target.avatarUrl
			},

			login(state) {
				uni.login({
					success(res) {
						if (res.errMsg != "login:ok") {
							return
						}

						api('loginLogin', {
							code: res.code
						}, res => {
							if (res.code != 200) {
								return
							}

							state.userInfo = res.result.userInfo
							uni.setStorageSync('token', res.result.token)

							if (state.userInfo) {

							}
						})
					}
				})
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 80vh;

		.title {
			line-height: 45rpx;
			font-weight: 900;
		}

		.line {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 80%;
			border-bottom: 1px solid #00000023;
			padding: 30rpx 0;
			margin: 0 auto;
		}

		.chooseAvatar {
			width: 100%;
			padding: 0;
			margin: 0;
			margin-top: 10vh;
			border: none;
		}

		.btn {
			// background: $uni-linear-gradient-btn-color;
			background: lightblue;
			color: #fff;
			width: 80%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 15rpx;
			margin-top: 10vh;
		}
	}
</style>