attractor/attractor-ui/pages/work/search.vue

<template>
  <view class="search-page">
    <view class="search-top">
      <view class="search-bar">
        <uni-icons type="search" size="16" color="#6B7280"></uni-icons>
        <input
          class="search-input"
          v-model="keyword"
          placeholder="搜索公告标题、正文、标签"
          confirm-type="search"
          @confirm="onSearch"
        />
        <button v-if="keyword" class="clear-btn" @click="clearKeyword">×</button>
      </view>
      <text class="cancel" @click="goBack">取消</text>
    </view>

    <scroll-view class="result-list" scroll-y>
      <view v-if="filteredList.length === 0" class="empty-block">
        <text class="empty-title">未找到相关公告</text>
        <text class="empty-sub">试试更短关键词或更换标签词</text>
      </view>

      <view v-for="item in filteredList" :key="item.id" class="result-card">
        <view class="result-head">
          <text class="result-type">{{ item.type }}</text>
          <text class="result-time">{{ item.publishTime }}</text>
        </view>
        <text class="result-title">{{ item.title }}</text>
        <text class="result-content">{{ item.content }}</text>
        <view class="result-keyword-row" v-if="item.keywords && item.keywords.length">
          <text v-for="k in item.keywords" :key="k" class="result-keyword">#{{ k }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      announcementList: []
    }
  },
  computed: {
    filteredList() {
      const k = this.keyword.trim().toLowerCase()
      if (!k) return this.announcementList
      return this.announcementList.filter(item => {
        const keywordHit = Array.isArray(item.keywords)
          ? item.keywords.some(tag => (tag || '').toLowerCase().includes(k))
          : false
        return (
          (item.type || '').toLowerCase().includes(k) ||
          (item.title || '').toLowerCase().includes(k) ||
          (item.content || '').toLowerCase().includes(k) ||
          keywordHit
        )
      })
    }
  },
  onLoad() {
    const list = uni.getStorageSync('ANNOUNCEMENT_LIST')
    this.announcementList = Array.isArray(list) ? list : []
  },
  methods: {
    onSearch() {},
    clearKeyword() {
      this.keyword = ''
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.search-page {
  min-height: 100vh;
  background: #f4f6f9;
  padding: 18rpx;
  box-sizing: border-box;
}

.search-top {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.search-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10rpx;
  background: #ffffff;
  border: 1rpx solid #e5e7eb;
  border-radius: 14rpx;
  padding: 0 14rpx;
  height: 68rpx;
}

.search-input {
  flex: 1;
  font-size: 25rpx;
  color: #111827;
}

.clear-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 38rpx;
  line-height: 1;
  padding: 0;
}

.cancel {
  color: #0f766e;
  font-size: 25rpx;
}

.result-list {
  height: calc(100vh - 110rpx);
}

.result-card {
  background: #ffffff;
  border: 1rpx solid #edf2f7;
  border-radius: 16rpx;
  padding: 18rpx;
  margin-bottom: 12rpx;
}

.result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.result-type {
  font-size: 20rpx;
  color: #0f766e;
  background: #f0fdfa;
  border-radius: 8rpx;
  padding: 4rpx 8rpx;
}

.result-time {
  font-size: 20rpx;
  color: #9ca3af;
}

.result-title {
  display: block;
  font-size: 27rpx;
  color: #0f172a;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 8rpx;
}

.result-content {
  display: block;
  font-size: 24rpx;
  color: #334155;
  line-height: 1.6;
}

.result-keyword-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8rpx;
  margin-top: 10rpx;
}

.result-keyword {
  font-size: 20rpx;
  color: #0f766e;
  background: #f0fdfa;
  border-radius: 8rpx;
  padding: 3rpx 8rpx;
}

.empty-block {
  text-align: center;
  padding: 90rpx 0;
}

.empty-title {
  display: block;
  font-size: 28rpx;
  color: #64748b;
  margin-bottom: 10rpx;
}

.empty-sub {
  display: block;
  font-size: 22rpx;
  color: #94a3b8;
}
</style>