Skip to content

Commit bebb2c6

Browse files
dcloudhdxdcloudhdx
committed
update: 列表到详情增加广告
1 parent f040929 commit bebb2c6

File tree

2 files changed

+166
-153
lines changed

2 files changed

+166
-153
lines changed

‎main.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ Vue.prototype.$backgroundAudioData = {
1313
playing: false,
1414
playTime: 0,
1515
formatedPlayTime: '00:00:00'
16-
}
16+
}
17+
Vue.prototype.$adpid = "1111111111"
1718

1819
Vue.component('page-head', pageHead)
1920
Vue.component('page-foot', pageFoot)

‎pages/template/list2detail-list/list2detail-list.vue

Lines changed: 164 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -5,184 +5,196 @@
55
<view class="banner-title">{{ banner.title }}</view>
66
</view>
77
<view class="uni-list">
8-
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
9-
<view class="uni-media-list">
10-
<image class="uni-media-list-logo" :src="value.cover"></image>
11-
<view class="uni-media-list-body">
12-
<view class="uni-media-list-text-top">{{ value.title }}</view>
13-
<view class="uni-media-list-text-bottom">
14-
<text>{{ value.author_name }}</text>
15-
<text>{{ value.published_at }}</text>
8+
<block v-for="(value, index) in listData" :key="index">
9+
<view class="uni-list-cell" hover-class="uni-list-cell-hover" @click="goDetail(value)">
10+
<view class="uni-media-list">
11+
<image class="uni-media-list-logo" :src="value.cover"></image>
12+
<view class="uni-media-list-body">
13+
<view class="uni-media-list-text-top">{{ value.title }}</view>
14+
<view class="uni-media-list-text-bottom">
15+
<text>{{ value.author_name }}</text>
16+
<text>{{ value.published_at }}</text>
17+
</view>
1618
</view>
1719
</view>
1820
</view>
19-
</view>
21+
<!-- #ifdef APP-PLUS -->
22+
<view class="ad-view" v-if="(index > 0 && (index+1) % 10 == 0)">
23+
<ad :adpid="adpid" @error="aderror"></ad>
24+
</view>
25+
<!-- #endif -->
26+
</block>
2027
</view>
21-
<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
28+
<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
2229
</view>
2330
</template>
2431

