first commit

pages/notice/details.vue

@@ -0,0 +1,32 @@
+<template>
+	<view style="padding: 30rpx">
+		<view style="font-size: 34rpx">{{ articleItem.title }}</view>
+		<view style="height: 20rpx"></view>
+		<view style="color: #999; font-size: 30rpx">发布时间：{{ timeFormat(articleItem.createTime, 'yyyy-MM-dd hh:mm:ss') }}</view>
+		<view style="height: 20rpx"></view>
+		<video v-if="articleItem.video" style="width: 690rpx; height: 388rpx" :poster="articleItem.cover" :src="articleItem.video" :direction="90"></video>
+		<view style="height: 20rpx"></view>
+		<view>
+			<mp-html :content="articleItem.content" />
+		</view>
+		<view style="50rpx"></view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { onLoad } from '@dcloudio/uni-app';
+import { ref, computed } from 'vue';
+import api from '@/api/index';
+import { timeFormat } from '@/utils/fun.js';
+
+
+const articleItem = ref({});
+
+onLoad((options: any) => {
+	api.noticeInfo({ id: options.id }).then((res) => {
+		articleItem.value = res;
+	});
+});
+</script>
+
+<style></style>

pages/notice/notice.vue

@@ -0,0 +1,138 @@
+<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>