<template>
<view class="container">
<!-- 左侧一级菜单 -->
<scroll-view class="left" :show-scrollbar="true" scroll-y="true" direction="vertical" :style="'height:'+windowHeight+'px;'">
<view :class="index1 ===selectedIndex ? 'active':''" @click="loadDisease2(item.dt1ID,index1)" v-for="(item,index1) in disease1Data" :key="item.dt1ID">{{item.dt1Name}}</view>
</scroll-view>
<!-- 右侧 -->
<view class="right">
<view>请勾选可能得症状：</view>
<scroll-view class="rightScroll" :show-scrollbar="true" scroll-y="true" direction="vertical" style="height: 130px">
<checkbox-group @change="refreshDisease2">
<template v-for="(item,index) in disease2DataWithChecked" :key="item.id">
<checkbox :value="index" :checked="item.checked" ></checkbox><text>{{item.dt2Name}} </text>
</template>
</checkbox-group>
</scroll-view>
<scroll-view scroll-y="true" :show-scrollbar="true" direction="vertical" :style="'height:'+(windowHeight-130)+'px;'">
<view>
<view class="title2">说明：</view>
<view v-for="(i,index) in showMessage" :key="index">
{{i.dt2Name}}
{{i.dt2Description}}
</view>
<view class="title2">配穴：</view>
<template v-for="i in showID" :key="i" >
<uni-tag :text="acupointStore.acupointMap.get(i)" @click="toAcupoint(parseInt(i))" type="primary" :circle="true"></uni-tag>
</template>
</view>
</scroll-view>
</view>
</view> </template>
<script setup lang="ts">
import { computed, onBeforeMount, onMounted, onUpdated, ref } from 'vue';
import { $http } from "@escook/request-miniprogram"
import { useAcupointStore } from "@/store/acupoint.js"
//一类病数据
const disease1Data = ref()
//二类病数据
const disease2Data = ref()
//计算属性，根据disease2Data，添加checked值为false
const disease2DataWithChecked = computed(()=>{
return disease2Data.value.map((item)=>({...item,checked:false}))
} )
//二类病的Map数据，key为当前的排序（从0开始） ，value为二类表对象
const disease2Map = new Map()
const diseaseShow = ref()
const showID = ref()
const showMessage =ref()
//用于记录当前选择的一级分类的索引下标
const selectedIndex =ref(0)
const windowHeight =ref(0)
const scrollTop =ref(0)
const acupointStore = useAcupointStore()
/**
* 根据一类病的ID，获取所属的二类病列表
* @param {Object} disease1ID 一类病的ID
*
*/
async function loadDisease2(disease1ID,index){
selectedIndex.value=index
scrollTop.value= scrollTop.value == 0 ? 1:0
//获取全部二级内容
const {data:res} = await $http.get("disease-type2/getDT2ListById",{type1ID:disease1ID})
//清空右侧信息
clearDisease2();
if(res.code===200){
disease2Data.value = res.data
disease2Data.value.forEach((it,i) =>{
disease2Map.set(i,it)
} )
console.log("disease2Data:",disease2Data.value);
console.log("disease2Map:",disease2Map);
}
else{
console.error("加载二类病情失败...")
}
}
/**
* 加载一类病列表
*/
async function loadDisease1(){
const { data : res } = await $http.get("disease-type1/getAll")
if(res.code === 200)
disease1Data.value = res.data
else {
console.error("加载一类病情失败...")
}
}
/**
* 根据穴位列表，返回穴位中文名称及跳转链接
* @param {Object} acupointList 穴位ID的列表，中间用逗号隔开
*/
function showAcupointName(acupointList:string){
if(acupointList == null || acupointList == 'null')
return "暂无"
//拆分穴位ID
const acupointStr = acupointList.split(',')
console.log("拆分后的穴位列表：",acupointStr)
console.log("获取穴位列表：",acupointStore.acupointShort)
const acupointMap = new Map( Object.entries(acupointStore.acupointShort))
console.log(acupointMap)
let result = ""
let id ,name
for(let i=0 ; i< acupointStr.length;i++){
id = acupointStr[i]
name = acupointMap.get(acupointStr[i])
let fun = `<span style='color:red' @click='toAcupoint(${id})'>${name}</span>`
//let fun = `<navigator url="/subpage/acupoint-detailed/acupoint-detailed?id=${id}"><button>${name}</button></navigator>`
console.log(fun)
let temp = fun
console.log(temp)
result =result+temp+","
//map.get(acupointList[i])
}
return result.substring(0,result.length-1)
}
/**
* 根据通过逗号分割的字符串字面量的ids ，拆分成id数组
*/
function toArray(acupointList:string){
if(acupointList == null || acupointList == 'null')
return null
//拆分穴位ID
return acupointList.split(',')
}
function getWindowHeight(){
windowHeight.value = uni.getWindowInfo().windowHeight;
}
/**
* 根据穴位ID，跳转到详细穴位页面
* @param {Object} id 穴位ID
*/
function toAcupoint(id:number){
console.log("进入跳转详细列表方法",id)
uni.navigateTo({
url:"/subpage/acupoint-detailed/acupoint-detailed?id="+id,
})
}
//改变选中的一级分类，重新加载二级和三级分类。
function changeTitle(index){
selectedIndex.value=index;
scrollTop.value= scrollTop.value == 0 ? 1:0;
}
/**
* 根据复选框，加载选中的病情
*/
function refreshDisease2(e){
console.log('选中值数组:', e.detail.value);
//循环选中的病情，进行合并处理
let set = new Set()
let message = []
e.detail.value.forEach((i,index)=>{
let item = disease2Map.get(Number.parseInt(i));
message[index]=item
//拆分穴位字符串，并添加到set集合去重
if(item.acupointList == null){
return
}
let tempAcupoint :string[] = item.acupointList.split(",")
tempAcupoint.forEach((a)=>{
set.add(a)
})
} )
showID.value =[...set]
showMessage.value =message
}
/**
* 用于清空二级病情和选项等内容。
*/
function clearDisease2(){
//清空二类病情多选框
console.log("-----------")
refreshDisease2({ detail: { value: [] } })
disease2Data.value=[]
//清空二类病对应的Map
disease2Map.clear()
//清空穴位ID
showID.value =[]
//清空
showMessage.value=[]
}
onMounted(async ()=>{
loadDisease1()
loadDisease2(1,0)
await acupointStore.updateAcupointShort()
getWindowHeight()
}) </script>
<style scoped lang="less">
.container{
display: flex;
flex-direction: row;
.left {
width: 120px;
view{
display: flex;
justify-content: center;
align-items: center;
line-height: 60px;
background-color: #F7F7F7;
&.active {
background-color: #FFFFFF;
position: relative;
&::before {
content: ' ';
display: block;
background-color: red;
width: 3px;
height: 30px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
}
}
.right {
flex: 1;
uni-tag {
margin: 3rpx;
}
.rightScroll {
width: 100%;
}
.check {
padding-left: 20rpx;
}
.title2{
font-size: 30rpx;
font-weight: bold;
}
} }
</style>
