添加首页加载skeleton

This commit is contained in:
2026-05-26 17:04:04 +08:00
parent 9680276b3f
commit 2f528c049f
10 changed files with 1329 additions and 410 deletions

View File

@@ -146,7 +146,7 @@
<view class="info-row last-row" @click="openLanguagePicker">
<text class="info-label">语言偏好</text>
<view class="info-value-wrap">
<text class="info-value">{{ getLanguageText(profile.preferred_language) }}</text>
<text class="info-value">{{ getPreferredLanguageText() }}</text>
</view>
<text class="info-arrow"></text>
</view>
@@ -225,8 +225,8 @@
<view v-if="showLanguagePicker" class="picker-modal">
<picker-view class="picker-view" :value="tempLanguageIndex" :indicator-style="'height: 50px;'" @change="onLanguagePickerViewChange">
<picker-view-column style="width:750rpx;">
<view v-for="(language, idx) in languageOptions" :key="language" class="picker-item">
{{ getLanguageText(language) }}
<view v-for="(language, idx) in languageOptions" :key="language.id" class="picker-item">
{{ language.label }}
</view>
</picker-view-column>
</picker-view>
@@ -317,19 +317,41 @@
<script setup lang="uts">
import { ref, onMounted } from 'vue'
import supa from '@/components/supadb/aksupainstance.uts'
import { AkSupaSelectOptions } from '@/components/supadb/aksupa.uts'
import { setUserProfile } from '@/utils/store.uts'
import { PROFILE_REGION_OPTIONS, PROFILE_COMMON_ADDRESS_SUGGESTIONS } from '@/utils/profileRegionData.uts'
import type { UserProfile } from '@/types/mall-types.uts'
type AkLanguageRow = {
id: string
code: string
name: string
native_name: string
is_active: boolean
is_default: boolean
sort_order: number
created_at?: string
}
type LanguageOption = {
id: string
code: string
name: string
nativeName: string
label: string
isDefault: boolean
sortOrder: number
createdAt: string
}
const isLoading = ref<boolean>(false)
const isSaving = ref<boolean>(false)
const userAvatar = ref<string>('/static/logo.png')
const hasLoadError = ref<boolean>(false)
const registeredDate = ref<string>('暂未记录')
const profileRowId = ref<string>('')
const originalProfile = ref<UserProfile | null>(null)
const genderOptions: Array<string> = ['male', 'female', 'other']
const languageOptions: Array<string> = ['zh-CN', 'en-US']
const languageOptions = ref<Array<LanguageOption>>([])
const customOptionLabel = '自定义其他'
const healthGoalOptions: Array<string> = ['改善睡眠', '康复护理', '日常保健', '慢病管理', '营养调理', customOptionLabel]
const carePreferenceOptions: Array<string> = ['上门护理', '陪诊陪护', '康复训练', '定期回访', '电话提醒', customOptionLabel]
@@ -419,7 +441,7 @@ const profile = ref<UserProfile>({
weight_kg: 0,
bio: '',
avatar_url: '/static/logo.png',
preferred_language: 'zh-CN',
preferred_language: '',
health_goal: '',
service_address: '',
emergency_contact: '',
@@ -536,11 +558,167 @@ const getBmiText = (): string => {
return '' + rounded
}
const getLanguageText = (languageCode: string | null): string => {
if (languageCode == 'en-US') {
return 'English'
const normalizeString = (value: string | null | undefined): string | null => {
if (value == null) {
return null
}
return '中文'
const trimmed = value.trim()
return trimmed == '' ? null : trimmed
}
const normalizeNumber = (value: number | null | undefined): number | null => {
if (value == null) {
return null
}
const numericValue = Number(value)
return numericValue == numericValue ? numericValue : null
}
const normalizeDateString = (value: string | null | undefined): string | null => {
const normalized = normalizeString(value)
if (normalized == null) {
return null
}
const parts = normalized.split('T')
return parts.length > 0 ? parts[0] : normalized
}
const deepCloneProfile = (source: UserProfile): UserProfile => {
return {
id: source.id ?? '',
username: source.username ?? '',
email: source.email ?? '',
gender: source.gender ?? '',
birthday: source.birthday ?? '',
height_cm: source.height_cm ?? 0,
weight_kg: source.weight_kg ?? 0,
bio: source.bio ?? '',
avatar_url: source.avatar_url ?? '',
preferred_language: source.preferred_language ?? '',
health_goal: source.health_goal ?? '',
service_address: source.service_address ?? '',
emergency_contact: source.emergency_contact ?? '',
chronic_notes: source.chronic_notes ?? '',
care_preference: source.care_preference ?? '',
role: source.role ?? '',
school_id: source.school_id ?? '',
grade_id: source.grade_id ?? '',
class_id: source.class_id ?? '',
created_at: source.created_at ?? '',
updated_at: source.updated_at ?? ''
} as UserProfile
}
const getLanguageOptionById = (languageId: string | null | undefined): LanguageOption | null => {
const normalizedId = normalizeString(languageId)
if (normalizedId == null) {
return null
}
for (let i = 0; i < languageOptions.value.length; i++) {
const option = languageOptions.value[i]
if (option.id == normalizedId) {
return option
}
}
return null
}
const getDefaultLanguageOption = (): LanguageOption | null => {
for (let i = 0; i < languageOptions.value.length; i++) {
if (languageOptions.value[i].isDefault == true) {
return languageOptions.value[i]
}
}
for (let i = 0; i < languageOptions.value.length; i++) {
if (languageOptions.value[i].code == 'zh-CN') {
return languageOptions.value[i]
}
}
return languageOptions.value.length > 0 ? languageOptions.value[0] : null
}
const getLanguageLabel = (languageId: string | null): string => {
const language = getLanguageOptionById(languageId)
return language != null ? language.label : '未设置'
}
const getPreferredLanguageText = (): string => {
const currentLanguageId = normalizeString(profile.value.preferred_language)
if (currentLanguageId != null) {
return getLanguageLabel(currentLanguageId)
}
const defaultLanguage = getDefaultLanguageOption()
return defaultLanguage != null ? defaultLanguage.label : '未设置'
}
const loadLanguageOptions = async (): Promise<void> => {
const result = await supa
.from('ak_languages')
.select('id, code, name, native_name, is_active, is_default, sort_order, created_at', {} as UTSJSONObject)
.eq('is_active', true)
.order('sort_order', { ascending: true })
.execute()
if (result.error != null) {
console.error('加载语言列表失败:', JSON.stringify(result.error))
languageOptions.value = []
return
}
const rows = result.data
const options: Array<LanguageOption> = []
if (Array.isArray(rows)) {
for (let i = 0; i < rows.length; i++) {
const item = rows[i] as UTSJSONObject
const row: AkLanguageRow = {
id: item.getString('id') ?? '',
code: item.getString('code') ?? '',
name: item.getString('name') ?? '',
native_name: item.getString('native_name') ?? '',
is_active: item.getBoolean('is_active') ?? false,
is_default: item.getBoolean('is_default') ?? false,
sort_order: item.getNumber('sort_order') ?? 0,
created_at: item.getString('created_at') ?? ''
}
if (row.id == '') {
continue
}
const label = row.native_name != '' ? row.native_name : (row.name != '' ? row.name : row.code)
options.push({
id: row.id,
code: row.code,
name: row.name,
nativeName: row.native_name,
label,
isDefault: row.is_default,
sortOrder: row.sort_order,
createdAt: row.created_at ?? ''
} as LanguageOption)
}
}
for (let i = 0; i < options.length; i++) {
for (let j = i + 1; j < options.length; j++) {
let shouldSwap = false
if (options[j].sortOrder < options[i].sortOrder) {
shouldSwap = true
} else if (options[j].sortOrder == options[i].sortOrder && options[j].createdAt != '' && options[i].createdAt != '' && options[j].createdAt < options[i].createdAt) {
shouldSwap = true
}
if (shouldSwap) {
const temp = options[i]
options[i] = options[j]
options[j] = temp
}
}
}
languageOptions.value = options
}
const getTextOrPlaceholder = (fieldValue: string | null | undefined, placeholder: string): string => {
@@ -878,19 +1056,37 @@ const confirmAddressPicker = (): void => {
}
const openLanguagePicker = (): void => {
const languageValue = profile.value.preferred_language
const idx = languageValue != null ? languageOptions.indexOf(languageValue) : -1
tempLanguageIndex.value = [idx >= 0 ? idx : 0]
if (languageOptions.value.length == 0) {
uni.showToast({
title: '语言列表加载中',
icon: 'none'
})
return
}
const currentLanguageId = normalizeString(profile.value.preferred_language)
const defaultLanguage = getDefaultLanguageOption()
const targetLanguageId = currentLanguageId != null ? currentLanguageId : (defaultLanguage != null ? defaultLanguage.id : '')
let idx = 0
for (let i = 0; i < languageOptions.value.length; i++) {
if (languageOptions.value[i].id == targetLanguageId) {
idx = i
break
}
}
tempLanguageIndex.value = [idx]
showLanguagePicker.value = true
}
const onLanguagePickerViewChange = (e: UniPickerViewChangeEvent): void => {
const idx = e.detail.value[0]
tempLanguageIndex.value = [(idx >= 0 && idx < languageOptions.length) ? idx : 0]
tempLanguageIndex.value = [(idx >= 0 && idx < languageOptions.value.length) ? idx : 0]
}
const confirmLanguagePicker = (): void => {
profile.value.preferred_language = languageOptions[tempLanguageIndex.value[0]]
if (languageOptions.value.length > 0) {
profile.value.preferred_language = languageOptions.value[tempLanguageIndex.value[0]].id
}
showLanguagePicker.value = false
}
@@ -938,7 +1134,7 @@ const loadProfile = async (): Promise<void> => {
weight_kg: prodata.getNumber('weight_kg') ?? 0,
bio: prodata.getString('bio') ?? '',
avatar_url: prodata.getString('avatar_url') ?? '/static/logo.png',
preferred_language: prodata.getString('preferred_language') ?? 'zh-CN',
preferred_language: prodata.getString('preferred_language') ?? '',
health_goal: prodata.getString('health_goal') ?? '',
service_address: prodata.getString('service_address') ?? '',
emergency_contact: prodata.getString('emergency_contact') ?? '',
@@ -947,6 +1143,7 @@ const loadProfile = async (): Promise<void> => {
} as UserProfile
p.service_address = normalizeServiceAddress(p.service_address)
profile.value = p
originalProfile.value = deepCloneProfile(p)
const createdAt = prodata.getString('created_at')
if (createdAt != null && createdAt != '') {
registeredDate.value = formatDate(createdAt)
@@ -1005,54 +1202,88 @@ const loadProfile = async (): Promise<void> => {
} as UserProfile
setUserProfile(newProfileData)
}
originalProfile.value = deepCloneProfile(profile.value)
}
isLoading.value = false
}
const saveProfile = async (): Promise<void> => {
isSaving.value = true
try {
const userid: string = profileRowId.value != '' ? profileRowId.value : (profile.value.id ?? '')
const birthdayValue = profile.value.birthday != null ? profile.value.birthday.trim() : ''
console.log('saveProfile context:', JSON.stringify({
profileRowId: profileRowId.value,
profileId: profile.value.id,
birthday: birthdayValue != '' ? birthdayValue : null,
hasHealthGoal: (profile.value.health_goal ?? '') != '',
hasServiceAddress: (profile.value.service_address ?? '') != ''
}))
const baseUpdateData = new UTSJSONObject()
baseUpdateData.set('username', profile.value.username)
baseUpdateData.set('gender', profile.value.gender)
baseUpdateData.set('birthday', birthdayValue != '' ? birthdayValue : null)
baseUpdateData.set('height_cm', profile.value.height_cm)
baseUpdateData.set('weight_kg', profile.value.weight_kg)
baseUpdateData.set('bio', profile.value.bio)
baseUpdateData.set('avatar_url', profile.value.avatar_url)
const buildProfileUpdatePayload = (): UTSJSONObject => {
const payload = new UTSJSONObject()
const oldProfile = originalProfile.value
const newProfile = profile.value
const updateData = new UTSJSONObject()
updateData.set('username', profile.value.username)
updateData.set('gender', profile.value.gender)
updateData.set('birthday', birthdayValue != '' ? birthdayValue : null)
updateData.set('height_cm', profile.value.height_cm)
updateData.set('weight_kg', profile.value.weight_kg)
updateData.set('bio', profile.value.bio)
updateData.set('avatar_url', profile.value.avatar_url)
updateData.set('health_goal', profile.value.health_goal)
updateData.set('service_address', profile.value.service_address)
updateData.set('emergency_contact', profile.value.emergency_contact)
updateData.set('chronic_notes', profile.value.chronic_notes)
updateData.set('care_preference', profile.value.care_preference)
let result = await supa
if (oldProfile == null) {
return payload
}
if (normalizeString(oldProfile.username) != normalizeString(newProfile.username)) {
payload.set('username', normalizeString(newProfile.username))
}
if (normalizeString(oldProfile.avatar_url) != normalizeString(newProfile.avatar_url)) {
payload.set('avatar_url', normalizeString(newProfile.avatar_url))
}
if (normalizeString(oldProfile.gender) != normalizeString(newProfile.gender)) {
payload.set('gender', normalizeString(newProfile.gender))
}
if (normalizeDateString(oldProfile.birthday) != normalizeDateString(newProfile.birthday)) {
payload.set('birthday', normalizeDateString(newProfile.birthday))
}
if (normalizeString(oldProfile.service_address) != normalizeString(newProfile.service_address)) {
payload.set('service_address', normalizeString(newProfile.service_address))
}
if (normalizeString(oldProfile.bio) != normalizeString(newProfile.bio)) {
payload.set('bio', normalizeString(newProfile.bio))
}
if (normalizeNumber(oldProfile.height_cm) != normalizeNumber(newProfile.height_cm)) {
payload.set('height_cm', normalizeNumber(newProfile.height_cm))
}
if (normalizeNumber(oldProfile.weight_kg) != normalizeNumber(newProfile.weight_kg)) {
payload.set('weight_kg', normalizeNumber(newProfile.weight_kg))
}
if (normalizeString(oldProfile.preferred_language) != normalizeString(newProfile.preferred_language)) {
payload.set('preferred_language', normalizeString(newProfile.preferred_language))
}
if (normalizeString(oldProfile.health_goal) != normalizeString(newProfile.health_goal)) {
payload.set('health_goal', normalizeString(newProfile.health_goal))
}
if (normalizeString(oldProfile.emergency_contact) != normalizeString(newProfile.emergency_contact)) {
payload.set('emergency_contact', normalizeString(newProfile.emergency_contact))
}
if (normalizeString(oldProfile.chronic_notes) != normalizeString(newProfile.chronic_notes)) {
payload.set('chronic_notes', normalizeString(newProfile.chronic_notes))
}
if (normalizeString(oldProfile.care_preference) != normalizeString(newProfile.care_preference)) {
payload.set('care_preference', normalizeString(newProfile.care_preference))
}
return payload
}
const saveProfile = async (): Promise<void> => {
const userid: string = profileRowId.value != '' ? profileRowId.value : (profile.value.id ?? '')
const updatePayload = buildProfileUpdatePayload()
if (UTSJSONObject.keys(updatePayload).length == 0) {
uni.showToast({
title: '没有修改内容',
icon: 'none'
})
return
}
isSaving.value = true
try {
updatePayload.set('updated_at', new Date().toISOString())
const result = await supa
.from('ak_users')
.update(updateData)
.update(updatePayload)
.eq('id', userid)
.execute()
if (result.error == null) {
originalProfile.value = deepCloneProfile(profile.value)
setUserProfile(profile.value)
uni.showToast({
title: '保存成功',
@@ -1060,25 +1291,10 @@ const saveProfile = async (): Promise<void> => {
})
} else {
console.log('saveProfile update ak_users error:', JSON.stringify(result.error))
result = await supa
.from('ak_users')
.update(baseUpdateData)
.eq('id', userid)
.execute()
if (result.error == null) {
setUserProfile(profile.value)
uni.showToast({
title: '基础资料已保存,康养字段待后端升级',
icon: 'none'
})
} else {
console.log('saveProfile fallback update ak_users error:', JSON.stringify(result.error))
uni.showToast({
title: '保存失败,请稍后重试',
icon: 'none'
})
}
uni.showToast({
title: '保存失败',
icon: 'none'
})
}
} catch (e) {
console.log('saveProfile exception:', e)
@@ -1221,6 +1437,7 @@ const confirmBirthdayPicker = (): void => {
onMounted(() => {
loadRecentAddressSuggestions()
loadLanguageOptions()
loadProfile()
})
</script>