[新增5大业务模块]
This commit is contained in:
669
pages/index/index-备份.vue
Normal file
669
pages/index/index-备份.vue
Normal file
@@ -0,0 +1,669 @@
|
||||
<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" v-if="false">
|
||||
<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" v-if="accountData.length > 0">
|
||||
<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"
|
||||
>
|
||||
<block v-for="(item, index) in accountData" :key="index">
|
||||
<view class="the-flex-item"
|
||||
@click="onMagInfo('Account', item.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 v-if="item.limit != null">/{{item.limit}}</text></view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 委托管理类 -->
|
||||
<view class="block" v-if="delegation.length > 0">
|
||||
<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"
|
||||
>
|
||||
<block v-for="(item, index) in delegation" :key="index">
|
||||
<view class="the-flex-item"
|
||||
@click="onMagInfo('Delegation', item.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 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>
|
||||
<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'
|
||||
>
|
||||
<view class="the-flex-item" v-for="(item, index) in empowerArr" :key="index" @click="onEmpower(item.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}}</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="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 { region } from '@/apis/interfaces/address.js'
|
||||
import { categories, jf, index, accountManagement, delegation } from '@/apis/interfaces/index.js'
|
||||
import { lists } from '@/apis/interfaces/empower.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 : []
|
||||
},
|
||||
// 增收赋能列表
|
||||
empowerArr : [],
|
||||
// 账户管理类
|
||||
accountData : [],
|
||||
// 委托管理类
|
||||
delegation : []
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getCategory()
|
||||
this.getJf()
|
||||
this.getIndex()
|
||||
// 增收赋能
|
||||
this.getEmpower()
|
||||
// 管理类业务
|
||||
this.getManagement()
|
||||
},
|
||||
methods: {
|
||||
// 获取管理类业务
|
||||
getManagement(){
|
||||
Promise.all([accountManagement(), delegation()]).then(res => {
|
||||
let accountData = res[0]
|
||||
let delegationData = res[1]
|
||||
this.accountData = accountData
|
||||
this.delegation = delegationData
|
||||
})
|
||||
},
|
||||
// 查看管理类业务
|
||||
onMagInfo(type, id){
|
||||
this.$Router.push({
|
||||
name : 'Mag' + type,
|
||||
params : { id }
|
||||
})
|
||||
},
|
||||
// 查看增收赋能详情
|
||||
onEmpower(id){
|
||||
this.$Router.push({
|
||||
name : 'EmpowerInfo',
|
||||
params : { id }
|
||||
})
|
||||
},
|
||||
// 增收赋能接口
|
||||
getEmpower(){
|
||||
lists().then(res => {
|
||||
this.empowerArr = res;
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
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{
|
||||
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 $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{
|
||||
width: 25%;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #454545;
|
||||
transition: all .4s;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
&.active{
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
&-acitve-block{
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
height: 60rpx;
|
||||
background-image: linear-gradient( to right, #d51959, #ec7247);
|
||||
border-radius: 35rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 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>
|
||||
@@ -36,139 +36,25 @@
|
||||
<!-- 自由服务包 -->
|
||||
<view class="free" @click="onView('FreeService')">
|
||||
<image class="free-img" src="@/static/index/index_banner_free.png" mode="widthFix" />
|
||||
</view>
|
||||
<!-- 协商调解类 -->
|
||||
<view class="block" v-if="false">
|
||||
<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" v-if="accountData.length > 0">
|
||||
<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"
|
||||
>
|
||||
<block v-for="(item, index) in accountData" :key="index">
|
||||
<view class="the-flex-item"
|
||||
@click="onMagInfo('Account', item.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 v-if="item.limit != null">/{{item.limit}}</text></view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 委托管理类 -->
|
||||
<view class="block" v-if="delegation.length > 0">
|
||||
<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"
|
||||
>
|
||||
<block v-for="(item, index) in delegation" :key="index">
|
||||
<view class="the-flex-item"
|
||||
@click="onMagInfo('Delegation', item.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 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>
|
||||
<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'
|
||||
>
|
||||
<view class="the-flex-item" v-for="(item, index) in empowerArr" :key="index" @click="onEmpower(item.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}}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</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">
|
||||
@@ -200,24 +86,12 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { region } from '@/apis/interfaces/address.js'
|
||||
import { categories, jf, index, accountManagement, delegation } from '@/apis/interfaces/index.js'
|
||||
import { lists } from '@/apis/interfaces/empower.js'
|
||||
import { index, bigfive } 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,
|
||||
@@ -227,86 +101,18 @@
|
||||
appMenus : {
|
||||
cases : [],
|
||||
service : []
|
||||
},
|
||||
// 增收赋能列表
|
||||
empowerArr : [],
|
||||
// 账户管理类
|
||||
accountData : [],
|
||||
// 委托管理类
|
||||
delegation : []
|
||||
},
|
||||
|
||||
bigfiveArr : [], //五大板块
|
||||
moduleShow : false //展开默认
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getCategory()
|
||||
this.getJf()
|
||||
this.getIndex()
|
||||
// 增收赋能
|
||||
this.getEmpower()
|
||||
// 管理类业务
|
||||
this.getManagement()
|
||||
this.getIndex();
|
||||
|
||||
this.bigfiveIndex();
|
||||
},
|
||||
methods: {
|
||||
// 获取管理类业务
|
||||
getManagement(){
|
||||
Promise.all([accountManagement(), delegation()]).then(res => {
|
||||
let accountData = res[0]
|
||||
let delegationData = res[1]
|
||||
this.accountData = accountData
|
||||
this.delegation = delegationData
|
||||
})
|
||||
},
|
||||
// 查看管理类业务
|
||||
onMagInfo(type, id){
|
||||
this.$Router.push({
|
||||
name : 'Mag' + type,
|
||||
params : { id }
|
||||
})
|
||||
},
|
||||
// 查看增收赋能详情
|
||||
onEmpower(id){
|
||||
this.$Router.push({
|
||||
name : 'EmpowerInfo',
|
||||
params : { id }
|
||||
})
|
||||
},
|
||||
// 增收赋能接口
|
||||
getEmpower(){
|
||||
lists().then(res => {
|
||||
this.empowerArr = res;
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
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=>{
|
||||
@@ -335,31 +141,36 @@
|
||||
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()
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// 最新五大板块
|
||||
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])
|
||||
@@ -470,200 +281,25 @@
|
||||
.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{
|
||||
width: 25%;
|
||||
line-height: 60rpx;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #454545;
|
||||
transition: all .4s;
|
||||
display: inline-block;
|
||||
background-color: transparent;
|
||||
&.active{
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
&-acitve-block{
|
||||
display: inline-block;
|
||||
width: 25%;
|
||||
height: 60rpx;
|
||||
background-image: linear-gradient( to right, #d51959, #ec7247);
|
||||
border-radius: 35rpx;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 模块
|
||||
.block {padding: 0 $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>
|
||||
|
||||
Reference in New Issue
Block a user