151 lines
4.4 KiB
Vue
151 lines
4.4 KiB
Vue
<template>
|
|
<u-popup :show="show" zIndex="1007000" @close="close">
|
|
<view>
|
|
<view style="padding: 10px;">
|
|
<u-search placeholder="请输入关键字" @custom="searchList" @search="searchList"></u-search>
|
|
</view>
|
|
<view class="listBox">
|
|
<view style="display: flex;justify-content: space-between;align-items: center;">
|
|
<h3 style="margin-bottom: 10px;">历史记录</h3>
|
|
<view style="font-size: 12px; color: #666666;" @click="clearRcords">清空</view>
|
|
</view>
|
|
<view class="listBox1">
|
|
<view class="tab-card" v-for="(item,index) in records" @click="selectCity(item)" :key="item.value">
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
<u-divider text="分割线" :hairline="true"></u-divider>
|
|
<view class="listBoxchild">
|
|
<view class="listBoxchild2">
|
|
<view class="tab-card" v-for="(item,index) in list1" @click="selectCity(item)"
|
|
:key="item.value">
|
|
{{item.label}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
import ListItem from './xc-list-item.vue';
|
|
const dataCityList = require('./data.json')
|
|
export default {
|
|
components: {
|
|
ListItem
|
|
},
|
|
data() {
|
|
return {
|
|
list1: [],
|
|
records: [],
|
|
key: 'record-gw'
|
|
}
|
|
},
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
},
|
|
computed: {
|
|
cityList() {
|
|
return dataCityList
|
|
},
|
|
},
|
|
created() {
|
|
const stor = uni.getStorageSync(this.key)
|
|
if (stor && stor.length) {
|
|
this.records = stor
|
|
}
|
|
},
|
|
methods: {
|
|
close() {
|
|
this.$emit('close')
|
|
},
|
|
clearRcords() {
|
|
this.records = []
|
|
uni.setStorage({
|
|
key: 'record-gw',
|
|
data: []
|
|
})
|
|
},
|
|
selectCity(item) {
|
|
if (!this.records.some((zItem) => zItem.value === item.value)) {
|
|
const arr = [...this.records, item]
|
|
if (arr.length > 10) {
|
|
arr.shift()
|
|
}
|
|
this.records = arr
|
|
uni.setStorage({
|
|
key: 'record-gw',
|
|
data: this.records
|
|
})
|
|
}
|
|
this.$emit('select', item)
|
|
},
|
|
searchList(val) {
|
|
if (val) {
|
|
const arr = dataCityList.filter((item) => {
|
|
const reg = new RegExp(val, 'ig')
|
|
if (reg.test(item.label)) {
|
|
return true
|
|
}
|
|
})
|
|
this.list1 = arr
|
|
} else {
|
|
uni.showToast({
|
|
title: '请输入关键字',
|
|
icon: 'none',
|
|
mask: false,
|
|
});
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.listBox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 70vh;
|
|
padding: 12px;
|
|
}
|
|
|
|
.listBoxheader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.listBox1 {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.listBoxchild {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.listBoxchild2 {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.tab-card {
|
|
background-color: #e8e8e8;
|
|
padding: 3px 5px;
|
|
font-size: 14px;
|
|
color: #666666;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
margin: 4px 6px 4px 4px;
|
|
}
|
|
</style> |