first

pages/noticePage/noticeDetail.vue

@@ -0,0 +1,57 @@
+<template>
+  <view class="content">
+    <view class="title">
+      <span>{{ vdata.record.title }}</span>
+    </view>
+    <view class="updatedAt">
+      <span class="author">作者：{{ vdata.record.publisher }}</span>
+      <span>时间：{{ vdata.record.updatedAt }}</span>
+    </view>
+    <!-- mp-html 会有横向滚动条问题 所以采用v-html -->
+    <!-- <mp-html :content="record.content" />	 -->
+    <view v-html="vdata.record.content"></view>
+  </view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+import { reqLoad, API_URL_SYS_ARTICLES } from '@/http/apiManager.js'
+import { onLoad } from '@dcloudio/uni-app'
+
+onLoad((options) => {
+	reqLoad.getById(API_URL_SYS_ARTICLES, options.id).then( ({bizData}) => {
+		vdata.record = bizData
+	})
+})
+
+const vdata = reactive({
+	record : { }
+})
+
+
+</script>
+<style lang="scss" scoped>
+.content {
+  box-sizing: border-box;
+  padding: 0 50rpx 40rpx 50rpx;
+  .title {
+    // height: 60rpx;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 35rpx;
+    padding: 20rpx 0;
+    font-weight: 700;
+    color: rgba(0, 0, 0, 0.8);
+  }
+  .updatedAt {
+    padding: 0rpx 0 40rpx 0;
+    color: #969696;
+    font-size: 20rpx;
+    .author {
+      margin-right: 30rpx;
+    }
+  }
+}
+</style>

pages/noticePage/noticeList.vue

@@ -0,0 +1,64 @@
+<template>
+	<JeepayTableList :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData" :pageSize="10">
+		<template #tableBody="{ record }">
+			<view class="post-list" @tap="toDetail(record.articleId)">
+			  <text>{{ record.title }}</text>
+			  <text>{{ record.createdAt ? record.createdAt.slice(0, 10) : '' }}</text>
+			</view>	
+		</template>
+	</JeepayTableList>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import { reqLoad, API_URL_SYS_ARTICLES } from "@/http/apiManager.js"
+import go from '@/commons/utils/go.js'
+import { onReachBottom } from '@dcloudio/uni-app'
+onReachBottom(() => {} )
+
+const vdata = reactive({
+	searchData: { articleType : 1 } // 搜索条件
+})
+
+// 请求
+function reqTableDataFunc (params) {
+    return reqLoad.list(API_URL_SYS_ARTICLES, params)
+}
+
+// 跳转
+function toDetail (articleId) {
+	go.to("PAGES_NOTICE_DETAIL", {id: articleId})
+}
+
+</script>
+<style scoped lang="scss">
+page {
+  background: #f5f6fc;
+}
+.post-list {
+  box-sizing: border-box;
+  width: 750rpx;
+  height: 150rpx;
+  background: #fff;
+  margin-top: 2rpx;
+  padding: 30rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  text {
+    &:nth-child(1) {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #000;
+      overflow: hidden;
+      text-overflow: ellipsis; //溢出用省略号显示
+      white-space: nowrap;
+    }
+    &:nth-child(2) {
+      font-weight: 500;
+      font-size: 23rpx;
+      color: #a6a6a6;
+    }
+  }
+}
+</style>