hitap-chat/pages/create/Change.vue

<template>
	<view class="change-position">
		<view class="search">
			<u-search shape="square" v-model="searchValue" :show-action="false" @search="handleSearch" />
			<u-button type="primary" @click="handleAdd">新增</u-button>
		</view>
		<view class="search-list">
			<view v-for="item in sectionsList" :key="item.sectionCode" class="item" hover-class="is-active"
				@click="$emit('changeCode', item.sectionCode)">
				<view class="icon icon-lk" v-if="item.type == 1" />
				<view class="icon icon-ld" v-else />
				<text class="position-name">{{item.name}}</text>
				<text class="position">{{item.distance}}m内</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Change",
		props: {
			sectionsList: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				searchValue: '',
			}
		},
		computed: {
			// sectionsArr() {
			// 	if (this.searchValue) {
			// 		return this.sectionsList.filter(item => item.name.includes(this.searchValue))
			// 	}
			// 	return this.sectionsList
			// }
		},
		methods: {
			handleSearch(value) {
				this.$emit('onSearch', value)
			},
			handleAdd() {
				this.$.open("/pages/investigation/customRoad")
			}
		}
	}
</script>

<style scoped lang="scss">
	.change-position {
		width: 100%;
		height: 100%;
		background: #ffffff;

		.search {
			width: calc(100% - 52rpx);
			padding: 26rpx;
			display: flex;
			align-items: center;

			.u-button {
				width: 170rpx;
				background: #2663BF;
				color: #ffffff;
				margin-left: 20rpx;
				height: 68rpx;
			}

		}

		.search-list {
			min-height: 160rpx;
			width: 100%;
			max-height: 400rpx;
			overflow-y: auto;

			.item {
				display: flex;
				height: 100rpx;
				align-items: center;
				font-size: 32rpx;
				color: #8a8a8a;
				padding: 0 26rpx;

				&.is-active {
					background: #e7effd;
					color: #2663BF;
				}

				.icon {
					width: 30rpx;
					height: 30rpx;
					background-size: 30rpx 30rpx;
					background-repeat: no-repeat;
					margin-right: 8px;

					&-lk {
						background-image: url("/static/map/lk.png");
					}

					&-ld {
						background-image: url("/static/map/ld.png");
					}
				}

				.position-name {
					display: block;
					flex: 1;
					overflow: hidden;
					// white-space: nowrap;
					// text-overflow: ellipsis;
				}
			}
		}
	}
</style>