com.kasite.client.uniapp.patient/pagesPatient/st1/business/priceInquiry/inquiryList/inquiryList.vue

<template>
  <view class="container">
    <view class="content">
      <view class="search">
        <view class="search_box">
          <input
            :class="isFocus ? 'search_input' : 'search_input_none'"
            placeholder="请输入搜索名称"
            :placeholder-class="isFocus ? 'placeholder' : 'placeholder_none'"
            :value="searchValue"
            @focus="focusFn('focus')"
            @input="setVal('searchValue', $event)"
          />
          <image
            class="search_icon"
            :class="{ search_icon_none: !isFocus }"
            :src="iconUrl.search"
          ></image>
          <image
            class="remove_icon"
            v-if="isFocus"
            :src="iconUrl.cha"
            @click.stop="focusFn('blur')"
          ></image>
          <view
            v-if="isFocus"
            class="search_confirm backgroundCustom_F08"
            :class="{ search_confirm_active: isFocus }"
            @click="searchClick"
            >搜索</view
          >
        </view>
      </view>
      <view class="content_list" v-if="!showNoData">
        <block v-for="(item, ind) in searchList" :key="ind">
          <view
            class="list_drug_box"
            @click="jumpQueryPatient(item)"
            v-if="type == 'pro'"
          >
            <view class="list-message">
              <view class="list-info-name">{{ item.ItemName }}</view>
              <view class="list-info-time">规格：{{ item.Unit }}</view>
            </view>
            <view class="list-key">{{ item.UnitPrice }}元</view>
          </view>
          <view
            class="list_project_box"
            @click="jumpQueryPatient(item)"
            v-else
          >
            <view class="box-name">
              <text class="title">{{ item.DrugName }}</text>
              <!--西药 western_color 中药 china_color  中成药 synthetic_color -->
              <text class="box-name-medicine ">{{
                item.DrugClassification
              }}</text>
            </view>
            <view class="box-time"
              >规格：{{ item.Specs }} 分类：{{ item.DrugType }}</view
            >
            <view class="box-company">{{ item.Manufacturer }}</view>
            <view class="box-money border_top">{{ item.UnitPrice }}元</view>
          </view>
        </block>
        <view class="public_loadAllTip" v-if="loadAll">已加载全部</view>
      </view>
      <view v-else class="noData">
        <noData :value="noDataValue"></noData>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useOnLoad, onReachBottom } from '@dcloudio/uni-app';
import { queryDrugList, queryExpensesItemList } from '@/pagesPatient/service/priceInquiry';
import { common } from '@/utils';
import icon from '@/utils/icon';
import noData from '@/pages/st1/components/noData/noData.vue';

const iconUrl = ref(icon);
const isFocus = ref(false);
const searchValue = ref('');
const searchList = ref<any[]>([]);
const type = ref('drug'); // drug:药品查询  pro:项目查询
const noDataValue = ref('暂无查询数据');
const showNoData = ref(false);
const loadAll = ref(false);
const pIndex = ref(1);

useOnLoad((options: any) => {
  type.value = options.type || '';
  main();
});

const main = async () => {
  queryList(searchValue.value, pIndex.value);
};

const searchClick = () => {
  loadAll.value = false;
  pIndex.value = 1;
  searchList.value = [];
  queryList(searchValue.value, pIndex.value);
};

const queryList = async (searchTxt: string, pageIndex: number) => {
  let queryData: any = {
    Page: {
      PIndex: pageIndex,
      PSize: 100,
    },
  };
  let resp: any;
  if (type.value == 'drug') {
    queryData.DrugName = searchTxt;
    resp = await queryDrugList(queryData);
  } else if (type.value == 'pro') {
    queryData.CostsItemName = searchTxt;
    resp = await queryExpensesItemList(queryData);
  }

  let list = searchList.value;
  if (!common.isEmpty(resp)) {
    list = list.concat(resp);
  }
  
  const currentRespLength = resp ? resp.length : 0;
  
  searchList.value = list;
  showNoData.value = list.length <= 0;
  pIndex.value = pIndex.value + 1;
  loadAll.value = list.length > 0 && currentRespLength < 10;
};

const focusFn = (eventType: string) => {
  if (eventType === 'focus') {
    isFocus.value = true;
  } else {
    isFocus.value = !isFocus.value;
    searchValue.value = '';
    searchList.value = [];
    queryList(searchValue.value, 1);
  }
};

