|
@@ -13,49 +13,124 @@
|
|
// eslint-disable-next-line unused-imports/no-unused-imports
|
|
// eslint-disable-next-line unused-imports/no-unused-imports
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
|
|
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
|
|
import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
|
|
|
|
+import { updateInfo } from '@/api/login'
|
|
|
|
+import { useUserStore } from '@/store'
|
|
|
|
+import { getEnvBaseUploadUrl } from '@/utils'
|
|
|
|
+import { toast } from '@/utils/toast'
|
|
|
|
|
|
defineOptions({
|
|
defineOptions({
|
|
name: 'MyProfile', // 我的资料
|
|
name: 'MyProfile', // 我的资料
|
|
})
|
|
})
|
|
|
|
+
|
|
|
|
+const userStore = useUserStore()
|
|
|
|
+const userInfo = computed(() => {
|
|
|
|
+ return getUserInfoHook()
|
|
|
|
+})
|
|
|
|
+
|
|
// z-paging
|
|
// z-paging
|
|
const paging = ref(null)
|
|
const paging = ref(null)
|
|
// 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
|
|
// 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
|
|
useZPaging(paging)
|
|
useZPaging(paging)
|
|
-// 搜索结果
|
|
|
|
-const dataList = ref([])
|
|
|
|
-function queryList(pageNo, pageSize) {
|
|
|
|
- // 此处请求仅为演示,请替换为自己项目中的请求
|
|
|
|
- setTimeout(() => {
|
|
|
|
- dataList.value = [
|
|
|
|
- { title: '123' },
|
|
|
|
- { title: '123' },
|
|
|
|
- { title: '123' },
|
|
|
|
- { title: '12345' },
|
|
|
|
- ]
|
|
|
|
- paging.value.complete(dataList.value)
|
|
|
|
- }, 1000)
|
|
|
|
|
|
+
|
|
|
|
+const uploading = ref(false)
|
|
|
|
+
|
|
|
|
+// 更新头像
|
|
|
|
+async function updateAvatar() {
|
|
|
|
+ try {
|
|
|
|
+ // 使用 uni.chooseMedia 选择图片
|
|
|
|
+ const res: any = await new Promise((resolve, reject) => {
|
|
|
|
+ uni.chooseMedia({
|
|
|
|
+ count: 1,
|
|
|
|
+ mediaType: ['image'],
|
|
|
|
+ sourceType: ['album', 'camera'],
|
|
|
|
+ success: resolve,
|
|
|
|
+ fail: reject,
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ if (!res.tempFiles || res.tempFiles.length === 0) {
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const tempFile = res.tempFiles[0]
|
|
|
|
+ const tempFilePath = tempFile.tempFilePath
|
|
|
|
+
|
|
|
|
+ // 检查文件大小(限制为5MB)
|
|
|
|
+ const maxSize = 5 * 1024 * 1024
|
|
|
|
+ if (tempFile.size > maxSize) {
|
|
|
|
+ toast.error('Image size cannot exceed 5MB')
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ uploading.value = true
|
|
|
|
+ await uni.showLoading({
|
|
|
|
+ title: 'Uploading...',
|
|
|
|
+ mask: true,
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ // 上传图片
|
|
|
|
+ const uploadRes: any = await new Promise((resolve, reject) => {
|
|
|
|
+ uni.uploadFile({
|
|
|
|
+ url: `${getEnvBaseUploadUrl()}`,
|
|
|
|
+ filePath: tempFilePath,
|
|
|
|
+ name: 'file',
|
|
|
|
+ success: resolve,
|
|
|
|
+ fail: reject,
|
|
|
|
+ })
|
|
|
|
+ })
|
|
|
|
+ console.log('uploadRes', uploadRes)
|
|
|
|
+ // 解析上传结果
|
|
|
|
+ const uploadData = JSON.parse(uploadRes.data)
|
|
|
|
+ if (uploadData.code !== 200) {
|
|
|
|
+ throw new Error(uploadData.message || 'Upload failed')
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ const avatarUrl = uploadData.data.url
|
|
|
|
+ // 调用更新用户信息接口
|
|
|
|
+ await updateInfo({
|
|
|
|
+ headPic: avatarUrl,
|
|
|
|
+ })
|
|
|
|
+ // 更新本地用户信息
|
|
|
|
+ const newUserInfo = { ...userInfo.value, headPic: avatarUrl }
|
|
|
|
+ userStore.setUserInfo(newUserInfo)
|
|
|
|
+
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ toast.success('Avatar updated successfully')
|
|
|
|
+ }
|
|
|
|
+ catch (error: any) {
|
|
|
|
+ uni.hideLoading()
|
|
|
|
+ console.error('Update avatar failed:', error)
|
|
|
|
+ toast.error(error.message || 'Failed to update avatar')
|
|
|
|
+ }
|
|
|
|
+ finally {
|
|
|
|
+ uploading.value = false
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<template>
|
|
- <z-paging ref="paging" refresher-only use-page-scroll @query="queryList">
|
|
|
|
|
|
+ <z-paging ref="paging" refresher-only use-page-scroll>
|
|
<view class="py-20rpx">
|
|
<view class="py-20rpx">
|
|
<wd-cell-group custom-class="mb-20rpx" border>
|
|
<wd-cell-group custom-class="mb-20rpx" border>
|
|
<wd-cell title="Avatar" center>
|
|
<wd-cell title="Avatar" center>
|
|
- <view class="flex items-center justify-end">
|
|
|
|
- <wd-img width="64rpx" height="64rpx" custom-class="mr-18rpx" round src="/static/images/avatar.jpg" />
|
|
|
|
- <wd-icon name="arrow-right" size="36rpx" />
|
|
|
|
|
|
+ <view class="flex items-center justify-end" @click="updateAvatar">
|
|
|
|
+ <view class="relative flex items-center justify-center">
|
|
|
|
+ <wd-img width="64rpx" height="64rpx" round :src="userInfo.headPic" />
|
|
|
|
+ <view v-if="uploading" class="absolute inset-0 flex items-center justify-center rounded-full bg-black bg-opacity-50">
|
|
|
|
+ <wd-loading size="20rpx" color="#fff" />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <wd-icon name="arrow-right" custom-class="ml-10rpx" size="36rpx" />
|
|
</view>
|
|
</view>
|
|
</wd-cell>
|
|
</wd-cell>
|
|
- <wd-cell title="User ID" value="123456" />
|
|
|
|
- <wd-cell title="User Name" value="Aamir Khan" />
|
|
|
|
- <wd-cell title="Full Name" value="Aamir Khan" />
|
|
|
|
- <wd-cell title="Mobile Number" value="88017123456789" />
|
|
|
|
|
|
+ <wd-cell title="User ID" :value="userInfo.userId" />
|
|
|
|
+ <wd-cell title="User Name" :value="userInfo.name" />
|
|
|
|
+ <wd-cell title="Mobile Number" :value="userInfo.phoneNo" />
|
|
</wd-cell-group>
|
|
</wd-cell-group>
|
|
<wd-cell-group custom-class="mb-20rpx" border>
|
|
<wd-cell-group custom-class="mb-20rpx" border>
|
|
- <wd-cell title="Bank Name" value="Aamir Khan" />
|
|
|
|
- <wd-cell title="Bank Account Name" value="Aamir Khan" />
|
|
|
|
- <wd-cell title="Bank Account No." value="88017123456789" />
|
|
|
|
|
|
+ <wd-cell title="Bank Name" :value="userInfo.bank" />
|
|
|
|
+ <wd-cell title="Bank Account Name" :value="userInfo.bankAccountName" />
|
|
|
|
+ <wd-cell title="Bank Account No." :value="userInfo.bankAccount" />
|
|
</wd-cell-group>
|
|
</wd-cell-group>
|
|
</view>
|
|
</view>
|
|
</z-paging>
|
|
</z-paging>
|