[公告、banner、自由服务包下单]

This commit is contained in:
2022-12-27 16:34:12 +08:00
parent 47fc98371a
commit 752600797e
4 changed files with 209 additions and 44 deletions

View File

@@ -7,12 +7,14 @@
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">
@@ -22,7 +24,9 @@
<u-notice-bar
icon=""
:text="notice"
fontSize="13"
url=''
linkType='navigateTo'
fontSize="14"
direction="column"
bgColor="#fff"
color="#111111"
@@ -31,9 +35,8 @@
</view>
</view>
<!-- 自由服务包 -->
<view class="free">
<view class="free" @click="clickFree">
<image class="free-img" src="@/static/index/index_banner_free.png" mode="widthFix" />
<!-- <image class="free-img" src="@/static/imgs/index-img.png" mode="widthFix"></image> -->
</view>
<!-- 金法产品 -->
<view class="block">
@@ -61,7 +64,7 @@
>
<image class="cover" :src="item.cover" mode="aspectFill" />
<view class="title nowrap">{{item.title}}</view>
<view class="price nowrap"><text></text>{{item.price}}</view>
<view class="price nowrap"><text></text>{{item.price}}<text class="ding" v-if="item.type">定金</text></view>
</view>
</scroll-view>
</view>
@@ -69,11 +72,10 @@
<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"></u-icon></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 zfList" :key="index">
<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>
@@ -87,7 +89,7 @@
<script>
import { region } from '@/apis/interfaces/address.js'
import { categories,jf,zf } from '@/apis/interfaces/index.js'
import { categories,jf,zf,index } from '@/apis/interfaces/index.js'
export default {
data() {
return {
@@ -98,38 +100,21 @@
theTabStyle : {
left: '0%'
},
bannerArr : [
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
],
notice : [
'王**信用卡法务咨询办理成功(今日)',
'王**信用卡法务咨询办理成功(今日)',
'王**信用卡法务咨询办理成功(今日)',
'王**信用卡法务咨询办理成功(今日)',
'王**信用卡法务咨询办理成功(今日)',
],
bannerArr : [],
notice : [],
jfList:[],
defaultViewId:'',
zfList:[],
}
},
onLoad() {
categories().then(res=>{
this.theTabs = this.theTabs.concat(res)
}).catch(err=>{
uni.showToast({
title:err.message,
icon:'none',
mask:true,
duration:2000
})
})
this.getCategory()
this.getJf()
this.getIndex()
this.getZf()
},
methods: {
// 获取金法列表
getJf(){
let params = {
category_id:this.theTabId
@@ -156,9 +141,10 @@
url:'/pages/index/introduces?id='+id
})
},
// 获取综法列表
getZf(){
zf().then(res=>{
console.log(res)
// console.log(res)
// this.jfList = res
}).catch(err=>{
uni.showToast({
@@ -168,11 +154,65 @@
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
}).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(){
console.log('clickFree.....')
uni.navigateTo({
url:'/pages/index/free'
})
},
// 获取城市数据
getRegion(id){
region({
@@ -181,17 +221,6 @@
console.log(res)
})
},
// 金法产品筛选
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()
}
}
}
}
</script>
@@ -221,7 +250,7 @@
flex-direction: row;
align-items: center;
.notice-title{
background-color: #ECF0FF;
background-color: #ececec;
color: #000;
height: 60rpx;
line-height: 60rpx;
@@ -359,6 +388,12 @@
text{
font-size: 80%;
}
.ding{
font-size: 64%;
margin-left: 4rpx;
position: relative;
bottom: 2rpx;
}
}
}
}