MedSmartApp/pages/category/medicine.vue

<template>
  <view class="category-container">
    <!-- 顶部搜索栏 -->
    <view class="search-bar">
      <view class="search-input">
        <text class="iconfont icon-search"></text>
        <input 
          v-model="searchKeyword" 
          placeholder="搜索药品名称或适应症" 
          placeholder-class="search-placeholder" 
          @confirm="searchDrugs"
        />
      </view>
    </view>
    
    <!-- 药品列表 -->
    <view class="medicine-list">
      <view 
        class="medicine-item" 
        v-for="medicine in medicineList.records" 
        :key="medicine.id"
        @click="viewMedicineDetail(medicine)"
      >
        <image 
          :src="medicine.imageUrl || '/static/default-drug.png'" 
          mode="aspectFill" 
          class="medicine-image" 
        />
        <view class="medicine-info">
          <text class="medicine-name">{{ medicine.drugName }}</text>
          <text class="medicine-desc">适应症：{{ medicine.indication }}</text>
          <text class="medicine-spec">规格：{{ medicine.specification }}</text>
        </view>
        <view class="medicine-stock">库存：{{ medicine.stockQuantity }}件</view>
      </view>
      
      <!-- 加载状态 -->
      <view v-if="isLoading" class="loading-tip">
        <text class="iconfont icon-loading"></text>
        <text>加载中...</text>
      </view>
      
      <!-- 空数据提示 -->
      <view v-if="!isLoading && medicineList.total === 0" class="no-data-tip">
        <image src="/static/no-data.png" mode="aspectFit" class="no-data-img" />
        <text>暂无符合条件的药品</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKeyword: '', // 搜索关键词
      medicineList: { records: [], total: 0 }, // 药品列表（包含分页信息）
      isLoading: false, // 加载状态
      pageNum: 1, // 当前页码
      pageSize: 10 // 每页显示数量
    };
  },

  methods: {
    /**
     * 搜索药品
     */
    searchDrugs() {
      this.pageNum = 1; // 重置页码
      this.fetchDrugs(); // 执行查询
    },

    /**
     * 获取药品列表
     */
    fetchDrugs() {
      if (this.isLoading) return; // 防止重复请求
      this.isLoading = true;

      uni.request({
        url: 'http://localhost:8080/drug/drugAll', // 后端接口地址
        method: 'POST',
        data: {
          pageNum: this.pageNum,
          pageSize: this.pageSize// 适应症和药名搜索合并到同一个关键词
        },
        success: (res) => {
          if (res.statusCode === 200 && res.data.code === 200) {
            this.medicineList = res.data.data; // 假设后端返回格式为{code: 200, data: PageInfo}
          } else {
            uni.showToast({
              title: res.data.msg || '查询失败',
              icon: 'none',
              duration: 1500
            });
          }
        },
        fail: (err) => {
          console.error('药品查询失败:', err);
          uni.showToast({
            title: '网络请求失败，请检查网络',
            icon: 'none',
            duration: 1500
          });
        },
        complete: () => {
          this.isLoading = false;
        }
      });
    },

    /**
     * 查看药品详情
     * @param {Object} medicine 药品信息
     */
    viewMedicineDetail(medicine) {
      uni.navigateTo({
        url: `/pages/medicine/detail?id=${medicine.id}`
      });
    }
  },

  // 页面加载时初始化查询
  onLoad() {
    this.fetchDrugs();
  }
}
</script>

<style scoped>
.category-container {
  background: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 80rpx;
}

.search-bar {
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.search-input {
  display: flex;
  align-items: center;
  height: 80rpx;
  background-color: #f8f8f8;
  border-radius: 40rpx;
  padding: 0 40rpx;
}

.search-input .iconfont {
  color: #999;
  font-size: 40rpx;
  margin-right: 30rpx;
}

.search-input input {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.medicine-list {
  padding: 30rpx 20rpx;
}

.medicine-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 10rpx 20rpx rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
}

.medicine-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10rpx;
  margin-right: 40rpx;
}

.medicine-info {
  flex: 1;
}

.medicine-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.medicine-desc {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.medicine-spec {
  font-size: 24rpx;
  color: #999;
}

.medicine-stock {
  font-size: 30rpx;
  color: #4a90e2;
  margin-left: 40rpx;
}

.loading-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200rpx;
  font-size: 32rpx;
  color: #999;
}

.no-data-tip {
  text-align: center;
  padding: 200rpx 30rpx;
  color: #999;
}

.no-data-img {
  width: 400rpx;
  height: 400rpx;
  margin: 0 auto 40rpx;
  opacity: 0.6;
}
</script>