flat: 地图修改

2024-06-11 10:10:29 +08:00
parent 4dce135e0d
commit d19b4d502b
15 changed files with 1564 additions and 42 deletions
--- a/components/sylj-selectLocation/citypopup.vue
+++ b/components/sylj-selectLocation/citypopup.vue
@@ -0,0 +1,151 @@
+<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>