308 lines
8.1 KiB
Vue
308 lines
8.1 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="header">
|
|
<view class="banner">
|
|
<u-swiper
|
|
class="banner-swiper"
|
|
:list="bannerArr"
|
|
:indicator="true"
|
|
keyName="cover"
|
|
previousMargin="20"
|
|
nextMargin="20"
|
|
circular
|
|
radius="10"
|
|
bgColor="#ffffff"
|
|
height="100%"
|
|
@click='swiperClick'
|
|
/>
|
|
</view>
|
|
<view class="notice">
|
|
<view class="notice-title">
|
|
<image class="notice-icon" src="@/static/index/index_notice.png" mode="widthFix" /> 公告
|
|
</view>
|
|
<u-notice-bar
|
|
icon=""
|
|
:text="notice"
|
|
url=''
|
|
linkType='navigateTo'
|
|
fontSize="14"
|
|
direction="column"
|
|
bgColor="#fff"
|
|
color="#111111"
|
|
/>
|
|
<view class="notice-more">更多<u-icon class="more-icon" size="20rpx" color="#999" name="arrow-right" /></view>
|
|
</view>
|
|
</view>
|
|
<!-- 自由服务包 -->
|
|
<view class="free" v-if="free.has_free" @click="onView('FreeService')">
|
|
<image class="free-img" :src="free.cover" mode="widthFix" />
|
|
</view>
|
|
|
|
<view class="block">
|
|
<view class="module" :style="{'background-color':item.bg_color,'color':item.text_color}" v-for="(item, index) in bigfiveArr" :key="index">
|
|
<view class="moduleCont" @click="onNav('businessList', item.children)">
|
|
<view class="moduleCont-text">
|
|
<view class="moduleCont-text-name">{{item.title}}</view>
|
|
<view class="nowrap moduleCont-text-tips">{{item.subtitle}}</view>
|
|
</view>
|
|
<image class="moduleCont-img" :src="item.cover" mode="widthFix"></image>
|
|
</view>
|
|
<view class="moduleInfo" @click="moduleClick(index)">
|
|
<view class="moduleInfo-text" :class="{active : item.schemesShow}">{{item.remark}}</view>
|
|
<image class="moduleInfo-more" :class="{active : item.schemesShow}" src="@/static/imgs/basic_down.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 弹窗 -->
|
|
<u-popup :show="showAdImg" mode="center" bgColor="transparent">
|
|
<view class="ad-lay">
|
|
<view class="ad-down">
|
|
<u-count-down
|
|
ref="adCountDown"
|
|
:time="showAdTime"
|
|
:autoStart="false"
|
|
@change="timeData = $event"
|
|
@finish="showAdImg = false">
|
|
<view>
|
|
自动关闭<text>{{ timeData.seconds }}</text>S
|
|
</view>
|
|
</u-count-down>
|
|
</view>
|
|
<image class="ad-img" :src="layAdImg" mode="heightFix"></image>
|
|
<view class="ad-btn">
|
|
<u-icon
|
|
class="ad-btn-icon"
|
|
name="close-circle"
|
|
color="white"
|
|
size="36px"
|
|
@click="onRemoveAd"
|
|
></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { index, bigfive } from '@/apis/interfaces/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
bannerArr : [],
|
|
notice : [],
|
|
// 首次进入弹窗
|
|
timeData : {},
|
|
first : 1,
|
|
showAdTime : 0,
|
|
showAdImg : true,
|
|
layAdImg : '',
|
|
appMenus : {
|
|
cases : [],
|
|
service : []
|
|
},
|
|
free : {
|
|
has_free: false,
|
|
cover : ""
|
|
},
|
|
bigfiveArr : [], //五大板块
|
|
moduleShow : false //展开默认
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getIndex();
|
|
|
|
this.bigfiveIndex();
|
|
},
|
|
methods: {
|
|
// 首页轮播图及公告
|
|
getIndex(){
|
|
index().then(res=>{
|
|
this.bannerArr = res.bannners
|
|
this.appMenus = res.app_menus
|
|
this.free = res.free
|
|
let list = []
|
|
res.notices.map(item=>{
|
|
let params = item.user.name + ' ' + item.user.text
|
|
list.push(params)
|
|
})
|
|
this.notice = list
|
|
let { is_lay_ad, lay_ad_img, times } = res.layad
|
|
if(is_lay_ad) this.layAdImg = lay_ad_img
|
|
if(this.first === 1 && is_lay_ad){
|
|
this.showAdImg = true
|
|
this.showAdTime = times * 1000
|
|
this.$nextTick(() => {
|
|
this.$refs.adCountDown.start()
|
|
})
|
|
}
|
|
}).catch(err=>{
|
|
uni.showToast({
|
|
title:err.message,
|
|
icon:'none',
|
|
mask:true,
|
|
duration:2000
|
|
})
|
|
})
|
|
},
|
|
|
|
// 最新五大板块
|
|
bigfiveIndex(){
|
|
bigfive({parent_id: 0}).then(res=>{
|
|
let esArr = res
|
|
esArr.forEach((item, index) => {
|
|
item.schemesShow = false
|
|
})
|
|
this.bigfiveArr = esArr
|
|
}).catch(err=>{
|
|
uni.showToast({
|
|
title:err.message,
|
|
icon:'none',
|
|
mask:true,
|
|
duration:2000
|
|
})
|
|
})
|
|
},
|
|
|
|
// 点击查看全部
|
|
moduleClick(index) {
|
|
this.bigfiveArr[index].schemesShow = !this.bigfiveArr[index].schemesShow
|
|
},
|
|
|
|
// 跳转
|
|
onNav(name, children){
|
|
this.$Router.push({name, params:{children:encodeURIComponent(JSON.stringify(children))}})
|
|
},
|
|
|
|
// 点击轮播图
|
|
swiperClick(e){
|
|
// console.log(this.bannerArr[e])
|
|
},
|
|
// 点击轮播图跳转自由服务包
|
|
onView(name){
|
|
this.$Router.push({ name })
|
|
},
|
|
// 关闭弹窗广告
|
|
onRemoveAd(){
|
|
this.first = 0;
|
|
this.showAdImg = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header{
|
|
background-color: white;
|
|
padding-top: 20rpx;
|
|
}
|
|
// ad弹窗广告
|
|
.ad-lay{
|
|
position: relative;
|
|
text-align: center;
|
|
.ad-down{
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 20rpx;
|
|
z-index: 1;
|
|
background: rgba(0, 0, 0, .5);
|
|
font-size: 20rpx;
|
|
padding: 10rpx 20rpx;
|
|
line-height: 30rpx;
|
|
border-radius: 24rpx;
|
|
color: white;
|
|
.ad-down-u{
|
|
display: inline-block;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
.ad-img{
|
|
height: 75vh;
|
|
border-radius: 20rpx;
|
|
}
|
|
.ad-btn{
|
|
text-align: center;
|
|
margin-top: 30rpx;
|
|
.ad-btn-icon{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
// 轮播图
|
|
.banner{
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 43%;
|
|
.banner-swiper{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
// 公告
|
|
.notice{
|
|
background: white;
|
|
padding: $padding;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
.notice-title{
|
|
background-color: #ececec;
|
|
color: #000;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
width: 130rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
font-weight: bold;
|
|
border-radius: 20rpx;
|
|
.notice-icon{
|
|
width: 32rpx;
|
|
vertical-align: middle;
|
|
margin-bottom: 8rpx;
|
|
margin-right: 10rpx;
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.notice-more{
|
|
font-size: 24rpx;
|
|
height: 50rpx;
|
|
border-radius: 25rpx;
|
|
box-sizing: border-box;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
color: #999999;
|
|
.more-icon{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
// 自由服务包
|
|
.free{
|
|
padding: $padding $padding 0 $padding;
|
|
.free-img{ width: 100%; vertical-align: top; }
|
|
}
|
|
|
|
// 模块
|
|
.block {padding: $padding;box-sizing: border-box;width: 100%;}
|
|
.module {border-radius: $radius;padding: $padding - 10 $padding $padding $padding + 10;box-sizing: border-box; margin-bottom: $margin;}
|
|
.module.moduleRed {background-color: #fff1f2;color: #c92453;}
|
|
.module.moduleYellow {background-color: #fff7f2;color: #ff7b29;}
|
|
.module.moduleBlue {background-color: #eaf4f3;color: #0dc8b3;}
|
|
.module.moduleGreen {background-color: #eff5ee;color: #1fba05;}
|
|
.module.modulePurple {background-color: #f2eef5;color: #a13dec;}
|
|
.moduleCont {display: flex;}
|
|
.moduleCont-text {width: calc(100% - 170rpx);}
|
|
.moduleCont-text-name {font-weight: bold; font-size: $title-size + 12; padding: 20rpx 0 10rpx;}
|
|
.moduleCont-text-tips {font-size: $title-size + 2;}
|
|
.moduleCont-img {width: 170rpx;}
|
|
.moduleInfo {color: #666666;font-size: $title-size-m; line-height: 48rpx; display: flex;}
|
|
.moduleInfo-text {width: calc(100% - 28rpx); padding-right: 20rpx; box-sizing: border-box; height: 60rpx;overflow: hidden;}
|
|
.moduleInfo-text.active {height: auto;}
|
|
.moduleInfo-more {width: 24rpx; margin-top: 15rpx; transition: .2s;}
|
|
.moduleInfo-more.active {transform: rotate(180deg);}
|
|
|
|
</style>
|