update
This commit is contained in:
+176
-189
@@ -1,272 +1,259 @@
|
||||
<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"
|
||||
>
|
||||
<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="">
|
||||
<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>
|
||||
<div class="loadmore" v-if="noMore">没有更多了</div>
|
||||
</scroll-view>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-button-group" :style="{bottom: tabHeight + 'px'}">
|
||||
</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>
|
||||
<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';
|
||||
import { getMeritBox } from "@/api";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
inject: ['screenHeight', 'root'],
|
||||
data(){
|
||||
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,
|
||||
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: [],
|
||||
info: {},
|
||||
list: [],
|
||||
loading: true,
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
total: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['temple_merit_id']),
|
||||
noMore(){
|
||||
...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();
|
||||
}
|
||||
},
|
||||
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 } })
|
||||
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 }});
|
||||
this.$router.replace({ name: "home", query: { temple_id: this.query.temple_id } });
|
||||
},
|
||||
openBox(){
|
||||
this.randVisible = true
|
||||
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);
|
||||
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){
|
||||
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)
|
||||
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)
|
||||
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
|
||||
})
|
||||
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){
|
||||
onListBy(n) {
|
||||
this.type_id = n.id;
|
||||
this.page = 1;
|
||||
this.total = 0;
|
||||
this.list = [];
|
||||
this.getMeritBox();
|
||||
},
|
||||
loadMoreFn(){
|
||||
if(this.noMore) return;
|
||||
loadMoreFn() {
|
||||
if (this.noMore) return;
|
||||
this.loading = true;
|
||||
this.page += 1;
|
||||
this.getMeritBox();
|
||||
this.getMeritBox();
|
||||
},
|
||||
refresh(){
|
||||
console.log('refresh')
|
||||
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,
|
||||
onRandNext(obj) {
|
||||
this.$router.push({
|
||||
name: "pay",
|
||||
query: {
|
||||
...this.$route.query,
|
||||
title: "功德箱/供奉",
|
||||
subTitle: "随喜",
|
||||
amount: obj.money,
|
||||
quantity: 1,
|
||||
from: 'meritBox', // 标识为功德箱
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
from: "meritBox", // 标识为功德箱
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.merit-box{
|
||||
.merit-box {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.goods-picture{
|
||||
vertical-align: top;
|
||||
.goods-picture {
|
||||
vertical-align: top;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
.merit-container{
|
||||
}
|
||||
.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;
|
||||
.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{
|
||||
.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: .2rem;
|
||||
padding-bottom: calc(.2rem );
|
||||
border-top: .01rem solid #ddd;
|
||||
.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: .4rem;
|
||||
padding-right: .4rem;
|
||||
.iconfont{
|
||||
padding-left: 0.4rem;
|
||||
padding-right: 0.4rem;
|
||||
.iconfont {
|
||||
width: 20%;
|
||||
background: white;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: .4rem;
|
||||
margin-right: 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-size: .6rem;
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
.merit-button{
|
||||
//display: inline-block;
|
||||
.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;
|
||||
//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;
|
||||
font-size: 0.4rem;
|
||||
padding: 0.3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
color: white;
|
||||
border-radius: .1rem;
|
||||
}
|
||||
}
|
||||
border-radius: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user