352 lines
9.1 KiB
Vue
352 lines
9.1 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 cloudImage from "@/components/cloud-image.vue"
|
|
import {
|
|
store,
|
|
mutations
|
|
} from '@/pages3/uni_modules/uni-id-pages/common/store.js'
|
|
|
|
export default {
|
|
components: {
|
|
cloudImage
|
|
},
|
|
computed: {
|
|
userInfo() {
|
|
return store.userInfo || {}
|
|
},
|
|
isLogin() {
|
|
return !!uni.getStorageSync('uni_id_token')
|
|
},
|
|
realNameStatus() {
|
|
if (!this.userInfo.realNameAuth) {
|
|
return 0
|
|
}
|
|
|
|
return this.userInfo.realNameAuth.authStatus
|
|
},
|
|
profileDesc() {
|
|
if (!this.isLogin) {
|
|
return '登录后可同步查看收藏、历史与个人主页'
|
|
}
|
|
|
|
return this.userInfo.signature || '点击查看个人资料与账号设置'
|
|
},
|
|
stats() {
|
|
return [{
|
|
label: '收藏',
|
|
value: this.getCount('my_collection_count'),
|
|
menu: this.findMenuItem('my_collect')
|
|
}, {
|
|
label: '喜欢',
|
|
value: this.getCount('like_count'),
|
|
menu: this.findMenuItem('my_like')
|
|
}, {
|
|
label: '历史',
|
|
value: this.getCount('read_history_count'),
|
|
menu: this.findMenuItem('history')
|
|
}, {
|
|
label: '关注',
|
|
value: this.getCount('following_count'),
|
|
menu: this.findMenuItem('my_follow')
|
|
}]
|
|
},
|
|
quickMenus() {
|
|
return [
|
|
this.findMenuItem('my_collect'),
|
|
this.findMenuItem('history'),
|
|
this.findMenuItem('my_reply'),
|
|
this.findMenuItem('customer_service')
|
|
].filter(Boolean)
|
|
},
|
|
menuGroups() {
|
|
return [
|
|
['my_account', 'my_follow', 'edit_cms', 'cms_list'].map(this.findMenuItem).filter(Boolean),
|
|
['withdraw', 'recharge', 'sharing_app', 'customer_service'].map(this.findMenuItem).filter(Boolean)
|
|
]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
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'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getCount(field) {
|
|
const value = Number(this.userInfo[field] || 0)
|
|
return value > 99 ? '99+' : String(value)
|
|
},
|
|
findMenuItem(type) {
|
|
return this.menuMap[type]
|
|
},
|
|
dialogConfirm() {
|
|
console.log('点击确认')
|
|
},
|
|
inputDialogToggle() {
|
|
this.$refs.inputDialog.open()
|
|
},
|
|
dialogClose() {
|
|
console.log('点击关闭')
|
|
},
|
|
requireLogin(next) {
|
|
const token = uni.getStorageSync('uni_id_token')
|
|
if (!token) {
|
|
this.toLogin()
|
|
return false
|
|
}
|
|
|
|
next && next()
|
|
return true
|
|
},
|
|
menuClick(item) {
|
|
if (!item || !item.type) {
|
|
return
|
|
}
|
|
|
|
const routeMap = {
|
|
my_follow: '/pages2/follow/follow',
|
|
withdraw: '/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') {
|
|
this.toPersonalpage()
|
|
return
|
|
}
|
|
|
|
if (routeMap[item.type]) {
|
|
this.requireLogin(() => {
|
|
uni.navigateTo({
|
|
url: routeMap[item.type]
|
|
})
|
|
})
|
|
return
|
|
}
|
|
|
|
if (item.type === 'customer_service' || item.type === 'sharing_app' || item.type === 'recharge') {
|
|
this.inputDialogToggle()
|
|
return
|
|
}
|
|
|
|
if (item.type === 'logout') {
|
|
mutations.logout()
|
|
}
|
|
},
|
|
toLogin() {
|
|
uni.navigateTo({
|
|
url: '../../pages3/uni_modules/uni-id-pages/pages/login/login-withoutpwd?type=weixin'
|
|
})
|
|
},
|
|
toUserInfoPage() {
|
|
this.requireLogin(() => {
|
|
uni.navigateTo({
|
|
url: '../../pages3/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true'
|
|
})
|
|
})
|
|
},
|
|
toPersonalpage() {
|
|
this.requireLogin(() => {
|
|
uni.navigateTo({
|
|
url: '/uni_modules/zetank-personalpage/pages/personalpage/personalpage?uid=' + this.userInfo._id
|
|
})
|
|
})
|
|
},
|
|
toScan() {
|
|
this.inputDialogToggle()
|
|
},
|
|
toSetting() {
|
|
uni.navigateTo({
|
|
url: '/pages2/setting/setting'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './my.scss';
|
|
</style>
|