Retired/pages/mine/mine.vue

123 lines
2.6 KiB
Vue

<template>
<!-- 我的 -->
<view class="my">
<!-- 状态栏 -->
<view class="status-bar bg-white pt-30"></view>
<!-- 头像栏 -->
<view class="flex items-center wrap-card" hover-class="bg-gray-100" @click="$u.route('/pages/mine/set')">
<image class="header-img" src="/static/img/header/a.svg" mode=""
@click.stop="$u.route('/pages/mine/user-space')"></image>
<view class="flex flex-col flex-1 px-20">
<text class="text-32 font-bold">MrThinco</text>
<text class="text-28 text-gray-500 mt-10">总帖子&nbsp;38&nbsp;&nbsp;今日发帖&nbsp;2</text>
</view>
<text class="iconfont iconqianjin"></text>
</view>
<!-- 统计栏 -->
<view class="wrap-card flex items-center">
<view v-for="(item,index) in countList" :key="index"
class="flex-1 flex flex-col items-center justify-center">
<view class="text-32 font-bold">
{{item.num}}
</view>
<view class="text-28 text-gray-500 mt-10">
{{item.name}}
</view>
</view>
</view>
<!-- 广告位 -->
<view class="wrap-card">
<image class="adv-img rounded-20" src="../../static/img/list/01.jpg" mode="aspectFill"></image>
</view>
<!-- 设置 -->
<u-cell-group :border='false'>
<u-cell v-for="(item,index) in setList" :key="index" :title="item.name" isLink size="large" :border='false'
@click="goPage(item.url)">
<text slot="icon" class="iconfont" :class="item.icon"></text>
</u-cell>
</u-cell-group>
</view>
</template>
<script>
export default {
data() {
return {
// 统计列表
countList: [{
num: 12,
name: '帖子'
},
{
num: 278,
name: '动态'
},
{
num: 369,
name: '评论'
},
{
num: 750,
name: '粉丝'
}
],
// 设置列表
setList: [
{
icon: 'iconhuiyuan',
name: '个人空间',
url: 'user-space'
},
{
icon: 'iconliulan',
name: '浏览历史'
},
{
icon: 'iconrenzheng',
name: '社区认证'
},
{
icon: 'iconshenhe',
name: '审核帖子'
},
// #ifdef MP-WEIXIN
{
icon: 'iconshezhi1',
name: '我的设置',
url: 'set'
}
// #endif
]
}
},
// 监听导航栏按钮点击
onNavigationBarButtonTap() {
this.goSet()
},
methods: {
goSet() {
this.$u.route('/pages/mine/set')
},
goPage(url) {
if (url) this.$u.route('/pages/mine/' + url)
}
}
}
</script>
<style lang="scss" scoped>
.my {
.header-img {
width: 100rpx;
height: 100rpx;
border-radius: 100%;
}
.adv-img {
height: 200rpx;
width: 100%;
}
}
</style>