<template>
<u-nav-bar title="编辑头像" transparent />
<u-page-view classes="content" block>
<image class="avatar" :src="userInfo?.avatar || state.logo" mode="aspectFill" />
<u-text class="edit-tips" block size="small">
您可自定义设置头像，如果图片包含不适当的内容，它将无法更换成功或被默认图片替换
<u-text size="small" color="#55d091" @click="onMore">了解更多</u-text>
</u-text>
<button class="travel-btn-primary" @click="onChange">更换头像</button>
</u-page-view>
<l-clipper v-if="state.clipper" @success="onSuccess" :image-url="state.filePath" />
</template>
<script setup lang="ts">
import { useRouteGuards } from '@/core/hooks'
import { prefixs } from '@/core/apis/configs'
import { updateAuditAvatar } from '@/core/service'
const obs = ref(prefixs.obs)
const state = reactive<{
logo: string
filePath: string
clipper: boolean
}>({
logo: ${obs}/mine/default-avatar.png,
filePath: '',
clipper: false,
})
const { userStore } = useRouteGuards()
const { userInfo } = userStore
const onChange = () => {
uni.chooseImage({
count: 1,
success(res) {
state.filePath = res?.tempFilePaths?.[0]
if (state.filePath) {
state.clipper = true
}
},
})
}
const onSuccess = async (event: { url: string; height: number; width: number }) => {
userInfo.avatar = event.url
const next = await updateAuditAvatar(userInfo.avatar)
if (next) {
userStore.setUserinfo(userInfo)
}
state.clipper = false
}
const onMore = () => {
uni.navigateTo({ url: '/pages/mine/settings/about/index' })
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
deep(.content) {
.avatar {
width: 750rpx;
height: 750rpx;
margin: 12rpx 0 72rpx;
}
.edit-tips {
background: url(https://onetravel-web.onetravelgz.com/onecode-travel/miniprogram/mine/tips-icon.png) no-repeat left top;
background-size: 32rpx 32rpx;
margin-bottom: 48rpx;
padding-left: 48rpx;
font-size: 24rpx;
color: #000000;
font-weight: 400;
display: block;
}
.travel-btn-primary,
.edit-tips {
margin-left: 56rpx;
margin-right: 56rpx;
}
}
2***@qq.com (作者)
sdk版本3.0.0-4020920240930001，刚刚试了，还是一样的。harmony 模版使用HBuilderX 4.29自动生成的app-harmony@1.3.7
2024-10-06 16:18