hookehuyr

refactor(CheckinDetailPage): 优化计数对象选择界面样式和交互逻辑

- 将复选框列表改为标签式选择,提升视觉体验
- 简化选择逻辑,移除不必要的复选框引用处理
- 将"学校"字段标签改为更通用的"单位"
......@@ -44,30 +44,31 @@
<van-button size="small" type="primary" plain icon="plus" @click="showAddTargetDialog = true" class="!h-7">添加</van-button>
</div>
<div class="bg-gray-50 rounded-lg p-2 max-h-48 overflow-y-auto">
<van-checkbox-group v-model="selectedTargets">
<div class="bg-gray-50 rounded-lg p-2">
<div class="flex flex-wrap gap-2">
<template v-if="targetList.length > 0">
<div
v-for="(item, index) in targetList"
:key="index"
class="flex items-center justify-between p-3 mb-2 bg-white rounded border border-gray-100 last:mb-0"
@click="toggleTarget(index)"
class="px-4 py-1.5 rounded-full text-sm transition-colors duration-200 border cursor-pointer select-none"
:style="selectedTargets.some(t => t.name === item.name) ? {
backgroundColor: '#4caf50',
color: '#ffffff',
borderColor: '#4caf50'
} : {
backgroundColor: '#ffffff',
color: '#4b5563',
borderColor: '#e5e7eb'
}"
@click="toggleTarget(item)"
>
<div class="flex-1">
<div class="font-medium text-gray-800">{{ item.name }}</div>
<div class="text-xs text-gray-500 mt-0.5">{{ item.city }} | {{ item.school }}</div>
</div>
<van-checkbox
:name="item"
:ref="el => setCheckboxRef(el, index)"
@click.stop
/>
{{ item.name }}
</div>
</template>
<div v-else class="text-center py-4 text-gray-400 text-sm">
<div v-else class="w-full text-center py-4 text-gray-400 text-sm">
暂无计数对象,请点击上方添加按钮
</div>
</van-checkbox-group>
</div>
</div>
</div>
......@@ -94,12 +95,12 @@
/>
<van-field
v-model="newTargetForm.school"
label="学校"
label="单位"
rows="2"
autosize
type="textarea"
maxlength="50"
placeholder="请输入所在学校"
placeholder="请输入所在单位"
/>
</div>
</van-dialog>
......@@ -284,17 +285,12 @@ const newTargetForm = reactive({
school: ''
})
const checkboxRefs = ref([])
const setCheckboxRef = (el, index) => {
if (el) {
checkboxRefs.value[index] = el
}
}
const toggleTarget = (index) => {
const checkbox = checkboxRefs.value[index]
if (checkbox) {
checkbox.toggle()
const toggleTarget = (item) => {
const index = selectedTargets.value.findIndex(t => t.name === item.name)
if (index > -1) {
selectedTargets.value.splice(index, 1)
} else {
selectedTargets.value.push(item)
}
}
......