<template>

<view class="body">

<view class="flex flex-y-center flex-wrap homeTop">

<view class="homeTopItem flex flex-column flex-x-center flex-y-center "

:class="[pageData.showIndex==index?'ac':'']" @click="showPopup(item,index)"

v-for="(item,index) in pageData.topData" :key="index">

<image class="img mb10" :src="item.img" mode=""></image>

<view class="f-28 col-333">{{item.label}}</view>

</view>

</view>

<view class="flex flex-y-center flex-x-center lyBox">

<view class="line"></view>

<view class="f-40 f-w col-333">重点领域</view>

<view class="line"></view>

</view>

<view class="flex flex-y-center lyCategory flex-wrap">

<view class="flex flex-y-center item " :class="[pageData.showIndex1==index?'ac':'']"

v-for="(item,index) in pageData.zllyArr" :key="index" @click="goList(item,index)">

<image class="img" :src="item.img" mode=""></image>

<view class="f-28">{{item.label}}</view>

</view>

</view>

<view class="homeSearch flex flex-y-center flex-x-between mb30">

<input type="text" v-model="pageData.sendData.productname" placeholder="通过药品名称与其拼音进行模糊查询"

confirm-type="search" @confirm="goList1()">

<image @click="goList1()" class="img" src="@/static/images/home/so.png" mode=""></image>

</view>

<view class="flex flex-y-center flex-wrap homeBot ">

<view class="homeBotItem fl1" @click="downFl('ZLDL')">治疗大类</view>

<view class="homeBotItem fl2" @click="downFl('XFLY')">细分领域</view>

<view class="homeBotItem fl2" @click="downFl('GNZZ')">功能主治</view>

<view class="homeBotItem fl4" @click="downFl('CF')">成分</view>

<view class="homeBotItem fl5" @click="downFl('JX')">剂型</view>

<view class="homeBotItem fl6" @click="downFl('SCCJ')">生产厂家</view>

</view>

<view

v-if="pageData.dictbigtypName||pageData.dictdetareaName||pageData.createcompanyName||pageData.sendData.functional||pageData.sendData.dosage||pageData.sendData.ingredient"

style="padding: 0 30rpx;" class="flex flex-y-center flex-x-between">

<text class="f-28">选择的数据</text>

<text class="f-28 col-999" @click="clearData">清空</text>

</view>

<view style="padding: 0 30rpx;" v-if="pageData.dictbigtypName">

<text class="f-28">治疗大类：</text>

<text class="f-28 col-red">{{pageData.dictbigtypName}}</text>

</view>

<view style="padding: 0 30rpx;" v-if="pageData.dictdetareaName">

<text class="f-28">细分领域：</text>

<text class="f-28 col-red">{{pageData.dictdetareaName}}</text>

</view>

<view style="padding: 0 30rpx;" v-if="pageData.sendData.functional">

<text class="f-28">功能主治：</text>

<text class="f-28 col-red">{{pageData.sendData.functional}}</text>

</view>

<view style="padding: 0 30rpx;" v-if="pageData.sendData.ingredient">

<text class="f-28">成分：</text>

<text class="f-28 col-red">{{pageData.sendData.ingredient}}</text>

</view>

<view style="padding: 0 30rpx;" v-if="pageData.sendData.dosage">

<text class="f-28">剂型：</text>

<text class="f-28 col-red">{{pageData.sendData.dosage}}</text>

</view>

<view style="padding: 0 30rpx;" v-if="pageData.createcompanyName">

<text class="f-28">生产厂家：</text>

<text class="f-28 col-red">{{pageData.createcompanyName}}</text>

</view>

<uni-popup ref="cateGoryPopup" type="top">

<view class="homePopup">

<view class="flex flex-wrap mb30">

<view class="cateGoryItem " :class="[item.value==pageData.sendData.biguncls?'ac':'']"

@click="closePop(item)" v-for="(item,index) in pageData.downTop" :key="index">{{item.label}}

</view>

</view>

<view class="flex flex-wrap" style="padding: 0 30rpx;">

<view class="cateGoryThree ac" @click.stop="clickTree(list)"

v-for="(list,index) in pageData.treeArr" :key="index">

{{list.label}}

</view>

</view>

<!-- <view class="item" @click="closePop(item)" v-for="(item,index) in pageData.downTop" :key="index">

<view class="flex flex-y-center flex-x-between b-b">

<text>{{item.label}}</text>

<text v-if="item.isleaf==0" class="iconfont icon-youjiantou f-20"></text>

</view>

<view class="item b-b" @click.stop="clickTree(list)" v-for="(list,idx) in pageData.treeArr"

:key="idx" v-if="item.value==pageData.sendData.biguncls">

{{list.label}}

</view>

</view> -->

</view>

</uni-popup>

