enhance gt of city chooser

This commit is contained in:
geekgeekrun
2026-01-26 18:00:31 +08:00
parent 6b131e708c
commit 64f9ddfb76
3 changed files with 41 additions and 10 deletions
@@ -16,7 +16,10 @@
justify-between justify-between
items-center items-center
> >
<city-chooser v-model="modelValue.cityList"> <city-chooser
v-model="modelValue.cityList"
gt-show-scene="any-combine-boss-recommend-filter"
>
<template #default="{ showDialog }"> <template #default="{ showDialog }">
<div flex justify-between items-center> <div flex justify-between items-center>
<div font-size-12px> <div font-size-12px>
@@ -73,14 +73,18 @@
</el-table-column> </el-table-column>
<el-table-column :resizable="false" label="城市" prop="city"> <el-table-column :resizable="false" label="城市" prop="city">
<template #default="{ row }"> <template #default="{ row }">
<city-chooser v-model="row.city" :multiple="false"> <city-chooser
v-model="row.city"
:multiple="false"
gt-show-scene="static-combine-boss-recommend-filter"
>
<template #default="{ showDialog }"> <template #default="{ showDialog }">
<div flex justify-between items-center> <div flex justify-between items-center>
<div font-size-12px lh-1.2em> <div font-size-12px lh-1.2em>
<template v-if="row.city">{{ row.city }}</template> <template v-if="row.city">{{ row.city }}</template>
<template v-else><i color-gray>未选择城市</i></template> <template v-else><i color-gray>未选择城市</i></template>
</div> </div>
<el-button size="small" @click="showDialog" pl4px pr4px>选择</el-button> <el-button size="small" pl4px pr4px @click="showDialog">选择</el-button>
</div> </div>
</template> </template>
</city-chooser> </city-chooser>
@@ -118,7 +118,19 @@
> >
<template v-if="!multiple"> <template v-if="!multiple">
<span ml6px font-size-13px class="color-#999">已选择:</span> <span ml6px font-size-13px class="color-#999">已选择:</span>
<el-tag closable @close="selectedCities = null">{{ selectedCities }}</el-tag> <el-tag
closable
@close="
() => {
selectedCities = null
gtagRenderer('remove_selected_cities_in_dialog_clicked', {
gtShowScene: props.gtShowScene,
multiple: Boolean(multiple)
})
}
"
>{{ selectedCities }}</el-tag
>
</template> </template>
</div> </div>
<div v-if="multiple" flex flex-1 flex-wrap gap-6px of-auto max-h-160px> <div v-if="multiple" flex flex-1 flex-wrap gap-6px of-auto max-h-160px>
@@ -127,7 +139,15 @@
v-for="(city, index) in selectedCities" v-for="(city, index) in selectedCities"
:key="city" :key="city"
closable closable
@close="(selectedCities ?? []).splice(index, 1)" @close="
() => {
;(selectedCities ?? []).splice(index, 1)
gtagRenderer('remove_selected_cities_in_dialog_clicked', {
gtShowScene: props.gtShowScene,
multiple: Boolean(multiple)
})
}
"
> >
{{ city }}</el-tag {{ city }}</el-tag
> >
@@ -158,6 +178,9 @@ const props = defineProps({
multiple: { multiple: {
type: Boolean, type: Boolean,
default: true default: true
},
gtShowScene: {
type: String
} }
}) })
const emits = defineEmits(['update:modelValue']) const emits = defineEmits(['update:modelValue'])
@@ -185,15 +208,16 @@ for (const group of cityGroup) {
function handleDialogOpen() { function handleDialogOpen() {
activeTabName.value = '热门城市' activeTabName.value = '热门城市'
selectedCities.value = props.multiple ? [...(props.modelValue ?? [])] : props.modelValue selectedCities.value = props.multiple ? [...(props.modelValue ?? [])] : props.modelValue
gtagRenderer('choose_city_dialog_open') gtagRenderer('choose_city_dialog_open', { gtShowScene: props.gtShowScene })
} }
function handleCancelClicked() { function handleCancelClicked() {
gtagRenderer('choose_city_cancel_button_clicked') gtagRenderer('choose_city_cancel_button_clicked', { gtShowScene: props.gtShowScene })
isDialogVisible.value = false isDialogVisible.value = false
} }
function handleConfirmClicked() { function handleConfirmClicked() {
gtagRenderer('choose_city_confirm_button_clicked', { gtagRenderer('choose_city_confirm_button_clicked', {
gtShowScene: props.gtShowScene,
value: Array.isArray(selectedCities.value) value: Array.isArray(selectedCities.value)
? selectedCities.value.join(',') ? selectedCities.value.join(',')
: selectedCities.value : selectedCities.value
@@ -206,15 +230,15 @@ function handleConfirmClicked() {
} }
function handleDialogClosed() { function handleDialogClosed() {
selectedCities.value = props.multiple ? [] : null selectedCities.value = props.multiple ? [] : null
gtagRenderer('choose_city_dialog_closed') gtagRenderer('choose_city_dialog_closed', { gtShowScene: props.gtShowScene })
} }
function handleClearSelectedCitiesInModelValue() { function handleClearSelectedCitiesInModelValue() {
emits('update:modelValue', (selectedCities.value = props.multiple ? [] : null)) emits('update:modelValue', (selectedCities.value = props.multiple ? [] : null))
gtagRenderer('clear_selected_cities_in_mv_clicked') gtagRenderer('clear_selected_cities_in_mv_clicked', { gtShowScene: props.gtShowScene })
} }
function handleClearSelectedCitiesInDialog() { function handleClearSelectedCitiesInDialog() {
selectedCities.value = props.multiple ? [] : null selectedCities.value = props.multiple ? [] : null
gtagRenderer('clear_selected_cities_in_dialog_clicked') gtagRenderer('clear_selected_cities_in_dialog_clicked', { gtShowScene: props.gtShowScene })
} }
</script> </script>