|
@@ -1,120 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <view class="fly-login" v-if="modelValue">
|
|
|
|
|
- <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" @blur="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 emit = defineEmits(['update:modelValue'])
|
|
|
|
|
-defineProps<{ modelValue: boolean }>()
|
|
|
|
|
-
|
|
|
|
|
-const userStore = useUserStore()
|
|
|
|
|
-
|
|
|
|
|
-const avatarUrl = ref(defaultAvatarUrl)
|
|
|
|
|
-const nickname = ref('')
|
|
|
|
|
-
|
|
|
|
|
-const onClose = () => {
|
|
|
|
|
- emit('update:modelValue', 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
|
|
|
|
|
- console.log(value)
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-const onSubmit = () => {
|
|
|
|
|
- // 1、上传刚刚的图片,并返回网络地址
|
|
|
|
|
- // 2、把用户信息存起来
|
|
|
|
|
- if (avatarUrl.value === defaultAvatarUrl) {
|
|
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '请选择头像',
|
|
|
|
|
- icon: 'none',
|
|
|
|
|
- })
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
- if (!nickname.value) {
|
|
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '请填写昵称',
|
|
|
|
|
- icon: 'none',
|
|
|
|
|
- })
|
|
|
|
|
- return
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- emit('update:modelValue', false)
|
|
|
|
|
- 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>
|
|
|