<uni-popup ref="pickerView" type="bottom" style="z-index: 9999999;position: relative;" @change="changePopup">

<div class="popup-view" style="padding-bottom: 0;">

<div class="popup-view-header">

<div class="popup-view-cancel" @click="pickerCancel" style="color: #999;"> 取消 </div>

<input v-if="pageData.qufen=='JX'||pageData.qufen=='CF'||pageData.qufen=='GNZZ'"

@input="changeInput" class="input" v-model="pageData.keyword" type="text" placeholder="请输入关键字">

<div class="popup-view-confirm" @click="pickerConfirm" style="color: #ff2826;"> 完成 </div>

</div>

<picker-view :immediate-change="true" :indicator-style="pageData.indicatorStyle"

:value="pageData.pickerIndex" @change="bindPickerChange" class="picker-view">

<picker-view-column>

<view class="item" v-for="(item,index) in pageData.array" :key="index">{{item.label}}</view>

</picker-view-column>

</picker-view>

</div>

</uni-popup>

</view>

</template>

<script setup>

import {

_throttle

} from "@/common/tool.js";

import {

getAppBigTyp,

getDcitTyp

} from "/api/index.js";

import {

ref,

nextTick,

getCurrentInstance

} from "vue";

import {

onLoad,

onShow

} from "@dcloudio/uni-app";

const pageData = ref({

keyword: '',

showIndex: -1,

showIndex1: -1,

pickerIndex: [0, 0, 0],

array: [],

indicatorStyle: height: 40px;padding-bottom:0 ,

topData: [], //三核九翼一级数据

downTop: [], //三核九翼 二级数据

treeArr: [], //三核九翼 三级数据

zllyArr: [],

qufen: '',

isSanFlag: false, //三核九翼显示三级开关

dictbigtypName: '',

createcompanyName: '',

dictdetareaName: '',

sendData: {

bigthcls: '', //三核九翼

productname: '',

dictbigtyp: '', //治疗大类 id

dictdetarea: '', //细分领域 id

ingredient: '', //成分

dosage: '', //剂型

createcompany: '', //厂家

zlly: '', //治疗领域 id

functional: ''

}

})

onLoad(() => {

getType(1, '0000', '', 'topData')

getType('ZLLY', '0000', '', 'zllyArr')

})

onShow(() => {

pageData.value.sendData = {

productname: '',

dictbigtyp: '', //治疗大类 id

dictdetarea: '', //细分领域 id

ingredient: '', //成分

dosage: '', //剂型

createcompany: '', //厂家

zlly: '', //治疗领域 id

functional: '',

biguncls: '',

bigthcls: '',

}

clearData();

pageData.value.showIndex = '-1';

pageData.value.showIndex1 = '-1';

console.log(pageData.value.sendData)

})

const clearData = () => {

pageData.value.dictbigtypName = '';

pageData.value.createcompanyName = '';

pageData.value.dictdetareaName = '';

pageData.value.sendData.dictbigtyp = '';

pageData.value.sendData.createcompany = '';

pageData.value.sendData.dictdetarea = '';

pageData.value.sendData.dosage = '';

pageData.value.sendData.functional = '';

pageData.value.sendData.ingredient = '';

}

const cateGoryPopup = ref(null)

const pickerView = ref(null)

const showPopup = (item, index) => {

pageData.value.showIndex = index

pageData.value.showIndex1 = '-1'

const res = getType(2, item.value, '', 'downTop')

console.log('res')

// console.log(res)

pageData.value.treeArr = []

cateGoryPopup.value.open()

}

const closePop = (item) => {

console.log(pageData.value.showIndex)

// 点击跳转 中国心 中国桑跳转药品列表页面 其他的跳转到商品详情页面

if (item.isleaf == 0) {

pageData.value.sendData.biguncls = item.value;

getType(3, item.value, '', 'treeArr')

} else {

cateGoryPopup.value.close()

// if (pageData.value.showIndex == 1 || pageData.value.showIndex == 2) {

// uni.navigateTo({

// url: '/pages/medicineDetail/medicineDetail?pageId=' + item.value

// })

// } else {

// pageData.value.sendData.biguncls = item.value

// uni.navigateTo({

// url: '/pages/medicineList/medicineList?sendData=' + JSON.stringify(pageData.value.sendData)

// })

// }

pageData.value.sendData.biguncls = item.value

uni.navigateTo({

url: '/pages/medicineList/medicineList?sendData=' + JSON.stringify(pageData.value.sendData)

})

}

}

// 点击三核九翼 三级

const clickTree = (item) => {

pageData.value.sendData.bigthcls = item.value;

cateGoryPopup.value.close()

uni.navigateTo({

url: '/pages/medicineList/medicineList?sendData=' + JSON.stringify(pageData.value.sendData)

})

}

