143 lines
4.0 KiB
Vue
143 lines
4.0 KiB
Vue
<template>
|
||
<view class="mine-container">
|
||
<view class="mine-header">
|
||
<view class="flex items-center">
|
||
<!-- 头像 -->
|
||
<image
|
||
class="w-100rpx h-100rpx rounded-full"
|
||
:src="isLogin ? userInfo!.avatar : defaultAvatar"
|
||
/>
|
||
<!-- 用户信息 -->
|
||
<view class="ml-20rpx">
|
||
<!-- 已登录 -->
|
||
<view v-if="isLogin">
|
||
<view class="text-32rpx">
|
||
{{ userInfo!.nickname }}
|
||
</view>
|
||
<view class="text-28rpx mt2">{{ userInfo?.username }}</view>
|
||
</view>
|
||
<!-- 未登录 -->
|
||
<view v-else>
|
||
<view class="login-tip">您还未登录，请先登录</view>
|
||
<view class="w120rpx mt-2">
|
||
<button class="login-btn" @click="navigateToLoginPage">登录</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 编辑资料 -->
|
||
<view v-if="isLogin" class="cursor-pointer">
|
||
<wd-icon name="setting" @click="navigateToProfile" />
|
||
</view>
|
||
</view>
|
||
<!-- 功能操作 -->
|
||
<wd-grid clickable custom-class="rounded-[10rpx] bg-white">
|
||
<wd-grid-item text="我的消息" icon="mail" @itemclick="handleItemclick" />
|
||
<wd-grid-item text="我的待办" icon="list" @itemclick="handleItemclick" />
|
||
<wd-grid-item text="我的收藏" icon="star" @itemclick="handleItemclick" />
|
||
<wd-grid-item text="浏览历史" icon="view" @itemclick="handleItemclick" />
|
||
</wd-grid>
|
||
<!-- 菜单列表 -->
|
||
<view class="mt40rpx">
|
||
<wd-cell-group border>
|
||
<wd-cell title="关于我们" icon="info-circle" clickable @click="navigateToAbout">
|
||
<wd-icon name="arrow-right" />
|
||
</wd-cell>
|
||
<wd-cell title="常见问题" icon="help-circle" clickable @click="navigateToFAQ">
|
||
<wd-icon name="arrow-right" />
|
||
</wd-cell>
|
||
<wd-cell title="问题反馈" icon="check-circle" clickable @click="handleQuestionFeedback">
|
||
<wd-icon name="arrow-right" />
|
||
</wd-cell>
|
||
<wd-cell title="设置" icon="setting1" clickable @click="navigateToSettings">
|
||
<wd-icon name="arrow-right" />
|
||
</wd-cell>
|
||
</wd-cell-group>
|
||
</view>
|
||
|
||
<wd-toast />
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { useToast } from "wot-design-uni";
|
||
import { useUserStore } from "@/store/modules/user";
|
||
|
||
const toast = useToast();
|
||
const userStore = useUserStore();
|
||
const userInfo = computed(() => userStore.userInfo);
|
||
const isLogin = computed(() => !!userInfo.value);
|
||
const defaultAvatar = "/static/images/default-avatar.png";
|
||
|
||
// 登录
|
||
const navigateToLoginPage = () => {
|
||
uni.navigateTo({ url: "/pages/login/index" });
|
||
};
|
||
// 个人信息
|
||
const navigateToProfile = () => {
|
||
uni.navigateTo({ url: "/pages/mine/profile/index" });
|
||
};
|
||
|
||
// 常见问题
|
||
const navigateToFAQ = () => {
|
||
uni.navigateTo({ url: "/pages/mine/faq/index" });
|
||
};
|
||
// 关于我们
|
||
const navigateToAbout = () => {
|
||
uni.navigateTo({ url: "/pages/mine/about/index" });
|
||
};
|
||
// 设置
|
||
const navigateToSettings = () => {
|
||
uni.navigateTo({ url: "/pages/mine/settings/index" });
|
||
};
|
||
// 问题反馈
|
||
const handleQuestionFeedback = () => {
|
||
uni.navigateTo({ url: "/pages/mine/feedback/index" });
|
||
};
|
||
// 建设中
|
||
const handleItemclick = () => {
|
||
toast.show("建设中...");
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mine-container {
|
||
.mine-header {
|
||
display: flex;
|
||
align-items: start;
|
||
justify-content: space-between;
|
||
|
||
padding: 60rpx 20rpx;
|
||
color: #fff;
|
||
background: linear-gradient(60deg, #517cf0, #769ef5);
|
||
|
||
.login-tip {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
}
|
||
.login-btn {
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
color: #4d80f0;
|
||
border-radius: 10rpx;
|
||
}
|
||
.cursor-pointer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: auto;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% {
|
||
transform: rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|