109 lines
2.1 KiB
Vue
109 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import type { Profile } from '@/types/business/profile'
|
|
|
|
interface Props {
|
|
profile: Profile | null
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
|
|
const emit = defineEmits<{ saveNickname: [name: string] }>()
|
|
|
|
const draft = ref('')
|
|
|
|
watch(
|
|
() => props.profile?.nickname,
|
|
(name) => {
|
|
draft.value = name ?? ''
|
|
},
|
|
{ immediate: true },
|
|
)
|
|
|
|
function save(): void {
|
|
const name = draft.value.trim()
|
|
if (!name || name === props.profile?.nickname) return
|
|
emit('saveNickname', name)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="profile-user-card">
|
|
<div class="profile-user-card__avatar" aria-hidden="true">
|
|
王
|
|
</div>
|
|
<input
|
|
v-model="draft"
|
|
class="profile-user-card__name"
|
|
type="text"
|
|
placeholder="请输入名称"
|
|
maxlength="20"
|
|
@keyup.enter="save"
|
|
@blur="save"
|
|
>
|
|
<p class="profile-user-card__phone">
|
|
{{ profile?.phone ?? '' }}
|
|
</p>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.profile-user-card {
|
|
.flex(column, center, center);
|
|
height: 110px;
|
|
border-radius: @radius-lg;
|
|
background: linear-gradient(180deg, @profile-user-from 0%, @profile-user-to 100%);
|
|
box-sizing: border-box;
|
|
|
|
&__avatar {
|
|
.flex(row, center);
|
|
flex-shrink: 0;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: @radius-round;
|
|
background: fade(@white, 22%);
|
|
color: @white;
|
|
font-size: @font-size-lg;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__name {
|
|
width: 100%;
|
|
height: 26px;
|
|
margin-top: 6px;
|
|
padding: 0 @spacing-xs;
|
|
border: 1px solid transparent;
|
|
border-radius: @profile-radius;
|
|
background: transparent;
|
|
font-size: @font-size-lg;
|
|
font-weight: 600;
|
|
color: @white;
|
|
text-align: center;
|
|
outline: none;
|
|
transition: all 0.2s;
|
|
|
|
&:hover {
|
|
border-color: fade(@white, 55%);
|
|
}
|
|
|
|
&:focus {
|
|
border-color: @white;
|
|
background: fade(@white, 12%);
|
|
}
|
|
|
|
&::placeholder {
|
|
font-size: @font-size-lg;
|
|
font-weight: 400;
|
|
color: fade(@white, 75%);
|
|
}
|
|
}
|
|
|
|
&__phone {
|
|
margin-top: 6px;
|
|
font-size: @font-size-sm;
|
|
color: @white;
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|