117 lines
2.3 KiB
Vue
117 lines
2.3 KiB
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> |