2532
<script>
26-
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
27-
var dateUtils = require('../../../common/util.js').dateUtils;
33+
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
34+
var dateUtils = require('../../../common/util.js').dateUtils;
2835
29-
export default {
30-
components: {
31-
uniLoadMore
32-
},
33-
data() {
34-
return {
35-
banner: {},
36-
listData: [],
37-
last_id: '',
38-
reload: false,
39-
status: 'more',
40-
contentText: {
41-
contentdown: '上拉加载更多',
42-
contentrefresh: '加载中',
43-
contentnomore: '没有更多'
44-
}
45-
};
46-
},
47-
onLoad() {
48-
this.getBanner();
49-
this.getList();
50-
},
51-
onPullDownRefresh() {
52-
this.reload = true;
53-
this.last_id = '';
54-
this.getBanner();
55-
this.getList();
56-
},
57-
onReachBottom() {
58-
this.status = 'more';
59-
this.getList();
60-
},
61-
methods: {
62-
getBanner() {
63-
let data = {
64-
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
65-
};
66-
uni.request({
67-
url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
68-
data: data,
69-
success: data => {
70-
uni.stopPullDownRefresh();
71-
if (data.statusCode == 200) {
72-
this.banner = data.data;
73-
}
74-
},
75-
fail: (data, code) => {
76-
console.log('fail' + JSON.stringify(data));
77-
}
78-
});
36+
export default {
37+
components: {
38+
uniLoadMore
7939
},
80-
getList() {
81-
var data = {
82-
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
83-
};
84-
if (this.last_id) {
85-
//说明已有数据，目前处于上拉加载
86-
this.status = 'loading';
87-
data.minId = this.last_id;
88-
data.time = new Date().getTime() + '';
89-
data.pageSize = 10;
90-
}
91-
uni.request({
92-
url: 'https://unidemo.dcloud.net.cn/api/news',
93-
data: data,
94-
success: data => {
95-
if (data.statusCode == 200) {
96-
let list = this.setTime(data.data);
97-
this.listData = this.reload ? list : this.listData.concat(list);
98-
this.last_id = list[list.length - 1].id;
99-
this.reload = false;
100-
}
101-
},
102-
fail: (data, code) => {
103-
console.log('fail' + JSON.stringify(data));
40+
data() {
41+
return {
42+
banner: {},
43+
listData: [],
44+
last_id: '',
45+
reload: false,
46+
status: 'more',
47+
adpid: '',
48+
contentText: {
49+
contentdown: '上拉加载更多',
50+
contentrefresh: '加载中',
51+
contentnomore: '没有更多'
10452
}
105-
});
106-
},
107-
goDetail: function(e) {
108-
// if (!/前|刚刚/.test(e.published_at)) {
109-
// e.published_at = dateUtils.format(e.published_at);
110-
// }
111-
let detail = {
112-
author_name: e.author_name,
113-
cover: e.cover,
114-
id: e.id,
115-
post_id: e.post_id,
116-
published_at: e.published_at,
117-
title: e.title
11853
};
119-
uni.navigateTo({
120-
url: '../list2detail-detail/list2detail-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
121-
});
12254
},
123-
setTime: function(items) {
124-
var newItems = [];
125-
items.forEach(e => {
126-
newItems.push({
55+
onLoad() {
56+
this.adpid = this.$adpid;
57+
this.getBanner();
58+
this.getList();
59+
},
60+
onPullDownRefresh() {
61+
this.reload = true;
62+
this.last_id = '';
63+
this.getBanner();
64+
this.getList();
65+
},
66+
onReachBottom() {
67+
this.status = 'more';
68+
this.getList();
69+
},
70+
methods: {
71+
getBanner() {
72+
let data = {
73+
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
74+
};
75+
uni.request({
76+
url: 'https://unidemo.dcloud.net.cn/api/banner/36kr',
77+
data: data,
78+
success: data => {
79+
uni.stopPullDownRefresh();
80+
if (data.statusCode == 200) {
81+
this.banner = data.data;
82+
}
83+
},
84+
fail: (data, code) => {
85+
console.log('fail' + JSON.stringify(data));
86+
}
87+
});
88+
},
89+
getList() {
90+
var data = {
91+
column: 'id,post_id,title,author_name,cover,published_at' //需要的字段名
92+
};
93+
if (this.last_id) {
94+
//说明已有数据，目前处于上拉加载
95+
this.status = 'loading';
96+
data.minId = this.last_id;
97+
data.time = new Date().getTime() + '';
98+
data.pageSize = 10;
99+
}
100+
uni.request({
101+
url: 'https://unidemo.dcloud.net.cn/api/news',
102+
data: data,
103+
success: data => {
104+
if (data.statusCode == 200) {
105+
let list = this.setTime(data.data);
106+
this.listData = this.reload ? list : this.listData.concat(list);
107+
this.last_id = list[list.length - 1].id;
108+
this.reload = false;
109+
}
110+
},
111+
fail: (data, code) => {
112+
console.log('fail' + JSON.stringify(data));
113+
}
114+
});
115+
},
116+
goDetail: function(e) {
117+
// if (!/前|刚刚/.test(e.published_at)) {
118+
// e.published_at = dateUtils.format(e.published_at);
119+
// }
120+
let detail = {
127121
author_name: e.author_name,
128122
cover: e.cover,
129123
id: e.id,
130124
post_id: e.post_id,
131-
published_at: dateUtils.format(e.published_at),
125+
published_at: e.published_at,
132126
title: e.title
127+
};
128+
uni.navigateTo({
129+
url: '../list2detail-detail/list2detail-detail?detailDate=' + encodeURIComponent(JSON.stringify(detail))
130+
});
131+
},
132+
setTime: function(items) {
133+
var newItems = [];
134+
items.forEach(e => {
135+
newItems.push({
136+
author_name: e.author_name,
137+
cover: e.cover,
138+
id: e.id,
139+
post_id: e.post_id,
140+
published_at: dateUtils.format(e.published_at),
141+
title: e.title
142+
});
133143
});
134-
});
135-
return newItems;
144+
return newItems;
145+
},
146+
aderror(e) {
147+
console.log("aderror: " + JSON.stringify(e.detail));
148+
}
136149
}
137-
}
138-
};
150+
};
139151
</script>
140152

141153
<style>
142-
.banner {
143-
height: 360rpx;
144-
overflow: hidden;
145-
position: relative;
146-
background-color: #ccc;
147-
}
154+
.banner {
155+
height: 360rpx;
156+
overflow: hidden;
157+
position: relative;
158+
background-color: #ccc;
159+
}
148160
149-
.banner-img {
150-
width: 100%;
151-
}
161+
.banner-img {
162+
width: 100%;
163+
}
152164
153-
.banner-title {
154-
max-height: 84rpx;
155-
overflow: hidden;
156-
position: absolute;
157-
left: 30rpx;
158-
bottom: 30rpx;
159-
width: 90%;
160-
font-size: 32rpx;
161-
font-weight: 400;
162-
line-height: 42rpx;
163-
color: white;
164-
z-index: 11;
165-
}
165+
.banner-title {
166+
max-height: 84rpx;
167+
overflow: hidden;
168+
position: absolute;
169+
left: 30rpx;
170+
bottom: 30rpx;
171+
width: 90%;
172+
font-size: 32rpx;
173+
font-weight: 400;
174+
line-height: 42rpx;
175+
color: white;
176+
z-index: 11;
177+
}
166178
167-
.uni-media-list-logo {
168-
width: 180rpx;
169-
height: 140rpx;
170-
}
179+
.uni-media-list-logo {
180+
width: 180rpx;
181+
height: 140rpx;
182+
}
171183
172-
.uni-media-list-body {
173-
height: auto;
174-
justify-content: space-around;
175-
}
184+
.uni-media-list-body {
185+
height: auto;
186+
justify-content: space-around;
187+
}
176188
177-
.uni-media-list-text-top {
178-
height: 74rpx;
179-
font-size: 28rpx;
180-
overflow: hidden;
181-
}
189+
.uni-media-list-text-top {
190+
height: 74rpx;
191+
font-size: 28rpx;
192+
overflow: hidden;
193+
}
182194
183-
.uni-media-list-text-bottom {
184-
display: flex;
185-
flex-direction: row;
186-
justify-content: space-between;
187-
}
188-
</style>
195+
.uni-media-list-text-bottom {
196+
display: flex;
197+
flex-direction: row;
198+
justify-content: space-between;
199+
}
200+
</style>

0 commit comments

Comments
 (0)