260 lines
9.3 KiB
Vue
260 lines
9.3 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-new.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() {
|
|
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: 0.53rem 0.4rem;
|
|
padding-bottom: 0.13rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title {
|
|
font-size: 0.43rem;
|
|
color: #222222;
|
|
.sub-title {
|
|
font-size: 0.35rem;
|
|
margin-left: 0.4rem;
|
|
display: inline-block;
|
|
color: #666;
|
|
}
|
|
}
|
|
.list {
|
|
display: flex;
|
|
span {
|
|
font-size: 0.37rem;
|
|
color: #999999;
|
|
display: inline-block;
|
|
margin-left: 0.4rem;
|
|
border-bottom: 0.03rem solid transparent;
|
|
padding-bottom: 0.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: 0.2rem;
|
|
padding-bottom: calc(0.2rem);
|
|
border-top: 0.01rem solid #ddd;
|
|
display: flex;
|
|
padding-left: 0.4rem;
|
|
padding-right: 0.4rem;
|
|
.iconfont {
|
|
width: 20%;
|
|
background: white;
|
|
border: 1px solid #ddd;
|
|
margin-right: 0.4rem;
|
|
border-radius: 4px;
|
|
font-size: 0.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: 0.4rem;
|
|
padding: 0.3rem 1rem;
|
|
background: $primary-color;
|
|
border: 1px solid $primary-color;
|
|
color: white;
|
|
border-radius: 0.1rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|