lufaneng
/
lift-drawing-wechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

Browse Source
main
Lufaneng 11 months ago
parent 04bbcfcf02
commit 3565433ce9
1 changed files with 448 additions and 436 deletions
Show Stats Download Patch File Download Diff File

234
pagesA/edit-profile/edit-profile.vue
Unescape View File

@ -6,8 +6,12 @@
<view class="profile-item" @click="changeAvatar"> <view class="profile-item" @click="changeAvatar">
<view class="item-label">头像</view> <view class="item-label">头像</view>
<view class="item-content"> <view class="item-content">
<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image> <image
<u-icon name="arrow-right" size="16" color="#ccc"></u-icon> class="avatar"
:src="userInfo.avatar"
mode="aspectFill"
></image>
<uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
</view> </view>
@ -16,7 +20,7 @@
<view class="item-label">用户名</view> <view class="item-label">用户名</view>
<view class="item-content"> <view class="item-content">
<text class="item-value">{{ userInfo.username }}</text> <text class="item-value">{{ userInfo.username }}</text>
<u-icon name="arrow-right" size="16" color="#ccc"></u-icon> <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
</view> </view>
@ -25,7 +29,7 @@
<view class="item-label">电话</view> <view class="item-label">电话</view>
<view class="item-content"> <view class="item-content">
<text class="item-value">{{ userInfo.phone }}</text> <text class="item-value">{{ userInfo.phone }}</text>
<u-icon name="arrow-right" size="16" color="#ccc"></u-icon> <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
</view> </view>
@ -34,7 +38,7 @@
<view class="item-label">邮箱</view> <view class="item-label">邮箱</view>
<view class="item-content"> <view class="item-content">
<text class="item-value">{{ userInfo.email }}</text> <text class="item-value">{{ userInfo.email }}</text>
<u-icon name="arrow-right" size="16" color="#ccc"></u-icon> <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
</view> </view>
</view> </view>
@ -42,11 +46,11 @@
<!-- 应用设置 --> <!-- 应用设置 -->
<view class="app-section"> <view class="app-section">
<!-- 缓存 --> <!-- 缓存 -->
<!-- <view class="profile-item" @click="clearCache"> <!-- <view class="profile-item" @click="clearCache">
<view class="item-label">缓存</view> <view class="item-label">缓存</view>
<view class="item-content"> <view class="item-content">
<text class="item-value">{{ cacheSize }}</text> <text class="item-value">{{ cacheSize }}</text>
<u-icon name="arrow-right" size="16" color="#ccc"></u-icon> <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
</view> --> </view> -->
@ -54,7 +58,7 @@
<view class="profile-item" @click="viewUserAgreement"> <view class="profile-item" @click="viewUserAgreement">
<view class="item-label">用户协议</view> <view class="item-label">用户协议</view>
<view class="item-content"> <view class="item-content">
<u-icon name="arrow-right" size="16" color="#ccc"></u-icon> <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
</view> </view>
@ -62,20 +66,25 @@
<view class="profile-item" @click="viewAbout"> <view class="profile-item" @click="viewAbout">
<view class="item-label">关于我们</view> <view class="item-label">关于我们</view>
<view class="item-content"> <view class="item-content">
<u-icon name="arrow-right" size="16" color="#ccc"></u-icon> <uv-icon name="arrow-right" size="16" color="#ccc"></uv-icon>
</view> </view>
</view> </view>
</view> </view>
<!-- 退出登录按钮 --> <!-- 退出登录按钮 -->
<view class="logout-section"> <view class="logout-section">
<u-button type="primary" size="large" @click="logout" :loading="logoutLoading"> <uv-button
type="primary"
size="large"
@click="logout"
:loading="logoutLoading"
>
退出登陆 退出登陆
</u-button> </uv-button>
</view> </view>
<!-- 编辑弹窗 --> <!-- 编辑弹窗 -->
<u-popup :show="showEditModal" mode="center" @close="closeEditModal" :round="10"> <uv-popup ref="editPopup" mode="center" @close="closeEditModal" :round="10">
<view class="edit-modal"> <view class="edit-modal">
<view class="modal-title"> <view class="modal-title">
编辑{{ 编辑{{
@ -83,62 +92,65 @@
? "用户名" ? "用户名"
: editType === "phone" : editType === "phone"
? "电话" ? "电话"
: "邮箱" : editType === 'email' ? "邮箱" : ''
}} }}
</view> </view>
<u-input v-model="editValue" :placeholder="getPlaceholder()" :type=" <uv-input
v-model="editValue"
:placeholder="getPlaceholder()"
:type="
editType === 'phone' editType === 'phone'
? 'number' ? 'number'
: editType === 'email' : editType === 'email'
? 'email' ? 'email'
: 'text' : 'text'
" border="bottom" clearable></u-input> "
border="bottom"
clearable
></uv-input>
<view class="modal-actions"> <view class="modal-actions">
<u-button type="default" @click="closeEditModal">取消</u-button> <uv-button type="default" @click="closeEditModal">取消</uv-button>
<u-button type="primary" @click="saveEdit">保存</u-button> <uv-button type="primary" @click="saveEdit">保存</uv-button>
</view> </view>
</view> </view>
</u-popup> </uv-popup>
<!-- 头像选择弹窗 --> <!-- 头像选择弹窗 -->
<u-action-sheet :show="showAvatarSheet" :actions="avatarActions" @close="showAvatarSheet = false" <uv-action-sheet
@select="onAvatarSelect"></u-action-sheet> :show="showAvatarSheet"
:actions="avatarActions"
@close="showAvatarSheet = false"
@select="onAvatarSelect"
></uv-action-sheet>
</view> </view>
</template> </template>
<script setup> <script setup>
import { import { ref, onMounted } from "vue";
ref, import { onShow } from "@dcloudio/uni-app";
onMounted import { useAuthStore, useUserStore } from "@/store";
} from "vue";
import { const authStore = useAuthStore();
onShow const userStore = useUserStore();
} from "@dcloudio/uni-app";
import { // 响应式数据
useAuthStore, const userInfo = ref({
useUserStore
} from "@/store";
const authStore = useAuthStore()
const userStore = useUserStore()
// 响应式数据
const userInfo = ref({
avatar: "/static/imgs/avatar.png", avatar: "/static/imgs/avatar.png",
username: "张三", username: "张三",
phone: "15825556676", phone: "15825556676",
email: "235382903@qq.com", email: "235382903@qq.com",
}); });
const cacheSize = ref("36MB"); const cacheSize = ref("36MB");
const logoutLoading = ref(false); const logoutLoading = ref(false);
const showEditModal = ref(false); const showAvatarSheet = ref(false);
const showAvatarSheet = ref(false); const editType = ref("");
const editType = ref(""); const editValue = ref("");
const editValue = ref(""); const editPopup = ref(null);
// 头像选择选项 // 头像选择选项
const avatarActions = ref([{ const avatarActions = ref([
{
name: "拍照", name: "拍照",
value: "camera", value: "camera",
}, },
@ -146,15 +158,15 @@
name: "从相册选择", name: "从相册选择",
value: "album", value: "album",
}, },
]); ]);
// 更换头像 // 更换头像
const changeAvatar = () => { const changeAvatar = () => {
showAvatarSheet.value = true; showAvatarSheet.value = true;
}; };
// 头像选择回调 // 头像选择回调
const onAvatarSelect = (item) => { const onAvatarSelect = (item) => {
showAvatarSheet.value = false; showAvatarSheet.value = false;
uni.chooseImage({ uni.chooseImage({
@ -182,31 +194,31 @@
}); });
}, },
}); });
}; };
// 编辑用户名 // 编辑用户名
const editUsername = () => { const editUsername = () => {
editType.value = "username"; editType.value = "username";
editValue.value = userInfo.value.username; editValue.value = userInfo.value.username;
showEditModal.value = true; editPopup.value.open();
}; };
// 编辑电话 // 编辑电话
const editPhone = () => { const editPhone = () => {
editType.value = "phone"; editType.value = "phone";
editValue.value = userInfo.value.phone; editValue.value = userInfo.value.phone;
showEditModal.value = true; editPopup.value.open();
}; };
// 编辑邮箱 // 编辑邮箱
const editEmail = () => { const editEmail = () => {
editType.value = "email"; editType.value = "email";
editValue.value = userInfo.value.email; editValue.value = userInfo.value.email;
showEditModal.value = true; editPopup.value.open();
}; };
// 获取输入框占位符 // 获取输入框占位符
const getPlaceholder = () => { const getPlaceholder = () => {
switch (editType.value) { switch (editType.value) {
case "username": case "username":
return "请输入用户名"; return "请输入用户名";
@ -217,17 +229,17 @@
default: default:
return "请输入"; return "请输入";
} }
}; };
// 关闭编辑弹窗 // 关闭编辑弹窗
const closeEditModal = () => { const closeEditModal = () => {
showEditModal.value = false; editPopup.value.close();
editType.value = ""; editType.value = "";
editValue.value = ""; editValue.value = "";
}; };
// 保存编辑 // 保存编辑
const saveEdit = async () => { const saveEdit = async () => {
if (!editValue.value.trim()) { if (!editValue.value.trim()) {
uni.showToast({ uni.showToast({
title: "请输入内容", title: "请输入内容",
@ -278,10 +290,10 @@
icon: "none", icon: "none",
}); });
} }
}; };
// 清除缓存 // 清除缓存
const clearCache = () => { const clearCache = () => {
uni.showModal({ uni.showModal({
title: "清除缓存", title: "清除缓存",
content: "确定要清除应用缓存吗？", content: "确定要清除应用缓存吗？",
@ -303,24 +315,24 @@
} }
}, },
}); });
}; };
// 查看用户协议 // 查看用户协议
const viewUserAgreement = () => { const viewUserAgreement = () => {
uni.navigateTo({ uni.navigateTo({
url: "/pagesA/user-agreement/user-agreement", url: "/pagesA/user-agreement/user-agreement",
}); });
}; };
// 查看关于我们 // 查看关于我们
const viewAbout = () => { const viewAbout = () => {
uni.navigateTo({ // uni.navigateTo({
url: "/pagesA/about/about", // url: "/pagesA/about/about",
}); // });
}; };
// 退出登录 // 退出登录
const logout = () => { const logout = () => {
uni.showModal({ uni.showModal({
title: "退出登录", title: "退出登录",
content: "确定要退出登录吗？", content: "确定要退出登录吗？",
@ -330,7 +342,7 @@
// 模拟退出登录 // 模拟退出登录
setTimeout(() => { setTimeout(() => {
authStore.signOut() authStore.signOut();
logoutLoading.value = false; logoutLoading.value = false;
// 清除用户信息和token // 清除用户信息和token
@ -349,10 +361,10 @@
} }
}, },
}); });
}; };
// 加载用户信息 // 加载用户信息
const loadUserInfo = async () => { const loadUserInfo = async () => {
try { try {
// 调用获取用户信息API // 调用获取用户信息API
// const result = await RPC.get('/api/user/info') // const result = await RPC.get('/api/user/info')
@ -360,36 +372,36 @@
} catch (error) { } catch (error) {
console.error("加载用户信息失败:", error); console.error("加载用户信息失败:", error);
} }
}; };
// 计算缓存大小 // 计算缓存大小
const calculateCacheSize = () => { const calculateCacheSize = () => {
// 实际项目中应该计算真实的缓存大小 // 实际项目中应该计算真实的缓存大小
// const size = await getCacheSize() // const size = await getCacheSize()
// cacheSize.value = formatSize(size) // cacheSize.value = formatSize(size)
}; };
onMounted(() => { onMounted(() => {
loadUserInfo(); loadUserInfo();
calculateCacheSize(); calculateCacheSize();
}); });
onShow(() => { onShow(() => {
// 页面显示时刷新用户信息 // 页面显示时刷新用户信息
loadUserInfo(); loadUserInfo();
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
font-size: 14px; font-size: 14px;
min-height: 100vh; min-height: 100vh;
background-color: #f8f8f8; background-color: #f8f8f8;
padding: 16px; padding: 16px;
} }
.profile-section, .profile-section,
.app-section { .app-section {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
margin-bottom: 16px; margin-bottom: 16px;
@ -429,13 +441,13 @@
} }
} }
} }
} }
.logout-section { .logout-section {
margin-top: 32px; margin-top: 32px;
} }
.edit-modal { .edit-modal {
width: 300px; width: 300px;
padding: 24px; padding: 24px;
@ -452,9 +464,9 @@
gap: 12px; gap: 12px;
margin-top: 20px; margin-top: 20px;
.u-button { .uv-button {
flex: 1; flex: 1;
} }
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save