temple-h5/src/pages/merit-box/index.vue

<template>
	<div class="merit-box" >
		<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 + '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 in nav" :key="n.id">{{n.title}}</span>
					</div>
				</div>
				<div class="body">
					<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" @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 {
			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>

<style lang="scss">
.merit-box{
	.goods-picture{
		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;
			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: 80vh;
			.swiper-container{
				height: 100%;;
			}
		}
	}
	.merit-button-group{
		text-align: center;
		position: fixed;
		bottom: 0;
		z-index: 10;
		left: 0;
		right: 0;
		background: white;
		padding: .4rem 0;
		border-top: .01rem solid #ddd;
		.merit-button{
			display: inline-block;
			background: $primary-color;
			color: white;
			height: .93rem;
			font-size: .37rem;
			padding: 0 .53rem;
			border: .01rem solid $primary-color;
			border-radius: $btn-border-radius;
		}
	}
}
</style>