Initial commit of akmon project
This commit is contained in:
218
pages/mt/list-news.uvue
Normal file
218
pages/mt/list-news.uvue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<list-view style="flex: 1;" refresher-enabled=true @refresherrefresh="onRefresherrefresh"
|
||||
:refresher-triggered="refresherTriggered" enable-back-to-top="true">
|
||||
<list-item class="banner" @click="bannerClick(banner)" type=1>
|
||||
<image class="banner-img" :src="banner.cover"></image>
|
||||
<text class="banner-title">{{ banner.title }}</text>
|
||||
</list-item>
|
||||
<sticky-header>
|
||||
<view
|
||||
style="width: 100%;height:44px;background-color: #f5f5f5;flex-direction: row;justify-content:center;align-items:center;">
|
||||
<text v-for="(name,index) in th_item" :key="index" @click="clickTH(index)" style="margin-right: 20px;">
|
||||
{{name}}
|
||||
</text>
|
||||
</view>
|
||||
</sticky-header>
|
||||
<list-item v-for="(value, index) in listData" :key="index" type=2>
|
||||
<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value, index)">
|
||||
<view class="uni-media-list">
|
||||
<share-element :share-key="'image_'+index">
|
||||
<image class="uni-media-list-logo" :src="value.cover"></image>
|
||||
</share-element>
|
||||
<view class="uni-media-list-body">
|
||||
<text class="uni-media-list-text-top">{{ value.title }}</text>
|
||||
<view class="uni-media-list-text-bottom">
|
||||
<text class="uni-media-list-text">{{ value.author_name }}</text>
|
||||
<text class="uni-media-list-text">{{ value.published_at }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</list-item>
|
||||
</list-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
type Banner = {
|
||||
cover : string | null,
|
||||
title : string | null,
|
||||
post_id : string | null
|
||||
}
|
||||
type Item = {
|
||||
author_name : string,
|
||||
cover : string,
|
||||
id : number,
|
||||
post_id : string,
|
||||
published_at : string,
|
||||
title : string
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
th_item: ["排序", "筛选"],
|
||||
refresherTriggered: false,
|
||||
banner: {} as Banner,
|
||||
listData: [] as Item[],
|
||||
last_id: '',
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getBanner();
|
||||
this.getList();
|
||||
},
|
||||
onUnload() {
|
||||
},
|
||||
methods: {
|
||||
getBanner() {
|
||||
let data = {
|
||||
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
|
||||
};
|
||||
uni.request<Banner>({
|
||||
url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
|
||||
data: data,
|
||||
success: data => {
|
||||
this.refresherTriggered = false
|
||||
if (data.statusCode == 200) {
|
||||
const result = data.data
|
||||
if (result != null) {
|
||||
this.banner = result;
|
||||
}
|
||||
}
|
||||
},
|
||||
fail: (e) => {
|
||||
console.log('fail', e);
|
||||
}
|
||||
});
|
||||
},
|
||||
getList() {
|
||||
let url = "https://unidemo.dcloud.net.cn/api/news?column=id,post_id,title,author_name,cover,published_at";
|
||||
/* if (this.last_id != "") {
|
||||
const minId = parseInt((this.last_id))
|
||||
const time = new Date().getTime() + '';
|
||||
const pageSize = 10;
|
||||
url = url + "&minId=" + minId + "&time=" + time + "&pageSize=" + pageSize;
|
||||
} */
|
||||
|
||||
uni.request<Item[]>({
|
||||
url: url,
|
||||
method: "GET",
|
||||
success: (res) => {
|
||||
if (res.statusCode == 200) {
|
||||
console.log(res);
|
||||
const result = res.data
|
||||
if (result != null) {
|
||||
this.listData = result //因本接口没有更多分页数据，所以重新赋值。正常有分页的列表应该如下面push方式增加数组项
|
||||
// this.listData.push(...result)
|
||||
// this.last_id = this.listData[0].id + "";
|
||||
}
|
||||
this.refresherTriggered = false;
|
||||
}
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('fail', res);
|
||||
this.refresherTriggered = false
|
||||
}
|
||||
});
|
||||
},
|
||||
goDetail(e : Item, key : number) {
|
||||
const detail = e;
|
||||
const post_id = detail.post_id;
|
||||
let cover = detail.cover;
|
||||
// #ifdef APP-ANDROID
|
||||
cover = btoa(cover);
|
||||
// #endif
|
||||
const title = detail.title;
|
||||
uni.navigateTo({
|
||||
url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title +"&shareKey=image_"+key
|
||||
});
|
||||
},
|
||||
bannerClick(e : Banner) {
|
||||
const detail = e;
|
||||
const post_id = detail.post_id;
|
||||
let cover = detail.cover ?? "";
|
||||
// #ifdef APP-ANDROID
|
||||
cover = btoa(cover);
|
||||
// #endif
|
||||
const title = detail.title;
|
||||
uni.navigateTo({
|
||||
url: '/pages/template/list-news/detail/detail?post_id=' + post_id + "&cover=" + cover + "&title=" + title
|
||||
});
|
||||
},
|
||||
clickTH(index : number) {
|
||||
uni.showModal({
|
||||
content: "点击表头项：" + index,
|
||||
showCancel: false
|
||||
});
|
||||
},
|
||||
onRefresherrefresh() {
|
||||
this.refresherTriggered = true
|
||||
this.getBanner();
|
||||
this.getList();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.banner {
|
||||
height: 180px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
max-height: 42px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
bottom: 15px;
|
||||
width: 90%;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 21px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.uni-media-list {
|
||||
padding: 11px 15px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-media-list-logo {
|
||||
width: 90px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.uni-media-list-body {
|
||||
flex: 1;
|
||||
padding-left: 7px;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.uni-media-list-text-top {
|
||||
/* height: 37px; */
|
||||
font-size: 14px;
|
||||
lines: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-media-list-text-bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.uni-media-list-text {
|
||||
color: #9D9D9F;
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user