|
@@ -0,0 +1,250 @@
|
|
|
|
+<template>
|
|
|
|
+ <div class="search-head">
|
|
|
|
+ <van-search v-model="value" placeholder="请输入搜索关键词" @search="emit('handle-search-emit', value)" />
|
|
|
|
+ <van-dropdown-menu active-color="#FF5B00">
|
|
|
|
+ <van-dropdown-item
|
|
|
|
+ active-color="#FF5B00"
|
|
|
|
+ :title="i.title"
|
|
|
|
+ ref="itemRef"
|
|
|
|
+ v-for="(i, o) in menuTypeOptions"
|
|
|
|
+ :key="o"
|
|
|
|
+ v-model="i.changeValue"
|
|
|
|
+ :options="i.type !== 'Double' ? i.options : []"
|
|
|
|
+ :class="[activeMenu === o ? 'activeMenu' : '']"
|
|
|
|
+ @close="handleDropdownClose"
|
|
|
|
+ >
|
|
|
|
+ <template v-if="o !== 3">
|
|
|
|
+ <van-search :disabled="o === 2" v-model="searchValue" placeholder="请输入搜索关键词" />
|
|
|
|
+ </template>
|
|
|
|
+ <template v-if="i.type === 'Double'">
|
|
|
|
+ <van-checkbox-group v-model="checked">
|
|
|
|
+ <van-cell-group inset>
|
|
|
|
+ <van-cell
|
|
|
|
+ v-for="(item, index) in i.options"
|
|
|
|
+ clickable
|
|
|
|
+ :key="index"
|
|
|
|
+ :title="item.text"
|
|
|
|
+ @click="toggle(item.value)"
|
|
|
|
+ :class="checked.indexOf(item.value) > -1 ? 'd-checked' : ''"
|
|
|
|
+ >
|
|
|
|
+ <template #right-icon>
|
|
|
|
+ <van-checkbox
|
|
|
|
+ :name="item.value"
|
|
|
|
+ :ref="($event: VNodeRef) => ((checkboxRefs[item.value]) = $event)"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
|
|
+ </van-cell>
|
|
|
|
+ </van-cell-group>
|
|
|
|
+ </van-checkbox-group>
|
|
|
|
+ </template>
|
|
|
|
+ </van-dropdown-item>
|
|
|
|
+ </van-dropdown-menu>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script setup lang="ts">
|
|
|
|
+import { ref, reactive, onBeforeUpdate, onMounted, VNodeRef } from 'vue';
|
|
|
|
+import type { DMenu, DMenuList, DEmit } from '@/types/views/database.type';
|
|
|
|
+import { getLabelKeyList, getStoreList } from "@/api/context/context";
|
|
|
|
+import { CheckboxInstance } from 'vant';
|
|
|
|
+
|
|
|
|
+type menuOptions = Array<DMenuList<DMenu>>; // 菜单类型
|
|
|
|
+
|
|
|
|
+const activeMenu = ref<number>(0) // 切换tab
|
|
|
|
+const searchValue = ref<string>('') // 搜索条件
|
|
|
|
+const value = ref<string>(''); // 标题搜索
|
|
|
|
+const checked = ref<Array<number | null>>([]); // 默认选中
|
|
|
|
+const checkboxRefs = ref<Array<CheckboxInstance | VNodeRef>>([]); // 多选默认
|
|
|
|
+
|
|
|
|
+const menuTypeOptions = reactive<menuOptions>([
|
|
|
|
+ {
|
|
|
|
+ type: "Double",
|
|
|
|
+ title: "标签",
|
|
|
|
+ options: [],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: "Singular",
|
|
|
|
+ title: "商品",
|
|
|
|
+ changeValue: 0,
|
|
|
|
+ options: [],
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ type: "Singular",
|
|
|
|
+ title: "用户阶段",
|
|
|
|
+ changeValue: 0,
|
|
|
|
+ options: [
|
|
|
|
+ {
|
|
|
|
+ text: "用户阶段(全部)",
|
|
|
|
+ value: 0,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "认知阶段",
|
|
|
|
+ value: 1,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "兴趣阶段",
|
|
|
|
+ value: 2,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "决策阶段",
|
|
|
|
+ value: 3,
|
|
|
|
+ },
|
|
|
|
+ {
|
|
|
|
+ text: "购买阶段",
|
|
|
|
+ value: 4,
|
|
|
|
+ },
|
|
|
|
+ ],
|
|
|
|
+ },
|
|
|
|
+]);
|
|
|
|
+
|
|
|
|
+const toggle = (index: number) => {
|
|
|
|
+ (checkboxRefs.value[index] as CheckboxInstance).toggle();
|
|
|
|
+};
|
|
|
|
+const emit = defineEmits<DEmit>()
|
|
|
|
+const handleDropdownClose = (): void => {
|
|
|
|
+ emit('handle-change-emit', {
|
|
|
|
+ labelIds: checked.value.join(),
|
|
|
|
+ productId: menuTypeOptions[1].changeValue!,
|
|
|
|
+ stageStatus: menuTypeOptions[2].changeValue!.toString()
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+const reqLabelKeyList = async () => {
|
|
|
|
+ const { data } = await getLabelKeyList({
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ v: ''
|
|
|
|
+ })
|
|
|
|
+ menuTypeOptions[0].options = data!.list!.map(e => ({
|
|
|
|
+ text: e.v,
|
|
|
|
+ value: Number(e.k)
|
|
|
|
+ }))
|
|
|
|
+}
|
|
|
|
+const reqStoreList = async () => {
|
|
|
|
+ const { data } = await getStoreList({
|
|
|
|
+ pageNum: 1,
|
|
|
|
+ pageSize: 10,
|
|
|
|
+ productName: ''
|
|
|
|
+ })
|
|
|
|
+ menuTypeOptions[1].options = data!.list!.map(e => ({
|
|
|
|
+ text: e.productName,
|
|
|
|
+ value: e.productId
|
|
|
|
+ }))
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+onMounted(async () => {
|
|
|
|
+ await reqLabelKeyList()
|
|
|
|
+ await reqStoreList()
|
|
|
|
+})
|
|
|
|
+// 组件更新
|
|
|
|
+onBeforeUpdate(() => {
|
|
|
|
+ checkboxRefs.value = [];
|
|
|
|
+});
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
+.search-head {
|
|
|
|
+ padding: 15px 12px 0 12px;
|
|
|
|
+ background-color: #fff;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+}
|
|
|
|
+:deep() {
|
|
|
|
+ .van-search {
|
|
|
|
+ height: 38px;
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ padding: 0;
|
|
|
|
+ border: 1px solid #e1e1e1;
|
|
|
|
+ .van-search__field {
|
|
|
|
+ padding: 0;
|
|
|
|
+ }
|
|
|
|
+ .van-search__content {
|
|
|
|
+ background: #fff;
|
|
|
|
+ }
|
|
|
|
+ .van-field__left-icon .van-icon {
|
|
|
|
+ width: 24px;
|
|
|
|
+ height: 24px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .van-cell-group--inset {
|
|
|
|
+ margin: 0;
|
|
|
|
+ }
|
|
|
|
+ .van-dropdown-menu {
|
|
|
|
+ height: 50px;
|
|
|
|
+ padding-top: 20px;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ }
|
|
|
|
+ .van-dropdown-menu__bar {
|
|
|
|
+ box-shadow: none;
|
|
|
|
+ height: 30px;
|
|
|
|
+ }
|
|
|
|
+ .van-dropdown-menu__title {
|
|
|
|
+ font-size: 16px;
|
|
|
|
+ color: #333;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+ .van-cell {
|
|
|
|
+ padding: 7.5px;
|
|
|
|
+ .van-cell__title {
|
|
|
|
+ color: rgb(37, 1, 1);
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .van-checkbox__icon--checked .van-icon,
|
|
|
|
+ .van-checkbox__icon .van-icon {
|
|
|
|
+ background: none;
|
|
|
|
+ border: none;
|
|
|
|
+ }
|
|
|
|
+ .van-dropdown-menu__title::after {
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+ .van-dropdown-item__option--active,
|
|
|
|
+ .van-dropdown-menu__title--active {
|
|
|
|
+ .van-cell__title,
|
|
|
|
+ .van-dropdown-menu__title::after {
|
|
|
|
+ color: $basicColor !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-dropdown-menu__title--active::before {
|
|
|
|
+ content: '';
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 30px;
|
|
|
|
+ height: 2px;
|
|
|
|
+ background: $basicColor;
|
|
|
|
+ bottom: -4px;
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ }
|
|
|
|
+ .van-popup--top {
|
|
|
|
+ max-height: 50vh;
|
|
|
|
+ position: relative;
|
|
|
|
+ padding: 45px 5px 5px 5px;
|
|
|
|
+ .van-search {
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 24px;
|
|
|
|
+ left: 50%;
|
|
|
|
+ width: 96%;
|
|
|
|
+ height: 40px;
|
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
|
+ }
|
|
|
|
+ .van-cell__title, .van-cell__value {
|
|
|
|
+ flex: auto;
|
|
|
|
+ width: 20px;
|
|
|
|
+ }
|
|
|
|
+ .van-cell__title {
|
|
|
|
+ width: 80%;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.d-checked {
|
|
|
|
+ :deep() {
|
|
|
|
+ .van-checkbox__icon--checked .van-icon,
|
|
|
|
+ .van-cell__title {
|
|
|
|
+ color: $basicColor;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+.activeMenu {
|
|
|
|
+ color: $basicColor;
|
|
|
|
+}
|
|
|
|
+</style>
|