Prechádzať zdrojové kódy

[捉药师] 增加公告以及公告详情

tangyuanwang 1 týždeň pred
rodič
commit
e629cde2d7
3 zmenil súbory, kde vykonal 389 pridanie a 0 odobranie
  1. 16 0
      pages.json
  2. 213 0
      pages/notice/detail.vue
  3. 160 0
      pages/notice/list.vue

+ 16 - 0
pages.json

@@ -95,6 +95,22 @@
       "style": {
         "navigationBarTitleText": "登录注册"
       }
+    },
+    {
+    	"path" : "pages/notice/list",
+    	"style" : 
+    	{
+			"navigationStyle": "custom",
+    		"navigationBarTitleText" : "公告列表"
+    	}
+    },
+    {
+    	"path" : "pages/notice/detail",
+    	"style" : 
+    	{
+			 "navigationStyle": "custom",
+    		"navigationBarTitleText" : "公告详情"
+    	}
     }
   ],
   "globalStyle": {

+ 213 - 0
pages/notice/detail.vue

@@ -0,0 +1,213 @@
+<template>
+	<Container title="公告列表" :scrollStyle="{ padding: 0 }" :showBack="false">
+		<view class="notice-header">
+			<!-- 上一篇标题 -->
+			<view class="upper-title">{{ '< 上一篇' }}</view>
+			<!-- 显示全部内容 -->
+			<view class="show-all-content">显示全部</view>
+			<!-- 下一篇标题 -->
+			<view class="next-title">{{ '下一篇 >' }}</view>
+		</view>
+		<view class="notice-detail" v-if="notice_data !='' && notice_data !=null">
+			<!-- 公告标题 -->
+			<view class="notice-main-title">{{ notice_data.title }}</view>
+
+			<!-- 发布时间 -->
+			<view class="notice-time">{{ formatTimestamp(notice_data.insert_time)}}</view>
+
+			<!-- 公告内容 -->
+			<view class="notice-content">
+				<rich-text :nodes="htmlContent"></rich-text>
+			</view>
+		</view>
+	</Container>
+</template>
+
+<script>
+import Container from '../../components/Container/Container.vue';
+import CustomerService from '@/components/CustomerService/CustomerService.vue';
+export default {
+	data() {
+		return {
+			notice_id: '',
+			notice_data: [],
+			htmlContent:''
+		};
+	},
+	mounted() {},
+	onLoad(param) {
+		this.notice_id = param.id;
+		this.get_notice_detail();
+	},
+	methods: {
+		formatTimestamp(timestamp) {
+			if (timestamp) {
+				timestamp = timestamp * 1000;
+			}
+			const date = new Date(timestamp);
+			const year = date.getFullYear();
+			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始,要 +1
+			const day = String(date.getDate()).padStart(2, '0');
+			const hours = String(date.getHours()).padStart(2, '0');
+			const minutes = String(date.getMinutes()).padStart(2, '0');
+			const seconds = String(date.getSeconds()).padStart(2, '0');
+			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+		},
+		async get_notice_detail() {
+			this.$http.request('api/question_bank/question_reception/notice/detail', { id: this.notice_id}).then((callback) => {
+				if (callback.code == 'success') {
+					this.notice_data = callback.data;
+					this.htmlContent=callback.data.content;
+				} else {
+					uni.showToast({
+						title: callback.msg,
+						icon: 'none'
+					});
+				}
+			});
+		},
+		handleItemClick(item) {
+			// 处理点击事件
+			console.log('点击公告:');
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.notice-header {
+	padding: 30rpx 30rpx 20rpx 30rpx;
+	display: flex;
+	text-align: center;
+	.upper-title {
+		width: 25%;
+		min-width: 120rpx;
+		line-height: 30rpx;
+		padding: 15rpx 15rpx;
+		border: 1rpx solid #999999;
+		border-radius: 200rpx 200rpx 200rpx 200rpx;
+	}
+	.next-title {
+		width: 25%;
+		min-width: 120rpx;
+		line-height: 30rpx;
+		padding: 15rpx 15rpx;
+		border: 1rpx solid #999999;
+		border-radius: 200rpx 200rpx 200rpx 200rpx;
+	}
+	.show-all-content {
+		width: 30%;
+		line-height: 30rpx;
+		padding: 15rpx 15rpx;
+		margin: 0rpx 20rpx;
+		border: 1rpx solid #999999;
+		border-radius: 200rpx 200rpx 200rpx 200rpx;
+	}
+}
+.notice-detail {
+	padding: 10rpx 30rpx 10rpx 30rpx;
+	background-color: #fff;
+	min-height: 100vh;
+	.next-title {
+		font-size: 28rpx;
+		color: #999;
+		margin-bottom: 20rpx;
+	}
+
+	.notice-main-title {
+		font-size: 40rpx;
+		font-weight: bold;
+		line-height: 1.5;
+		color: #333;
+		margin-bottom: 20rpx;
+	}
+
+	.notice-time {
+		font-size: 26rpx;
+		color: #999;
+		margin-bottom: 40rpx;
+	}
+
+	.notice-content {
+		font-size: 30rpx;
+		line-height: 1.8;
+		color: #333;
+
+		.notice-subtitle {
+			font-size: 34rpx;
+			font-weight: bold;
+			margin: 40rpx 0 20rpx;
+			color: #333;
+		}
+
+		.notice-quote {
+			font-size: 28rpx;
+			color: #666;
+			margin-bottom: 40rpx;
+			padding-left: 20rpx;
+			border-left: 6rpx solid #1a8cff;
+		}
+
+		.notice-paragraph {
+			margin-bottom: 40rpx;
+			text-align: justify;
+		}
+
+		.notice-section-title {
+			font-size: 34rpx;
+			font-weight: bold;
+			margin: 50rpx 0 30rpx;
+			color: #333;
+			position: relative;
+			padding-left: 20rpx;
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 10rpx;
+				height: 30rpx;
+				width: 8rpx;
+				background-color: #1a8cff;
+				border-radius: 4rpx;
+			}
+		}
+
+		.notice-highlight {
+			margin-bottom: 30rpx;
+			background-color: #f8f9fa;
+			border-radius: 12rpx;
+			padding: 20rpx;
+
+			.highlight-title {
+				font-weight: bold;
+				margin-bottom: 15rpx;
+				color: #1a8cff;
+			}
+
+			.highlight-item {
+				margin-left: 30rpx;
+				margin-bottom: 10rpx;
+			}
+		}
+
+		.notice-info {
+			margin-bottom: 25rpx;
+			display: flex;
+
+			.info-title {
+				font-weight: bold;
+				min-width: 140rpx;
+			}
+
+			.info-content {
+				flex: 1;
+
+				view {
+					margin-bottom: 10rpx;
+				}
+			}
+		}
+	}
+}
+</style>

+ 160 - 0
pages/notice/list.vue

@@ -0,0 +1,160 @@
+<template>
+	<Container title="公告列表" :scrollStyle="{ padding: 0 }" :showBack="false">
+		<view class="notice-page">
+			<!-- 公告列表 -->
+			<view class="notice-list" v-if="noticeList !='' && noticeList != null">
+				<!-- 公告项1 -->
+				<view class="notice-item" v-for="(item, index) in noticeList" :key="index" @click="handleItemClick(item)">
+					<view class="notice-icon">
+						<image
+							class="notice-icon-image"
+							src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/8DvVCq6w7CN97Mxdp68vje9WCi8RjKXDC5KwHOOY.png"
+							mode="aspectFill"
+						></image>
+					</view>
+					<view class="notice-content" :id="'content-' + index">
+						<view class="notice-title">{{ item.title }}</view>
+						<view class="notice-time">{{ formatTimestamp(item.insert_time)}}</view>
+					</view>
+					<navigator class="navigator_item" open-type="navigate" :url="'/pages/notice/detail?id=' + item.id">
+						<view class="notice-link">
+							<image
+								class="notice-link-image"
+								src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/jYNQJdKYavtqeVoq7bxwYFuF258jFm3sNWVSX1SS.png"
+								mode="aspectFill"
+							></image>
+						</view>
+					</navigator>
+				</view>
+			</view>
+		</view>
+	</Container>
+</template>
+
+<script>
+import Container from '../../components/Container/Container.vue';
+import CustomerService from '@/components/CustomerService/CustomerService.vue';
+export default {
+	data() {
+		return {
+			page: '1',
+			limit: '10',
+			noticeLink_top: [],
+			noticeList: []
+		};
+	},
+	mounted() {},
+	onLoad() {
+		this.topicnotice_system_list();
+	},
+	methods: {
+		formatTimestamp(timestamp) {
+			if (timestamp) {
+				timestamp = timestamp * 1000;
+			}
+			const date = new Date(timestamp);
+			const year = date.getFullYear();
+			const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始,要 +1
+			const day = String(date.getDate()).padStart(2, '0');
+			const hours = String(date.getHours()).padStart(2, '0');
+			const minutes = String(date.getMinutes()).padStart(2, '0');
+			const seconds = String(date.getSeconds()).padStart(2, '0');
+			return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
+		},
+		async topicnotice_system_list() {
+			this.$http.request('api/question_bank/question_reception/notice/list', { page: this.page, limit: this.limit }).then((callback) => {
+				if (callback.code == 'success') {
+					let page = this.page;
+					if (page == 1) {
+						this.noticeList = callback.data.data;
+					} else {
+						this.noticeList.push(...callback.data.data);
+					}
+					if (callback.data.data == '') {
+						this.noMore = true;
+					} else {
+						this.noMore = false;
+					}
+				} else {
+					uni.showToast({
+						title: callback.msg,
+						icon: 'none'
+					});
+				}
+			});
+		},
+		handleItemClick(item) {
+			// 处理点击事件
+			console.log('点击公告:');
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.notice-page {
+	background-color: #f5f5f5;
+	min-height: 100vh;
+
+	.notice-list {
+		background-color: #fff;
+		border-radius: 12rpx;
+		overflow: hidden;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+
+		.notice-item {
+			display: flex;
+			align-items: center;
+			padding: 24rpx 30rpx;
+			border-bottom: 1rpx solid #eee;
+			position: relative;
+			height: 128rpx;
+			.notice-icon {
+				position: absolute;
+				top: 22rpx;
+				width: 60rpx;
+				height: 60rpx;
+				margin-right: 20rpx;
+			}
+
+			.notice-link {
+				position: absolute;
+				right: 0rpx;
+				width: 50rpx;
+				height: 50rpx;
+				margin-right: 20rpx;
+				top:67rpx;
+			}
+
+			.notice-link-image,
+			.notice-icon-image {
+				width: 50rpx;
+				height: 50rpx;
+			}
+
+			.notice-content {
+				flex: 1;
+				margin-left: 60rpx;
+				margin-right: 60rpx;
+
+				.notice-title {
+					font-size: 30rpx;
+					color: #333;
+					margin-bottom: 10rpx;
+					line-height: 1.4;
+					display: -webkit-box;
+					-webkit-box-orient: vertical;
+					-webkit-line-clamp: 2;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+
+				.notice-time {
+					font-size: 24rpx;
+					color: #999;
+				}
+			}
+		}
+	}
+}
+</style>