110 lines
5.6 KiB
Vue
110 lines
5.6 KiB
Vue
<!-- 未来社区 - 社区公告列表 -->
|
||
<template>
|
||
<view class="nl-page">
|
||
<view class="fc-nav" :style="{ paddingTop: statusBarTop + 'px' }">
|
||
<view class="fc-nav-bar">
|
||
<view class="fc-back" @tap="goBack"><u-icon name="arrow-left" color="#1a1a1a" size="38"></u-icon></view>
|
||
<view class="fc-nav-tt"><text class="fc-nav-title">社区公告</text><text class="fc-nav-sub">上河坊·九九社区</text></view>
|
||
</view>
|
||
<scroll-view class="nl-tabs" scroll-x>
|
||
<text class="nl-tab" :class="{ on: activeTab === t.key }" v-for="t in NOTICE_TABS" :key="t.key" @tap="activeTab = t.key">{{ t.label }}</text>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="nl-body">
|
||
<!-- 置顶（全部tab） -->
|
||
<view class="nl-pinned" v-if="activeTab === 'all' && pinned" @tap="goDetail(pinned)">
|
||
<view class="nl-pin-corner">置顶</view>
|
||
<view class="nl-pin-head">
|
||
<view class="nl-icon" :style="{ background: '#fff1f1' }"><u-icon :name="pinned.icon" color="#e43f43" size="34"></u-icon></view>
|
||
<view class="nl-pin-tt">
|
||
<text class="nl-title">{{ pinned.title }}</text>
|
||
<text class="nl-meta">{{ pinned.date }} · {{ pinned.source }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="nl-sum">{{ pinned.summary }}</text>
|
||
<text class="nl-read">{{ pinned.readCount }} 次阅读</text>
|
||
</view>
|
||
|
||
<view class="nl-card" v-for="n in listNotices" :key="n.id" @tap="goDetail(n)">
|
||
<view class="nl-icon" :style="{ background: tagBg(n.tag, true) }"><u-icon :name="n.icon" :color="tagColor(n.tag)" size="34"></u-icon></view>
|
||
<view class="nl-main">
|
||
<view class="nl-row1">
|
||
<text class="nl-title">{{ n.title }}</text>
|
||
<text class="fc-tag" :style="tagStyle(n.tag)">{{ tagLabel(n.tag) }}</text>
|
||
</view>
|
||
<text class="nl-meta">{{ n.date }} · {{ n.source }}</text>
|
||
<text class="nl-sum">{{ n.summary }}</text>
|
||
<text class="nl-read">{{ n.readCount }} 次阅读</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="fc-empty" v-if="!listNotices.length && !(activeTab === 'all' && pinned)">暂无公告</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { NavgateTo } from '@/utils'
|
||
import { notices, NOTICE_TABS, NOTICE_TAG_META } from '../data.js'
|
||
|
||
export default {
|
||
data() {
|
||
return { statusBarTop: 20, NOTICE_TABS, activeTab: 'all', notices }
|
||
},
|
||
onLoad(options) {
|
||
const sys = uni.getSystemInfoSync()
|
||
this.statusBarTop = sys.statusBarHeight || 20
|
||
if (options && options.tab && NOTICE_TABS.some(t => t.key === options.tab)) this.activeTab = options.tab
|
||
},
|
||
computed: {
|
||
pinned() { return this.notices.find(n => n.pinned) },
|
||
listNotices() {
|
||
if (this.activeTab === 'all') return this.notices.filter(n => !n.pinned)
|
||
return this.notices.filter(n => n.tag === this.activeTab)
|
||
}
|
||
},
|
||
methods: {
|
||
tagLabel(t) { return (NOTICE_TAG_META[t] || {}).label || '' },
|
||
tagColor(t) { return (NOTICE_TAG_META[t] || {}).color || '#666' },
|
||
tagBg(t) { return (NOTICE_TAG_META[t] || {}).bg || '#eee' },
|
||
tagStyle(t) { const m = NOTICE_TAG_META[t] || {}; return { color: m.color, background: m.bg } },
|
||
goBack() { uni.navigateBack({ delta: 1 }) },
|
||
goDetail(n) { NavgateTo('/packages/futureCommunity/noticeDetail/index?id=' + n.id, { isLogin: false }) }
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
page { background: #f5f6f7; }
|
||
.nl-page { min-height: 100vh; background: #f5f6f7; }
|
||
.fc-nav { position: sticky; top: 0; z-index: 100; background: #fff; padding: 0 24rpx; }
|
||
.fc-nav-bar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 88rpx; }
|
||
.fc-back { position: absolute; left: 0; top: 0; height: 88rpx; display: flex; align-items: center; }
|
||
.fc-nav-tt { display: flex; flex-direction: column; align-items: center; }
|
||
.fc-nav-title { font-size: 34rpx; font-weight: 700; color: #1a1a1a; }
|
||
.fc-nav-sub { font-size: 20rpx; color: #9098a0; margin-top: 2rpx; }
|
||
.nl-tabs { white-space: nowrap; padding: 8rpx 0 14rpx; }
|
||
.nl-tab { display: inline-block; font-size: 28rpx; color: #6b7078; padding: 8rpx 6rpx; margin-right: 40rpx; }
|
||
.nl-tab.on { color: #e9272d; font-weight: 700; }
|
||
|
||
.nl-body { padding: 20rpx; }
|
||
.fc-tag { font-size: 20rpx; padding: 2rpx 12rpx; border-radius: 6rpx; flex-shrink: 0; }
|
||
.nl-icon { flex-shrink: 0; width: 64rpx; height: 64rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; }
|
||
.nl-title { font-size: 28rpx; font-weight: 600; color: #1a1a1a; }
|
||
.nl-meta { font-size: 20rpx; color: #b6bcc4; margin-top: 6rpx; }
|
||
.nl-sum { font-size: 24rpx; color: #6b7078; margin-top: 10rpx; }
|
||
.nl-read { font-size: 20rpx; color: #b6bcc4; margin-top: 10rpx; }
|
||
|
||
.nl-pinned { position: relative; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 20rpx; box-shadow: 0 6rpx 20rpx rgba(30,34,44,0.06); display: flex; flex-direction: column; }
|
||
.nl-pin-corner { position: absolute; right: 0; top: 0; background: #e9272d; color: #fff; font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 0 20rpx 0 16rpx; }
|
||
.nl-pin-head { display: flex; align-items: center; }
|
||
.nl-pin-tt { margin-left: 18rpx; display: flex; flex-direction: column; }
|
||
|
||
.nl-card { display: flex; background: #fff; border-radius: 20rpx; padding: 24rpx; margin-bottom: 18rpx; }
|
||
.nl-main { flex: 1; min-width: 0; margin-left: 18rpx; display: flex; flex-direction: column; }
|
||
.nl-row1 { display: flex; align-items: center; justify-content: space-between; }
|
||
.nl-row1 .nl-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-right: 12rpx; }
|
||
.fc-empty { text-align: center; color: #9aa0a8; font-size: 26rpx; padding: 100rpx 0; }
|
||
</style>
|