TmOct5/dou_fire
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

金发服务包相关操作

Browse Source
This commit is contained in:
张冬雪
2022-12-27 09:23:31 +08:00
parent 1f3f6b230a
commit 3e2c6e696c
7 changed files with 312 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
pages/index/index.vue
View File

@@ -13,55 +13,68 @@
radius="10"
bgColor="#ffffff"
height="100%"
></u-swiper>
/>
</view>
<view class="notice">
<view class="notice-title">
<image class="notice-icon" src="@/static/imgs/notice-icon.png" mode="widthFix"></image>公告
<image class="notice-icon" src="@/static/index/index_notice.png" mode="widthFix" /> 公告
</view>
<u-notice-bar
icon=""
:text="notice"
fontSize="13"
direction="column"
bgColor="#fff"
color="#111111"
></u-notice-bar>
<view class="notice-more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view>
/>
<view class="notice-more">更多<u-icon class="more-icon" size="20rpx" color="#999" name="arrow-right" /></view>
</view>
</view>
<!-- 自由服务包 -->
<view class="free">
<image class="free-img" src="@/static/imgs/index-img.png" mode="widthFix"></image>
<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">
<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>
<view class="the-tabs">
<block v-for="(item, index) in theTabs" :key="index">
<view class="the-tabs-item" :class="{'active': item.id == theTabId}" @click="onTheTab(item)">{{item.title}}</view>
</block>
<view class="the-tabs-acitve-block" :style="theTabStyle"></view>
</view>
<view class="the-flex">
<view class="the-flex-item" v-for="(item, index) in 3" :key="index">
<view class="cover"></view>
<view class="title nowrap">中国工商信用卡服务...</view>
<view class="price nowrap"><text>￥</text>2200</view>
</view>
<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}}</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"></u-icon></view>
<!-- <view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view> -->
</view>
<view class="zong-list">
<view class="zong-list-item" v-for="(item, index) in 4" :key="index">
<image class="cover" src="@/static/imgs/index-pack-01.png" mode="aspectFill"></image>
<view class="zong-list-item" v-for="(item, index) in zfList" :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>
@@ -74,16 +87,14 @@
<script>
import { region } from '@/apis/interfaces/address.js'
import { categories,jf,zf } from '@/apis/interfaces/index.js'
export default {
data() {
return {
theTabs : [
{ id: 1, title: '全部' },
{ id: 2, title: '信用卡' },
{ id: 3, title: '网贷' },
{ id: 4, title: '信用贷' },
{ category_id: '', title: '全部' }
],
theTabId : 1,
theTabId : '',
theTabStyle : {
left: '0%'
},
@@ -96,16 +107,70 @@
'王**信用卡法务咨询办理成功（今日）',
'王**信用卡法务咨询办理成功（今日）',
'王**信用卡法务咨询办理成功（今日）',
]
'王**信用卡法务咨询办理成功（今日）',
'王**信用卡法务咨询办理成功（今日）',
],
jfList:[],
defaultViewId:'',
zfList:[],
}
},
onLoad() {
},
},
onLoad() {
categories().then(res=>{
this.theTabs = this.theTabs.concat(res)
}).catch(err=>{
uni.showToast({
title:err.message,
icon:'none',
mask:true,
duration:2000
})
})
this.getJf()
this.getZf()
},
methods: {
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=>{
console.log(res)
// this.jfList = res
}).catch(err=>{
uni.showToast({
title:err.message,
icon:'none',
mask:true,
duration:2000
})
})
},
// 选择城市节点
onCityPicker(e){
console.log(e)
this.getRegion(e.value);
},
// 获取城市数据
@@ -116,14 +181,15 @@
console.log(res)
})
},
// 经法产品筛选
// 金法产品筛选
onTheTab(e){
if(e.id != this.theTabId){
let index = this.theTabs.findIndex(val => val.id === e.id)
if(e.category_id != this.theTabId){
let index = this.theTabs.findIndex(val => val.category_id === e.category_id)
this.theTabStyle = {
left: index * (100 / this.theTabs.length) + '%'
left: index * 25 + '%'
}
this.theTabId = e.id
this.theTabId = e.category_id
this.getJf()
}
}
}
@@ -156,24 +222,24 @@
align-items: center;
.notice-title{
background-color: #ECF0FF;
color: #446EFE;
color: #000;
height: 60rpx;
line-height: 60rpx;
width: 130rpx;
text-align: center;
font-size: 28rpx;
font-size: 26rpx;
font-weight: bold;
border-radius: 20rpx;
.notice-icon{
width: 32rpx;
vertical-align: middle;
margin-bottom: 8rpx;
margin-right: 5rpx;
margin-right: 10rpx;
display: inline-block;
}
}
.notice-more{
font-size: 14px;
font-size: 24rpx;
height: 50rpx;
border-radius: 25rpx;
box-sizing: border-box;
@@ -187,7 +253,7 @@
}
// 自由服务包
.free{
padding: $padding;
padding: $padding $padding $padding - 10 $padding ;
.free-img{
width: 100%;
}
@@ -215,14 +281,14 @@
height: 180rpx;
.title{
line-height: 40rpx;
font-size: 32rpx;
font-size: 28rpx;
color: #111111;
}
.price{
line-height: 40rpx;
font-weight: bold;
color: $text-price;
font-size: 34rpx;
color: #d51959;
font-size: 38rpx;
text{
font-size: 80%;
}
@@ -232,29 +298,33 @@
}
// 经法
.the-tabs{
background: #ECF0FF;
background: #ececec;
margin: 0 $margin;
height: 70rpx;
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: 70rpx;
line-height: 60rpx;
text-align: center;
font-size: 28rpx;
color: #999999;
font-size: 26rpx;
color: #454545;
transition: all .4s;
display: inline-block;
&.active{
color: white;
}
}
&-acitve-block{
display: inline-block;
width: 25%;
height: 70rpx;
background: #446EFE;
height: 60rpx;
background: linear-gradient( to right, #d51959, #ec7247);
border-radius: 35rpx;
position: absolute;
left: 0;
@@ -263,20 +333,20 @@
}
.the-flex{
padding: $padding 20rpx;
display: flex;
flex-direction: row;
box-sizing: border-box;
white-space: nowrap;
&-item{
width: calc(33.33% - 20rpx);
margin: 0 10rpx;
display: inline-block;
.cover{
width: 100%;
padding-top: 100%;
background: #f8f8f8;
width: 100%;
height: 200rpx;
border-radius: 10rpx;
margin-bottom: 10rpx;
}
.title{
font-size: 32rpx;
font-size: 28rpx;
color: #111111;
padding: 10rpx 0;
line-height: 40rpx;
@@ -284,8 +354,8 @@
.price{
line-height: 40rpx;
font-weight: bold;
color: $text-price;
font-size: 34rpx;
color: #d51959;
font-size: 38rpx;
text{
font-size: 80%;
}
@@ -309,7 +379,7 @@
font-size: 36rpx;
}
.more{
background-color: #F5F5F5;
background-color: #ececec;
font-size: 28rpx;
height: 50rpx;
border-radius: 25rpx;
@@ -318,11 +388,12 @@
box-sizing: border-box;
line-height: 50rpx;
text-align: center;
color: #999999;
color: #454545;
.more-icon{
display: inline-block;
}
}
}
}
}
</style>

36
pages/index/introduces.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<view class="introduce" v-if='loaded'>
<rich-text :nodes="content" class="richTxt" />
</view>
</template>
<script>
import {
fwbDetail
} from '@/apis/interfaces/index.js'
export default {
data() {
return {
loaded:false,
content: '<p><img src=\"https://douhuo-storage.oss-cn-beijing.aliyuncs.com/uploads/images/2022/12/26/2aa1387f7bf0eac7ae861c9ca69a730a.png\" title=\"/uploads/images/2022/12/26/2aa1387f7bf0eac7ae861c9ca69a730a.png\" alt=\"2级页面-补差价类服务包.png\"/></p>'
}
},
onLoad(e) {
fwbDetail(e.id).then(res => {
this.content = res.content
this.loaded = true
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
duration: 2000
})
})
}
}
</script>
<style lang="scss" scoped>
img{
width: 100%!important;
}
</style>