169 lines
3.9 KiB
Vue
169 lines
3.9 KiB
Vue
<template>
|
|
<div class="areacontent">
|
|
<div class="area-list">
|
|
<div v-for="(item, index) in options" :key="index" :class="{ act: actIndex == index }"
|
|
@click="handChose(index)"> {{
|
|
item.label }} </div>
|
|
</div>
|
|
<div class="town-list">
|
|
<div class="town-list-li" v-for="(item, index) in townLists" :key="index" @click="handTown(index)">{{ item.name
|
|
}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive } from "vue"
|
|
import { apigetTownLists } from "@/api.js"
|
|
import { sendMsg } from "@/api.js"
|
|
// 镇列表
|
|
const options = reactive([
|
|
{
|
|
value: '510521',
|
|
label: '泸县',
|
|
},
|
|
{
|
|
value: '510502',
|
|
label: '江阳区',
|
|
},
|
|
{
|
|
value: '510503',
|
|
label: '纳溪区',
|
|
},
|
|
{
|
|
value: '510504',
|
|
label: '龙马潭区',
|
|
},
|
|
{
|
|
value: '510522',
|
|
label: '合江县 ',
|
|
},
|
|
{
|
|
value: '510524',
|
|
label: '叙永县 ',
|
|
}, {
|
|
value: '510525',
|
|
label: '古蔺县 ',
|
|
},
|
|
])
|
|
const actIndex = ref(0)
|
|
const townLists = ref([])
|
|
|
|
const emit = defineEmits(['handTown', 'handArea'])
|
|
|
|
// 选择区/县
|
|
const handChose = (index) => {
|
|
actIndex.value = index;
|
|
getTownListsFn(options[index].value);
|
|
sendFn('choserArea', { name: options[index].label, code: options[index].value })
|
|
|
|
emit('handArea', {name:options[actIndex.value].label,code:options[actIndex.value].value},)
|
|
}
|
|
|
|
const handTown = (index) => {
|
|
// townLists.value.forEach(item => {
|
|
// if (item.value == townLists[index].value) {
|
|
// sendFn('choseTown', { name: item.label, code: item.value })
|
|
// }
|
|
// })
|
|
townLists.value.forEach(item => {
|
|
if (item.code == townLists.value[index].code) {
|
|
sendFn('choseTown', { name: item.name, code: item.code })
|
|
emit('handTown', {name:item.name,code:item.code})
|
|
}
|
|
})
|
|
}
|
|
|
|
const getTownListsFn = async (area_code = 510502) => {
|
|
let res = await apigetTownLists({ area_code })
|
|
townLists.value = res.data;
|
|
}
|
|
|
|
getTownListsFn()
|
|
|
|
const props = defineProps({
|
|
channel: {
|
|
type: String,
|
|
default: () => 'user-3'
|
|
}
|
|
})
|
|
// 发送消息
|
|
const page = ref(1)
|
|
const sendFn = (event, data = '') => {
|
|
if (data.page) page.value = data.page;
|
|
sendMsg({ channel: props.channel, event, data })
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.areacontent {
|
|
width: 998.3px;
|
|
height: 445.74px;
|
|
background-image: url('/static/img/area/bg.png');
|
|
background-size: 100% 100%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-sizing: border-box;
|
|
padding: 17px 20px;
|
|
|
|
.area-list {
|
|
font-size: 24px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 20px;
|
|
color: #9AADC4;
|
|
font-family: FZCYJ;
|
|
cursor: pointer;
|
|
padding: 0 80px;
|
|
|
|
}
|
|
|
|
.act {
|
|
font-size: 28px;
|
|
color: white;
|
|
transition: 0.4s;
|
|
|
|
}
|
|
|
|
.town-list {
|
|
height: 290px;
|
|
overflow-y: auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-top: 40px;
|
|
padding: 0 50px;
|
|
|
|
.town-list-li {
|
|
font-size: 18px;
|
|
color: #E4EFF5;
|
|
background-image: url('/static/img/area/townbg.png');
|
|
height: 46.52px;
|
|
background-size: 100% 100%;
|
|
width: 270px;
|
|
text-align: center;
|
|
line-height: 46.52px;
|
|
margin-bottom: 20px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
|
|
.town-list::-webkit-scrollbar {
|
|
width: 10px;
|
|
background-color: #153041;
|
|
}
|
|
|
|
.town-list::-webkit-scrollbar-track {
|
|
background-color: #153041;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #084D89;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
</style> |