460 lines
9.9 KiB
Vue
460 lines
9.9 KiB
Vue
<template>
|
|
<view class="page">
|
|
<scroller @init="initScroller" @down="refreshData" @up="getList" :up="optUp" @scroll="navFloatShow(scroller)"
|
|
:fixed="false">
|
|
<view class="status-bar"></view>
|
|
<view class="content">
|
|
<!-- 搜索框 -->
|
|
<!-- <view class="search">
|
|
<view class="search-content">
|
|
<image src="../../static/images/ic_search.png" class="icon" mode="aspectFill"></image>
|
|
<input @input="onSearchInput" placeholder="请输入关键字搜索" />
|
|
</view>
|
|
<view class="btn" @click="doSearch">搜索</view>
|
|
</view> -->
|
|
<!-- 轮播图 -->
|
|
<swiper v-if="slider.length > 0" class="swiper" :indicator-dots="false" :autoplay="true"
|
|
:circular="true">
|
|
<swiper-item v-for="(item, index) in slider" :key="index">
|
|
<navigator class="item" hover-class="none" :url="'/pages/duty/list'">
|
|
<image :lazy-load="true" :src="item.imageUrl" mode="scaleToFill"></image>
|
|
|
|
</navigator>
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="func-box">
|
|
<view class="item" @click="openActivity()">
|
|
<image src="../../static/images/ic_labour_pious_icon.png" mode="scaleToFill"></image>
|
|
<text>劳动尽责</text>
|
|
</view>
|
|
<view class="item" @click="openCertificate">
|
|
<image src="../../static/images/ic_certify_search_icon.png" mode="scaleToFill"></image>
|
|
<text>证书查询</text>
|
|
</view>
|
|
<view class="item" @click="openExplain">
|
|
<image src="../../static/images/ic_duty_answer_icon.png" mode="scaleToFill"></image>
|
|
<text>尽责说明</text>
|
|
</view>
|
|
</view>
|
|
<image class="divider-img" src="../../static/images/ic_duty_divider.png" mode="scaleToFill"></image>
|
|
<!-- 劳动尽责内容 -->
|
|
<view class="duty-box">
|
|
<view class="duty-content" v-if="list.length>0">
|
|
<view class="content-left">
|
|
<view class="title">
|
|
{{list[0].title}}
|
|
</view>
|
|
<view class="btn">去了解></view>
|
|
<view class="time">活动时间</view>
|
|
<view class="time">{{list[0].startTime}}至{{list[0].endTime}}</view>
|
|
</view>
|
|
<view class="content-right" v-if="list.length>=2">
|
|
<view class="right-item-top">
|
|
<view class="title">
|
|
{{list[1].title}}
|
|
</view>
|
|
<view class="btn">去了解></view>
|
|
</view>
|
|
<view class="right-item-bottom" v-if="list.length>=3">
|
|
<view class="title">
|
|
{{list[2].title}}
|
|
</view>
|
|
<view class="btn">去了解></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else>
|
|
<emptyView></emptyView>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroller>
|
|
<pageLoading v-if="showPageLoading"></pageLoading>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import pageLoading from '@/components/loading/pageLoading.vue';
|
|
export default {
|
|
components: {
|
|
pageLoading
|
|
},
|
|
data() {
|
|
return {
|
|
showPageLoading: true,
|
|
slider: [{
|
|
imageUrl: "/static/images/ic_duty_title_bg.png"
|
|
}], //轮播图
|
|
list: [],
|
|
scroller: {},
|
|
optUp: {
|
|
isLock: true,
|
|
auto: true,
|
|
onScroll: true,
|
|
page: {
|
|
num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
|
|
size: 3 //每页数据条数,默认10
|
|
},
|
|
empty: {
|
|
tip: '暂无数据~'
|
|
}
|
|
},
|
|
|
|
};
|
|
},
|
|
onLoad(res) {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
doSearch() {
|
|
|
|
},
|
|
onSearchInput(event) {
|
|
|
|
},
|
|
openActivity() {
|
|
uni.navigateTo({
|
|
url: "/pages/duty/activitylist"
|
|
})
|
|
},
|
|
openExplain() {
|
|
uni.navigateTo({
|
|
url: "/pages/duty/dutyexplain"
|
|
})
|
|
},
|
|
openCertificate() {
|
|
uni.navigateTo({
|
|
url: "/pages/user/mine_certif_search"
|
|
})
|
|
},
|
|
|
|
/*初始化滚动*/
|
|
initScroller(scroller) {
|
|
this.scroller = scroller;
|
|
this.loadData();
|
|
},
|
|
/*刷新数据*/
|
|
refreshData() {
|
|
uni.showLoading({
|
|
title: '刷新中'
|
|
});
|
|
this.scroller.resetUpScroll();
|
|
},
|
|
onSearchInput: function(event) {
|
|
this.searchContent = event.target.value
|
|
console.log(event.target.value)
|
|
if (event.target.value == "") {
|
|
this.refreshData()
|
|
}
|
|
},
|
|
/*加载数据*/
|
|
loadData() {
|
|
this.list = [];
|
|
this.scroller.resetUpScroll();
|
|
},
|
|
/*滚动时导航栏浮动*/
|
|
navFloatShow(scroller) {
|
|
|
|
},
|
|
getList() {
|
|
this.$app.request({
|
|
url: this.$api.duty.getActivityList,
|
|
method: 'GET',
|
|
data: {
|
|
'rows': '3',
|
|
'page': '1',
|
|
},
|
|
dataType: 'json',
|
|
success: res => {
|
|
if (res.rows != undefined) {
|
|
this.list = res.rows
|
|
this.showPageLoading = false;
|
|
this.scroller.endBySize(res.rows.length, 3);
|
|
} else {
|
|
this.scroller.endSuccess();
|
|
this.$alert(res.msg);
|
|
}
|
|
},
|
|
fail: res => {
|
|
this.scroller.endErr();
|
|
},
|
|
complete: res => {
|
|
uni.stopPullDownRefresh();
|
|
this.showPageLoading = false;
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
page {
|
|
height: 100%;
|
|
}
|
|
|
|
.page {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
background: #fff;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
/*幻灯片广告 */
|
|
.swiper {
|
|
height: 420rpx;
|
|
margin: 14rpx 24rpx 0;
|
|
|
|
image {
|
|
height: 420rpx;
|
|
width: 100%;
|
|
border-radius: 15rpx;
|
|
//box-shadow: 0 0 12px #dddee1;
|
|
}
|
|
|
|
.current {
|
|
width: 98%;
|
|
height: 350rpx;
|
|
margin: 1.0% 1.0%;
|
|
transition: all 0.2s ease-in 0s;
|
|
}
|
|
|
|
.item {
|
|
position: relative;
|
|
|
|
.title {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
text {
|
|
margin: 7% 6%;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 34rpx;
|
|
padding: 14rpx 20rpx;
|
|
max-width: 610rpx;
|
|
line-height: 1.3;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.func-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
padding: 20rpx 10rpx;
|
|
|
|
.item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
}
|
|
|
|
text {
|
|
color: black;
|
|
font-size: 30rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.divider-img {
|
|
width: 96%;
|
|
height: 180rpx;
|
|
align-self: center;
|
|
}
|
|
|
|
/*搜索*/
|
|
.search {
|
|
padding: 10rpx 24rpx 10rpx 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.search-content {
|
|
background: #f2f2f2;
|
|
border-radius: 15px;
|
|
padding: 10rpx 24rpx 10rpx 24rpx;
|
|
margin-right: 15rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/deep/.input {
|
|
color: #8cc7b5;
|
|
}
|
|
|
|
.icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
|
|
.btn {
|
|
color: #b3b3b3;
|
|
}
|
|
}
|
|
|
|
.duty-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin-top: 50rpx;
|
|
|
|
.duty-content {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
|
|
.content-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image: url('/static/images/ic_duty_index_item_1.png');
|
|
width: 48%;
|
|
height: 80%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
margin: 10rpx;
|
|
padding: 15rpx;
|
|
|
|
.title {
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.btn {
|
|
background: #169302;
|
|
border-radius: 15rpx;
|
|
padding: 10rpx 15rpx;
|
|
width: 140rpx;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 25rpx;
|
|
margin-top: 20rpx;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.time {
|
|
margin-top: 20rpx;
|
|
font-size: 25rpx;
|
|
}
|
|
}
|
|
|
|
.content-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 48%;
|
|
height: 80%;
|
|
margin: 10rpx;
|
|
|
|
.right-item-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-image: url('/static/images/ic_duty_index_item_2.png');
|
|
width: 100%;
|
|
height: 50%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
.title {
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 32rpx;
|
|
padding: 15rpx;
|
|
}
|
|
|
|
.btn {
|
|
background: #169302;
|
|
border-radius: 15rpx;
|
|
padding: 10rpx 15rpx;
|
|
width: 140rpx;
|
|
color: white;
|
|
text-align: center;
|
|
font-size: 25rpx;
|
|
margin-top: 20rpx;
|
|
margin-left: 10rpx;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
|
|
.right-item-bottom {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 10rpx;
|
|
background-image: url('/static/images/ic_duty_index_item_3.png');
|
|
width: 100%;
|
|
height: 50%;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
|
|
.title {
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
font-size: 32rpx;
|
|
padding: 15rpx;
|
|
}
|
|
|
|
.btn {
|
|
background: #169302;
|
|
border-radius: 15rpx;
|
|
padding: 10rpx 15rpx;
|
|
width: 140rpx;
|
|
color: white;
|
|
text-align: center;
|
|
margin-left: 10rpx;
|
|
font-size: 25rpx;
|
|
margin-top: 20rpx;
|
|
align-self: flex-start;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|