533 lines
13 KiB
Vue
533 lines
13 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="clickFree">
|
|
<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 class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"/></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)"
|
|
>
|
|
<image class="cover" :src="item.cover" mode="aspectFill" />
|
|
<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 class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right" /></view>
|
|
</view>
|
|
<view class="zong-list">
|
|
<view class="zong-list-item" v-for="(item, index) in 3" :key="index">
|
|
<image class="cover" src="@/static/imgs/index-pack-01.png" mode="aspectFill" />
|
|
<view class="colum-flex">
|
|
<view class="title nowrap">2022年尊享综法服务包</view>
|
|
<view class="price nowrap"><text>￥</text>2200</view>
|
|
</view>
|
|
</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="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>
|
|
<!-- 机构选择 -->
|
|
<button @click="onOpen">弹出层</button>
|
|
<oct-mechanism-picker
|
|
ref="MecanisPicker"
|
|
title="选择办理机构"
|
|
:columns="jgArr"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { region } from '@/apis/interfaces/address.js'
|
|
import { categories, jf, zf, index } from '@/apis/interfaces/index.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
jgArr : [
|
|
{ name: '中信' },
|
|
{ name: '哈尔滨' },
|
|
{ name: '广州' },
|
|
{ name: '发展银行' },
|
|
{ name: '其他机构' },
|
|
{ name: '中信' },
|
|
{ name: '哈尔滨' },
|
|
{ name: '广州' },
|
|
{ name: '发展银行' },
|
|
{ name: '其他机构' }
|
|
],
|
|
theTabs : [
|
|
{ category_id: '', title: '全部' }
|
|
],
|
|
theTabId : '',
|
|
theTabStyle : {
|
|
left: '0%'
|
|
},
|
|
bannerArr : [],
|
|
notice : [],
|
|
jfList:[],
|
|
defaultViewId:'',
|
|
zfList:[],
|
|
// 首次进入弹窗
|
|
timeData : {},
|
|
first : 1,
|
|
showAdTime : 0,
|
|
showAdImg : true,
|
|
layAdImg : ''
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getCategory()
|
|
this.getJf()
|
|
this.getIndex()
|
|
this.getZf()
|
|
},
|
|
methods: {
|
|
onOpen(){
|
|
this.$refs.MecanisPicker.open()
|
|
},
|
|
// 获取金法列表
|
|
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
|
|
})
|
|
},
|
|
// 获取综法列表
|
|
getZf(){
|
|
zf().then(res=>{
|
|
// this.jfList = res
|
|
}).catch(err=>{
|
|
uni.showToast({
|
|
title:err.message,
|
|
icon:'none',
|
|
mask:true,
|
|
duration:2000
|
|
})
|
|
})
|
|
},// 获取综法列表
|
|
// 首页轮播图及公告
|
|
getIndex(){
|
|
index().then(res=>{
|
|
this.bannerArr = res.bannners
|
|
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()
|
|
}
|
|
},
|
|
// 选择城市节点
|
|
onCityPicker(e){
|
|
this.getRegion(e.value);
|
|
},
|
|
// 点击轮播图
|
|
swiperClick(e){
|
|
// console.log(this.bannerArr[e])
|
|
},
|
|
// 点击轮播图跳转自由服务包
|
|
clickFree(){
|
|
uni.navigateTo({
|
|
url:'/pages/index/free'
|
|
})
|
|
},
|
|
// 获取城市数据
|
|
getRegion(id){
|
|
region({
|
|
parent_id: id
|
|
}).then(res => {
|
|
console.log(res)
|
|
})
|
|
},
|
|
// 关闭弹窗广告
|
|
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%;
|
|
}
|
|
}
|
|
// 综法
|
|
.zong-list{
|
|
padding: 0 $padding 20rpx;
|
|
margin-bottom: 30rpx;
|
|
&-item{
|
|
position: relative;
|
|
margin-bottom: 30rpx;
|
|
padding-left: 210rpx;
|
|
height: 180rpx;
|
|
.cover{
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
}
|
|
.colum-flex{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
height: 180rpx;
|
|
.title{
|
|
line-height: 40rpx;
|
|
font-size: 28rpx;
|
|
color: #111111;
|
|
}
|
|
.price{
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
color: #d51959;
|
|
font-size: 38rpx;
|
|
text{
|
|
font-size: 80%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// 经法
|
|
.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.33% - 20rpx);
|
|
margin: 0 10rpx;
|
|
display: inline-block;
|
|
.cover{
|
|
width: 100%;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
.title{
|
|
font-size: 28rpx;
|
|
color: #111111;
|
|
padding: 10rpx 0;
|
|
line-height: 40rpx;
|
|
}
|
|
.price{
|
|
line-height: 40rpx;
|
|
font-weight: bold;
|
|
color: #d51959;
|
|
font-size: 38rpx;
|
|
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>
|