update
init
This commit is contained in:
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div class="outer-d">
|
||||
<div class="top-tip">请选择此次答题类别，可一次选择多个类别</div>
|
||||
<div class="middle-d">
|
||||
<template v-if="!isEmpty">
|
||||
<template v-for="(item, index) in list" :key="`topic${index}`">
|
||||
<template v-if="item?.childrenList && item?.childrenList.length > 0">
|
||||
<div class="topic-item-d">
|
||||
<div class="topic-item-d-title-one" style="margin-bottom: 10px">
|
||||
<img v-if="item.id.indexOf('A01') > -1" :src="chooseTopicItem" alt="" />
|
||||
<img v-if="item.id.indexOf('B01') > -1" :src="comprehensive" alt="" />
|
||||
<img v-if="item.id.indexOf('C01') > -1" :src="chooseTopicItemLast" alt="" />
|
||||
{{ item?.category }}{{ item.chidrenList }}
|
||||
</div>
|
||||
<template v-if="item?.id.indexOf('C01') === -1">
|
||||
<topic-item :list="item?.childrenList" @update-value="changeValue" :count="index + ''" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<van-checkbox-group v-model="checked" shape="square" style="width: 100%">
|
||||
<div style="display: flex; flex-wrap: wrap">
|
||||
<div
|
||||
:key="`topic${index}-${index}-${c}`"
|
||||
class="check-item-d"
|
||||
:class="[checked.includes(t.id as string) ? 'checked-item' : '']"
|
||||
v-for="(t, c) in item.childrenList"
|
||||
:style="{
|
||||
width: t.id.indexOf('B01') !== -1 ? '100%' : '46%',
|
||||
marginLeft: t.id.indexOf('B01') === -1 && c % 2 !== 0 ? '6%' : '0',
|
||||
}"
|
||||
>
|
||||
<van-checkbox :name="t.id"> {{ t?.category }}</van-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</van-checkbox-group>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="no-data">
|
||||
<Empty :url="emptyIcon" :imageSize="[200, 160]" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="bottom-button">
|
||||
<van-button class="btn" round type="primary" @click="toAnswer" :disabled="isEmpty"> 开始答题 </van-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { getCategoryApi } from '/@/views/23psychology/psychic/psychologyApi';
|
||||
import chooseTopicItem from '/@/assets/images/psychiology/chooseTopicItem.png';
|
||||
import chooseTopicItemLast from '/@/assets/images/psychiology/chooseTopicItemLast.png';
|
||||
import comprehensive from '/@/assets/images/psychiology/comprehensive.png';
|
||||
import { showFailToast } from 'vant';
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import store from '/@/store';
|
||||
import TopicItem from '/@/views/23psychology/answer/chooseTopic/topicItem.vue';
|
||||
import emptyIcon from '/@/assets/images/interveneEmpty.png';
|
||||
import Empty from '/@/components/Empty.vue';
|
||||
import { newPageParams, openPage } from '/@/hooks/openPage';
|
||||
|
||||
const list = ref<any[]>([]);
|
||||
const checked = ref<any[]>([]);
|
||||
const checkedJson = ref<any>({});
|
||||
const isEmpty = ref(true);
|
||||
const router = useRouter();
|
||||
|
||||
function getCategory() {
|
||||
getCategoryApi({})
|
||||
.then((res: any) => {
|
||||
if (res.success) {
|
||||
list.value = preTree(res.result || []);
|
||||
} else {
|
||||
showFailToast(res.messgae);
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
function toAnswer() {
|
||||
let list: any[] = [];
|
||||
for (const c in checkedJson.value) {
|
||||
list = list.concat(checkedJson.value[c]);
|
||||
}
|
||||
if (checked.value.concat(list).length === 0) return showFailToast('请至少选择一个类别');
|
||||
store.commit('setQuestionList', checked.value.concat(list));
|
||||
openPage(
|
||||
'/ps-selfAnswer',
|
||||
newPageParams({
|
||||
affirmBack: 1,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function preTree(d: any[]) {
|
||||
const dg = (data: any[]) => {
|
||||
if (data.length === 0) return [];
|
||||
return data.filter((item) => {
|
||||
if (item.childrenList && item.childrenList.length > 0) {
|
||||
item.childrenList = dg(item.childrenList);
|
||||
return 1 === 1;
|
||||
} else {
|
||||
if (item.questionSum && item.id.indexOf('C01') !== -1 ? item.questionSum >= 1 : item.questionSum >= 5 && isEmpty) {
|
||||
isEmpty.value = false;
|
||||
}
|
||||
return item.questionSum && item.id.indexOf('C01') !== -1 ? item.questionSum >= 1 : item.questionSum >= 5;
|
||||
}
|
||||
});
|
||||
};
|
||||
console.log(dg(d));
|
||||
return dg(d);
|
||||
}
|
||||
|
||||
function changeValue(v: any) {
|
||||
checkedJson.value = { ...checkedJson.value, ...v };
|
||||
console.log(checkedJson.value);
|
||||
}
|
||||
|
||||
getCategory();
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.outer-d {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.no-data {
|
||||
width: 100%;
|
||||
padding-top: 50%;
|
||||
}
|
||||
|
||||
.top-tip {
|
||||
color: #21bebd;
|
||||
background-color: #eefffe;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.middle-d {
|
||||
background-color: #f5f7fb;
|
||||
padding: 10px;
|
||||
overflow: auto;
|
||||
height: calc(100% - 111px);
|
||||
|
||||
.topic-item-d {
|
||||
background: #ffffff;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
.topic-item-d-title-one {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.check-item-d {
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
border: 1px solid #f3f5f9;
|
||||
}
|
||||
}
|
||||
|
||||
.check-item-d {
|
||||
background: #f3f5f9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background-color: #ffffff;
|
||||
.btn {
|
||||
background-color: #21bebd;
|
||||
border: 1px solid #21bebd;
|
||||
}
|
||||
button {
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
}
|
||||
}
|
||||
.checked-item {
|
||||
background-color: #eefffe !important;
|
||||
border: 1px solid #21bebd !important;
|
||||
}
|
||||
:deep(.van-checkbox__icon--checked .van-icon) {
|
||||
color: #ffffff !important;
|
||||
background-color: #21bebd !important;
|
||||
border-color: #21bebd !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user