youxi-app/pages/user/components/notice.uvue

<script setup lang='ts'>

import { onMounted, ref, onUnmounted } from 'vue'
import { type AppUpdateNoticePageResult, type AppUpdateNoticeResult, getAppUpdateNoticePage, fetchAppUpdateNotice } from '@/services/subject/notice'
import { user, parse } from '@/.cool'
const recordList = ref<UTSJSONObject[]>([])
const record = ref<UTSJSONObject>({})
const notice = ref<UTSJSONObject>({})
async function handleDetail(item: UTSJSONObject) {
	record.value = item
	const res = await fetchAppUpdateNotice({
		id: item['noticeId'] as string
	})
	notice.value = res || {}
	console.log(notice.value)
}
async function getNoticeList() {
	if (user.info.value == null || user.info.value.userInfo.userId == null) {
		return
	}
	const res = await getAppUpdateNoticePage({
		userId: user.info.value?.userInfo.userId as string,
		pageNum: 1,
		pageSize: 20
	})
	recordList.value = res.rows || []
	if (recordList.value.length > 0) {
		handleDetail(recordList.value[0])
	}
}

onMounted(() => {
	getNoticeList()
})
onUnmounted(() => {
	recordList.value = []
	record.value = {}
	notice.value = {}
})

</script>
<template>
	<view class="  shadow rounded-3xl mt-[20px] sidebar   w-full">
		<cl-row :gutter="10" :pt="{
			className: 'w-full h-full'
		}">
			<cl-col :span="8" :pt="{
				className: ' h-full'
			}">
				<scroll-view direction="vertical" :show-scrollbar="false"
					class="w-full h-full  bg-[#a5ddfe]  p-[10rpx]">
					<view class="w-full mb-[10rpx]  relative" v-for="item in recordList" :key="item['noticeId']"
						@tap="handleDetail(item)">
						<cl-badge type="error" dot position v-if="item['readFlag'] == false"> </cl-badge>
						<image v-if="item['noticeId'] == record['noticeId']" mode="widthFix" lazy-load
							src="https://oss.xiaoxiongcode.com/static/home/725.png" alt=""
							class="w-full h-full object-cover" />
						<image v-else mode="widthFix" lazy-load src="https://oss.xiaoxiongcode.com/static/home/726.png"
							alt="" class="w-full h-full object-cover" />
						<view
							class="absolute bottom-[0rpx] left-[0rpx] w-full h-full flex flex-row items-center justify-center">
							<view class="h-full w-[34rpx]  flex flex-col items-center justify-end pb-[2rpx]">
								<text class="text-[12rpx] font-bold  text-[#008DDF]">{{ item['month'] }}月</text>
								<text class="text-[12rpx] font-bold  text-[#008DDF]">{{ item['day'] }}日</text>
							</view>
							<view class="flex-1 pt-[3rpx] pl-[5rpx]">
								<text class=" text-[12rpx] single-line font-bold  text-[#008DDF]"
									:class="{ 'text-[#fff]': item['noticeId'] == record['noticeId'] }">
									{{ item['noticeName'] }}
								</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</cl-col>
			<cl-col :span="16" :pt="{
				className: ' h-full'
			}">
				<scroll-view direction="vertical" :show-scrollbar="false" class="w-full h-full  p-[10rpx]"
					v-if="notice['content'] != null">
					<view class="w-full flex flex-row items-center justify-center relative">
						<image mode="widthFix" lazy-load src="https://oss.xiaoxiongcode.com/static/home/724.png" alt=""
							class="w-[300rpx] h-full object-cover" />
						<text class=" title ">
							{{ record['noticeName'] }}
						</text>
					</view>
					<view class="w-full mt-[10rpx] flex flex-row items-center justify-center">
						<text class="text-[12rpx]  mr-[15rpx] text-[#333]">
							发布人：{{ notice['createdUserName']
							}}</text>
						<text class="text-[12rpx]   text-[#333]">
							发布时间：{{ notice['updateTime'] }}</text>
					</view>
					<rich-text class="w-full   mt-[10rpx] " style="font-size: 12rpx;color: #333;" mode="web"
						:nodes="notice['content']">
					</rich-text>
				</scroll-view>
			</cl-col>
		</cl-row>
	</view>
</template>
<style lang="scss" scoped>
.sidebar {
	height: calc(80vh - 90px);
	max-height: calc(620px - 90px);
	background-color: #fff;
}

.title {
	@apply text-[14rpx] font-bold text-[#fff] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[280rpx] text-center;
}

.single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 80%;
}
</style>