mer-tradescreen/src/components/areaList.vue

<template>
    <Transition>
        <div class="address" v-if="props.choseArea">

            <div class="address-li" @click="choseAreaFn">泸县 </div>

            <div class="address-li" @click="choseTownFn(item.code, item.name)" v-for="( item, index ) in areaList ">{{
                item.name }}
            </div>
        </div>
    </Transition>
</template>

<script setup>
import { defineProps, defineEmits, onMounted, reactive, watch } from "vue"
import { useRouter, useRoute } from 'vue-router'
import { areaObj } from '@/store/index.js'
import axios from "axios"
const route = useRoute

let areaStore = areaObj()

const router = useRouter()
const emit = defineEmits(['offAreaList'])
const props = defineProps({
    choseArea: Boolean,
})
let areaList = reactive([])
// 选额镇
const choseTownFn = (id, name) => {
    areaStore.changeArea({
        areaCode: areaStore.area.areaCode,
        streetCode: id

    })

    props.choseArea = false
    emit('offAreaList', name)

    // router.go(0)

    router.replace('/townDetail?code=' + id)

}

// x选择区县
const choseAreaFn = () => {
    areaStore.changeArea({
        areaCode: areaStore.area.areaCode,
        streetCode: null

    })
    props.choseArea = false

    emit('offAreaList', "泸县")
    router.replace('/')


}
onMounted(() => {
    axios.get(`https://crmeb-test.shop.lihaink.cn/api/city/get_street?area_code=${areaStore.area.areaCode}`)
        .then(function (response) {
            response.data.data.forEach(item => {
                areaList.push(item)
            })

        })
        .catch(function (error) {
            // 处理错误情况
        })
        .finally(function () {
            // 总是会执行
        });




})

</script>

<style lang="scss" scoped>
.address {
    left: 1vw;
    top: 18px;
    position: absolute;
    width: 8vw;
    height: 18vh;
    background-color: #001E32;
    color: #C7DBE3;
    z-index: 9999;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 5px;

    .address-li {
        padding: 2px 5px;
        cursor: pointer;

        border-bottom: 0.1px solid #0E293C;
    }
}

.address::-webkit-scrollbar {
    width: 10px;
    background-color: #153041;
}

.address::-webkit-scrollbar-track {
    background-color: #153041;
}

::-webkit-scrollbar-thumb {
    background-color: #4AB9D0;
    border-radius: 5px;
}
</style>