630 lines
15 KiB
Vue
630 lines
15 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> |