Skip to content

肖康 / H5_2.0

Go to a project
Commit 2bc7ce15 by LJM
Options

css

parent a90ae592
Inline Side-by-side
Showing with 103 additions and 37 deletions
assets/css/mine/news.scss
.page-news { .page-news {
padding-top: 158rpx; padding-top: 88rpx;
background: linear-gradient(200deg, #d6e8ff 0%, #f5f5f7 277px); background: linear-gradient(200deg, #d6e8ff 0%, #f5f5f7 277px);
.icon-search { .icon-search {
font-size: 44rpx; font-size: 44rpx;
color: #484b59; 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 { .tab {
position: fixed; position: fixed;
top: 88rpx; top: 88rpx;
...@@ -62,8 +82,11 @@ ...@@ -62,8 +82,11 @@
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
display: block;
} }
.label { .label {
width: 80%;
flex-wrap: wrap;
.label-box { .label-box {
padding: 0 16rpx; padding: 0 16rpx;
height: 34rpx; height: 34rpx;
...@@ -73,11 +96,13 @@ ...@@ -73,11 +96,13 @@
font-size: 22rpx; font-size: 22rpx;
color: #23a8f6; color: #23a8f6;
margin-right: 14rpx; margin-right: 14rpx;
margin-bottom: 14rpx;
} }
} }
.time { .time {
font-size: 22rpx; font-size: 22rpx;
color: #919399; color: #919399;
white-space: nowrap;
} }
} }
&:last-child { &:last-child {
......
components/nav.vue
...@@ -49,6 +49,9 @@ export default { ...@@ -49,6 +49,9 @@ export default {
color: #292b33; color: #292b33;
text-align: center; text-align: center;
font-weight: 500; font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.bar { .bar {
width: 33.3%; width: 33.3%;
......
pages/mine/article.vue
...@@ -15,8 +15,8 @@ ...@@ -15,8 +15,8 @@
<view class="time">{{ detail.publish_time }}</view> <view class="time">{{ detail.publish_time }}</view>
</view> </view>
<view class="label row"> <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" @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" v-for="(item, index) in detail.function_tags" :key="index">{{ item.name }}</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>
<view class="content" v-html="detail.content"></view> <view class="content" v-html="detail.content"></view>
</view> </view>
...@@ -45,6 +45,7 @@ export default { ...@@ -45,6 +45,7 @@ export default {
data() { data() {
return { return {
title: '', title: '',
type_id: '',
detail: {}, detail: {},
searchParams: { searchParams: {
art_id: '' art_id: ''
...@@ -72,15 +73,30 @@ export default { ...@@ -72,15 +73,30 @@ export default {
}, },
methods: { methods: {
handleChangeTitle(e) { handleChangeTitle(e) {
console.log(e); uni.navigateTo({
url: '/news?type_id=' + this.type_id
});
}, },
open() { open() {
this.$refs.share.open('bottom'); 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() { getData() {
this.request(Api_Url + '/article/articleDetail', 'POST', this.searchParams, true, true).then(res => { this.request(Api_Url + '/article/articleDetail', 'POST', this.searchParams, true, true).then(res => {
if (res.err_code === 0) { if (res.err_code === 0) {
this.title = res.data.type_name; this.title = res.data.type_name;
this.type_id = res.data.type_id;
this.detail = res.data; this.detail = res.data;
} else { } else {
uni.showToast({ uni.showToast({
......
pages/mine/news.vue
<template> <template>
<view class="page-news"> <view class="page-news">
<navElement title="新闻资讯" @change="sortChange()"> <navElement :title="title" @change="sortChange()">
<template slot="title-bar"> <template slot="title-bar">
<view style="text-align: right;"><text class="iconfont icon-search"></text></view> <view style="text-align: right;"><text class="iconfont icon-search"></text></view>
</template> </template>
</navElement> </navElement>
<view class="tab"> <view class="uni-margin-wrap">
<text class="box" v-for="(item, index) in cat_list" :key="index" :class="{ curr: curr == index }" @click.stop="tab(index)">{{ item.cat_name }}</text> <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>
<view class="list" v-if="content_list.length > 0"> <view class="list" v-if="list.length > 0">
<a class="box column" :href="'/#/article/' + item.art_id" v-for="(item, index) in content_list" :key="index"> <view class="box column" v-for="(item, index) in list" :key="item.art_id">
<view class="pic"> <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="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="desc-bar row bothSide">
<view class="label row verCenter"> <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> </view>
<text class="time">{{ item.publish_time | formatDate }}</text> <text class="time">{{ item.publish_time }}</text>
</view> </view>
</view> </view>
</view> </view>
</a> </view>
</view> </view>
<view class="no-data column rowCenter verCenter" v-else> <view class="no-data column rowCenter verCenter" v-else>
<image src="../../static/nodate.png"></image> <image src="../../static/nodate.png"></image>
...@@ -40,20 +43,37 @@ export default { ...@@ -40,20 +43,37 @@ export default {
}, },
data() { data() {
return { return {
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
title: '',
mode: 'scaleToFill', mode: 'scaleToFill',
curr: 0, curr: 0,
cat_list: [], list: [],
content_list: [],
hasMoreData: true, //是否分页加载 hasMoreData: true, //是否分页加载
ad: [],
p: 1, p: 1,
limit: 30, limit: 30,
searchParams: { 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() { onShow() {
this.getData(); if (this.searchParams.tag_id || this.searchParams.function_tag_id) {
this.getData(true);
} else {
this.getData();
}
}, },
onReachBottom() { onReachBottom() {
if (!this.hasMoreData) { if (!this.hasMoreData) {
...@@ -62,20 +82,19 @@ export default { ...@@ -62,20 +82,19 @@ export default {
this.p++; this.p++;
this.getData(); 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: { 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
});
}
},
tab(index) { tab(index) {
this.curr = index; this.curr = index;
this.searchParams.cat_id = this.cat_list[index].cat_id; this.searchParams.cat_id = this.cat_list[index].cat_id;
...@@ -90,17 +109,20 @@ export default { ...@@ -90,17 +109,20 @@ export default {
* 重置 * 重置
*/ */
resetChange() { resetChange() {
this.content_list = []; this.list = [];
this.p = 1; this.p = 1;
}, },
getData() { getData(type) {
var params = Object.assign({}, this.searchParams, { p: this.p }, { limit: this.limit }); 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) { if (res.err_code === 0) {
this.cat_list = res.data.cat_list; if (!this.title) {
if (res.data.content_list.length > 0) { this.title = res.data.type_name;
}
this.ad = res.data.h5_news_ad;
if (res.data.list.length > 0) {
this.hasMoreData = true; this.hasMoreData = true;
this.content_list = this.content_list.concat(res.data.content_list); this.list = this.list.concat(res.data.list);
} else { } else {
this.hasMoreData = false; 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