diagnosis.admin/src/views/knowledge/Tcm.vue

<template>
  <div class="tcm">
    <!-- 顶部筛选 -->
    <div class="screening flex-plane-start-b flex-wrap">
      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>中药名称：</span>
          <div class="input">
            <el-input size="mini" v-model="form.name" placeholder="请输入"></el-input>
          </div>
        </div>

        <div class="screening-item flex-vertical-center-l">
          <span>功效：</span>
          <div class="input">
            <el-input size="mini" v-model="form.gongxiao" placeholder="请输入"></el-input>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l">
          <span>分类：</span>
          <div class="input">
            <el-select size="mini" v-model="form.other" placeholder="请选择">
              <el-option
                :label="item.name"
                :value="item.effectid"
                v-for="(item,index) in classify"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <el-button size="mini" type="primary" @click="search">搜索</el-button>
        <el-button size="mini" type="warning" @click="clearFilter">清空</el-button>
      </div>
      <!-- <div class="total">
                中药共 <span>123</span>味
      </div>-->
    </div>

    <!--  -->
    <div class="body flex-wrap flex-vertical-center-l">
      <div v-for="(item,index) in tcmList" :key="index">
        <div class="item" v-if="item.medList.length>0">
          <div class="title">{{item.name}}</div>
          <div class="banner-body flex-vertical-around">
            <div class="left-btn flex-center" @click="lastPage(index)">
              <img src="../../assets/green-left.png" alt />
            </div>
            <div class="center">
              <!-- <el-carousel indicator-position="none" arrow='never' :autoplay='false' height='160px'>
              <el-carousel-item v-for="item1 in medList" :key="item1.matid">-->
              <ul class="flex-vertical-center-l flex-wrap">
                <li class="flex-vertical-center-l" v-for="item1 in item.medList" :key="item1.matid">
                  <span></span>
                  <div
                    @click="$router.push({path:'/index/tcmd?matid='+item1.matid})"
                  >{{item1.matname}}</div>
                </li>
              </ul>

              <!-- </el-carousel-item>
              </el-carousel>-->
            </div>
            <div class="left-btn flex-center" @click="nextPage(index)">
              <img src="../../assets/green-right.png" alt />
            </div>
          </div>
          <div class="findMore" @click="findMore(item)">查看更多</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getEffectQuery, getMedList } from "@/api/knowledge.js";
export default {
  data() {
    return {
      form: {
        name: "",
        other: "",
        gongxiao: ""
      },
      classify: [],
      tcmList: []
    };
  },
  created() {
    this.getEffectQuery(1);
    this.getEffectQuery(2);
  },
  methods: {
    findMore(item) {
      this.$router.push({
        path: "/index/tcmmore?fname=" + item.name + "&fid=" + item.effectid
      });
    },
    search() {
      // if (this.form.other == '') {
      //     this.$message({
      //         type: 'error',
      //         showClose: true,
      //         message: '请先选择分类'
      //     })
      //     return
      // }
      this.tcmList = [];
      this.getEffectQuery(2);
    },
    clearFilter() {
      this.form = {
        name: "",
        other: "",
        gongxiao: ""
      };
      this.getEffectQuery(2);
    },
    // 下一页
    nextPage(index) {
      let effectid = this.tcmList[index].effectid;
      let page = this.tcmList[index].page;
      let load = this.tcmList[index].loadMore;

      if (!load) return;
      page += 1;
      this.tcmList[index].page = page;
      this.getMedList(effectid, page, index);
    },
    // 上一页
    lastPage(index) {
      let effectid = this.tcmList[index].effectid;
      let page = this.tcmList[index].page;
      let load = this.tcmList[index].loadMore;

      if (page == 1) return;
      page -= 1;
      this.tcmList[index].page = page;
      this.getMedList(effectid, page, index);
    },
    // 获取标准 功效接口
    async getEffectQuery(type) {
      let res = await getEffectQuery({
        effecttype: "2",
        effictId: this.form.other
      });
      if (res.code == 0) {
        if (type == 1) {
          this.classify = res.data.effects;
        } else {
          res.data.effects.forEach((item, index) => {
            let obj = {
              page: 1,
              loadMore: true,
              name: item.name,
              effectid: item.effectid,
              medList: []
            };
            this.tcmList.push(obj);
            this.getMedList(item.effectid, 1, index);
          });
        }
      }
    },
    async getMedList(effectid, pageid, index, load = true) {
      if (!load) return;
      let params = {
        effectid,
        pagesize: 12,
        pageid,
        searchtype: "",
        keyword: this.form.name,
        efficacy: this.form.gongxiao
      };
      let res = await getMedList(params);
      if (res.code == 0) {
        if (pageid <= res.data.TotalPageCount) {
          this.tcmList[index].loadMore = true;
          this.tcmList[index].medList = res.data.mats;
        } else {
          this.tcmList[index].loadMore = false;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.tcm {
  .total {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
    margin-bottom: 20px;

    span {
      color: #ff3a3a;
    }
  }

  .body {
    margin-top: 5px;
    padding: 10px 20px;
    background: #ffffff;
    border-radius: 5px;
    box-sizing: border-box;
    height: 74vh;
    overflow: auto;

    .item {
      width: 250px;
      margin-right: 30px;
      margin-bottom: 20px;
      background: #f9f9f9;
      border: 2px solid #9F643A;
      border-radius: 8px;

      .title {
        padding: 26px 0 19px;
        text-align: center;
        font-size: 26px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
      }

      .banner-body {
        height: 220px;
        background: #9F643A;
        color: #fff;
        padding: 0 32px;

        .left-btn {
          width: 10px;
          height: 150px;
          background: rgba($color: #fff, $alpha: 0.9);

          border-radius: 5px;

          img {
            width: 6px;
          }
        }

        .center {
          flex: 1;
          height: 180px;
          padding: 0 14px;

          ul {
            li {
              width: 50%;
              cursor: pointer;
              margin-bottom: 10px;

              span {
                width: 5px;
                height: 5px;
                background: #fff;
                border-radius: 50%;
                margin-right: 5px;
              }

              div {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }

              div:hover {
                color: #ff3a3a;
              }

              font-size: 16px;
              font-family: PingFang SC;
              font-weight: 400;
              color: #ffffff;
              list-style: square;
            }
          }
        }
      }
    }

    .findMore {
      background-color: #9F643A;
      color: #fff;
      text-align: center;
      padding-bottom: 20px;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .tcm {
    .body {
      height: 84vh;
    }
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .tcm {
    .body {
      height: 83vh;
    }
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .tcm {
    .body {
      height: 76vh;
    }
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .tcm {
    .body {
      height: 76vh;
    }
  }
}
</style>