273 lines
8.1 KiB
Vue
273 lines
8.1 KiB
Vue
<template>
|
|
<div class="merit-box" :style="{height: root.minHeight + 'px'}">
|
|
<van-nav-bar
|
|
left-arrow
|
|
v-if="$route.meta.showNavBar"
|
|
:title="$route.meta.title"
|
|
@click-left="$router.back()"
|
|
:style="{ backgroundColor: $route.meta.navBarBackgroundColor }"
|
|
/>
|
|
<div class="merit-container">
|
|
<img class="goods-picture" :style="{width: width + 'px', height: width / 2 + 'px'}" :src="info.merit_box_cover" alt="">
|
|
<div class="merit-rank-container">
|
|
<div class="head">
|
|
<span class="title">
|
|
{{info.merit_box_title}}
|
|
<b class="sub-title">{{info.unit_name}}</b>
|
|
</span>
|
|
<div class="list">
|
|
<span :class="[n.id === type_id && 'current']" v-for="(n, index) in nav" :key="n.id" @click="onListBy(n, index)">{{n.title}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="body" ref="swiper">
|
|
<scroll-view
|
|
ref="scrollView"
|
|
:height="containerHeight - 20"
|
|
pulldown
|
|
pullup
|
|
@pulldown="refresh"
|
|
@pullup="loadMoreFn"
|
|
>
|
|
<user-merit v-for="(merit, _index) in list" :key="_index" :data="merit"></user-merit>
|
|
<div class="loadmore" v-if="!noMore">
|
|
<img class="icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAJ1BMVEUAAACHh4eHh4eIiIiJiYmJiYmIiIiIiIiHh4eIiIiJiYmIiIiIiIhR8CECAAAADHRSTlMAQFW/f6qekV+Hc2n78NS+AAAB3klEQVR42uzXv0lDYRiF8Rv/gKhF3CADWAgu4ACOYOEIDpLCQRzBSlAJnKECKd7mgTfc76QIyTnt5eN5f+WdsizLsizLsiw7li2ed1tOzfyIdkskkWlKJJFETiKymhO5Gmtc/8yJvH4ORd5UFEQI0WYIIhUFEUKkjyGIioIIIdL/EERFYYQQ6X0IUhRGCJH+RiBFYYSQjtJDisIIIdLvvMaFRAojBeFJHPeId4gAUhc5FEYIcSmMEGJTGCHEpTBCiE1hhBCXwgghNoURQlwKI4TYFEYIcSmMEOJT+GNKiE/BCPEpGCE+xYA4FEJ8Sg/xKF3EhhSlOfbLhRSlOfbWhhSlOfbbhRSlOfbOhhSlOXbtQorSHHtjQ4rSHLt2IUVZtd+yLMvOYosHbHnwN/fCXvZFLoU9JZJIItv2zdgGQBgGggsyDIMxAsMhhGhD7IA4R3eti++Q+L8Y8nLI/x9IEZFpePjFrlMWDNYe4wXOft6qVFGtUm27bjXqwVbRudy3CpVtZ/nMr9G7BwH6tBEYadhzU2g4I0+AwTGTO8uGB2bqVJ4Y/Zn6QkrEIColOTmGqPnkhCWiepWUyL7X4Vam2JdQFKmyZVgb5QqwE/nChhhiiCGGwB7oiYiIiIhIiAOEKKREjkzh3gAAAABJRU5ErkJggg==" alt="">
|
|
正在加载更多数据...
|
|
</div>
|
|
<div class="loadmore" v-if="noMore">
|
|
没有更多了
|
|
</div>
|
|
</scroll-view>
|
|
</div>
|
|
</div>
|
|
<div class="merit-button-group" :style="{bottom: tabHeight + 'px'}">
|
|
<button class="iconfont icon-arrow-left" @click="back"></button>
|
|
<button class="merit-button" @click="openBox">随喜功德</button>
|
|
</div>
|
|
</div>
|
|
<random-money :value.sync="randVisible" @change="onRandNext"></random-money>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getMeritBox, } from '@/api';
|
|
import { mapState } from 'vuex';
|
|
|
|
export default {
|
|
inject: ['screenHeight', 'root'],
|
|
data(){
|
|
const { query } = this.$route;
|
|
return {
|
|
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,
|
|
tabHeight: 0,
|
|
info: {},
|
|
list: [],
|
|
loading: true,
|
|
total: 0,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['temple_merit_id']),
|
|
noMore(){
|
|
return this.list.length === this.total;
|
|
}
|
|
},
|
|
mounted(){
|
|
this.width = window.innerWidth;
|
|
this.getMeritBox();
|
|
if(this.query.open_box){
|
|
this.openBox()
|
|
}
|
|
},
|
|
methods: {
|
|
back(){
|
|
if(this.query.fromPathName){
|
|
this.$router.replace({ name: this.query.fromPathName,query: { temple_id: this.query.temple_id } })
|
|
return;
|
|
}
|
|
this.$router.replace({ name: 'home', query: { temple_id: this.query.temple_id }});
|
|
},
|
|
openBox(){
|
|
this.randVisible = true
|
|
},
|
|
async getMeritBox(){
|
|
const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', this.type_id, this.page, 10);
|
|
// this.loading = false;
|
|
if(this.page === 1){
|
|
this.list = [];
|
|
}
|
|
this.info = res.merit_box_info;
|
|
this.total = res.merit_box_order.total;
|
|
this.list = this.list.concat(res.merit_box_order.list)
|
|
|
|
const query = this.$utils.setSearchParamsFromObj({ ...this.$route.query, temple_id: this.info.temple_id });
|
|
if(!this.$route.query.temple_id){
|
|
history.pushState('', '', location.href + query)
|
|
}
|
|
|
|
this.wechatReady({
|
|
title: `${this.info.unit_name} - 在线功德箱 | 已有 ${this.total} 人广种福田`,
|
|
desc: '随缘布施，广种福田，喜结善缘',
|
|
imgUrl: 'https://temple-h5.oss-cn-hangzhou.aliyuncs.com/uploads/common/merit_box.png',
|
|
link: location.href
|
|
})
|
|
|
|
this.$nextTick(() => {
|
|
this.containerHeight = this.$refs.swiper.offsetHeight;
|
|
this.$refs.scrollView.refresh();
|
|
})
|
|
|
|
},
|
|
|
|
onListBy(n){
|
|
this.type_id = n.id;
|
|
this.page = 1;
|
|
this.total = 0;
|
|
this.list = [];
|
|
this.getMeritBox();
|
|
},
|
|
loadMoreFn(){
|
|
if(this.noMore) return;
|
|
this.loading = true;
|
|
this.page += 1;
|
|
this.getMeritBox();
|
|
},
|
|
refresh(){
|
|
console.log('refresh')
|
|
this.page = 1;
|
|
this.total = 0;
|
|
this.getMeritBox();
|
|
},
|
|
onRandNext(obj){
|
|
this.$router.push({
|
|
name: 'pay',
|
|
query: {
|
|
...this.$route.query,
|
|
title: '功德箱/供奉',
|
|
subTitle: '随喜',
|
|
amount: obj.money,
|
|
quantity: 1,
|
|
from: 'meritBox', // 标识为功德箱
|
|
}
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.merit-box{
|
|
position: relative;
|
|
height: 100%;
|
|
.goods-picture{
|
|
vertical-align: top;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
.merit-container{
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.merit-rank-container{
|
|
background: white;
|
|
position: relative;
|
|
border-top-left-radius: 10px;
|
|
border-top-right-radius: 10px;
|
|
margin-top: 5rem;
|
|
height: 61vh;
|
|
.head{
|
|
padding: .53rem .4rem;
|
|
padding-bottom: .13rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title{
|
|
font-size: .43rem;
|
|
color: #222222;
|
|
.sub-title{
|
|
font-size: .35rem;
|
|
margin-left: .4rem;
|
|
display: inline-block;
|
|
color: #666;
|
|
}
|
|
}
|
|
.list{
|
|
display: flex;
|
|
span{
|
|
font-size: .37rem;
|
|
color: #999999;
|
|
display: inline-block;
|
|
margin-left: .4rem;
|
|
border-bottom: .03rem solid transparent;
|
|
padding-bottom: .13rem;
|
|
}
|
|
span.current{
|
|
color: #222;
|
|
border-bottom-color: rgb(168, 28, 28);
|
|
}
|
|
}
|
|
}
|
|
.body{
|
|
height: calc(100% - 1.16rem);
|
|
overflow: hidden;
|
|
.swiper-container{
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.merit-button-group{
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
padding-top: .2rem;
|
|
padding-bottom: calc(.2rem );
|
|
border-top: .01rem solid #ddd;
|
|
display: flex;
|
|
padding-left: .4rem;
|
|
padding-right: .4rem;
|
|
.iconfont{
|
|
width: 20%;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
margin-right: .4rem;
|
|
border-radius: 4px;
|
|
font-size: .6rem;
|
|
}
|
|
.merit-button{
|
|
//display: inline-block;
|
|
//vertical-align: top;
|
|
//background: $primary-color;
|
|
//color: white;
|
|
//height: 1.4rem;
|
|
//font-size: .37rem;
|
|
//padding: 0 2rem;
|
|
//border: .01rem solid $primary-color;
|
|
//border-radius: $btn-border-radius;
|
|
//flex: 1;
|
|
|
|
flex: 1;
|
|
font-size: .4rem;
|
|
padding: .3rem 1rem;
|
|
background: $primary-color;
|
|
border: 1px solid $primary-color;
|
|
color: white;
|
|
border-radius: .1rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|