完成登录的基本流程

2025-04-24 11:19:57 +08:00
parent 2ce4777910
commit 94b03b98a8
84 changed files with 1458 additions and 548 deletions
--- a/components/mplogin/mplogin.vue
+++ b/components/mplogin/mplogin.vue
@ -0,0 +1,145 @@
+<template>
+	<view>
+		<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true"
+			:maskCloseAble="false">
+			<view class="popup-content">
+				<view class="u-font-xl bold-600">
+					获取您的昵称和头像
+				</view>
+				<view class="popup-form">
+					<form @submit="handleSubmit">
+						<view class="u-flex u-row-between avatar u-margin-top-80">
+							<text>头像</text>
+							<view class="u-flex u-row-between flex1 u-margin-left-30">
+								<button style="border: none;" class="u-flex u-row-between w-full" hover-class="none"
+									open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+									<u-image v-if="avatar" :src="avatar" width="100rpx" height="100rpx"shape="circle"></u-image>
+									<view v-else="!avatar">点击授权头像</view>
+									<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
+								</button>
+							</view>
+						</view>
+						<view class="u-flex u-row-between avatar u-margin-top-60">
+							<text>昵称</text>
+							<view class="u-flex u-row-between flex1 u-margin-left-30">
+								<input
+									:value="nickname"
+									name="nickname"
+									type="nickname"
+									placeholder="请输入昵称"
+									placeholder-style="color: #000;"
+								/>
+								<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
+							</view>
+						</view>
+						<button class="submit-btn bg-primary" form-type="submit">
+						    确定
+						</button>
+						<view class="text-default u-text-center close-btn" @tap="onClose">
+							暂不登录
+						</view>
+					</form>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	import {
+		uploadFile
+	} from "@/utils/tools";
+	export default {
+		name: "mplogin",
+		props: {
+			value: {
+				type: Boolean,
+				required: true
+			}
+		},
+		data() {
+			return {
+				avatar: '',
+				nickname: ''
+			};
+		},
+		methods: {
+			// 头像选择
+			onChooseAvatar(e) {
+				const avatarUrl = e.detail.avatarUrl;
+				if (!avatarUrl) {
+					return;
+				}
+				uni.showLoading({
+					title: "正在上传中...",
+					mask: true,
+				});
+				uploadFile(avatarUrl).then((res) => {
+					uni.hideLoading();
+					this.avatar = res.url;
+				}).catch(() => {
+					uni.hideLoading();
+					this.$toast({title: "上传失败"});
+				});
+			},
+			
+			// 提交数据
+			handleSubmit(e) {
+				const {nickname} = e.detail.value
+				const {avatar} = this
+				if (!avatar) return this.$toast({
+					title: '请添加头像'
+				})
+				
+				if (!nickname) return this.$toast({
+					title: '请输入昵称'
+				})
+				
+				this.$emit('update', {
+					avatar,
+					nickname
+				})
+				
+				this.showPop = false
+				this.$emit('close')
+			},
+			
+			// 关闭弹窗
+			onClose() {
+				this.showPop = false
+				this.$emit('close')
+			}
+		},
+		computed: {
+			showPop: {
+				get() {
+					return this.value
+				},
+				set(val) {
+					this.$emit('input', val)
+				}
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.popup-content {
+		padding: 40rpx 40rpx 60rpx;
+		
+		.submit-btn {
+			margin-top: 80rpx;
+			background-color: #254062;
+			padding: 6rpx 0;
+			border-radius: 100rpx;
+			color: #fff;
+		}
+		
+		.close-btn {
+			margin-top: 20rpx;
+			border: 1px solid #254062;
+			padding: 20rpx 0;
+			border-radius: 100rpx;
+		}
+	}
+</style>