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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

95
pages/index/free.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<view class="introduce" v-if='loaded'>
<image class="richTxt" :src="base.cover" mode="widthFix" />
<view class="nowbuy" @click="nowBuy" v-if="!is_recharge"> <view class="btn">￥{{base.price}} 立即购买 </view> </view>
<view class="nowbuy nonebuy" v-else> <view class="btn"> 已开通 </view> </view>
</view>
</template>
<script>
import {
recharge,zyPay
} from '@/apis/interfaces/index.js'
export default {
data() {
return {
loaded:false,
base: '',
is_recharge: true,
}
},
onLoad(e) {
this.getInfo()
},
methods:{
getInfo(){
recharge().then(res => {
this.base = res.base
this.is_recharge = res.is_recharge
this.loaded = true
}).catch(err => {
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
duration: 2000
})
})
},
nowBuy(){
zyPay(this.base.service_id).then(res => {
uni.showToast({
title: '支付成功',
icon: 'none',
mask: true,
duration: 2000
})
this.is_recharge = true
}).catch(err => {
console.log(err)
uni.showToast({
title: err.message,
icon: 'none',
mask: true,
duration: 2000
})
})
}
}
}
</script>
<style lang="scss" scoped>
.introduce{
padding-bottom: 120rpx;
.nowbuy{
position: fixed;
bottom: 0;
height: 120rpx;
padding-bottom: 20rpx;
text-align: center;
width: 100%;
color: #fff;
font-size: 32rpx;
font-weight: bold;
background-color: #fff;
.btn{
height: 90rpx;
line-height: 90rpx;
margin: 20rpx $margin*2 0 $margin*2;
border-radius: 80rpx;
background: linear-gradient( to right, #e5584c,#ee7b46);
}
}
.nonebuy{
color: #333;
font-weight: none;
.btn{
background: linear-gradient( to right, #ececec,#ececec);
}
}
.richTxt{
width: 100%;
}
}
</style>

121
pages/index/index.vue
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;
}
}
}
}