文章详情

api/notice.js

@@ -4,3 +4,4 @@ import oahttp from "@/utils/oahttp.js";
  * 公告列表
  */
 export const noticeList = (data) => oahttp.get('/article/lists', data)
+export const noticeDetail = (data) => oahttp.get('/article/detail', data)

pages.json

@@ -53,6 +53,15 @@
       }
 
     }
+      ,{
+            "path" : "pages/oaNews/oaNews",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "公告详情",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
   "subPackages": [{
     "root": "pages/views",

pages/oaHome/oaHome.vue

@@ -215,8 +215,10 @@
           }) : Toast('暂未开放')
       },
       // 点击公告
-      clickNotice(){
-        Toast('点击公告')
+      clickNotice(e){
+		  uni.navigateTo({
+		    url: `/pages/oaNews/oaNews?id=${e}`
+		  })
       },
       async getUserIndex() {
         const res = await getUserIndexAPI()

pages/oaNews/oaNews.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="container">
+		<view class="content">
+			<view class="detail">
+				<view class="title">{{ info.title }}</view>
+				<view class="info">
+					<view class="source-date">
+						<text class="source">{{ info.source }}</text>
+						<text class="date hidden">{{ info.create_time }}</text>
+					</view>
+					<view class="read">阅读 {{ info.click }}</view>
+				</view>
+				<view class="desc">
+					<u-parse :content="info.content" :tagStyle="style"></u-parse>
+				</view>
+
+			</view>
+			<view class="float-empty"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		noticeDetail
+	} from "@/api/notice.js"
+
+	export default {
+		data() {
+			return {
+				id: 0,
+				info: {},
+				style: {
+					// 字符串的形式
+					p: 'font-size:32rpx;padding-bottom:20rpx',
+				}
+			}
+		},
+		onLoad(e) {
+			if (e.id > 0) {
+				this.id = e.id;
+			}
+			this.getDetails();
+		},
+		methods: {
+			getDetails() {
+				let that = this
+				noticeDetail({
+					id: this.id
+				}).then(res => {
+					that.info = res.data
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.u-content {
+		padding: 24rpx;
+	}
+
+	.detail {
+		padding: 40rpx 32rpx;
+		background: #fff;
+
+		.title {
+			font-size: 40rpx;
+			color: #262626;
+			line-height: 60rpx;
+			font-weight: bold;
+		}
+
+		.info {
+			margin-top: 32rpx;
+			display: flex;
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+
+			.source-date {
+				.source {
+					color: #666;
+				}
+
+				.date {
+					color: #999;
+					margin-left: 24rpx;
+				}
+			}
+
+			.read {
+				color: #999;
+			}
+		}
+
+		.desc {
+			margin-top: 56rpx;
+			overflow: hidden;
+			color: #262626;
+
+			.wxParse {
+				color: #262626;
+			}
+		}
+	}
+</style>