139 lines
3.1 KiB
Vue
139 lines
3.1 KiB
Vue
<template>
|
||
<view class="notice">
|
||
<wd-navbar title="公告" safeAreaInsetTop left-arrow @click-left="back"></wd-navbar>
|
||
|
||
<!-- 顶部导航栏 -->
|
||
<view class="nav-tabs">
|
||
<view class="tab-item" :class="active == 1 ? 'active' : ''" @click="activeChange(1, '')">通知</view>
|
||
<!-- <view class="tab-item" :class="active == 2 ? 'active' : ''" @click="activeChange(2, null)">公告</view> -->
|
||
<view
|
||
class="tab-item"
|
||
:class="active == 2 && categoryId == item.id ? 'active' : ''"
|
||
@click="activeChange(2, item.id)"
|
||
v-for="(item, index) in noticeCateList"
|
||
:key="index"
|
||
>
|
||
{{ item.categoryName }}
|
||
</view>
|
||
</view>
|
||
|
||
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
|
||
<view class="p30">
|
||
<view class="notice_block" v-for="(item, index) in dataList" :key="index" @click="toDeitl(item)">
|
||
<view>
|
||
{{ active == 1 ? '通知' : active == 2 ? noticeCateList.find((val) => val.id == categoryId).categoryName : '' }}：{{
|
||
active == 1 ? item.content : item.title
|
||
}}
|
||
</view>
|
||
<image style="width: 40rpx; height: 40rpx" src="/static/y.png" v-if="active == 2"></image>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onLoad } from '@dcloudio/uni-app';
|
||
import { ref, computed } from 'vue';
|
||
import api from '@/api/index';
|
||
const active = ref(1);
|
||
const categoryId = ref<string | number>('');
|
||
const paging = ref(null);
|
||
const dataList = ref([]);
|
||
const noticeCateList = ref([]);
|
||
onLoad(() => {
|
||
api.noticeCatePage().then((res) => {
|
||
noticeCateList.value = res.list;
|
||
});
|
||
});
|
||
|
||
const toDeitl = (item) => {
|
||
if (active.value == 1) {
|
||
uni.showModal({
|
||
title: '通知',
|
||
content: item.content,
|
||
showCancel: false
|
||
});
|
||
} else {
|
||
uni.navigateTo({
|
||
url: '/pages/notice/details?id=' + item.id
|
||
});
|
||
}
|
||
};
|
||
|
||
const activeChange = (e, cateId) => {
|
||
active.value = e;
|
||
categoryId.value = cateId;
|
||
paging.value.reload();
|
||
};
|
||
|
||
const queryList = (pageNo, pageSize) => {
|
||
api.noticePage({ pageNo, pageSize, type: active.value, categoryId: categoryId.value })
|
||
.then((res: any) => {
|
||
paging.value.complete(res.list);
|
||
})
|
||
.catch((res) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
|
||
const back = () => {
|
||
uni.navigateBack();
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.notice {
|
||
&_block {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 35rpx;
|
||
width: 690rpx;
|
||
height: 106rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
position: relative;
|
||
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #232323;
|
||
}
|
||
|
||
/* 导航标签样式 */
|
||
.nav-tabs {
|
||
display: flex;
|
||
/* justify-content: space-around; */
|
||
background-color: #ffffff;
|
||
padding: 24rpx 0;
|
||
border-bottom: 1rpx solid #eee;
|
||
}
|
||
|
||
.tab-item {
|
||
font-size: 15px;
|
||
color: #999;
|
||
position: relative;
|
||
padding: 0 10px;
|
||
z-index: 9;
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
right: 20rpx;
|
||
width: 40rpx;
|
||
height: 12rpx;
|
||
background: #627c54;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
z-index: 5;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
</style>
|