gupiao-web/src/components/StockListCard.vue

<template>
  <view class="card stock-list-card">
    <text class="card-title">搜索结果</text>

    <view v-if="loading" class="loading-container">
      <text class="loading-text">加载中...</text>
    </view>

    <view v-else-if="errorMsg" class="error-container">
      <text class="error-text">{{ errorMsg }}</text>
    </view>

    <view v-else-if="stocks && stocks.length > 0" class="stock-list">
      <view
        v-for="stock in stocks"
        :key="stock.stockCode"
        class="stock-item"
        @click="handleStockClick(stock)"
      >
        <view class="stock-info">
          <text class="stock-name">{{ stock.stockName }}</text>
          <text class="stock-code">{{ stock.stockCode }}</text>
        </view>
        <view class="stock-meta">
          <text v-if="stock.market" class="stock-market">{{ stock.market }}</text>
          <text v-if="stock.score !== undefined" class="stock-score">
            评分: {{ stock.score }}
          </text>
        </view>
      </view>

      <view v-if="hasMore" class="load-more" @click="handleLoadMore">
        <text class="load-more-text">{{ loadingMore ? '加载中...' : '加载更多' }}</text>
      </view>

      <view v-else class="no-more">
        <text class="no-more-text">没有更多数据了</text>
      </view>
    </view>

    <view v-else class="empty-container">
      <text class="empty-text">暂无搜索结果</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  loadingMore: {
    type: Boolean,
    default: false
  },
  errorMsg: {
    type: String,
    default: ''
  },
  stocks: {
    type: Array,
    default: () => []
  },
  hasMore: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['stockClick', 'loadMore'])

const handleStockClick = (stock) => {
  emit('stockClick', stock)
}

const handleLoadMore = () => {
  if (!props.loadingMore) {
    emit('loadMore')
  }
}
</script>

<style scoped>
.card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
  margin-bottom: 32rpx;
}

.stock-list-card {
  margin-top: 16rpx;
}

.card-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #222222;
  margin-bottom: 24rpx;
}

.loading-container,
.error-container,
.empty-container {
  padding: 80rpx 0;
  text-align: center;
}

.loading-text {
  font-size: 28rpx;
  color: #9ca2b5;
}

.error-text {
  font-size: 28rpx;
  color: #ff6b6b;
}

.empty-text {
  font-size: 28rpx;
  color: #9ca2b5;
}

.stock-list {
  display: flex;
  flex-direction: column;
}

.stock-item {
  padding: 24rpx;
  background: #f7f8fc;
  border-radius: 16rpx;
  margin-bottom: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
}

.stock-item:active {
  background: #eef0f6;
  transform: scale(0.98);
}

.stock-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.stock-name {
  font-size: 30rpx;
  font-weight: 600;
  color: #222222;
  margin-bottom: 8rpx;
}

.stock-code {
  font-size: 24rpx;
  color: #9ca2b5;
}

.stock-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.stock-market {
  font-size: 22rpx;
  color: #5d55e8;
  background: rgba(93, 85, 232, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-bottom: 8rpx;
}

.stock-score {
  font-size: 26rpx;
  font-weight: 600;
  color: #5d55e8;
}

.load-more {
  padding: 32rpx 0;
  text-align: center;
}

.load-more-text {
  font-size: 28rpx;
  color: #5d55e8;
}

.no-more {
  padding: 32rpx 0;
  text-align: center;
}

.no-more-text {
  font-size: 24rpx;
  color: #9ca2b5;
}
</style>