feat: 实现微信登录demo

src/components/fly-login/README.md

@@ -0,0 +1,7 @@
+# fly-login
+
+点击“点击显示微信头像”按钮后，出现的半屏登录弹窗，可以在任意页面引入。
+
+仿“掘金小册”小程序。
+
+![掘金小册登录](screenshot.png)

src/components/fly-login/fly-login.vue

@@ -0,0 +1,116 @@
+<template>
+  <view class="fly-login" v-if="show">
+    <view class="fly-login-mask" />
+    <view class="fly-login-content px-4">
+      <view class="font-bold h-16 leading-16">获取您的昵称、头像</view>
+      <view
+        class="rounded-full bg-light-600 w-6 h-6 text-center absolute top-4 right-4"
+        @click="onClose"
+      >
+        <view class="i-carbon-close text-gray-700" />
+      </view>
+
+      <view
+        class="flex items-center h-16 leading-16 border-b-gray-400 border-b-solid border-[1rpx]"
+      >
+        <text class="mr-4 flex-shrink-0">头像</text>
+        <button
+          class="bg-transparent flex items-center after:b-none w-full h-12 leading-12"
+          open-type="chooseAvatar"
+          @chooseavatar="onChooseAvatar"
+        >
+          <image class="w-8 h-8 rounded-full" :src="avatarUrl"></image>
+          <text class="ml-auto i-carbon-chevron-right"></text>
+        </button>
+      </view>
+
+      <view
+        class="flex items-center h-16 leading-16 border-b-gray-400 border-b-solid border-1 mt-4"
+      >
+        <text class="mr-4 flex-shrink-0">昵称</text>
+        <input type="nickname" placeholder="请输入昵称" @change="onChange" />
+      </view>
+
+      <button
+        size="default"
+        type="default"
+        style="color: #fff; background-color: #1aad19; border-color: #1aad19"
+        class="text-center leading-12 w-40 my-4"
+        @click="onSubmit"
+      >
+        确定
+      </button>
+    </view>
+  </view>
+</template>
+<script lang="ts" setup>
+import { useUserStore } from '@/store'
+import defaultAvatarUrl from './defaultAvatar.png'
+
+const userStore = useUserStore()
+
+const show = ref(true)
+const avatarUrl = ref(defaultAvatarUrl)
+const nickname = ref('')
+
+const onClose = () => {
+  show.value = false
+}
+
+const onChooseAvatar = (e) => {
+  const { avatarUrl: url } = e.detail
+  avatarUrl.value = url
+  // 这里就要上传，加快速度，提升体验（用户多次选择头像就多次上传吧，总有取舍）
+  console.log(url)
+}
+
+const onChange = (e) => {
+  const { value } = e.detail
+  nickname.value = value
+}
+
+const onSubmit = () => {
+  // 1、上传刚刚的图片，并返回网络地址
+  // 2、把用户信息存起来
+  if (avatarUrl.value === defaultAvatarUrl) {
+    uni.showToast({
+      title: '请选择头像',
+      icon: 'none',
+    })
+    return
+  }
+  if (!nickname.value) {
+    uni.showToast({
+      title: '请填写昵称',
+      icon: 'none',
+    })
+    return
+  }
+
+  console.log('保存用户信息')
+  userStore.setUserInfo({ nickname: nickname.value, avatar: avatarUrl.value })
+}
+</script>
+
+<style lang="scss" scoped>
+.fly-login {
+  position: fixed;
+  inset: 0;
+
+  .fly-login-mask {
+    position: fixed;
+    inset: 0;
+    background-color: rgb(0 0 0 / 30%);
+  }
+
+  .fly-login-content {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: #fff;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+  }
+}
+</style>