Skip to content

肖康 / H5_2.0

Go to a project
Commit 2bc7ce15 by LJM
Options

css

parent a90ae592
Inline Side-by-side
Showing with 101 additions and 35 deletions
assets/css/mine/news.scss
.page-news {
padding-top: 158rpx;
padding-top: 88rpx;
background: linear-gradient(200deg, #d6e8ff 0%, #f5f5f7 277px);
.icon-search {
font-size: 44rpx;
color: #484b59;
}
.uni-margin-wrap {
background-color: #ffffff;
padding: 0 24rpx;
height: 302rpx;
.swiper {
width: 100%;
height: 302rpx;
border-radius: 10px;
swiper-item {
width: 100%;
height: 302rpx;
border-radius: 10px;
image {
width: 100%;
height: 302rpx;
border-radius: 10rpx;
}
}
}
}
.tab {
position: fixed;
top: 88rpx;
......@@ -62,8 +82,11 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: block;
}
.label {
width: 80%;
flex-wrap: wrap;
.label-box {
padding: 0 16rpx;
height: 34rpx;
......@@ -73,11 +96,13 @@
font-size: 22rpx;
color: #23a8f6;
margin-right: 14rpx;
margin-bottom: 14rpx;
}
}
.time {
font-size: 22rpx;
color: #919399;
white-space: nowrap;
}
}
&:last-child {
......
components/nav.vue
......@@ -49,6 +49,9 @@ export default {
color: #292b33;
text-align: center;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bar {
width: 33.3%;
......
pages/mine/article.vue
......@@ -15,8 +15,8 @@
<view class="time">{{ detail.publish_time }}</view>
</view>
<view class="label row">
<view class="box row rowCenter verCenter" v-for="(item, index) in detail.tag" :key="item.tag_id">{{ item.tag }}</view>
<view class="box row rowCenter verCenter" v-for="(item, index) in detail.function_tags" :key="index">{{ item.name }}</view>
<view class="box row rowCenter verCenter" @click.stop="toUrl(item.tag_id, 1, item.tag)" v-for="(item, index) in detail.tag" :key="item.tag_id">{{ item.tag }}</view>
<view class="box row rowCenter verCenter" @click.stop="toUrl(item.function_tag_id, 2, item.name)" v-for="(item, index) in detail.function_tags" :key="index">{{ item.name }}</view>
</view>
<view class="content" v-html="detail.content"></view>
</view>
......@@ -45,6 +45,7 @@ export default {
data() {
return {
title: '',
type_id: '',
detail: {},
searchParams: {
art_id: ''
......@@ -72,15 +73,30 @@ export default {
},
methods: {
handleChangeTitle(e) {
console.log(e);
uni.navigateTo({
url: '/news?type_id=' + this.type_id
});
},
open() {
this.$refs.share.open('bottom');
},
toUrl(id, type, name) {
if (type == 1) {
uni.navigateTo({
url: '/news?tag_id=' + id + '&title=' + name
});
this.title = name;
} else if (type == 2) {
uni.navigateTo({
url: '/news?function_tag_id=' + id + '&title=' + name
});
}
},
getData() {
this.request(Api_Url + '/article/articleDetail', 'POST', this.searchParams, true, true).then(res => {
if (res.err_code === 0) {
this.title = res.data.type_name;
this.type_id = res.data.type_id;
this.detail = res.data;
} else {
uni.showToast({
......
pages/mine/news.vue
<template>
<view class="page-news">
<navElement title="新闻资讯" @change="sortChange()">
<navElement :title="title" @change="sortChange()">
<template slot="title-bar">
<view style="text-align: right;"><text class="iconfont icon-search"></text></view>
</template>
</navElement>
<view class="tab">
<text class="box" v-for="(item, index) in cat_list" :key="index" :class="{ curr: curr == index }" @click.stop="tab(index)">{{ item.cat_name }}</text>
<view class="uni-margin-wrap">
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item, index) in ad" :key="index"><image mode="aspectFill" :src="item.images" lazy-load="true"></image></swiper-item>
</swiper>
</view>
<view class="list" v-if="content_list.length > 0">
<a class="box column" :href="'/#/article/' + item.art_id" v-for="(item, index) in content_list" :key="index">
<view class="list" v-if="list.length > 0">
<view class="box column" v-for="(item, index) in list" :key="item.art_id">
<view class="pic">
<image mode="aspectFill" :src="item.litpic || 'https://img.ichunt.com/images/ichunt/202305/26/e512c97ccd155a504e972c7c27d75a35.jpg'" :mode="mode" lazy-load="true"></image>
<a :href="'/#/article/' + item.art_id"><image mode="aspectFill" :src="item.litpic || 'https://img.ichunt.com/images/ichunt/202305/26/e512c97ccd155a504e972c7c27d75a35.jpg'" :mode="mode" lazy-load="true"></image></a>
<view class="uni-text">
<view class="desc">{{ item.title }}</view>
<a class="desc" :href="'/#/article/' + item.art_id">{{ item.title }}</a>
<view class="desc-bar row bothSide">
<view class="label row verCenter">
<view v-for="(v, i) in item.tag" :key="i" class="label-box row rowCenter verCenter">{{ v.tag }}</view>
<view @click.stop="toUrl(v.tag_id, 1, v.tag)" v-for="(v, i) in item.tag" :key="v.tag_id" class="label-box row rowCenter verCenter">{{ v.tag }}</view>
<view style="border:1px solid #DBCD9D;color:#BBA65F;" @click.stop="toUrl(v.function_tag_id, 2, v.name)" v-for="(v, i) in item.function_tags" :key="v.function_tag_id" class="label-box row rowCenter verCenter">{{ v.name }}</view>
</view>
<text class="time">{{ item.publish_time }}</text>
</view>
<text class="time">{{ item.publish_time | formatDate }}</text>
</view>
</view>
</view>
</a>
</view>
<view class="no-data column rowCenter verCenter" v-else>
<image src="../../static/nodate.png"></image>
......@@ -40,20 +43,37 @@ export default {
},
data() {
return {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
title: '',
mode: 'scaleToFill',
curr: 0,
cat_list: [],
content_list: [],
list: [],
hasMoreData: true, //是否分页加载
ad: [],
p: 1,
limit: 30,
searchParams: {
cat_id: ''
tag_id: '',
type_id: '',
function_tag_id: ''
}
};
},
onLoad(options) {
this.searchParams.type_id = options.type_id || '';
this.searchParams.tag_id = options.tag_id || '';
this.searchParams.function_tag_id = options.function_tag_id || '';
this.title = options.title || '';
},
onShow() {
if (this.searchParams.tag_id || this.searchParams.function_tag_id) {
this.getData(true);
} else {
this.getData();
}
},
onReachBottom() {
if (!this.hasMoreData) {
......@@ -62,20 +82,19 @@ export default {
this.p++;
this.getData();
},
filters: {
formatDate(value) {
// 过滤器函数
const date = new Date(value * 1000);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
const hour = ('0' + date.getHours()).slice(-2);
const minute = ('0' + date.getMinutes()).slice(-2);
const second = ('0' + date.getSeconds()).slice(-2);
return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
methods: {
toUrl(id, type, name) {
if (type == 1) {
uni.navigateTo({
url: '/news?tag_id=' + id + '&title=' + name
});
this.title = name;
} else if (type == 2) {
uni.navigateTo({
url: '/news?function_tag_id=' + id + '&title=' + name
});
}
},
methods: {
tab(index) {
this.curr = index;
this.searchParams.cat_id = this.cat_list[index].cat_id;
......@@ -90,17 +109,20 @@ export default {
* 重置
*/
resetChange() {
this.content_list = [];
this.list = [];
this.p = 1;
},
getData() {
getData(type) {
var params = Object.assign({}, this.searchParams, { p: this.p }, { limit: this.limit });
this.request(Api_Url + '/Article/Article/index', 'POST', params, true, true).then(res => {
this.request(Api_Url + '/article/getArticleList', 'POST', params, true, true).then(res => {
if (res.err_code === 0) {
this.cat_list = res.data.cat_list;
if (res.data.content_list.length > 0) {
if (!this.title) {
this.title = res.data.type_name;
}
this.ad = res.data.h5_news_ad;
if (res.data.list.length > 0) {
this.hasMoreData = true;
this.content_list = this.content_list.concat(res.data.content_list);
this.list = this.list.concat(res.data.list);
} else {
this.hasMoreData = false;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment