611 lines
16 KiB
Vue
611 lines
16 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" @click="onView('FreeService')">
|
|
<image class="free-img" src="@/static/index/index_banner_free.png" mode="widthFix" />
|
|
</view>
|
|
<!-- 协商调解类 -->
|
|
<view class="block">
|
|
<view class="block-title">
|
|
<view class="title">协商调解类</view>
|
|
</view>
|
|
<scroll-view class="the-tabs" scroll-x="true" >
|
|
<block v-for="(item, index) in theTabs" :key="index">
|
|
<view class="the-tabs-item" :class="{'active': item.category_id == theTabId}" @click="onTheTab(item)">{{item.title}}</view>
|
|
</block>
|
|
<view class="the-tabs-acitve-block" :style="theTabStyle"></view>
|
|
</scroll-view>
|
|
<scroll-view
|
|
class="the-flex"
|
|
scroll-x="true"
|
|
scroll-with-animation="true"
|
|
:scroll-into-view='defaultViewId'
|
|
>
|
|
<view class="the-flex-item"
|
|
v-for="item in jfList"
|
|
:key="item.service_id"
|
|
:id='"_tabs"+item.service_id'
|
|
@click="sevicesClick(item.service_id)"
|
|
>
|
|
<view class="cover" :style="'background-image: url(' + item.cover + ');'"></view>
|
|
<view class="title nowrap">{{item.title}}</view>
|
|
<view class="price nowrap"><text>￥</text>{{item.price}}<text class="ding" v-if="item.type">定金</text></view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 法律咨询类 -->
|
|
<view class="block">
|
|
<view class="block-title">
|
|
<view class="title">法律咨询类</view>
|
|
</view>
|
|
<scroll-view
|
|
class="the-flex"
|
|
style="padding-top: 0;"
|
|
scroll-x="true"
|
|
scroll-with-animation="true"
|
|
:scroll-into-view='defaultViewId'
|
|
>
|
|
<block v-for="(item, index) in appMenus.service" :key="index">
|
|
<view class="the-flex-item"
|
|
@click="onView(item.page)"
|
|
>
|
|
<view class="cover" :style="'background-image: url(' + item.cover + ');'"></view>
|
|
<view class="title nowrap">{{item.title}}</view>
|
|
<view class="price nowrap"><text>￥</text>{{item.price}} <text v-if="item.limit != null">/{{item.limit}}</text></view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
</view>
|
|
<!-- 诉讼委托类 -->
|
|
<view class="block">
|
|
<view class="block-title">
|
|
<view class="title">诉讼委托类</view>
|
|
</view>
|
|
<view class="lawsuit">
|
|
<block v-for="(item, index) in appMenus.cases" :key="index">
|
|
<view class="lawsuit-item" @click="onView(item.page)">
|
|
<view class="lawsuit-cover" :style="'background-image: url(' + item.cover + ');'"></view>
|
|
<view class="lawsuit-text">
|
|
<view class="lawsuit-title nowrap">{{item.title}}</view>
|
|
<view class="lawsuit-price">￥{{item.price}}<text v-if="item.limit != null">{{item.limit}}</text></view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- 增收赋能类 -->
|
|
<view class="block">
|
|
<view class="block-title">
|
|
<view class="title">增收赋能类</view>
|
|
</view>
|
|
<scroll-view
|
|
class="the-flex"
|
|
style="padding-top: 0;"
|
|
scroll-x="true"
|
|
scroll-with-animation="true"
|
|
:scroll-into-view='defaultViewId'
|
|
@click="onToast()"
|
|
>
|
|
<view class="the-flex-item">
|
|
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_07.png') + ');'"></view>
|
|
<view class="title nowrap">巅峰销售思维</view>
|
|
<view class="price nowrap"><text>￥</text>2980</view>
|
|
</view>
|
|
<view class="the-flex-item">
|
|
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_08.png') + ');'"></view>
|
|
<view class="title nowrap">团队系统思维</view>
|
|
<view class="price nowrap"><text>￥</text>3980</view>
|
|
</view>
|
|
<view class="the-flex-item">
|
|
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_09.png') + ');'"></view>
|
|
<view class="title nowrap">领袖演说思维</view>
|
|
<view class="price nowrap"><text>￥</text>4980</view>
|
|
</view>
|
|
<view class="the-flex-item">
|
|
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_10.png') + ');'"></view>
|
|
<view class="title nowrap">领袖能量思维</view>
|
|
<view class="price nowrap"><text>￥</text>5980</view>
|
|
</view>
|
|
<view class="the-flex-item">
|
|
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_11.png') + ');'"></view>
|
|
<view class="title nowrap">激发内在无限潜能</view>
|
|
<view class="price nowrap"><text>￥</text>9980</view>
|
|
</view>
|
|
<view class="the-flex-item">
|
|
<view class="cover" :style="'background-image: url(' + require('@/static/synthesize/img_12.png') + ');'"></view>
|
|
<view class="title nowrap">其他赋能培训会议</view>
|
|
<view class="price nowrap">价格另议</view>
|
|
</view>
|
|
</scroll-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="widthFix"></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 { region } from '@/apis/interfaces/address.js'
|
|
import { categories, jf, index } from '@/apis/interfaces/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
theTabs : [
|
|
{ category_id: '', title: '全部' }
|
|
],
|
|
theTabId : '',
|
|
theTabStyle : {
|
|
left: '0%'
|
|
},
|
|
bannerArr : [],
|
|
notice : [],
|
|
jfList:[],
|
|
defaultViewId:'',
|
|
zfList:[],
|
|
// 首次进入弹窗
|
|
timeData : {},
|
|
first : 1,
|
|
showAdTime : 0,
|
|
showAdImg : true,
|
|
layAdImg : '',
|
|
appMenus : {
|
|
cases : [],
|
|
service : []
|
|
}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getCategory()
|
|
this.getJf()
|
|
this.getIndex()
|
|
},
|
|
methods: {
|
|
onToast(){
|
|
uni.showToast({
|
|
title: '即将开放，敬请期待',
|
|
icon : 'none'
|
|
})
|
|
},
|
|
// 获取金法列表
|
|
getJf(){
|
|
let params = {
|
|
category_id:this.theTabId
|
|
}
|
|
jf(params).then(res=>{
|
|
if(res.length>0){
|
|
setTimeout(()=>{
|
|
this.defaultViewId = '_tabs'+res[0].service_id
|
|
},300)
|
|
}
|
|
this.jfList = res
|
|
}).catch(err=>{
|
|
uni.showToast({
|
|
title:err.message,
|
|
icon:'none',
|
|
mask:true,
|
|
duration:2000
|
|
})
|
|
})
|
|
},
|
|
// 点击金法产品跳转金法详情
|
|
sevicesClick(id){
|
|
uni.navigateTo({
|
|
url:'/pages/index/introduces?id='+id
|
|
})
|
|
},
|
|
// 首页轮播图及公告
|
|
getIndex(){
|
|
index().then(res=>{
|
|
this.bannerArr = res.bannners
|
|
this.appMenus = res.app_menus
|
|
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
|
|
})
|
|
})
|
|
},
|
|
// 获取金法分类列表
|
|
getCategory(){
|
|
categories().then(res=>{
|
|
this.theTabs = this.theTabs.concat(res)
|
|
}).catch(err=>{
|
|
uni.showToast({
|
|
title:err.message,
|
|
icon:'none',
|
|
mask:true,
|
|
duration:2000
|
|
})
|
|
})
|
|
},
|
|
// 金法产品筛选
|
|
onTheTab(e){
|
|
if(e.category_id != this.theTabId){
|
|
let index = this.theTabs.findIndex(val => val.category_id === e.category_id)
|
|
this.theTabStyle = {
|
|
left: index * 25 + '%'
|
|
}
|
|
this.theTabId = e.category_id
|
|
this.getJf()
|
|
}
|
|
},
|
|
// 点击轮播图
|
|
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{
|
|
width: 70vw;
|
|
position: relative;
|
|
.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{
|
|
width: 70vw;
|
|
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 $padding - 10 $padding ;
|
|
.free-img{
|
|
width: 100%;
|
|
}
|
|
}
|
|
// 增收赋能类
|
|
.closed{
|
|
background: white;
|
|
margin: 0 $margin;
|
|
border-radius: 35rpx;
|
|
padding-bottom: 10rpx;
|
|
.closed-item{
|
|
display: flex;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 20rpx;
|
|
border-bottom: solid 1rpx #f8f8f8;
|
|
&:last-child{
|
|
margin-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
.closed-cover{
|
|
width: 168rpx;
|
|
height: 168rpx;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 10rpx;
|
|
}
|
|
.closed-text{
|
|
width: calc(100% - 168rpx);
|
|
padding-left: 30rpx;
|
|
box-sizing: border-box;
|
|
.closed-title{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
line-height: 50rpx;
|
|
}
|
|
.closed-subtitle{
|
|
color: gray;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
}
|
|
.closed-price{
|
|
color: #d51959;
|
|
font-size: 34rpx;
|
|
line-height: 40rpx;
|
|
margin-top: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 诉讼委托类
|
|
.lawsuit{
|
|
padding: 0 20rpx $padding;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
&-item{
|
|
background: #F6F6F6;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
width: calc(50% - 20rpx);
|
|
margin: 0 10rpx;
|
|
}
|
|
&-cover{
|
|
width: 138rpx;
|
|
height: 138rpx;
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
&-text{
|
|
width: calc(100% - 138rpx);
|
|
padding: 0 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
&-title{
|
|
font-size: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
&-price{
|
|
font-size: 32rpx;
|
|
color: #d51959;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
// 经法
|
|
.the-tabs{
|
|
background: #ececec;
|
|
margin: 0 $margin;
|
|
height: 60rpx;
|
|
border-radius: 35rpx;
|
|
display: flex;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
width: calc(100% - 60rpx);
|
|
&-item{
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 25%;
|
|
line-height: 60rpx;
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
color: #454545;
|
|
transition: all .4s;
|
|
display: inline-block;
|
|
&.active{
|
|
color: white;
|
|
}
|
|
}
|
|
&-acitve-block{
|
|
display: inline-block;
|
|
width: 25%;
|
|
height: 60rpx;
|
|
background: linear-gradient( to right, #d51959, #ec7247);
|
|
border-radius: 35rpx;
|
|
position: absolute;
|
|
left: 0;
|
|
transition: all .4s;
|
|
}
|
|
}
|
|
.the-flex{
|
|
padding: $padding 20rpx;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
&-item{
|
|
width: calc(33% - 20rpx);
|
|
margin: 0 10rpx;
|
|
display: inline-block;
|
|
&:last-child{
|
|
margin-right: 20rpx;
|
|
}
|
|
.cover{
|
|
width: 100%;
|
|
padding-top: 100%;
|
|
background-position: center;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 10rpx;
|
|
}
|
|
.title{
|
|
font-size: 30rpx;
|
|
color: #111111;
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
}
|
|
.price{
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
color: #d51959;
|
|
font-size: 32rpx;
|
|
text{
|
|
font-size: 80%;
|
|
}
|
|
.ding{
|
|
font-size: 64%;
|
|
margin-left: 4rpx;
|
|
position: relative;
|
|
bottom: 2rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 模块
|
|
.block{
|
|
background-color: white;
|
|
border-radius: $radius;
|
|
margin: 0 $margin $margin;
|
|
.block-title{
|
|
padding: 0 $padding;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.title{
|
|
font-weight: bold;
|
|
color: #111111;
|
|
font-size: 36rpx;
|
|
}
|
|
.more{
|
|
background-color: #ececec;
|
|
font-size: 28rpx;
|
|
height: 50rpx;
|
|
border-radius: 25rpx;
|
|
width: 120rpx;
|
|
padding-left: 10rpx;
|
|
box-sizing: border-box;
|
|
line-height: 50rpx;
|
|
text-align: center;
|
|
color: #454545;
|
|
.more-icon{
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|