完成登录的基本流程

components/mobile-login/mobile-login.vue

@@ -0,0 +1,114 @@
+<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="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
+									<view v-if="mobile">{{mobile}}</view>
+									<view v-else="!mobile">点击授手机号</view>
+									<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
+								</button>
+							</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: "mobile-login",
+		props: {
+			value: {
+				type: Boolean,
+				required: true
+			}
+		},
+		data() {
+			return {
+				mobile: ''
+			};
+		},
+		methods: {
+			onGetPhoneNumber(e) {
+				if (e.detail.errMsg === "getPhoneNumber:ok") {
+					// 这里需要解密手机号
+					this.mobile = 110
+				}
+			},
+			
+			// 提交数据
+			handleSubmit(e) {
+				const {mobile} = this
+				if (!mobile) return this.$toast({
+					title: '请授权手机号'
+				})
+				
+				this.$emit('update', {
+					mobile
+				})
+				
+				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>

components/mplogin/mplogin.vue

@@ -50,7 +50,7 @@
 		uploadFile
 	} from "@/utils/tools";
 	export default {
-		name: "mplogin-popup",
+		name: "mplogin",
 		props: {
 			value: {
 				type: Boolean,
@@ -59,10 +59,12 @@
 		},
 		data() {
 			return {
-				avatar: "",
+				avatar: '',
+				nickname: ''
 			};
 		},
 		methods: {
+			// 头像选择
 			onChooseAvatar(e) {
 				const avatarUrl = e.detail.avatarUrl;
 				if (!avatarUrl) {
@@ -80,6 +82,8 @@
 					this.$toast({title: "上传失败"});
 				});
 			},
+			
+			// 提交数据
 			handleSubmit(e) {
 				const {nickname} = e.detail.value
 				const {avatar} = this
@@ -99,6 +103,8 @@
 				this.showPop = false
 				this.$emit('close')
 			},
+			
+			// 关闭弹窗
 			onClose() {
 				this.showPop = false
 				this.$emit('close')