121 lines
3.1 KiB
Vue
121 lines
3.1 KiB
Vue
<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: var(--window-bottom);
|
||
left: 0;
|
||
background-color: #fff;
|
||
border-top-left-radius: 16px;
|
||
border-top-right-radius: 16px;
|
||
}
|
||
}
|
||
</style>
|