You've already forked guangan-mp
1.0.0
This commit is contained in:
299
pages/index/index.vue
Normal file
299
pages/index/index.vue
Normal file
@ -0,0 +1,299 @@
|
||||
<template>
|
||||
<view class="flex flex-column" style="width: 100vw;">
|
||||
<view style="height: 300rpx;" v-if="bannerList.length > 0">
|
||||
<swiper interval="5000" :autoplay="true" :circular="true">
|
||||
<swiper-item class="flex" v-for="(item, index) in bannerList" :key="index">
|
||||
<image :src="item.image" mode="aspectFill" style="height: 300rpx;width: 100%;"></image>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<i-loading v-if="loading" />
|
||||
<view class="icon-container">
|
||||
<view class="icon-block" @click="gotoUserShare">
|
||||
<image src="/static/images/icon-photograph.png" alt="随手拍" class="icon-img"></image>
|
||||
<text class="icon-text">随手拍</text>
|
||||
</view>
|
||||
<view class="icon-block" @click="gotoShop">
|
||||
<image src="/static/images/icon-store.png" alt="" class="icon-img"></image>
|
||||
<text class="icon-text">积分商城</text>
|
||||
</view>
|
||||
<view class="icon-block" @click="gotoTutorial">
|
||||
<image src="/static/images/icon-guide.png" alt="办事指南" class="icon-img"></image>
|
||||
<text class="icon-text">办事指南</text>
|
||||
</view>
|
||||
<view class="icon-block" @click="gotoThumbsUp">
|
||||
<image src="/static/images/icon-city.png" alt="" class="icon-img"></image>
|
||||
<text class="icon-text">点赞城市</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex flex-column flex-1">
|
||||
<view>
|
||||
<scroll-view class="flex-1" :scroll-y="true" :refresher-enabled="true"
|
||||
:refresher-triggered="refresh" @refresherrefresh="refreshData" @scrolltolower="loadData">
|
||||
<view class="px-2">
|
||||
<i-news-list :resdata="newsList" />
|
||||
</view>
|
||||
<uni-load-more :status="more_status" @clickLoadMore="loadData"></uni-load-more>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
TaAjax
|
||||
} from '@/common/ajax';
|
||||
import {
|
||||
friendlyDate
|
||||
} from '@/common/util';
|
||||
|
||||
export default {
|
||||
computed: {
|
||||
more_status() {
|
||||
if (this.finish) {
|
||||
return 'no-more';
|
||||
} else if (this.loading) {
|
||||
return 'loading';
|
||||
} else {
|
||||
return 'more';
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bannerList: [],
|
||||
tabBars: [{
|
||||
id: '',
|
||||
name: '全部'
|
||||
}],
|
||||
tabIndex: 0,
|
||||
newsList: [],
|
||||
curPage: 1,
|
||||
loading: false,
|
||||
refresh: false,
|
||||
finish: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
TaAjax.get('/cms/api.category/index').then((res) => {
|
||||
const data = res.data;
|
||||
data.forEach((item) => {
|
||||
this.tabBars.push(item)
|
||||
})
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
TaAjax.get('/cms/api.banner/index').then((res) => {
|
||||
const data = res.data;
|
||||
data.forEach((item) => {
|
||||
this.bannerList.push(item)
|
||||
})
|
||||
})
|
||||
},
|
||||
onReady() {
|
||||
this.refreshData();
|
||||
},
|
||||
methods: {
|
||||
changeTab(index) {
|
||||
this.tabIndex = index
|
||||
},
|
||||
loadData() {
|
||||
if (this.refresh) {
|
||||
this.newsList.length = 0;
|
||||
this.finish = false;
|
||||
}
|
||||
if (this.finish) {
|
||||
return;
|
||||
}
|
||||
if (this.loading) {
|
||||
return;
|
||||
}
|
||||
TaAjax.get('/cms/api.article/index', {
|
||||
cid: this.tabBars[this.tabIndex].id,
|
||||
page: this.curPage
|
||||
}).then((result) => {
|
||||
const data = result.data;
|
||||
const data_list = data.data.map((news) => {
|
||||
news.publish_at = friendlyDate(new Date(news.publish_at.replace(/\-/g, '/'))
|
||||
.getTime())
|
||||
news.imgs = news.thumb ? [news.thumb] : [];
|
||||
return news;
|
||||
});
|
||||
if (this.refresh) {
|
||||
this.newsList.length = 0;
|
||||
}
|
||||
this.newsList = this.newsList.concat(data_list);
|
||||
this.finish = data.total <= this.newsList.length;
|
||||
this.curPage++;
|
||||
}).catch((e) => {
|
||||
console.warn(e)
|
||||
if (this.newsList.length == 0) {
|
||||
this.finish = true;
|
||||
}
|
||||
}).finally(() => {
|
||||
this.refresh = false;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
refreshData() {
|
||||
this.finish = false;
|
||||
this.refresh = true;
|
||||
this.curPage = 1;
|
||||
this.loadData();
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.tabIndex = e.detail.current
|
||||
this.refreshData()
|
||||
},
|
||||
gotoShop() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/points-mall/index",
|
||||
})
|
||||
},
|
||||
gotoTutorial() {
|
||||
uni.switchTab({
|
||||
url: "/pages/tutorial/tutorial"
|
||||
})
|
||||
},
|
||||
gotoUserShare() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/user-share/user-share"
|
||||
})
|
||||
},
|
||||
gotoThumbsUp() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/thumb/thumb"
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
/* #ifdef MP-ALIPAY || MP-BAIDU */
|
||||
height: 100vh;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.tab-bar {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 42px;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
.tab-bar ::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
-webkit-appearance: none;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.scroll-view-indicator {
|
||||
position: relative;
|
||||
height: 2px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.scroll-view-underline {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
background-color: #007AFF;
|
||||
}
|
||||
|
||||
.scroll-view-animation {
|
||||
transition-duration: 0.2s;
|
||||
transition-property: left;
|
||||
}
|
||||
|
||||
.tab-bar-line {
|
||||
height: 1px;
|
||||
background-color: #cccccc;
|
||||
}
|
||||
|
||||
.tab-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-tab-item {
|
||||
/* #ifndef APP-PLUS */
|
||||
display: inline-block;
|
||||
/* #endif */
|
||||
flex-wrap: nowrap;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.uni-tab-item-title {
|
||||
color: #555;
|
||||
font-size: 15px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
flex-wrap: nowrap;
|
||||
/* #ifndef APP-PLUS */
|
||||
white-space: nowrap;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-tab-item-title-active {
|
||||
color: #007AFF;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-item {
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
height: 160rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.icon-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
.icon-img {
|
||||
border-radius:16rpx;
|
||||
height: 100rpx;
|
||||
width: 100rpx;
|
||||
}
|
||||
.icon-text {
|
||||
font-size: 24rpx;
|
||||
color: #555;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user