yicangzongtai_app_240321/pages/government/subNVue/mapModule/dataList.vue

<template>
	<view :class="[ DataType === 2 ? '' : 'hide-element' ]">
		<template v-if="DataType === 2">
			<babTouchbox :minHeight="0.35" :smallHeight="0.1" :maxHeight="0.8" :touchHeight="64"
				@currentHeight="setTouchHeight" @maxtHeight="setScrollMaxHeight">

				<scroll-view :style="{'height':TouchHeight - 40  +'px' }" scroll-y="true" :show-scrollbar="false">
					<template>
						<!-- loading -->
						<view :class="['address-list' , addressList && addressList.length > 0 ? '' : 'hide-element']">
							<view class="address-item" v-for="(item, index) in addressList"
								:key="`address_item_${index}`" @click.stop="onViewDetails(item)">
								<view class="address-headline">
									<text class="headline-name nvue-one-row">{{item.name}}</text>
									<view class="headline-distance">
										<text class="distance-text">距我{{getDistance(item.distance)}}</text>
										<image class="distance-icon" src="@/static/map/arrows.png" mode="aspectFit">
										</image>
									</view>
								</view>
								<view class="location-info">
									<image class="location-icon" src="@/static/map-dot.png" mode="aspectFit"></image>
									<text class="location-text nvue-one-row">{{item.detailedAddress}}</text>
								</view>
								<view class="times">
									<text class="time-info nvue-one-row">{{item.intro}}</text>
								</view>
							</view>
						</view>
						<view
							:class="['empty-box' , loading || (addressList && addressList.length > 0) ? 'hide-element' : '']">
							<image class="empty-img" src="@/static/map/empty-img.png" mode="aspectFit"></image>
							<text class="empty-text">暂无数据</text>
						</view>
					</template>

				</scroll-view>


			</babTouchbox>
		</template>


	</view>
</template>

<script>
	import Mixin from "./Mixin.js"
	import babTouchbox from '@/components/bab-Touchbox/bab-Touchbox';
	import EmptyDate from '@/components/EmptyDate/EmptyDate';
	export default {
		mixins: [Mixin],
		props: {
			loading: {
				type: Boolean,
				default: true
			}
		},
		components: {
			babTouchbox,
			EmptyDate
		},
		// classifyList
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./style.scss");


	.address-list {

		.address-item {
			height: 176rpx;
			border-bottom-width: 1rpx;
			border-bottom-style: solid;
			border-bottom-color: #EDEDED;
			padding: 30rpx 0 20rpx;
			flex-direction: column;
			justify-content: space-between;

			.address-headline {
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				.headline-name {
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
					color: #1a1a1a;
				}

				.headline-distance {
					width: 200rpx;
					flex-direction: row;
					justify-content: flex-end;
					align-items: center;

					.distance-text {
						font-size: 24rpx;
						font-weight: 300;
						text-align: left;
						color: #666666;
					}

					.distance-icon {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}

			.location-info {
				flex-direction: row;
				align-items: center;

				.location-icon {
					width: 21.54rpx;
					height: 25.96rpx;
				}

				.location-text {
					flex: 1;
					padding-left: 5rpx;
					font-size: 24rpx;
					font-weight: 300;
					color: #808080;
				}
			}

			.times {
				.time-info {
					font-size: 24rpx;
					font-weight: 300;
					color: #808080;
				}
			}
		}
	}


	.auto-width-item {
		overflow: hidden;
		flex-direction: row;
	}

	.nvue-one-row {
		text-overflow: ellipsis; //文字超出省略号
		lines: 1; //文字行数
	}

	.nvue-two-row {
		text-overflow: ellipsis; //文字超出省略号
		lines: 2; //文字行数
	}

	.empty-box {
		padding-top: 60rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.empty-img {
			width: 204rpx;
			height: 193rpx;
		}

		.empty-text {
			padding: 32rpx;
			opacity: 0.59;
			color: #999999;
			font-size: 30rpx;
			font-weight: 400;
		}
	}
</style>