Files
nuttyreading-html/pages/prescript/medicineSearch.vue
2024-02-26 09:05:04 +08:00

748 lines
17 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!-- 下拉刷新区域 -->
<template>
<view class="contentBox">
<view class="oneCateList flexbox">
<text :class="[curOneCateIndex == index ? 'cur' : '']" @click="setOneCateIndex(item,index)"
v-for="(item, index) in ywTabList" :key="item.prescriptCategoryId">{{item.title}}</text>
</view>
<view class="search_box" v-if="oneCateList.length > 0 && curOneCateIndex == 0" @click="gotoSousuo()">
<u-search placeholder="请输入药物名" :showAction="false" disabled></u-search>
</view>
<view class="searchList" v-show="showSearchList">
<view class="itemBox" v-if="searchList.length > 0">
<view class="item" v-for="(item, index) in searchList" :key="index" @click="gotoDetail(item)">
{{item.title}}
</view>
</view>
<view v-else class="">
<u-divider text="未找到相关药物哦~"></u-divider>
</view>
</view>
<view v-show="!showSearchList">
<view class="grid twoCateList" v-if="twoCateList.length > 0 && curOneCateIndex == 1">
<u-grid :col="3" border class="u-grid-list">
<u-grid-item v-for="(item, index) in twoCateList" :key="item.prescriptCategoryId"
@click="setTwoCateIndex(item, index)">
<view :class="['grid-text',curTwoCateIndex == index ? 'cur' : '']">{{item.title}}</view>
</u-grid-item>
</u-grid>
</view>
<view class="titleList" v-if="curOneCateIndex == 1">
<view v-if="titleList.length > 0">
<view v-for="(item, index) in titleList" :key="item.id" @click="gotoDetail(item)"
style="align-items: flex-start;border-bottom: 2px solid #fff;">
<view :class="['titleItem']">{{item.name}}</view>
</view>
</view>
<u-divider v-else text="暂无药物数据哦~"></u-divider>
</view>
<view v-if="!curOneCateIndex == 1">
<view class="grid CNCateList">
<u-grid :col="2" border class="u-grid-list">
<u-grid-item v-for="(item, index) in CNateList" :key="item.id" @click="setCNIndex(item, index)">
<view :class="['grid-text',false ? 'cur' : '']">
{{item.title}}
<b v-if="index==1&&xingweiShow">
<u-icon name="arrow-up-fill" color="#666" size="12"></u-icon>
</b>
<b v-if="index==1&&!xingweiShow">
<u-icon name="arrow-down-fill" color="#666" size="12"></u-icon>
</b>
<b v-if="index==0&&gongxiaoShow">
<u-icon name="arrow-up-fill" color="#666" size="12"></u-icon>
</b>
<b v-if="index==0&&!gongxiaoShow">
<u-icon name="arrow-down-fill" color="#666" size="12"></u-icon>
</b>
</view>
</u-grid-item>
</u-grid>
</view>
<view class="marYao" @click="gongxiaoShow = true" v-if="curGongxiaoMark.length>0">
功效
<span v-for="(item, index) in curGongxiaoMark">
{{item}}
<font v-if="index+1!=curGongxiaoMark.length">,</font>
</span>
</view>
<view class="marYao" @click="xingweiShow = true" v-if="curXWGMark.length>0">
性味
<span v-for="(item, index) in curXWGMark">
{{item}}
<font v-if="index+1!=curXWGMark.length">,</font>
</span>
</view>
</view>
<view class="titleList" v-if="!curOneCateIndex == 1">
<view v-if="titleList.length > 0">
<view v-for="(item, index) in titleList" :key="item.id" @click="gotoCNDetail(item)"
style="align-items: flex-start;border-bottom: 2px solid #fff;">
<view :class="['titleItem']">{{item.name}}</view>
</view>
</view>
<u-divider v-else text="暂无药物数据哦~"></u-divider>
</view>
<view v-if="!curOneCateIndex == 1">
<view v-if="status==0" style="text-align: center;padding: 20rpx 0;">
<u-loading-icon style="display: inline-block;"></u-loading-icon>
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>
努力加载中
</font>
</view>
<view v-if="status==1" style="padding: 20rpx 0;">
<u-divider text="全部加载完成"></u-divider>
</view>
</view>
</view>
<u-popup mode="bottom" :show="xingweiShow" :round="10" @close="xingweiShow=false">
<view class="CNMedicineSearchPopup">
<view class="dp_title"></view>
<view class="grid twoCateList" v-if="xingSelectionList.length > 0">
<u-grid :col="3" border class="u-grid-list">
<u-grid-item v-for="(item, index) in xingSelectionList" :key="item.title"
@click="setXingIndex(item, index, curXingIndex)">
<view :class="['grid-text',curXingIndex.includes(item.title) ? 'cur' : '']">{{item.title}}
</view>
</u-grid-item>
</u-grid>
</view>
<view class="dp_title"></view>
<view class="grid twoCateList" v-if="weiSelectionList.length > 0">
<u-grid :col="3" border class="u-grid-list">
<u-grid-item v-for="(item, index) in weiSelectionList" :key="item.title"
@click="setXingIndex(item, index, curWeiIndex)">
<view :class="['grid-text',curWeiIndex.includes(item.title) ? 'cur' : '']">{{item.title}}
</view>
</u-grid-item>
</u-grid>
</view>
<view class="dp_title">归经</view>
<view class="grid twoCateList" v-if="guijingSelectionList.length > 0">
<u-grid :col="3" border class="u-grid-list">
<u-grid-item v-for="(item, index) in guijingSelectionList" :key="item.title"
@click="setXingIndex(item, index, curGuijingIndex)">
<view :class="['grid-text',curGuijingIndex.includes(item.title) ? 'cur' : '']">
{{item.title}}
</view>
</u-grid-item>
</u-grid>
</view>
<view style="max-height: 1000rpx;overflow-y: scroll;margin-top: 28px;">
<!-- 提交 -->
<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
<view>
<u-button type="success" @click="goNewSearch">查询</u-button>
</view>
</view>
</view>
</view>
</u-popup>
<u-popup mode="bottom" :show="gongxiaoShow" :round="10" @close="gongxiaoShow=false">
<view class="CNMedicineSearchPopup">
<view class="dp_title">功效</view>
<view class="grid twoCateList" v-if="gongxiaoSelectionList.length > 0">
<u-grid :col="3" border class="u-grid-list">
<u-grid-item v-for="(item, index) in gongxiaoSelectionList" :key="item.title"
@click="setXingIndex(item, index, curGongxiaoIndex)">
<view :class="['grid-text',curGongxiaoIndex.includes(item.title) ? 'cur' : '']">
{{item.title}}
</view>
</u-grid-item>
</u-grid>
</view>
<view style="max-height: 1000rpx;overflow-y: scroll;margin-top: 28px;">
<!-- 提交 -->
<view class="padding-bottom-sm flex padding-lr-sm" style="border-bottom: 1px solid #EEEEEE;">
<view>
<u-button type="success" @click="goNewSearch">查询</u-button>
</view>
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import $http from '@/config/requestConfig.js';
export default {
// props: {
// type: Number, // 下拉状态inOffset1 outOffset2 showLoading3 endDownScroll4
// rate: Number // 下拉比率 (inOffset: rate<1; outOffset: rate>=1)
// },
data() {
return {
ywTabList: [{
prescriptCategoryId: 1,
title: '中药检索'
}, {
prescriptCategoryId: 2,
title: '西药检索'
}],
playData: {},
searchValue: '',
oneCateList: [{
prescriptCategoryId: 0
}], // 一级分类标题1
twoCateList: [{
prescriptCategoryId: 1,
title: '抗感染类'
},
{
prescriptCategoryId: 2,
title: '神经类'
},
{
prescriptCategoryId: 3,
title: '精神类'
},
{
prescriptCategoryId: 4,
title: '抗肿瘤类'
},
{
prescriptCategoryId: 5,
title: '心血管类'
},
{
prescriptCategoryId: 6,
title: '呼吸类'
},
{
prescriptCategoryId: 7,
title: '泌尿系统类'
},
{
prescriptCategoryId: 8,
title: '消化类'
},
{
prescriptCategoryId: 9,
title: '麻醉及其辅助'
},
], // 二级分类标题
titleList: [], // 药物标题
curOneCateIndex: 0, // 当前选中的一级分类
curTwoCateIndex: 0, // 当前选中的二级分类
CNateList: [{
title: "功效",
id: 1
}, {
title: "性味",
id: 2
}, ],
CNCateIndex: 0,
page: 1,
status: 3,
totalPage: 1,
xingweiShow: false, // 查询条件弹出层,性味
gongxiaoShow: false, // 查询条件弹出层,功效
sanpinShow: false, // 查询条件弹出层sanpin
curXWGMark: [],
curGongxiaoMark: [],
curXingIndex: [],
curWeiIndex: [],
curGuijingIndex: [],
curGongxiaoIndex: [],
gongxiaoSelectionList: [{
title: "解表"
},
{
title: "清热"
},
{
title: "泻下"
},
{
title: "祛风湿"
},
{
title: "芳香化湿"
},
{
title: "利水渗湿"
},
{
title: "温里"
},
{
title: "理气"
},
{
title: "消食"
},
{
title: "驱虫"
},
{
title: "止血"
},
{
title: "活血祛瘀"
},
{
title: "化痰止咳平喘"
},
{
title: "安神"
},
{
title: "平肝息风"
},
{
title: "开窍"
},
{
title: "补虚"
},
{
title: "收涩"
},
{
title: "涌吐"
},
{
title: "外用及其他"
},
],
xingSelectionList: [{
title: "寒"
},
{
title: "凉"
},
{
title: "平"
},
{
title: "温"
},
{
title: "热"
},
],
weiSelectionList: [{
title: "酸"
},
{
title: "涩"
},
{
title: "甘"
},
{
title: "苦"
},
{
title: "辛"
},
{
title: "咸"
},
{
title: "淡"
},
],
guijingSelectionList: [{
title: "心"
},
{
title: "肝"
},
{
title: "脾"
},
{
title: "肺"
},
{
title: "肾"
},
{
title: "肠"
},
{
title: "膀胱"
},
{
title: "胃"
},
],
searchList: [], // 搜索结果数组
showSearchList: false,
userMes: {}, // 用户信息
searchDisable: false, // 搜索不可用
limitShow: false,
limitTitle: '提示',
limitContent: ''
}
},
// onLoad() {
// this.getCNYao()
// },
methods: {
setOneCateIndex(item, index) {
// let id = item.prescriptCategoryId
this.curOneCateIndex = index
this.curTwoCateIndex = 0
this.searchValue = ''
this.searchList = []
this.showSearchList = false
if (index == 1) { // 西药检索
this.getXiYao('抗感染类', 1)
} else { // 中药检索
// this.getTowCateList(id)
this.goNewSearch() // book/materials/getMaterialsList
}
},
setTwoCateIndex(item, index) {
let id = item.title
this.curTwoCateIndex = index
this.getXiYao(id, 1)
},
// 获取西药
getXiYao(id, type) {
$http.request({
url: "book/materials/getDrugList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
// loadAnimate: 'none', // 请求加载动画
"limit": 1000,
"current": 1,
"name": "",
"kind": id, // 药品类型 抗病毒药/解热镇痛、非甾体抗炎药.......
"prescriptionType": "", // 处方类型 处方药/OTC甲类/OTC乙类
"insuranceType": "", // 医保类型 非医保/医保甲类/医保乙类
"type": type, // 0中药1西药
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
console.log(res, '内容获取成功')
if (res.code == 0 && res.result.records.length > 0) {
this.titleList = res.result.records
} else {
this.titleList = []
}
}).catch(e => {
this.titleList = []
console.log(e)
})
},
// 详情
gotoDetail(item) {
console.log('111111111111')
uni.navigateTo({
url: "./medicineSearchDetail?id=" + item.id
})
},
// 获取中药
gotoCNDetail(item) {
console.log('2222')
uni.navigateTo({
url: "./CNMedicineSearchDetail?id=" + item.id
})
},
gotoSousuo() {
uni.navigateTo({
url: "./CNMedicineText"
})
},
setXingIndex(item, index, arr) {
// let arr = this.curXingIndex
if (arr.includes(item.title)) {
// 若包含,则从数组中删除该值
var index = arr.indexOf(item.title);
if (index > -1) {
arr.splice(index, 1);
}
} else {
// 若不包含,则向数组中添加该值
arr.push(item.title);
}
},
setCNIndex(item, index) {
let id = item.id
this.CNCateIndex = index
if (id == 2) {
this.xingweiShow = true
this.gongxiaoShow = false
this.sanpinShow = false
}
if (id == 1) {
this.xingweiShow = false
this.gongxiaoShow = true
this.sanpinShow = false
}
},
goNewSearch() {
this.page = 1
this.titleList = []
this.goToSearch()
},
goToSearch() {
$http.request({
url: "book/materials/getMaterialsList",
method: "POST", // POST、GET、PUT、DELETE具体说明查看官方文档
data: {
// loadAnimate: 'none', // 请求加载动画
"limit": 20,
"current": this.page,
"name": "",
"type": "", // 植物、矿物、动物
"effect": this.curGongxiaoIndex.join(','), //功效
"taste": this.curWeiIndex.join(','), //味
"property": this.curXingIndex.join(','), //性
"tropism": this.curGuijingIndex.join(',') //归经
},
header: { //默认 无 说明:请求头
'Content-Type': 'application/json'
},
}).then(res => {
console.log(res, '内容获取成功')
if (res.code == 0 && res.result.records.length > 0) {
for (var i = 0; i < res.result.records.length; i++) {
this.titleList.push(res.result.records[i])
}
} else {
this.titleList = []
}
this.xingweiShow = false
this.gongxiaoShow = false
this.sanpinShow = false
this.totalPage = res.result.pages
if (this.page == this.totalPage) {
this.status = 1
} else {
this.status = 3
}
// 标记
this.curGongxiaoMark = JSON.parse(JSON.stringify(this.curGongxiaoIndex))
this.curXWGMark = JSON.parse(JSON.stringify(this.curXingIndex.concat(this.curWeiIndex)
.concat(this.curGuijingIndex)))
}).catch(e => {
this.titleList = []
console.log(e)
})
},
goToBottom() {
console.log(this.curOneCateIndex)
// this.loadingNow = true
if (this.curOneCateIndex != 1) {
console.log('到底了')
if (this.page + 1 <= this.totalPage) {
this.page++
this.goToSearch()
} else {
this.status = 1
}
}
},
}
};
</script>
<style lang="scss" scoped>
.searchList {
.item {
font-size: 28rpx;
padding: 20rpx;
border-bottom: 1px solid #dadbde;
}
}
.contentBox {
.oneCateList {
margin-top: 15rpx;
justify-content: space-between;
text {
text-align: center;
display: inline-block;
width: 50%;
padding: 10rpx 0;
font-size: 30rpx;
border-radius: 10rpx;
}
.cur {
background-color: #55aa7f3d;
color: #55aa7f;
font-weight: bold;
}
}
.firstTab {
text {
text-align: center;
display: inline-block;
width: 50%;
padding: 20rpx 0;
margin-bottom: 10rpx;
font-size: 34rpx;
border-radius: 10rpx;
}
}
.twoCateList {
font-size: 28rpx;
margin-top: 20rpx;
.grid-text {
padding: 30rpx 20rpx;
text-align: center;
}
.cur {
color: #55aa7f;
}
// .u-grid-list{border: 0.5px solid #dadbde;}
}
.titleList {
font-size: 26rpx;
margin-top: 20rpx;
padding: 10rpx;
border-radius: 10rpx;
background-color: #f8f9fa;
.titleItem {
padding: 20rpx 10rpx;
}
.JFtitleItem {
background-color: #ffffff;
padding: 20rpx 10rpx;
width: 100%;
border-bottom: 0.5px solid #f8f9fa;
}
}
}
.container {
padding: 10rpx;
height: 100vh;
background-color: #fff;
}
.search_box {
margin: 0 auto;
overflow: hidden;
align-items: center;
width: calc(100% - 10px);
margin-top: 30rpx;
margin-bottom: 20rpx;
}
.flexbox {
display: flex;
}
.uni-modal .uni-modal__bd {
text-align: left;
}
.limiTy {
font-size: 28rpx;
line-height: 46rpx;
}
.CNCateList {
font-size: 28rpx;
margin-top: 20rpx;
.grid-text {
padding: 16rpx 20rpx;
text-align: center;
}
.grid-text>b {
margin-left: 10rpx;
display: inline-block;
vertical-align: middle;
}
.cur {
color: #55aa7f;
}
.u-grid-list {
// border-top: 0.5px solid #dadbde;
// border-bottom: 0.5px solid #dadbde;
}
}
.CNMedicineSearchPopup {
.grid-text {
padding: 16rpx 20rpx !important;
}
.grid-text>b {
margin-left: 10rpx;
display: inline-block;
vertical-align: middle;
}
.cur {
color: #55aa7f;
}
.u-grid-list {
// border-top: 0.5px solid #dadbde;
// border-bottom: 0.5px solid #dadbde;
}
}
.marYao {
background-color: #55aa7f1c;
padding: 10rpx 20rpx 10rpx 20rpx;
margin-bottom: 10rpx;
font-size: 26rpx;
color: #225f40;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span {
color: #55aa7f;
font {
display: inline-block;
margin: 0 5rpx;
}
}
}
</style>