|
@@ -1,46 +1,50 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <FlexCol height="100vh" :padding="30" backgroundColor="#f6f2e7">
|
|
|
|
|
- <Form
|
|
|
|
|
- ref="formRef"
|
|
|
|
|
- :model="formModel"
|
|
|
|
|
- :rules="rules"
|
|
|
|
|
- validateTrigger="submit"
|
|
|
|
|
- labelAlign="right"
|
|
|
|
|
- :labelWidth="140"
|
|
|
|
|
- >
|
|
|
|
|
- <!-- 头像 -->
|
|
|
|
|
- <view class="avatar-section">
|
|
|
|
|
- <button open-type="chooseAvatar" class="remove-button-style" @chooseavatar="handleChooseAvatar">
|
|
|
|
|
- <view class="avatar-container">
|
|
|
|
|
- <image
|
|
|
|
|
- :src="formModel.avatar || DefaultAvatar"
|
|
|
|
|
- class="avatar-image"
|
|
|
|
|
- mode="aspectFill"
|
|
|
|
|
- />
|
|
|
|
|
- <text class="avatar-hint">点击可修改头像</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </button>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <Field name="nickname" label="昵称" placeholder="请输入昵称" type="nickname" required />
|
|
|
|
|
- <Field name="bio" multiline label="个人简介" placeholder="输入个人简介" :inputStyle="{width: '240px'}" />
|
|
|
|
|
- </Form>
|
|
|
|
|
-
|
|
|
|
|
- <Height :height="40" />
|
|
|
|
|
-
|
|
|
|
|
- <NaButton type="primary" :loading="loading" @click="submitForm" >
|
|
|
|
|
- 保存修改
|
|
|
|
|
- </NaButton>
|
|
|
|
|
- <Height :height="20" />
|
|
|
|
|
- <NaButton type="primary" scheme="plain" @click="back()">
|
|
|
|
|
- 返回
|
|
|
|
|
- </NaButton>
|
|
|
|
|
- </FlexCol>
|
|
|
|
|
|
|
+ <CommonRoot>
|
|
|
|
|
+ <FlexCol height="100vh" :padding="30" backgroundColor="#f6f2e7">
|
|
|
|
|
+ <Form
|
|
|
|
|
+ ref="formRef"
|
|
|
|
|
+ :model="formModel"
|
|
|
|
|
+ :rules="rules"
|
|
|
|
|
+ validateTrigger="submit"
|
|
|
|
|
+ labelAlign="right"
|
|
|
|
|
+ :labelWidth="140"
|
|
|
|
|
+ >
|
|
|
|
|
+ <!-- 头像 -->
|
|
|
|
|
+ <view class="avatar-section">
|
|
|
|
|
+ <button open-type="chooseAvatar" class="remove-button-style" @chooseavatar="handleChooseAvatar">
|
|
|
|
|
+ <view class="avatar-container">
|
|
|
|
|
+ <image
|
|
|
|
|
+ :src="formModel.avatar || DefaultAvatar"
|
|
|
|
|
+ class="avatar-image"
|
|
|
|
|
+ mode="aspectFill"
|
|
|
|
|
+ />
|
|
|
|
|
+ <text class="avatar-hint">点击可修改头像</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </button>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <Field name="nickname" label="昵称" placeholder="请输入昵称" type="nickname" required />
|
|
|
|
|
+ <Field name="bio" multiline label="个人简介" placeholder="输入个人简介" :inputStyle="{width: '240px'}" />
|
|
|
|
|
+ </Form>
|
|
|
|
|
+
|
|
|
|
|
+ <Height :height="40" />
|
|
|
|
|
+
|
|
|
|
|
+ <NaButton type="primary" :loading="loading" @click="submitForm" >
|
|
|
|
|
+ 保存修改
|
|
|
|
|
+ </NaButton>
|
|
|
|
|
+ <Height :height="20" />
|
|
|
|
|
+ <NaButton type="primary" scheme="plain" @click="back()">
|
|
|
|
|
+ 返回
|
|
|
|
|
+ </NaButton>
|
|
|
|
|
+ </FlexCol>
|
|
|
|
|
+ </CommonRoot>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
import { ref, onMounted } from 'vue';
|
|
import { ref, onMounted } from 'vue';
|
|
|
import { useAuthStore } from '@/store/auth';
|
|
import { useAuthStore } from '@/store/auth';
|
|
|
|
|
+import { back } from '@/components/utils/PageAction';
|
|
|
|
|
+import type { Rules } from 'async-validator';
|
|
|
import UserApi from '@/api/auth/UserApi';
|
|
import UserApi from '@/api/auth/UserApi';
|
|
|
import CommonContent from '@/api/CommonContent';
|
|
import CommonContent from '@/api/CommonContent';
|
|
|
import Form from '@/components/form/Form.vue';
|
|
import Form from '@/components/form/Form.vue';
|
|
@@ -48,10 +52,8 @@ import Field from '@/components/form/Field.vue';
|
|
|
import FlexCol from '@/components/layout/FlexCol.vue';
|
|
import FlexCol from '@/components/layout/FlexCol.vue';
|
|
|
import NaButton from '@/components/basic/Button.vue';
|
|
import NaButton from '@/components/basic/Button.vue';
|
|
|
import Height from '@/components/layout/space/Height.vue';
|
|
import Height from '@/components/layout/space/Height.vue';
|
|
|
-import type { Rules } from 'async-validator';
|
|
|
|
|
-import { back } from '@/components/utils/PageAction';
|
|
|
|
|
-import Dialog from '@/components/dialog/Dialog.vue';
|
|
|
|
|
-import Avatar from '@/components/display/Avatar.vue';
|
|
|
|
|
|
|
+import CommonRoot from '@/components/dialog/CommonRoot.vue';
|
|
|
|
|
+import { toast } from '@/components/dialog/CommonRoot';
|
|
|
|
|
|
|
|
const DefaultAvatar = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/UserHead.png';
|
|
const DefaultAvatar = 'https://mncdn.wenlvti.net/app_static/minnan/images/home/UserHead.png';
|
|
|
const authStore = useAuthStore();
|
|
const authStore = useAuthStore();
|
|
@@ -75,21 +77,24 @@ const rules : Rules = {
|
|
|
],
|
|
],
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
const handleChooseAvatar = async (e: { detail: { avatarUrl: string } }) => {
|
|
const handleChooseAvatar = async (e: { detail: { avatarUrl: string } }) => {
|
|
|
try {
|
|
try {
|
|
|
|
|
+ uploading.value = true;
|
|
|
const tempFilePath = e.detail.avatarUrl;
|
|
const tempFilePath = e.detail.avatarUrl;
|
|
|
// 上传图片
|
|
// 上传图片
|
|
|
- uploading.value = true;
|
|
|
|
|
const uploadResult = await CommonContent.uploadFile(tempFilePath, 'image');
|
|
const uploadResult = await CommonContent.uploadFile(tempFilePath, 'image');
|
|
|
// 更新头像并保存到服务器
|
|
// 更新头像并保存到服务器
|
|
|
await updateAvatar(uploadResult.fullurl);
|
|
await updateAvatar(uploadResult.fullurl);
|
|
|
|
|
+ toast({
|
|
|
|
|
+ content: '头像更换成功',
|
|
|
|
|
+ icon: 'success'
|
|
|
|
|
+ });
|
|
|
} catch (error: any) {
|
|
} catch (error: any) {
|
|
|
|
|
+ console.error(error);
|
|
|
if (error.errMsg !== 'chooseImage:fail cancel') {
|
|
if (error.errMsg !== 'chooseImage:fail cancel') {
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '头像更换失败',
|
|
|
|
|
- icon: 'none',
|
|
|
|
|
|
|
+ toast({
|
|
|
|
|
+ content: '头像更换失败。' + error?.errMsg,
|
|
|
|
|
+ icon: 'error',
|
|
|
duration: 2000
|
|
duration: 2000
|
|
|
});
|
|
});
|
|
|
}
|
|
}
|
|
@@ -107,10 +112,9 @@ const updateAvatar = async (avatarUrl: string) => {
|
|
|
authStore.userInfo.avatar = avatarUrl;
|
|
authStore.userInfo.avatar = avatarUrl;
|
|
|
authStore.saveLoginState();
|
|
authStore.saveLoginState();
|
|
|
}
|
|
}
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '头像更新成功',
|
|
|
|
|
|
|
+ toast({
|
|
|
|
|
+ content: '头像更新成功',
|
|
|
icon: 'success',
|
|
icon: 'success',
|
|
|
- duration: 2000
|
|
|
|
|
});
|
|
});
|
|
|
|
|
|
|
|
} catch (error: any) {
|
|
} catch (error: any) {
|
|
@@ -119,7 +123,6 @@ const updateAvatar = async (avatarUrl: string) => {
|
|
|
};
|
|
};
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- console.log(authStore.userInfo);
|
|
|
|
|
if (authStore.userInfo) {
|
|
if (authStore.userInfo) {
|
|
|
formModel.value.avatar = authStore.userInfo.avatar || '';
|
|
formModel.value.avatar = authStore.userInfo.avatar || '';
|
|
|
formModel.value.nickname = authStore.userInfo.nickname || '';
|
|
formModel.value.nickname = authStore.userInfo.nickname || '';
|
|
@@ -147,20 +150,18 @@ const submitForm = async () => {
|
|
|
authStore.userInfo.avatar = formModel.value.avatar;
|
|
authStore.userInfo.avatar = formModel.value.avatar;
|
|
|
authStore.userInfo.intro = formModel.value.bio;
|
|
authStore.userInfo.intro = formModel.value.bio;
|
|
|
}
|
|
}
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '个人信息更新成功',
|
|
|
|
|
|
|
+ toast({
|
|
|
|
|
+ content: '个人信息更新成功',
|
|
|
icon: 'success',
|
|
icon: 'success',
|
|
|
- duration: 2000
|
|
|
|
|
});
|
|
});
|
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
|
uni.navigateBack();
|
|
uni.navigateBack();
|
|
|
}, 2000);
|
|
}, 2000);
|
|
|
|
|
|
|
|
} catch (error: any) {
|
|
} catch (error: any) {
|
|
|
- uni.showToast({
|
|
|
|
|
- title: error?.message || '更新失败,请稍后重试',
|
|
|
|
|
- icon: 'none',
|
|
|
|
|
- duration: 2000
|
|
|
|
|
|
|
+ toast({
|
|
|
|
|
+ content: error?.message || '更新失败,请稍后重试',
|
|
|
|
|
+ icon: 'error',
|
|
|
});
|
|
});
|
|
|
} finally {
|
|
} finally {
|
|
|
loading.value = false;
|
|
loading.value = false;
|