const setVal = (key: string, event: any) => {
  const value = event.detail.value;
  if (key === 'searchValue') {
    searchValue.value = value;
  }
};

const jumpQueryPatient = (item: any) => {
  let queryBean = JSON.stringify(item);
  common.goToUrl(
    `/pagesPatient/st1/business/priceInquiry/inquiryDetails/inquiryDetails?queryBean=${queryBean}&type=${type.value}`
  );
};

onReachBottom(() => {
  if (loadAll.value || type.value == 'pro') {
    return;
  }
  if (searchList.value.length >= 10) {
    queryList(searchValue.value, pIndex.value);
  }
});
</script>

<style lang="scss">
/* Copied from search.wxss and inquiryList.wxss, converted rpx to upx */

/* 搜索框 */
.search {
  position: fixed;
  z-index: 2;
  height: 110upx;
  width: 100%;
  padding: 0 30upx 20upx;
  top: 0;
  left: 0;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.search_box {
  width: 100%;
  margin-top: 10upx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  z-index: 10;
}

.search_input_none {
  width: 690upx;
  height: 74upx;
  border-radius: 50px;
  font-size: 28upx;
  color: #333 !important;
  background: #f2f2f2;
  padding-left: 65upx;
  text-align: center;
}

.search_input {
  width: 570upx;
  height: 80upx;
  border-radius: 50px;
  font-size: 28upx;
  color: #333 !important;
  background: #F1F1F6;
  margin-right: 24upx;
  padding-left: 65upx;
  padding-right: 85upx;
}
.search_icon {
  width: 26upx;
  height: 26upx;
  position: absolute;
  top: 33%;
  left: 36%;
}
.search_icon_none {
  left: 20upx;
}
.remove_icon {
  width: 36upx;
  height: 36upx;
  position: absolute;
  top: 28%;
  right: 158upx;
  z-index: 50;
}
.search_btn {
  display: inline-block;
  width: 100upx;
  line-height: 56upx;
  text-align: center;
  font-size: 30upx;
  font-family: PingFang SC;
  margin-bottom: 28upx;
}

.search_confirm {
  width: 0;
  height: 68upx;
  border-radius: 50px;
  line-height: 68upx;
  text-align: center;
  transition: all 0.3s;
  font-size: 0;
}

.search_confirm_active {
  width: 128upx;
  font-size: 28upx;
}

/* inquiryList.wxss content */
.content_list {
  padding-top: 110upx;
}

/* 项目样式 */
.list_drug_box {
  margin: 30upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
  border-radius: 20upx;
  padding: 38upx 30upx 43upx;
  position: relative;
  display: box;
  display: -webkit-box;
}

.list_drug_box .list-message {
  width: 80%;
}

.list_drug_box .list-message .list-info-name {
  font-size: 30upx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  padding-bottom: 18upx;
  line-height: 24upx;
  word-break: break-all;
}

.list_drug_box .list-message .list-info-time {
  font-size: 28upx;
  font-weight: 400;
  color: rgba(166, 166, 166, 1);
}

.list_drug_box .list-key {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  font-size: 30upx;
  font-weight: 500;
  color: rgba(250, 72, 68, 1);
  width: 20%;
  text-align: right;
}

/* 药品样式 */
.list_project_box {
  margin: 30upx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.06);
  border-radius: 24upx;
  padding: 38upx 30upx 0;
}

.list_project_box .box-name {
  font-size: 30upx;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.list_project_box .box-name .box-name-medicine {
  float: right;
  font-size: 26upx;
  font-weight: 400;
  line-height: 48upx;
}

.china_color {
  color: #ff7800;
}

.western_color {
  color: #29cf8c;
}

.synthetic_color {
  color: #00a2fe;
}

.list_project_box .box-time {
  font-size: 28upx;
  font-weight: 400;
  color: rgba(85, 85, 85, 1);
  margin: 20upx 0;
}

.list_project_box .box-company {
  font-size: 28upx;
  font-weight: 400;
  color: #a6a6a6;
  margin-bottom: 28upx;
}

.list_project_box .box-money {
  font-size: 30upx;
  font-weight: 500;
  color: rgba(250, 72, 68, 1);
  padding: 28upx 0;
  text-align: right;
}

.box-name .title {
  width: 550upx;
  line-height: 48upx;
  flex-shrink: 0;
}
</style>