wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
wenfp
2021-11-11 15:10:51 +08:00
parent ec0724c873
commit b4af257c70
63 changed files with 3189 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/merit-box/index.vue
+98 -15
View File
@@ -1,5 +1,5 @@
<template>
<div class="merit-box">
<div class="merit-box" >
<van-nav-bar
left-arrow
v-if="$route.meta.showNavBar"
@@ -8,44 +8,116 @@
:style="{ backgroundColor: $route.meta.navBarBackgroundColor }"
/>
<div class="merit-container">
<img class="goods-picture" :style="{width: width + 'px', height: width + 'px'}" src="https://img1.baidu.com/it/u=614501043,2936454496&fm=26&fmt=auto" alt="">
<img class="goods-picture" :style="{width: width + 'px', height: width + 'px'}" :src="info.merit_box_cover" alt="">
<div class="merit-rank-container">
<div class="head">
<span class="title">
感恩功德
<b class="sub-title">重庆石林寺</b>
{{info.merit_box_title}}
<b class="sub-title">{{info.unit_name}}</b>
</span>
<div class="list">
<span class="current">实时</span>
<span>月榜</span>
<span>总榜</span>
<span :class="[n.id === type_id && 'current']" v-for="n in nav" :key="n.id">{{n.title}}</span>
</div>
</div>
<div class="body">
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<swiper class="swiper-container" :options="SwiperOption" ref="swiper" @change="onSwiperChange">
<swiper-slide v-for="swipe in nav" :key="swipe.id">
<scroll-view
:height="containerHeight - 20"
pulldown
pullup
@pulldown="refresh"
@pullup="loadMore"
>
<user-merit v-for="(merit, _index) in swipe.list" :key="_index" :data="merit"></user-merit>
</scroll-view>
</swiper-slide>
</swiper>
</div>
</div>
<div class="merit-button-group">
<button class="merit-button">随喜功德</button>
<button class="merit-button" @click="randVisible = true">随喜功德</button>
</div>
</div>
<random-money :value.sync="randVisible" @change="onRandNext"></random-money>
</div>
</template>
<script>
import { getMeritBox } from "@/api";
export default {
data(){
return {
width: 0
query: this.$route.query,
width: 0,
randVisible: false,
type_id: 1,
page: 1,
nav: [
{ id: 1, title: '实时', page: 1, size: 10, list: [], },
{ id: 2, title: '月榜', page: 1, size: 10, list: [], },
{ id: 3, title: '总榜', page: 1, size: 10, list: [], },
],
containerHeight: 0,
info: {},
list: [],
total: 0,
SwiperOption: {
autoplay: false,
onSlideChangeEnd: swiper => {
console.log(swiper.realIndex)
const current = this.nav[swiper.realIndex];
this.type_id = current.id;
if(current.list.length === 0){
this.getMeritBox();
}
}
}
}
},
mounted(){
this.width = window.innerWidth;
console.log(this.$refs.swiper)
this.containerHeight = this.$refs.swiper.$el.offsetHeight;
this.getMeritBox();
this.$nextTick(() => {
})
},
methods: {
onSwiperChange(e){
console.log(e)
},
async getMeritBox(){
const current = this.nav.find(item => item.id === this.type_id);
const res = await getMeritBox(this.query.temple_id, current.id, current.page, current.size);
this.info = res.merit_box_info;
// this.list = res.merit_box_order.list;
current.list = res.merit_box_order.list
this.total = res.merit_box_order.total
},
loadMore(){
console.log('加载更多')
const current = this.nav.find(item => item.id === this.type_id);
current.page += 1;
this.getMeritBox();
},
refresh(){
console.log('refresh')
},
onRandNext(obj){
console.log(obj)
this.$router.push({
name: 'pay',
query: {
...this.$route.query,
title: '功德箱/供奉',
subTitle: '',
amount: obj.money,
from: 'meritBox', // 标识为功德箱
}
})
}
}
};
</script>
@@ -56,6 +128,11 @@ export default {
vertical-align: top;
}
.merit-rank-container{
background: white;
position: relative;
margin-top: -.4rem;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.head{
padding: .53rem .4rem;
padding-bottom: .13rem;
@@ -87,6 +164,12 @@ export default {
}
}
}
.body{
height: 80vh;
.swiper-container{
height: 100%;;
}
}
}
.merit-button-group{
text-align: center;