You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
2.3 KiB
119 lines
2.3 KiB
<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> |