123

src/pages/merit-list/index.vue

@@ -2,18 +2,73 @@
 	<div class="buddha-activity">
 		<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">
-			<merit-goods v-for="i in 10" :key="i"></merit-goods>
+		<div class="merit-container" :style="{height: height + 'px'}">
+			<scroll-view :height="height" ref="scroll" pulldown pullup @pulldown="refresh" @pullup="loadMore">
+				<merit-goods v-for="li in list" :key="li.id" :data="li"></merit-goods>
+				<div class="no-more" v-if="list.length === total">没有更多了</div>
+				<div class="no-more" v-if="list.length !== total && loading">正在加载更多...</div>
+			</scroll-view>
 		</div>
 	</div>
 </template>
 
 <script>
-export default {};
+import { getCommonGoods } from "@/api";
+export default {
+	data(){
+		const { query } = this.$route;
+		return {
+			query,
+			list: [],
+			page: 1,
+			size: 10,
+			total: 0,
+		}
+	},
+	computed: {
+		height(){
+			return window.innerHeight
+		}
+	},
+	mounted(){
+		this.getCommonGoods();
+	},
+	methods: {
+		async getCommonGoods(){
+			this.loading = true;
+			const res = await getCommonGoods(this.query.temple_id, this.page);
+			this.loading = false;
+			if(this.page === 1){
+				this.list = res.results;
+				this.total = res.total;
+			} else {
+				this.list = this.list.concat(res.results)
+			}
+			this.$nextTick(() => {
+				this.$refs.scroll.refresh();
+			})
+		},
+		refresh(){
+			this.page = 1;
+			this.getCommonGoods();
+		},
+		loadMore(){
+			if(this.total === this.list.length) return;
+			this.page += 1;
+			this.getCommonGoods();
+		}
+	}
+};
 </script>
 
-<style></style>
+<style lang="scss">
+.merit-container{
+	overflow: hidden;
+	height: 100vh;
+}
+</style>