From 66a882a309c927736b340d2d273b5c40201fe946 Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Wed, 27 Mar 2024 13:48:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B5=84=E8=AE=AF=E6=9D=BF?=
=?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/recommend/index.vue | 96 ++++++++++++++++++++++++++++++----
pages.json | 6 ++-
pages/news_details/index.vue | 3 +-
pages/news_list/index.vue | 91 +++++++++++++++++++++++++-------
4 files changed, 164 insertions(+), 32 deletions(-)
diff --git a/components/recommend/index.vue b/components/recommend/index.vue
index 7a518e4..68efb0f 100644
--- a/components/recommend/index.vue
+++ b/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>
@@ -34,6 +34,22 @@
</view>
</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">
@@ -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>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 62fe083..b6aa7ec 100644
--- a/pages.json
+++ b/pages.json
@@ -115,13 +115,15 @@
{
"path": "pages/news_list/index",
"style": {
- "navigationBarTitleText": "资讯"
+ "navigationBarTitleText": "资讯消息"
}
},
{
"path": "pages/news_details/index",
"style": {
- "navigationBarTitleText": "资讯详情"
+ "navigationBarTitleText": ""
+
+ // "navigationBarTitleText": "资讯详情"
}
},
{
diff --git a/pages/news_details/index.vue b/pages/news_details/index.vue
index b42b335..1e4bddb 100644
--- a/pages/news_details/index.vue
+++ b/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>
diff --git a/pages/news_list/index.vue b/pages/news_list/index.vue
index c960cf3..58f6433 100644
--- a/pages/news_list/index.vue
+++ b/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'>
- <view class='text acea-row row-column-between'>
- <view class='name line2'>{{item.title}}</view>
- <view>{{item.create_time}}</view>
- </view>
- <view class='pictrue'>
- <image :src='item.image_input'></image>
- </view>
+ <navigator :url='"/pages/news_details/index?id="+item.article_id' hover-class='none' class='item acea-row row-between-wrapper my-card'
+ :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 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 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() {
- this.getArticleCate();
- this.status = false;
- this.page = 1;
- this.articleList = [];
+ onLoad: function(options) {
+ this.status = false;
+ this.page = 1;
+ this.articleList = [];
+ if(options.type) {
+ this.active=options.type;
+ this.getCidArticle();
+ }
+ else this.getArticleCate();
},
/**
* 页面上拉触底事件的处理函数
@@ -154,14 +168,27 @@
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;
+ }
}
}
</script>
<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>