新增资讯板块

components/recommend/index.vue

@@ -1,11 +1,11 @@
 <template>
 	<view class='recommend'>
-		<view class="common-hd">
+		<view class="common-hd" v-if="list.length>0">
 			<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/137f4202403091116454932.webp" mode=""></image>
 		</view>
 
 		<!-- nav导航 -->
-		<view class="nav" v-if="showTab">
+		<view class="nav" v-if="showTab&&list.length>0">
 			<view class="nav-item" @click="navTo('/pages/cloud_warehouse/home/home')">
 				<view class="nav-item-up">
 					<image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/c72bf202403191713119980.webp" mode=""></image>
@@ -35,6 +35,22 @@
 			</view>
 		</view>
     
+    <!-- 资讯 -->
+    <view v-if="showTab&&list.length>0" @click="navTo('/pages/news_list/index?type=20')" style="display: flex;justify-content: flex-end;padding-bottom: 16rpx;font-size: 26rpx;color: #333;">
+      更多资讯<u-icon name="arrow-right" color="#333"></u-icon>
+    </view>
+    <view class="information" v-if="showTab&&list.length>0">
+    	<view class="nav-item" @click="navTo(`/pages/news_details/index?id=${item.article_id}`)" v-for="(item, index) in list" :key="item.article_id">
+    		<view class="nav-item-up" style="overflow: hidden;">
+    			<image :src="item.image_input" mode="aspectFill"></image>
+    		</view>
+    		<view class="nav-item-down">
+    			<view class="nav-item-down-title">{{item.title}}</view>
+    			<view class="nav-item-down-desc">{{item.synopsis}}</view>
+    		</view>
+    	</view>
+    </view>
+
 		<!-- tab导航 -->
 		<view class="tabs" v-if="showTab">
 			<block v-for="(item,indx) in tabsArr" :key="indx">
@@ -65,6 +81,9 @@
 	import {
 		toLogin
 	} from '@/libs/login.js';
+  import {
+    getArticleList 
+  } from "@/api/api.js";
 	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
 	import {
 		HTTP_REQUEST_URL
@@ -119,11 +138,12 @@
 					desc: '特色农副',
 					val: 4
 				}],
-				currTabs: 1
+				currTabs: 1,
+        list: []
 			};
 		},
 		mounted() {
-
+      this.getArticleList();
 		},
 		methods: {
 			changeTab(e) {
@@ -137,6 +157,14 @@
             Toast('暂未开放')
           }
         })
