294 lines
9.0 KiB
Vue
294 lines
9.0 KiB
Vue
<template>
|
|
<view class="page">
|
|
<uni-popup ref="inputDialog" type="dialog">
|
|
<uni-popup-dialog
|
|
type="info"
|
|
cancelText="关闭"
|
|
confirmText="继续"
|
|
title="提示"
|
|
content="该功能还在开发中!"
|
|
@confirm="dialogConfirm"
|
|
@close="dialogClose"
|
|
/>
|
|
</uni-popup>
|
|
|
|
<view class="hero">
|
|
<view class="hero__toolbar">
|
|
<view class="toolbar-btn" @click="toScan">
|
|
<image src="/static/center/scan.png" mode="aspectFit" />
|
|
</view>
|
|
<view class="toolbar-btn" @click="toSetting">
|
|
<image src="/static/center/setting.png" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="profile-card" @click="toUserInfoPage">
|
|
<view class="profile-main">
|
|
<cloud-image
|
|
v-if="userInfo.avatar_file"
|
|
width="132rpx"
|
|
height="132rpx"
|
|
border-radius="50%"
|
|
:src="userInfo.avatar_file.url"
|
|
/>
|
|
<image
|
|
v-else
|
|
class="avatar"
|
|
src="/static/center/avatar.png"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="profile-copy">
|
|
<text class="profile-name">{{ isLogin ? (userInfo.nickname || '默认用户') : '立即登录' }}</text>
|
|
<text class="profile-desc">{{ profileDesc }}</text>
|
|
<view class="profile-tags">
|
|
<text class="profile-tag">{{ isLogin ? '已登录' : '游客模式' }}</text>
|
|
<text class="profile-tag" v-if="realNameStatus === 1">已实名</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image class="profile-arrow" src="/static/center/right.png" mode="aspectFit" />
|
|
</view>
|
|
|
|
<view class="data-panel">
|
|
<view class="data-item" v-for="item in stats" :key="item.label" @click="menuClick(item.menu)">
|
|
<text class="data-value">{{ item.value }}</text>
|
|
<text class="data-label">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content">
|
|
<view class="quick-panel">
|
|
<view class="section-head">
|
|
<text class="section-title">常用服务</text>
|
|
<text class="section-subtitle">快捷进入高频功能</text>
|
|
</view>
|
|
<view class="quick-grid">
|
|
<view class="quick-item" v-for="item in quickMenus" :key="item.type" @click="menuClick(item)">
|
|
<view class="quick-icon">
|
|
<image :src="item.icon" mode="aspectFit" />
|
|
</view>
|
|
<text class="quick-name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="menu-panel" v-for="(group, index) in menuGroups" :key="index">
|
|
<view class="menu-cell" v-for="item in group" :key="item.type" @click="menuClick(item)">
|
|
<view class="menu-cell__left">
|
|
<view class="menu-cell__icon">
|
|
<image :src="item.icon" mode="aspectFit" />
|
|
</view>
|
|
<view class="menu-cell__copy">
|
|
<text class="menu-cell__name">{{ item.name }}</text>
|
|
<text class="menu-cell__desc">{{ item.desc }}</text>
|
|
</view>
|
|
</view>
|
|
<image class="menu-cell__arrow" src="/static/center/right.png" mode="aspectFit" />
|
|
</view>
|
|
</view>
|
|
|
|
<view class="logout-btn" @click="menuClick({ type: 'logout' })">退出当前账号</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, computed } from 'vue'
|
|
import cloudImage from "@/components/cloud-image.vue"
|
|
import {
|
|
store,
|
|
mutations
|
|
} from '@/pages3/uni_modules/uni-id-pages/common/store.js'
|
|
|
|
export default {
|
|
components: {
|
|
cloudImage
|
|
},
|
|
setup() {
|
|
const inputDialog = ref(null)
|
|
|
|
const userInfo = computed(() => store.userInfo || {})
|
|
|
|
const isLogin = computed(() => !!uni.getStorageSync('uni_id_token'))
|
|
|
|
const realNameStatus = computed(() => {
|
|
if (!userInfo.value.realNameAuth) {
|
|
return 0
|
|
}
|
|
return userInfo.value.realNameAuth.authStatus
|
|
})
|
|
|
|
const profileDesc = computed(() => {
|
|
if (!isLogin.value) {
|
|
return '登录后可同步查看收藏、历史与个人主页'
|
|
}
|
|
return userInfo.value.signature || '点击查看个人资料与账号设置'
|
|
})
|
|
|
|
const stats = computed(() => {
|
|
return [
|
|
{ label: '收藏', value: getCount('my_collection_count'), menu: findMenuItem('my_collect') },
|
|
{ label: '喜欢', value: getCount('like_count'), menu: findMenuItem('my_like') },
|
|
{ label: '历史', value: getCount('read_history_count'), menu: findMenuItem('history') },
|
|
{ label: '关注', value: getCount('following_count'), menu: findMenuItem('my_follow') }
|
|
]
|
|
})
|
|
|
|
const quickMenus = computed(() => {
|
|
return [
|
|
findMenuItem('my_collect'),
|
|
findMenuItem('history'),
|
|
findMenuItem('my_reply'),
|
|
findMenuItem('customer_service')
|
|
].filter(Boolean)
|
|
})
|
|
|
|
const menuGroups = computed(() => {
|
|
return [
|
|
['my_account', 'my_follow', 'edit_cms', 'cms_list'].map(findMenuItem).filter(Boolean),
|
|
['withdraw', 'recharge', 'sharing_app', 'customer_service'].map(findMenuItem).filter(Boolean)
|
|
]
|
|
})
|
|
|
|
const menuMap = {
|
|
my_account: { name: '我的主页', icon: '/static/center/self.png', desc: '查看个人主页与公开动态', type: 'my_account' },
|
|
my_follow: { name: '我的关注', icon: '/static/center/icon-follow.png', desc: '关注的人与内容动态', type: 'my_follow' },
|
|
edit_cms: { name: '新增文章', icon: '/static/center/release.png', desc: '快速发布新的文章内容', type: 'edit_cms' },
|
|
cms_list: { name: '文章管理', icon: '/static/center/book.png', desc: '编辑或管理已发布文章', type: 'cms_list' },
|
|
withdraw: { name: '提现中心', icon: '/static/center/withdraw.png', desc: '查看余额并申请提现', type: 'withdraw' },
|
|
reply: { name: '回复我的', icon: '/static/center/reply.png', desc: '查看收到的回复消息', type: 'my_reply' },
|
|
my_reply: { name: '回复我的', icon: '/static/center/reply.png', desc: '查看收到的回复消息', type: 'my_reply' },
|
|
my_like: { name: '我的喜欢', icon: '/static/center/like.png', desc: '收藏喜欢的内容足迹', type: 'my_like' },
|
|
history: { name: '浏览历史', icon: '/static/center/history.png', desc: '继续查看最近浏览记录', type: 'history' },
|
|
my_collect: { name: '我的收藏', icon: '/static/center/collect.png', desc: '集中管理收藏内容', type: 'my_collect' },
|
|
recharge: { name: '充值记录', icon: '/static/center/recharge.png', desc: '查看账户充值明细', type: 'recharge' },
|
|
customer_service: { name: '联系客服', icon: '/static/center/kefu.png', desc: '获取帮助与问题反馈', type: 'customer_service' },
|
|
sharing_app: { name: '分享应用', icon: '/static/center/share.png', desc: '把应用推荐给更多好友', type: 'sharing_app' },
|
|
logout: { name: '退出登录', icon: '/static/center/out.png', desc: '安全退出当前登录状态', type: 'logout' }
|
|
}
|
|
|
|
function getCount(field) {
|
|
const value = Number(userInfo.value[field] || 0)
|
|
return value > 99 ? '99+' : String(value)
|
|
}
|
|
|
|
function findMenuItem(type) {
|
|
return menuMap[type]
|
|
}
|
|
|
|
function dialogConfirm() {
|
|
console.log('点击确认')
|
|
}
|
|
|
|
function inputDialogToggle() {
|
|
inputDialog.value?.open()
|
|
}
|
|
|
|
function dialogClose() {
|
|
console.log('点击关闭')
|
|
}
|
|
|
|
function requireLogin(next) {
|
|
const token = uni.getStorageSync('uni_id_token')
|
|
if (!token) {
|
|
toLogin()
|
|
return false
|
|
}
|
|
next && next()
|
|
return true
|
|
}
|
|
|
|
function menuClick(item) {
|
|
if (!item || !item.type) return
|
|
|
|
const routeMap = {
|
|
my_follow: '/pages2/follow/follow',
|
|
withdraw: '/pages2/balance/balance',
|
|
recharge: '/pages2/balance/balance',
|
|
my_reply: '/pages2/replyCommentList/replyCommentList',
|
|
cms_list: '/pages2/edit_list/edit_list',
|
|
edit_cms: '/pages2/editCms/editCms',
|
|
my_collect: '/pages2/arctcleCollectList/arctcleCollectList',
|
|
my_like: '/pages2/arctcleLikeList/arctcleLikeList',
|
|
history: '/pages2/historyList/historyList'
|
|
}
|
|
|
|
if (item.type === 'my_account') {
|
|
toPersonalpage()
|
|
return
|
|
}
|
|
|
|
if (routeMap[item.type]) {
|
|
requireLogin(() => {
|
|
uni.navigateTo({ url: routeMap[item.type] })
|
|
})
|
|
return
|
|
}
|
|
|
|
if (item.type === 'customer_service' || item.type === 'sharing_app') {
|
|
inputDialogToggle()
|
|
return
|
|
}
|
|
|
|
if (item.type === 'logout') {
|
|
mutations.logout()
|
|
}
|
|
}
|
|
|
|
function toLogin() {
|
|
uni.navigateTo({
|
|
url: '../../pages3/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=weixin'
|
|
})
|
|
}
|
|
|
|
function toUserInfoPage() {
|
|
requireLogin(() => {
|
|
uni.navigateTo({
|
|
url: '../../pages3/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true'
|
|
})
|
|
})
|
|
}
|
|
|
|
function toPersonalpage() {
|
|
requireLogin(() => {
|
|
uni.navigateTo({
|
|
url: '/uni_modules/zetank-personalpage/pages/personalpage/personalpage?uid=' + userInfo.value._id
|
|
})
|
|
})
|
|
}
|
|
|
|
function toScan() {
|
|
inputDialogToggle()
|
|
}
|
|
|
|
function toSetting() {
|
|
uni.navigateTo({ url: '/pages2/setting/setting' })
|
|
}
|
|
|
|
return {
|
|
inputDialog,
|
|
userInfo,
|
|
isLogin,
|
|
realNameStatus,
|
|
profileDesc,
|
|
stats,
|
|
quickMenus,
|
|
menuGroups,
|
|
dialogConfirm,
|
|
dialogClose,
|
|
menuClick,
|
|
toLogin,
|
|
toUserInfoPage,
|
|
toPersonalpage,
|
|
toScan,
|
|
toSetting
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './my.scss';
|
|
</style>
|