CXSG_H5/pages/tripHint/tripHint.vue

<template>
	<view class="tripHint">
		<!-- 导航栏 -->
		<navigationBar title="出行提示">
			<template #operate>
				<view class="time">
					<u-icon name="clock" color="#2C2B30" size="38"></u-icon>
				</view>
			</template>
		</navigationBar>
		<view class="main">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="scroll-view-item" v-for="(v,i) in ListData" :key="i"
					@click="$goBack(2,'/pages/tripHint/tripHintDetails?id=' + v.id)">
					<view class="list titleList">
						<text class="name">{{v.roadName}}</text>
						<view class="btn">
							纠错
						</view>
					</view>
					<view class="list">
						<text class="name">详细地址:</text>
						<text class="content">{{v.address}}</text>
					</view>
					<view class="list">
						<text class="name">预警提示:</text>
						<text class="content">{{v.warnHint}}</text>
					</view>
					<view class="list timeList">
						<text class="name">发布时间:</text>
						<text class="content">{{v.createTime}}</text>
						<u-icon name="map-fill" color="#2C2B30" size="35"></u-icon>
					</view>
				</view>
				<u-loadmore :status="status" v-if="total != 0" fontSize="30" iconSize="30" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getTripData
	} from "@/api/list.js"
	export default {
		data() {
			return {
				// 竖向滚动条位置
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 查询参数
				queryParams: {
					sendType: 0,
					pageNum: 1,
					pageSize: 10,
				},
				// 列表数据
				ListData: [],
				// 总数
				total: 0,
				// 加载更多
				status: 'loadmore',
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			// 触底事件
			lower(e) {
				if (this.ListData.length < this.total) {
					this.status = 'loading'
					this.queryParams.pageSize += 10
					this.getList()
				} else {
					this.status = 'nomore'
				}
			},
			// 获取列表数据
			async getList() {
				let res = await getTripData(this.queryParams)
				if (res.code == 200) {
					this.total = res.total
					this.ListData = res.rows
					this.status = 'loadmore'
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tripHint {
		height: 100%;

		.list {
			display: flex;
			padding: 8.42rpx 0;

			.name {
				font-weight: 600;
				width: 136.84rpx;
				flex: none;
				margin-right: 10.53rpx;
			}

			.content {
				color: #7F7F7F;
			}
		}

		.titleList {
			justify-content: space-between;

			.name {
				font-size: 33.68rpx;
			}

			.btn {
				width: 109.47rpx;
				height: 44.21rpx;
				line-height: 44.21rpx;
				background-color: #D7ECFF;
				border-radius: 105.26rpx;
				text-align: center;
				font-weight: 600;
				color: #041F34;
			}
		}

		.timeList {
			justify-content: space-between;

			.content {
				flex: 1;
			}
		}
	}
</style>