1

pages/search_common/search.vue

@@ -14,7 +14,6 @@
             confirm-type="search" 
             @confirm="handleSearch"
           />
-          <!-- <view v-if="keyword" class="clear-icon" @tap="clearSearch">✕</view> -->
           <text class="search-btn" @tap="handleSearch">搜索</text>
         </view>
       </view>
@@ -24,6 +23,24 @@
 
     <view class="result-container">
       
+      <view class="sort-bar" v-if="['brand', 'skill', 'collection_brand', 'collection_course'].includes(searchType)">
+        <view class="sort-item" @tap="toggleSort('time')">
+          <text class="sort-text" :class="{ active: orderType === 1 || orderType === 2 }">发布时间</text>
+          <view class="arrows">
+            <image class="arrow-icon" :src="orderType === 1 ? iconPinkUp : iconGreyUp"></image>
+            <image class="arrow-icon" :src="orderType === 2 ? iconPinkDown : iconGreyDown"></image>
+          </view>
+        </view>
+        
+        <view class="sort-item" @tap="toggleSort('view')">
+          <text class="sort-text" :class="{ active: orderType === 3 || orderType === 4 }">浏览量</text>
+          <view class="arrows">
+            <image class="arrow-icon" :src="orderType === 3 ? iconPinkUp : iconGreyUp"></image>
+            <image class="arrow-icon" :src="orderType === 4 ? iconPinkDown : iconGreyDown"></image>
+          </view>
+        </view>
+      </view>
+
       <view v-if="loading && page === 1" class="loading-tips">加载中...</view>
       
       <view v-else-if="searchType === 'notice' && resultList.length > 0">
@@ -95,7 +112,16 @@ export default {
       // 分页相关
       page: 1,
       limit: 10,
-      hasMore: true
+      hasMore: true,
+
+      // 排序参数 1/2发布时间 3/4浏览量
+      orderType: 1, 
+      
+      // 排序图标资源
+      iconGreyUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/e00ab2ac-bccf-42d8-820c-65727327e279.png',
+      iconGreyDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dfffb601-6877-4608-a3eb-88695b05c6c2.png',
+      iconPinkUp: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5bc84dff-e120-4d4b-a33e-25d68e065654.png',
+      iconPinkDown: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ff2c2c9d-694a-4adf-b737-66b07f4a63ae.png',
     };
   },
   computed: {
@@ -138,6 +164,22 @@ export default {
       this.hasMore = true;
     },
 
+    // 切换排序
+    toggleSort(type) {
+      if (type === 'time') {
+        this.orderType = this.orderType === 1 ? 2 : 1;
+      } else if (type === 'view') {
+        this.orderType = this.orderType === 3 ? 4 : 3;
+      }
+      
+      // 如果已经输入了关键词并搜索过，切换排序直接重新加载当前结果
+      if (this.hasSearched) {
+        this.page = 1;
+        this.hasMore = true;
+        this.loadData(true);
+      }
+    },
+
     handleSearch() {
       if (!this.keyword.trim()) {
         return uni.showToast({ title: '请输入搜索内容', icon: 'none' });
@@ -155,6 +197,11 @@ export default {
         let apiUrl = '';
         let params = { page: this.page, limit: this.limit };
 
+        // 给支持排序的接口加上排序参数
+        if (['brand', 'skill', 'collection_brand', 'collection_course'].includes(this.searchType)) {
+          params.order_type = this.orderType;
+        }
+
         switch (this.searchType) {
           case 'notice':
             apiUrl = '/sj/notice/list';
@@ -261,7 +308,7 @@ export default {
   top: 0;
   left: 0;
   right: 0;
-  background-color: #F5F5F5;
+  background-color: #Fff;
   z-index: 999;
   
   .header-content {
@@ -279,7 +326,7 @@ export default {
     .search-box {
       flex: 1;
       height: 74rpx;
-      background: #fff;
+      background: #f5f5f5;
       border-radius: 37rpx;
       display: flex;
       align-items: center;
@@ -317,6 +364,46 @@ export default {
   padding: 24rpx;
 }
 
+/* ================= 排序栏新增样式 ================= */
+.sort-bar {
+  display: flex;
+  align-items: center;
+  padding: 10rpx 0 24rpx; /* 根据结果页面适当微调顶部间距 */
+  gap: 60rpx;
+  
+  .sort-item {
+    display: flex;
+    align-items: center;
+    
+    .sort-text {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: #666666;
+      line-height: 37rpx;
+      margin-right: 6rpx;
+      
+      &.active {
+        color: #FF4767;
+        font-weight: 500;
+      }
+    }
+    
+    .arrows {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      
+      .arrow-icon {
+        width: 14rpx;
+        height: 8rpx;
+        margin: 2rpx 0;
+      }
+    }
+  }
+}
+/* ============================================== */
+
 .loading-tips {
   text-align: center;
   padding: 100rpx 0;