const bindPickerChange = (e) => {

console.log(e)

pageData.value.pickerIndex[0] = e.detail.value[0]

}

const changePopup = (e) => {

console.log(e)

if (!e.show) {

pageData.value.pickerIndex=['0','0','0']

pageData.value.keyword = ''

}

}

const downFl = async (name) => {

pageData.value.qufen = name;

let sendId = pageData.value.sendData.zlly;

if (name == 'XFLY') {

// 细分领域和治疗大类做关联

sendId = pageData.value.sendData.dictbigtyp

}

const res = await getType(name, '0000', sendId || 0, 'array')

// console.log(res)

if (res.length <= 0) {

uni.$showMsg("没有数据可选择")

return false;

}

pickerView.value.open()

}

const changeInput = async () => {

console.log(pageData.value.keyword)

let str = '0000';

if (pageData.value.keyword) {

str = pageData.value.keyword

}

console.log(pageData.value.qufen)

await getType(pageData.value.qufen, str, pageData.value.sendData.zlly || 0, 'array')

}

const pickerCancel = () => {

pageData.value.pickerIndex = [0, 0, 0]

pickerView.value.close()

}

// 点击完成

const pickerConfirm = () => {

const biguncls = pageData.value.array[pageData.value.pickerIndex[0]]

console.log(biguncls)

if (pageData.value.qufen == 'ZLDL') {

pageData.value.sendData.dictbigtyp = biguncls.value

pageData.value.dictbigtypName = biguncls.label

} else if (pageData.value.qufen == 'XFLY') {

pageData.value.sendData.dictdetarea = biguncls.value

pageData.value.dictdetareaName = biguncls.label

} else if (pageData.value.qufen == 'CF') {

pageData.value.sendData.ingredient = biguncls.value

} else if (pageData.value.qufen == 'JX') {

pageData.value.sendData.dosage = biguncls.value

} else if (pageData.value.qufen == 'SCCJ') {

pageData.value.sendData.createcompany = biguncls.value

pageData.value.createcompanyName = biguncls.label

} else if (pageData.value.qufen == 'GNZZ') {

pageData.value.sendData.functional = biguncls.value

}

// console.log(pageData.value.sendData)

pickerCancel()

// uni.navigateTo({

// url: '/pages/medicineList/medicineList?sendData=' + JSON.stringify(pageData.value.sendData)

// })

}

// 获取分类数据

const getType = async (oprisbn, clsid, zlly, name) => {

const sendData = {

oprisbn: oprisbn, //1一级/2二级/CF/JX/SCCJ

clsid: clsid, //oprisbn=2 必传分类ID，其余随便传

zlly: zlly

}

try {

const res = await getAppBigTyp(sendData);

if (name === 'topData') {

res.data.forEach((el) => {

el.img = '/static/images/no_pic.jpg';

if (el.value === '446027309749641093') {

el.img = '/static/images/home/icon-01.png';

}

if (el.value === '446027434807009157') {

el.img = '/static/images/home/icon-02.png';

}

if (el.value === '446027546761371525') {

el.img = '/static/images/home/icon-03.png';

}

if (el.value === '446027757072162693') {

el.img = '/static/images/home/icon-04.png';

}

});

}

if (name === 'zllyArr') {

res.data.forEach((el) => {

el.img = '/static/images/no_pic.jpg';

if (el.label === '心脑' || el.label === '心肺') {

el.img = '/static/images/home/ico-01.png';

}

if (el.label === '呼吸') {

el.img = '/static/images/home/ico-02.png';

}

if (el.label === '消化') {

el.img = '/static/images/home/ico-03.png';

}

if (el.label === '风湿') {

el.img = '/static/images/home/ico-04.png';

}

if (el.label === '肿瘤') {

el.img = '/static/images/home/ico-05.png';

}

});

}

pageData.value[name] = res.data;

console.log(pageData.value);

return res.data;

} catch (error) {

console.error(error);

throw error;

}

}

// 获取一级分类

// const getData = () => {

// getDcitTyp({

// oprisbn: 1,

// dataid: '02'

// }).then(res => {

// pageData.value.array = res.data.list;

// })

// }

// 去药品列表页面

const goList = (item, index) => {

if (pageData.value.showIndex1 == index) {

pageData.value.showIndex1 = -1;

pageData.value.sendData.zlly = ''

} else {

pageData.value.showIndex1 = index

pageData.value.sendData.zlly = item.value

}

pageData.value.sendData.dictbigtyp = '';

pageData.value.dictbigtypName = '';

pageData.value.sendData.dictdetarea = '';

pageData.value.dictdetareaName = '';

pageData.value.sendData.ingredient = '';

pageData.value.sendData.dosage = '';

pageData.value.sendData.createcompany = '';

pageData.value.createcompanyName = '';

pageData.value.sendData.functional = '';

pageData.value.showIndex = '-1'

// uni.navigateTo({

// url: '/pages/medicineList/medicineList?sendData=' + JSON.stringify(pageData.value.sendData)

// })

}

