index.vue
5.34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!--
* @Date: 2026-01-29 22:25:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-29 22:54:41
* @FilePath: /manulife-weapp/src/pages/avatar/index.vue
* @Description: 修改头像页面
-->
<template>
<view class="min-h-screen bg-white flex flex-col">
<!-- NavHeader -->
<NavHeader title="修改头像" />
<!-- Main Content -->
<view class="flex-1 flex flex-col items-center pt-[120rpx]">
<view class="relative mb-[60rpx]" @tap="onChangeAvatar">
<nut-avatar size="large" class="!w-[240rpx] !h-[240rpx] shadow-lg border-4 border-gray-100">
<img :src="avatarUrl" style="object-fit: cover; width: 100%; height: 100%;" />
</nut-avatar>
<view class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black/30 rounded-full p-[16rpx]">
<IconFont name="photograph" color="#fff" size="24" />
</view>
</view>
<text class="text-gray-500 text-[32rpx] mb-[12rpx]">点击更换头像</text>
</view>
<!-- Footer Buttons -->
<view class="px-[40rpx] pb-[80rpx] w-full">
<view class="flex gap-[32rpx]">
<nut-button plain type="primary" block class="flex-1 !rounded-[48rpx]" @click="onCancel">取消</nut-button>
<nut-button type="primary" block class="flex-1 !rounded-[48rpx]" @click="onSave">保存</nut-button>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { useGo } from '@/hooks/useGo'
import IconFont from '@/components/IconFont.vue'
import NavHeader from '@/components/NavHeader.vue'
import Taro from '@tarojs/taro'
import defaultAvatar from '@/assets/images/icon/avatar.svg'
import { updateProfileAPI } from '@/api/user'
import BASE_URL from '@/utils/config'
const go = useGo()
const avatarUrl = ref(defaultAvatar)
const tempAvatarUrl = ref('') // 临时存储上传后的头像URL
const tempAvatarMetaId = ref(null) // 临时存储上传后的头像 meta_id
/**
* @description 更换头像(参考老来赛项目,直接上传到服务器)
*/
const onChangeAvatar = () => {
Taro.chooseImage({
count: 1,
sizeType: ['compressed'], // 使用压缩图,减少上传时间
sourceType: ['album', 'camera'],
success: async (res) => {
const tempFile = res.tempFiles[0]
// 检查文件大小(5MB限制)
if (tempFile.size > 5 * 1024 * 1024) {
Taro.showToast({
title: '图片大小不能超过5MB',
icon: 'none',
})
return
}
// 显示上传进度
Taro.showLoading({ title: '上传中...', mask: true })
// 参考老来赛:直接用 Taro.uploadFile 上传到服务器
Taro.uploadFile({
url: BASE_URL + '/admin/?m=srv&a=upload&image_audit=1',
filePath: tempFile.path,
name: 'file',
success: (uploadRes) => {
Taro.hideLoading()
const data = JSON.parse(uploadRes.data)
// 检查是否为审核不通过
if (data.data && data.data.audit_code == -1) {
Taro.showModal({
title: '温馨提示',
content: data.msg || '图片审核不通过',
showCancel: false
})
return
}
if (data.code === 0) { // 注意:老来赛后端 code=0 表示成功
avatarUrl.value = data.data.src
tempAvatarUrl.value = data.data.src
// 保存 meta_id,用于后续更新头像
tempAvatarMetaId.value = data.data.meta_id || data.data.id || null
console.log('上传成功,meta_id:', tempAvatarMetaId.value)
Taro.showToast({
title: '上传成功',
icon: 'success'
})
} else {
Taro.showToast({
title: data.msg || '上传失败',
icon: 'none'
})
}
},
fail: () => {
Taro.hideLoading()
Taro.showToast({
title: '上传失败,请稍后重试',
icon: 'none'
})
}
})
}
})
}
/**
* @description 取消修改
*/
const onCancel = () => {
Taro.navigateBack()
}
/**
* @description 保存头像
*/
const onSave = async () => {
// 如果没有上传新头像,直接返回
if (!tempAvatarUrl.value) {
Taro.showToast({
title: '请先选择头像',
icon: 'none'
})
return
}
// 检查是否有 meta_id
if (!tempAvatarMetaId.value) {
console.error('缺少 avatar_meta_id,上传响应可能不包含 meta_id 字段')
Taro.showToast({
title: '上传数据异常,请重试',
icon: 'none'
})
return
}
// 保存到服务器
Taro.showLoading({ title: '保存中...', mask: true })
try {
// ✅ 修复:传递正确的参数 avatar_meta_id
const res = await updateProfileAPI({
avatar_meta_id: tempAvatarMetaId.value
})
Taro.hideLoading()
if (res.code === 1) {
Taro.showToast({
title: '保存成功',
icon: 'success'
})
setTimeout(() => {
Taro.navigateBack()
}, 1500)
} else {
Taro.showToast({
title: res.msg || '保存失败',
icon: 'none'
})
}
} catch (err) {
Taro.hideLoading()
console.error('保存头像失败:', err)
Taro.showToast({
title: '保存失败,请稍后重试',
icon: 'none'
})
}
}
</script>