index.vue
2.2 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
<!--
* @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" />
</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'
const go = useGo()
const avatarUrl = ref('https://picsum.photos/seed/user/200/200')
const onChangeAvatar = () => {
Taro.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
// tempFilePath can be used as image src
avatarUrl.value = res.tempFilePaths[0]
}
})
}
const onCancel = () => {
Taro.navigateBack()
}
const onSave = () => {
Taro.showLoading({ title: '保存中...' })
setTimeout(() => {
Taro.hideLoading()
Taro.showToast({ title: '保存成功', icon: 'success' })
setTimeout(() => {
Taro.navigateBack()
}, 1500)
}, 1000)
}
</script>