+      },
+      getArticleList(){
+        getArticleList(20,{
+          page: 1,
+          limit: 3
+        }).then(res=>{
+          this.list = res.data.list;
+        })
       },
 			goDetail(item) {
 				goShopDetail(item, this.uid).then(res => {
@@ -189,17 +217,14 @@
 	// 里海云仓 供销云市场 名优特产
 	.nav {
 		display: flex;
-		margin-bottom: 40rpx;
+    justify-content: space-between;
+		margin-bottom: 20rpx;
 
 		.nav-item {
-			width: 33.3%;
+			width: 227rpx;
 			overflow: hidden;
 			border-radius: 20rpx;
 
-			&:not(:nth-last-child(1)) {
-				margin-right: 12rpx;
-			}
-
 			.nav-item-up {
 				width: 100%;
 				height: 198rpx;
@@ -237,6 +262,7 @@
 		justify-content: space-between;
     align-items: center;
 		margin: 0 -20rpx 30rpx;
+    padding-top: 20rpx;
 
 		.tabs-item {
 			width: 23%;
@@ -284,4 +310,54 @@
 	/deep/.looming-gray {
 		border-radius: 16rpx 16rpx 0 0;
 	}
+  
+  .information{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20rpx;
+    
+    .nav-item {
+    	width: 227rpx;
+    	overflow: hidden;
+    	border-radius: 20rpx;
+      position: relative;
+    
+    
+    	.nav-item-up {
+    		width: 100%;
+    		height: 227rpx;
+    
+    		image {
+    			width: 100%;
+    			height: 100%;
+    		}
+    	}
+    
+    	.nav-item-down {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 227rpx;
+        padding: 8rpx 2rpx 8rpx 14rpx;
+    		background: rgba(0, 0, 0, 0.4);
+    
+    		.nav-item-down-title {
+    			font-weight: 500;
+    			font-size: 26rpx;
+    			color: #FFFFFF;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+    		}
+    
+    		.nav-item-down-desc {
+    			font-size: 20rpx;
+    			color: #FFFFFF;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+    		}
+    	}
+    }
+  }
 </style>

pages.json

@@ -115,13 +115,15 @@
 		{
 			"path": "pages/news_list/index",
 			"style": {
-				"navigationBarTitleText": "资讯"
+				"navigationBarTitleText": "资讯消息"
 			}
 		},
 		{
 			"path": "pages/news_details/index",
 			"style": {
-				"navigationBarTitleText": "资讯详情"
+				"navigationBarTitleText": ""
+        
+				// "navigationBarTitleText": "资讯详情"
 			}
 		},
 		{

pages/news_details/index.vue

@@ -30,7 +30,8 @@
 			<!-- #endif -->
 		</view>
 		<shareInfo @setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></shareInfo>
-		<home></home>
+		<!-- <home></home> -->
+    <view style="height: 100rpx;"></view>
 	</view>
 </template>
 

pages/news_list/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class='newsList'>
-			<view class='swiper' v-if="imgUrls.length > 0">
+			<view class='swiper' v-if="imgUrls.length > 0" style="background-color: #fff;">
 				<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
 				 indicator-color="rgba(102,102,102,0.3)" indicator-active-color="#666">
 					<block v-for="(item,index) in imgUrls" :key="index">
@@ -13,7 +13,7 @@
 					</block>
 				</swiper>
 			</view>
-			<view class='nav' v-if="navList.length > 0">
+			<view class='nav' v-if="navList.length > 0" style="background-color: #fff;margin-top: 0;padding-top: 30rpx;">
 				<scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft" style="width:auto;overflow:hidden;">
 					<block v-for="(item,index) in navList" :key="index">
 						<view class='item' :class='active==item.article_category_id?"on":""' @click='tabSelect(item.article_category_id)'>
@@ -25,14 +25,24 @@
 			</view>
 			<view class='list'>
 				<block v-for="(item,index) in articleList" :key="index">
-					<navigator :url='"/pages/news_details/index?id="+item.article_id' hover-class='none' class='item acea-row row-between-wrapper'>
+					<navigator :url='"/pages/news_details/index?id="+item.article_id' hover-class='none' class='item acea-row row-between-wrapper my-card'
-						<view class='text acea-row row-column-between'>
+          :class="{'my-card0': index==0}">
+            <block v-if="index==0">
+              <image lazy-load style="width: 100%;height: 100%;" :src='item.image_input' mode="aspectFill"></image>
+              <view class="bottom-text">
                 <view class='name line2'>{{item.title}}</view>
-							<view>{{item.create_time}}</view>
+                <view style="color: #C4C4C4;font-size: 24rpx;padding-top: 10rpx;">{{URLdate(item.create_time)}}</view>
+              </view>
+            </block>
+						<block v-else>
+              <view class='text acea-row row-column-between' style="height: 100%;width: 550rpx;">
+              	<view class='name line2'>{{item.title}}</view>
+              	<view>{{URLdate(item.create_time)}}</view>
               </view>
               <view class='pictrue'>
-							<image :src='item.image_input'></image>
+              	<image lazy-load style="width: 100%;height: 100%;" :src='item.image_input' mode="aspectFill"></image>
               </view>
+            </block>
 					</navigator>
 				</block>
 			</view>
@@ -43,7 +53,7 @@
 				<view class="txt">暂无新闻信息~</view>
 			</view>
 		</view>
-		<home></home>
+		<!-- <home></home> -->
 	</view>
 </template>
 
@@ -80,7 +90,7 @@
 				navList: [],
 				active: 0,
 				page: 1,
-				limit: 8,
+				limit: 20,
 				status: false,
 				scrollLeft: 0
 			};
@@ -92,11 +102,15 @@
 		/**
 		 * 生命周期函数--监听页面显示
 		 */
-		onLoad: function() {
+		onLoad: function(options) {
-			this.getArticleCate();
       this.status = false;
       this.page = 1;
       this.articleList = [];	
+      if(options.type) {
+        this.active=options.type;
+        this.getCidArticle();
+      }
+			else this.getArticleCate();
 		},
 		/**
 		 * 页面上拉触底事件的处理函数
@@ -154,6 +168,19 @@
 					this.status = false;
 					this.getCidArticle();
 				}
+			},
+      URLdate(date){
+        // 创建一个 Date 对象来获取当前时间
+        const currentDate = new Date(date);
+        
+        // 获取年、月、日
+        const year = currentDate.getFullYear();
+        const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1并补零
+        const day = String(currentDate.getDate()).padStart(2, '0');
+        
+        // 格式化成 xxxx年xx月xx日 的格式
+        const formattedDate = `${year}年${month}月${day}日`;
+        return formattedDate;
       }
 		}
 	}
@@ -161,7 +188,7 @@
 
 <style lang="scss" scoped>
 	page {
-		background-color: #fff !important;
+		background-color: #f8f9fa !important;
 	}
 	.newsList .swiper {
 		width: 100%;
@@ -308,4 +335,30 @@
 			text-align: center;
 		}
 	}
+  .my-card{
+    background-color: #fff !important;
+    margin: 20rpx !important;
+    padding: 20rpx !important;
+    border-radius: 20rpx !important;
+    overflow: hidden;
+    height: 160rpx !important;
+    .pictrue{
+      height: 116rpx !important;
+      width: 116rpx !important;
+    }
+  }
+  .my-card0{
+    padding: 0 !important;
+    height: 478rpx !important;
+    position: relative;
+    .bottom-text{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 20rpx;
+    }
+  }
 </style>