guoxue-mp/pages/index/index.vue

<template>
  <view class="discover-page" :style="{paddingTop: paddingTop}">
    <view class="blur-bg"></view>

    <view class="header-area">
      <view class="status-bar">
        <text class="header-title">发现</text>
      </view>

      <view class="search-section">
        <view class="search-input">
          <u-icon name="search" size="28" color="#9EA3B0"></u-icon>
          <input
            class="search-field"
            v-model="searchKeyword"
            placeholder="请输入关键词搜索"
            placeholder-class="placeholder"
            confirm-type="search"
            @confirm="handleSearch"
          />
        </view>
        <view class="search-btn" @click="handleSearch">搜索</view>
      </view>

      <scroll-view class="category-scroll" scroll-x="true" enable-flex>
        <view
          class="category-item"
          v-for="item in categories"
          :key="item"
          :class="{ active: currentCategory === item.categoryId }"
          @click="selectCategory(item)"
        >
          {{ item.title }}
        </view>
      </scroll-view>
    </view>

    <view class="card-grid">
      <view
        class="discover-card"
        v-for="card in cardList"
        :key="card.articleId"
        @click="goToDetail(card)"
      >
        <image class="card-cover" :src="`${card.image}`" mode="aspectFill"></image>
        <view class="card-title">{{ card.title }}</view>
        <view class="card-desc">{{ card.source }}</view>
      </view>
    </view>

    <view class="indicator">
      <view
        v-for="dotIndex in indicatorDots"
        :key="dotIndex"
        class="dot"
        :class="{ active: dotIndex - 1 === activeIndicator }"
      ></view>
    </view>
  </view>
</template>

<script>
import {dictDataReq, listArticleCateReq, listArticleReq} from "@/api/common";
import {getUserInfo} from "@/util/user";
import {chatListReq} from "@/api/chat";
import {coinAddReq} from "@/api/coin";

export default {
  data() {
    return {
      searchKeyword: '',
      categories: [],
      currentCategory: null,
      indicatorDots: 2,
      activeIndicator: 0,
      paddingTop: '100px',
      cardList: []
    }
  },
  methods: {
    async getCategories() {
      const {data} = await listArticleCateReq()
      this.categories = [{categoryId: null, title: '全部'}, ...data]
      await this.getArticleList()
    },
    selectCategory(category) {
      this.currentCategory = category.categoryId
      this.getArticleList()
    },
    async getArticleList() {
      const {data} = await listArticleReq({
        categoryId: this.currentCategory,
        title: this.searchKeyword ?? null
      })
      this.cardList = data
      // console.log(this.cardList)
    },
    goToDetail(card) {
      const targetId = card && card.articleId ? card.articleId : ''
      uni.navigateTo({
        url: `/pages/index/detail?id=${targetId}`
      })
    },
    handleSearch() {
      const keyword = this.searchKeyword.trim()
      this.getCategories()
    },
    async getMessageList() {
      const res = await chatListReq()
      this.messageList = res.data
      if (!this.messageList.length) this.toSelect()
    },
    toSelect(){
      if (!uni.getStorageSync('forceNoJump'))
        uni.navigateTo({url: '/pages/chat/select'})
    }
  },
  onShow() {
    this.paddingTop = uni.getSystemInfoSync().statusBarHeight + 40 + 'px'
    this.getCategories()
    if (!getUserInfo().token) {
      this.toSelect()
    } else {
      this.getMessageList()
    }
  },
  onShareTimeline() {
    coinAddReq({
      type: '+',
      desc: '分享获得',
      num: 1
    })
    return {
      title: '简幸',
      path: '/pages/index/index'
    }
  },
  onShareAppMessage() {
    coinAddReq({
      type: '+',
      desc: '分享获得',
      num: 1
    })
    return {
      title: '简幸',
      path: '/pages/index/index'
    }
  },
}
</script>

<style lang="scss" scoped>
.discover-page {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(180deg, #e4f0ff 0%, #f4f3ff 45%, #fef9ff 100%);
  padding: 40rpx 30rpx 80rpx;
  box-sizing: border-box;
}

.blur-bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 220rpx;
  background: rgba(255, 255, 255, 0.7);
  filter: blur(30rpx);
  z-index: 0;
}

.header-area {
  position: relative;
  z-index: 1;
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20rpx;
}

.header-title {
  font-size: 38rpx;
  font-weight: 600;
  color: #151515;
}

.header-icons {
  display: flex;
  align-items: center;
}

.header-icon-gap {
  margin-left: 15rpx;
}

.search-section {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
  gap: 20rpx;
}

.search-input {
  flex: 1;
  height: 76rpx;
  border-radius: 48rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 28rpx;
  box-shadow: 0 8rpx 30rpx rgba(124, 157, 255, 0.2);
}

.search-field {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  margin-left: 12rpx;
}

.placeholder {
  color: #9EA3B0;
}

.search-btn {
  width: 140rpx;
  height: 76rpx;
  border-radius: 50rpx;
  background: linear-gradient(120deg, #5fb3f0, #8b7df0);
  color: #fff;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}

.category-scroll {
  margin-top: 30rpx;
  white-space: nowrap;
}

.category-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  padding: 0 32rpx;
  border-radius: 40rpx;
  font-size: 26rpx;
  color: #7a7d85;
  background-color: rgba(255, 255, 255, 0.6);
  margin-right: 20rpx;
}

.category-item.active {
  color: #111;
  font-weight: 600;
  background: #fff;
  box-shadow: 0 8rpx 20rpx rgba(130, 152, 255, 0.25);
}

.card-grid {
  position: relative;
  z-index: 1;
  margin-top: 40rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.discover-card {
  width: calc(50% - 12rpx);
  margin-bottom: 30rpx;
  border-radius: 26rpx;
  background-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10rpx 30rpx rgba(133, 149, 255, 0.2);
  padding: 16rpx 18rpx 26rpx;
  box-sizing: border-box;
}

.card-cover {
  width: 100%;
  height: 260rpx;
  border-radius: 20rpx;
  margin-bottom: 18rpx;
}

.card-title {
  font-size: 28rpx;
  color: #1f1f1f;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12rpx;
}

.card-desc {
  font-size: 24rpx;
  color: #6b6f7a;
  line-height: 1.4;
}

.indicator {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.15);
  margin: 0 8rpx;
}

.dot.active {
  width: 28rpx;
  border-radius: 8rpx;
  background-color: #151515;
}
</style>