更新 新闻列表

h5/pages/posts/posts/src/list1.vue

@@ -5,6 +5,9 @@
 	 * date：2024年9月11日 19:24:50
 	 */
 	import {
+		watch,
+		computed,
+		onMounted,
 		ref
 	} from 'vue'
 	import {
@@ -34,6 +37,54 @@
 			default: 1
 		}
 	});
+	const search_input = ref('')
+	const posts_list = ref([])
+	const posts_list_show = computed(() => {
+		if (!!search_input.value) {
+			let list = []
+			for (let i in posts_list.value) {
+				if (posts_list.value[i].title.includes(search_input.value)) {
+					list.push(posts_list.value[i])
+				}
+			}
+			return list
+		} else {
+			return posts_list.value
+		}
+	})
+	const htmlToText = (content) => {
+		return content
+	}
+	const getDetail = async (item, key) => {
+		const response = await $api('ArticleGetDetail', {
+			id: item.id
+		})
+		$response(response, () => {
+			posts_list.value[key].content = htmlToText(response.data.info.content)
+		})
+	}
+
+	const contentShow = (info, key) => {
+		posts_list.value[key].open = !posts_list.value[key].open
+		if (posts_list.value[key].open && !posts_list.value[key].content) {
+			getDetail(info, key)
+		}
+	}
+
+	watch(
+		() => $props.list,
+		() => {
+			posts_list.value = JSON.parse(JSON.stringify($props.list)).map((item) => {
+				return {
+					content: '',
+					...item,
+					open: false
+				}
+			})
+		}, {
+			immediate: true
+		}
+	)
 </script>
 <template>
 	<view class="list_wrapper">
@@ -52,11 +103,35 @@
 		</view>
 		<view class="search_wrapper">
 			<view class="search_line_wrapper"></view>
-			<view class="search_input_wrapper"></view>
+			<view class="search_input_wrapper">
+				<view class="search_input_icon_wrapper">
+					<image src="@/static/assets/posts/sousuo@2x.png"></image>
+				</view>
+				<input class="search_input_input_wrapper" v-model="search_input" type="text" placeholder="搜索">
+			</view>
+		</view>
+		<view class="item_list_wrapper">
+			<view v-if="posts_list_show.length === 0">
+				<view class="no_item_wrapper">暂无内容</view>
+			</view>
+			<view v-for="(i,k) in posts_list_show" :key="k" class="item_wrapper">
+				<view @click="contentShow(i,k)" class="item_title_wrapper">
+					<view class="item_title_text_wrapper">{{ i.title }}</view>
+					<view class="item_title_icon_wrapper">
+						<view class="item_title_icon_text_wrapper">{{ !i.open ? '展开' : '收起' }}</view>
+						<image v-if="!i.open" src="@/static/assets/posts/sanjiao@2x.png"></image>
+						<image v-else src="@/static/assets/posts/xsanjiao@2x.png"></image>
+					</view>
+					<image class="item_title_background_wrapper" src="@/static/assets/posts/biaoti@2x.png"></image>
+				</view>
+				<view v-if="!!i.open" class="item_content_wrapper">
+					<view v-if="!i.content" class="item_content_loading_wrapper">
+						<uni-icons type="spinner-cycle" size="20"></uni-icons>
+					</view>
+					<view v-else>
+						<text v-html="i.content"></text>
+					</view>
 				</view>
-		<view>
-			<view v-for="(i,k) in $props.list" :key="k" class="item_wrapper">
-				
 			</view>
 		</view>
 	</view>
@@ -67,6 +142,103 @@
 	}
 </style>
 <style scoped>
+	.no_item_wrapper {
+		padding: 150rpx 0;
+		font-size: 24rpx;
+		text-align: center;
+		color: #33333340;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	.item_content_loading_wrapper {
+		position: absolute;
+		left: 50%;
+		top: 30%;
+		transform: translate(-50%, -50%);
+		animation: spin 3s ease-in-out infinite;
+	}
+
+	.item_content_wrapper {
+		padding: 35rpx;
+		background: #F1F5F9;
+		position: relative;
+		font-size: 24rpx;
+	}
+
+	.item_list_wrapper {
+		padding-bottom: 50rpx;
+	}
+
+	.item_wrapper {
+		width: 676rpx;
+		margin: 25rpx auto 0;
+	}
+
+	.item_title_text_wrapper {
+		font-size: 30rpx;
+		font-weight: bold;
+		color: #ffffff;
+		position: relative;
+		z-index: 1;
+		margin-left: 35rpx;
+		width: 240px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.item_title_icon_wrapper {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		margin-right: 35rpx;
+	}
+
+	.item_title_icon_wrapper image {
+		width: 21rpx;
+		height: 11rpx;
+		display: block;
+		object-fit: contain;
+	}
+
+	.item_title_icon_text_wrapper {
+		font-size: 24rpx;
+		color: #ffffff;
+		margin-right: 10rpx;
+	}
+
+	.item_title_wrapper {
+		width: 676rpx;
+		height: 81rpx;
+		display: flex;
+		position: relative;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.item_title_background_wrapper {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		width: 676rpx;
+		height: 81rpx;
+		display: block;
+		object-fit: contain;
+		z-index: 0;
+	}
+
 	.list_wrapper {
 		width: 750rpx;
 		margin: 0 auto;
@@ -133,5 +305,27 @@
 		background: #FFFFFF;
 		border-radius: 21rpx;
 		border: 1px solid #A5A6A6;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.search_input_input_wrapper {
+		width: 80rpx;
+		height: 42rpx;
+		font-size: 22rpx;
+		text-align: center;
+	}
+
+	.search_input_icon_wrapper {
+		width: 22rpx;
+		height: 22rpx;
+	}
+
+	.search_input_icon_wrapper image {
+		width: 22rpx;
+		height: 22rpx;
+		display: block;
+		object-fit: contain;
 	}
 </style>