const goList1 = () => {

uni.navigateTo({

url: '/pages/medicineList/medicineList?sendData=' + JSON.stringify(pageData.value.sendData)

})

}

</script>

<style lang="scss" scoped>

.body {

height: 100vh;

background-color: #fff;

}

.homeTop {

padding: 20rpx;

position: relative;

z-index: 9999;

background-color: #fff;

.homeTopItem {

width: 160rpx;

height: 160rpx;

background: linear-gradient(to left, #ffedec, #fecfce);

border-radius: 10rpx;

margin-right: 22rpx;

.img {

height: 80rpx;

width: 80rpx;

border-radius: 80rpx;

background-color: #fff;

}

}

.homeTopItem:nth-child(4n) {

margin-right: 0;

}

.homeTopItem.ac {

background: linear-gradient(to left, #ff3f26, #ee284c);

}

.homeTopItem.ac view {

color: #FFFFFF !important;

}

}

.lyBox {

height: 100rpx;

.line {

width: 160rpx;

background-color: #eeeeee;

height: 2rpx;

margin: 0 50rpx;

}

}

.lyCategory {

padding: 0 20rpx;

margin-bottom: 30rpx;

.item {

height: 80rpx;

padding: 0 30rpx 0 15rpx;

background: linear-gradient(to left, #ffedec, #fecfce);

border-radius: 80rpx;

color: #333;

margin-right: 10rpx;

}

.item.ac {

color: #FFFFFF;

background: linear-gradient(to left, #ff3f26, #ee284c);

}

.item:nth-child(4n) {

margin-right: 0;

}

.img {

width: 60rpx;

height: 60rpx;

border-radius: 60rpx;

margin-right: 6rpx;

background-color: #fff;

}

}

.homeSearch {

height: 88rpx;

border-radius: 88rpx;

width: 710rpx;

background-color: #f3f3f3;

margin: 0 auto;

padding: 0 15rpx 0 30rpx;

box-sizing: border-box;

input {

width: 80%;

height: 88rpx;

line-height: 88rpx;

font-size: 28rpx;

color: #333;

}

.img {

width: 80rpx;

height: 80rpx;

}

}

.homeBot {

padding: 20rpx;

font-size: 28rpx;

.homeBotItem {

width: 32%;

text-align: center;

background-color: #f3f3f3;

height: 90rpx;

line-height: 90rpx;

border-radius: 90rpx;

margin-bottom: 20rpx;

margin-right: 10rpx;

}

.homeBotItem:nth-child(3n) {

margin-right: 0;

}

}

.homePopup {

position: relative;

top: 200rpx;

background-color: #fff;

max-height: 400rpx;

overflow-y: auto;

padding: 20rpx;

.cateGoryItem {

padding: 0 20rpx;

height: 66rpx;

line-height: 66rpx;

font-size: 28rpx;

color: #333;

border-radius: 66rpx;

border: 1rpx solid #DDD;

margin-right: 20rpx;

margin-bottom: 20rpx;

min-width: 100rpx;

text-align: center;

}

.cateGoryItem.ac {

color: #fff;

background-color: #ff1716;

border-color: #ff1716;

}

.cateGoryThree {

min-width: 80rpx;

margin-right: 30rpx;

margin-bottom: 30rpx;

border: 1rpx solid #DDD;

border-radius: 50rpx;

padding: 10rpx 20rpx;

text-align: center;

}

.item {

min-height: 80rpx;

// height: 80rpx;

line-height: 80rpx;

font-size: 28rpx;

color: #333;

padding: 0 30rpx;

// border-bottom: solid 1px #eee;

}

}

.popup-view {

background-color: #FFFFFF;

.popup-view-header {

text-align: center;

width: 100%;

height: 90rpx;

background-color: #fff;

display: flex;

justify-content: space-between;

align-items: center;

border-bottom: 1px solid #F5F5F5;

padding: 0 30rpx;

box-sizing: border-box;

div {

width: 150rpx;

height: 100%;

box-sizing: border-box;

padding: 0 28rpx;

font-size: 34rpx;

line-height: 90rpx;

&::first-child {

color: #888888;

}

&::last-child {

color: #ff2826;

}

}

.input {

width: 50%;

line-height: 90rpx;

height: 90rpx;

font-size: 28rpx;

}

}

.picker-view {

width: 100%;

height: 476rpx;

margin-top: 20rpx;

margin-bottom: -68rpx;

.item {

height: 40px !important;

line-height: 40px;

text-align: center;

color: #000;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

cursor: pointer;

}

}

}

</style>