新增资讯板块
This commit is contained in:
weipengfei
parent
b269a9dd88
commit
66a882a309
@ -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>
|
||||
@ -115,13 +115,15 @@
|
||||
{
|
||||
"path": "pages/news_list/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "资讯"
|
||||
"navigationBarTitleText": "资讯消息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/news_details/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "资讯详情"
|
||||
"navigationBarTitleText": ""
|
||||
|
||||
// "navigationBarTitleText": "资讯详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -30,7 +30,8 @@
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<shareInfo @setShareInfoStatus="setShareInfoStatus" :shareInfoStatus="shareInfoStatus"></shareInfo>
|
||||
<home></home>
|
||||
<!-- <home></home> -->
|
||||
<view style="height: 100rpx;"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user