BiKing/pages/content/h5-list.vue

<template>
	<view>
		<headContent statusBarBg="#191A2E" bgColor="#191A2E">

			<template #left>
				<reverse-back iconColor="#fff" />
			</template>
			<template #content>
				<view class="haed-title">
					{{ title }}
				</view>
			</template>
			<template #right>
				<closeIocn iconColor="#fff" />
			</template>
		</headContent>
		<view class="new-content">
			<template v-for="(item , index) in ContentList">
				<view class="content-item" @click.syop="readArticle(item.id)">
					<text class="item-lable hide_1">{{ item.title }}</text>
					<text class="item-icon iconfont">&#xe88e;</text>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		Api_getNewDetail,
		Api_getNewsList
	} from "@/api/index.js"
	export default {
		name: 'article-details',
		data() {
			return {
				cids: [
					0,
					19,
					102
				],
				title: '',
				cidIndex: 0,
				ContentList: [],
			};
		},
		onLoad(opt) {
			this.cidIndex = opt?.id;
			switch (this.cidIndex) {
				case '1':
				case 1:
					this.title = "关于我们";
					break;
				case '2':
				case 2:
					this.title = "活动中心";
					break;
				default:
					this.title = "";
			}
			this.getNewDetail()
		},
		mounted() {

		},
		methods: {
			getNewDetail() {
				if (this.cidIndex) {
					Api_getNewsList({
						c_id: this.cids[this.cidIndex],
						limit: 1000
					}).then(res => {
						this.ContentList = res.list || [];

					})
				}
			},
			readArticle(id) {
				uni.navigateTo({
					url: this.$path.articleDetails + `${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.haed-title {
		color: #fff !important;
	}

	.new-content {
		.content-item {
			width: 100%;
			height: 100rpx;
			padding: 0 40rpx;
			border-bottom: 1rpx solid $border-color;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item-lable {
				width: 1px;
				flex: 1;
				font-size: 34rpx;
				font-weight: 600;
			}

			.item-icon {
				flex-shrink: 0;
				font-size: 40rpx;
				color: $btnBgColor;
				font-weight: bold;
			}

			// <view class="content-item">
			// 	<text class="item-lable">{{ item.title }}</text>
			// 	<text class="item-icon iconfont">&#xe88e;</text>
			// </view>
		}
	}
</style>