CXSG_H5/pages/tripHint/tripHintDetails.vue

<template>
	<view class="tripHintDetails">
		<!-- 导航栏 -->
		<navigationBar title="出行提示">
		</navigationBar>
		<view class="main">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view class="scroll-view-item">
					<view class="list">
						<text class="name">线路名称:</text>
						<text class="content">{{details.roadName}}</text>
					</view>
					<view class="list">
						<text class="name">详细地点:</text>
						<text class="content">{{details.address}}</text>
					</view>

					<view class="detailsImg" v-if="details.imgUrl">
						<image :src="details.imgUrl" mode="aspectFit" class="img"></image>
						<!-- <image src="../../static/images/detailsImg.png" mode="" class="img"></image> -->
					</view>
					<view class="list describe">
						<text class="name">预警提示:</text>
					</view>
					<u--textarea v-model="details.warnHint" height="141.05" :describe="true"></u--textarea>
					<view class="list">
						<text class="name">发布时间:</text>
						<text class="content">{{details.createTime}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getTripDetails
	} from "@/api/list.js"
	export default {
		data() {
			return {
				// 竖向滚动条位置
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				// 详情
				details: {}
			};
		},
		onLoad(data) {
			this.getData(data.id)
		},
		methods: {
			// 触底事件
			lower(e) {
				// console.log(e)
			},
			// 获取数据
			async getData(id) {
				let res = await getTripDetails(id)
				if (res.code == 200) {
					this.details = res.data
					// console.log(res);
				}
			}
		},
	}
</script>

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

		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10.53rpx 0;
			border-bottom: 2.11rpx solid #E8E8E8;
			margin-bottom: 21.05rpx;

			.name {
				font-weight: 600;
			}

		}

		.u-textarea {
			margin-bottom: 21.05rpx;
		}

		.describe {
			border-bottom: 0;
			margin-bottom: 0;
		}

		.detailsImg {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 21.05rpx;

			.img {
				width: 303.16rpx;
				height: 303.16rpx;
				border-radius: 8.42rpx;
			}
		}
	}
</style>