|
@@ -3,8 +3,11 @@
|
|
|
<van-search
|
|
|
v-model="value"
|
|
|
placeholder="请输入搜索关键词"
|
|
|
- @search="emit('handle-search-emit', value)"
|
|
|
- />
|
|
|
+ @search="emit('handle-search-emit', value)">
|
|
|
+ <template #right-icon>
|
|
|
+ <van-icon name="https://static.caimei365.com/app/mini-database/search.png" />
|
|
|
+ </template>
|
|
|
+ </van-search>
|
|
|
<van-dropdown-menu active-color="#FF5B00">
|
|
|
<van-dropdown-item
|
|
|
active-color="#FF5B00"
|
|
@@ -13,7 +16,6 @@
|
|
|
v-for="(i, o) in menuTypeOptions"
|
|
|
:key="o"
|
|
|
v-model="i.changeValue"
|
|
|
- :options="i.type !== 'Double' ? i.options : []"
|
|
|
@close="handleDropdownClose"
|
|
|
@open="handleOpen(o)"
|
|
|
>
|
|
@@ -21,8 +23,8 @@
|
|
|
<van-search
|
|
|
v-model="labelKeyParams.v"
|
|
|
placeholder="请输入搜索关键词"
|
|
|
- @search="reqLabelKeyList"
|
|
|
- />
|
|
|
+ @search="reqLabelKeyList">
|
|
|
+ </van-search>
|
|
|
</template>
|
|
|
<template v-if="o === 1">
|
|
|
<van-search
|
|
@@ -37,34 +39,55 @@
|
|
|
<van-cell
|
|
|
v-for="(item, index) in i.options"
|
|
|
clickable
|
|
|
+ :title="item!.text"
|
|
|
:key="index"
|
|
|
- :title="item.text"
|
|
|
- @click="toggle(item.value)"
|
|
|
- :class="checked.indexOf(item.value) > -1 ? 'd-checked' : ''"
|
|
|
+ @click="toggle(item!)"
|
|
|
+ :class="checked.indexOf(item!.value) > -1 ? 'd-checked' : ''"
|
|
|
>
|
|
|
<template #right-icon>
|
|
|
<van-checkbox
|
|
|
- :name="item.value"
|
|
|
- :ref="($event: VNodeRef) => ((checkboxRefs[item.value]) = $event)"
|
|
|
+ :name="item!.value"
|
|
|
+ :ref="($event: VNodeRef) => ((checkboxRefs[item!.value]) = $event)"
|
|
|
/>
|
|
|
</template>
|
|
|
</van-cell>
|
|
|
</van-cell-group>
|
|
|
</van-checkbox-group>
|
|
|
</template>
|
|
|
+ <template v-if="i.type === 'Singular'">
|
|
|
+ <van-radio-group v-model="i.changeValue">
|
|
|
+ <van-cell-group inset>
|
|
|
+ <van-cell
|
|
|
+ v-for="(item, index) in i.options"
|
|
|
+ clickable
|
|
|
+ :key="index"
|
|
|
+ @click="i.changeValue = item.value"
|
|
|
+ :class="i.changeValue === item.value ? 'd-checked' : ''"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <span v-html="item.text" class="custom-title"></span>
|
|
|
+ </template>
|
|
|
+ <template #right-icon>
|
|
|
+ <van-radio
|
|
|
+ :name="item!.value"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ </van-cell-group>
|
|
|
+ </van-radio-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 { ref, onBeforeUpdate, onMounted, VNodeRef } from "vue";
|
|
|
+import type { DMenu, DEmit } from "@/types/views/database.type";
|
|
|
+import { menuTypeOptions } from "@/types/views/database.type";
|
|
|
import { getLabelKeyList, getStoreList } from "@/api/context/context";
|
|
|
import { CheckboxInstance } from "vant";
|
|
|
import { ILabelKeyRequest, IStoreRequest } from "@/types/api/context.type";
|
|
|
-
|
|
|
-type menuOptions = Array<DMenuList<DMenu>>; // 菜单类型
|
|
|
const activePadding = ref<string>("20vw 1vw 1vw 1vw"); // vue 样式
|
|
|
const handleOpen = (val: number) => {
|
|
|
activePadding.value = val < 2 ? "20vw 1vw 1vw 1vw" : "5vw 1vw 1vw 1vw";
|
|
@@ -80,52 +103,29 @@ const labelKeyParams = ref<ILabelKeyRequest>({
|
|
|
v: "",
|
|
|
}); // 搜索条件
|
|
|
const value = ref<string>(""); // 标题搜索
|
|
|
-const checked = ref<Array<number | null>>([]); // 默认选中
|
|
|
+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 checkHistoryList = ref<Array<DMenu>>([]);
|
|
|
+const toggle = (index: DMenu) => {
|
|
|
+ (checkboxRefs.value[index.value] as CheckboxInstance).toggle();
|
|
|
+ if (!checkHistoryList.value!.some((e) => e.value === index.value)) {
|
|
|
+ checkHistoryList.value!.push(index);
|
|
|
+ } else {
|
|
|
+ checkHistoryList.value = checkHistoryList.value!.filter(
|
|
|
+ (e) => e.value !== index.value
|
|
|
+ );
|
|
|
+ }
|
|
|
+ menuTypeOptions[0]!.options = [
|
|
|
+ ...checkHistoryList.value,
|
|
|
+ ...menuTypeOptions[0]!.options
|
|
|
+ .map((i) => {
|
|
|
+ if (!checkHistoryList.value!.some((e) => e.value === i.value)) {
|
|
|
+ return i;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .filter((f) => f),
|
|
|
+ ];
|
|
|
};
|
|
|
const emit = defineEmits<DEmit>();
|
|
|
const handleDropdownClose = (): void => {
|
|
@@ -135,22 +135,26 @@ const handleDropdownClose = (): void => {
|
|
|
stageStatus: menuTypeOptions[2].changeValue!.toString(),
|
|
|
});
|
|
|
};
|
|
|
-
|
|
|
const reqLabelKeyList = async () => {
|
|
|
const { data } = await getLabelKeyList(labelKeyParams.value);
|
|
|
- menuTypeOptions[0].options = data!.list!.map((e) => ({
|
|
|
- text: e.v,
|
|
|
- value: Number(e.k),
|
|
|
- }));
|
|
|
+ menuTypeOptions[0]!.options = [
|
|
|
+ ...checkHistoryList.value,
|
|
|
+ ...data!.list!.map((e) => ({
|
|
|
+ text: e.v,
|
|
|
+ value: Number(e.k),
|
|
|
+ })),
|
|
|
+ ];
|
|
|
};
|
|
|
const reqStoreList = async () => {
|
|
|
const { data } = await getStoreList(storeParams.value);
|
|
|
- menuTypeOptions[1].options = [{ text: '商品(全部)',value: 0 }, ...data!.list!.map((e) => ({
|
|
|
- text: e.productName,
|
|
|
- value: e.productId,
|
|
|
- }))]
|
|
|
+ menuTypeOptions[1]!.options = [
|
|
|
+ { text: "商品(全部)", value: 0 },
|
|
|
+ ...data!.list!.map((e) => ({
|
|
|
+ text: e.productName,
|
|
|
+ value: e.productId,
|
|
|
+ })),
|
|
|
+ ];
|
|
|
};
|
|
|
-
|
|
|
onMounted(() => {
|
|
|
reqLabelKeyList();
|
|
|
reqStoreList();
|
|
@@ -169,23 +173,36 @@ onBeforeUpdate(() => {
|
|
|
}
|
|
|
:deep() {
|
|
|
.van-search {
|
|
|
+ width: 100%;
|
|
|
height: 38px;
|
|
|
font-size: 13px;
|
|
|
padding: 0;
|
|
|
border: 1px solid #e1e1e1;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 1px 1px 1px 1px;
|
|
|
+ .van-field__left-icon {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
.van-search__field {
|
|
|
padding: 0;
|
|
|
}
|
|
|
.van-search__content {
|
|
|
background: #fff;
|
|
|
+ padding: 0 12px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
- .van-field__left-icon .van-icon {
|
|
|
+ .van-field__right-icon .van-icon {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
+ .van-icon__image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.van-cell-group--inset {
|
|
|
margin: 0;
|
|
|
+ transition: all 0.3s;
|
|
|
}
|
|
|
.van-dropdown-menu {
|
|
|
height: 50px;
|
|
@@ -202,13 +219,18 @@ onBeforeUpdate(() => {
|
|
|
position: relative;
|
|
|
}
|
|
|
.van-cell {
|
|
|
- padding: 7.5px;
|
|
|
+ padding: 7.5px 18px;
|
|
|
+ transition: all 0.3s;
|
|
|
.van-cell__title {
|
|
|
color: rgb(37, 1, 1);
|
|
|
font-size: 13px;
|
|
|
+ .custom-title span {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.van-checkbox__icon--checked .van-icon,
|
|
|
+ .van-radio__icon .van-icon,
|
|
|
.van-checkbox__icon .van-icon {
|
|
|
background: none;
|
|
|
border: none;
|
|
@@ -223,13 +245,17 @@ onBeforeUpdate(() => {
|
|
|
color: $basicColor !important;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+ .van-dropdown-menu__title:after {
|
|
|
+ border: 4px solid;
|
|
|
+ border-color: transparent transparent #B1B1B1 #B1B1B1;
|
|
|
+ transform: translateY(-16%) rotate(-45deg);
|
|
|
+ }
|
|
|
.van-dropdown-menu__title--active::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
width: 30px;
|
|
|
height: 2px;
|
|
|
- background: $basicColor;
|
|
|
+ background: $basicColor !important;
|
|
|
bottom: -4px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
@@ -255,6 +281,10 @@ onBeforeUpdate(() => {
|
|
|
width: 80%;
|
|
|
}
|
|
|
}
|
|
|
+ .van-dropdown-menu__title--active::after {
|
|
|
+ border-color: transparent transparent $basicColor $basicColor !important;
|
|
|
+ transform: translateY(-16%) rotate(135deg);
|
|
|
+ }
|
|
|
}
|
|
|
.d-checked {
|
|
|
:deep() {
|
|
@@ -262,6 +292,9 @@ onBeforeUpdate(() => {
|
|
|
.van-cell__title {
|
|
|
color: $basicColor;
|
|
|
}
|
|
|
+ .van-radio__icon--checked .van-icon {
|
|
|
+ color: $basicColor;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.activeMenu {
|