wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更改功德箱未显示完

Browse Source
This commit is contained in:
wenfp
2022-03-14 10:11:47 +08:00
parent 2b4bc67e22
commit 48d1f4762e
3 changed files with 93 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+43 -3
View File
@@ -17,13 +17,12 @@
<script>
import { tabbar } from '../src/router';
import safeAreaInsets from 'safe-area-insets';
console.log('底部安全区：', window.screen.availHeight, safeAreaInsets.bottom)
export default {
name: 'App',
data() {
return {
active: '3',
minHeight: window.innerHeight - safeAreaInsets.bottom,
minHeight: 0,
tabbar,
tabHeight: 0,
};
@@ -34,7 +33,8 @@ export default {
refs: this.$refs,
safeAreaInsetBottom: safeAreaInsets.bottom,
screenHeight: window.innerHeight - safeAreaInsets.bottom,
parentHeight: this.minHeight - this.tabHeight
parentHeight: this.minHeight - this.tabHeight,
minHeight: this.minHeight,
};
},
watch: {
@@ -58,6 +58,12 @@ export default {
mounted(){
console.log('launch', this.$route.query)
this.$store.commit('SET_LAUNCH', this.$route.query)
console.log( safeAreaInsets.bottom)
setTimeout(() => {
console.log( safeAreaInsets.bottom)
this.minHeight = window.innerHeight - safeAreaInsets.bottom;
}, 30)
},
computed: {
showTabbar() {
@@ -101,4 +107,38 @@ export default {
bottom: 0;
}
}
.loadmore{
font-size: .4rem;
text-align: center;
color: #888;
padding: .4rem 0;
display: flex;
align-items: center;
justify-content: center;
.icon{
width: .6rem;
vertical-align: middle;
margin-right: .2rem;
animation: loading 3s linear infinite;
}
}
.no-more{
font-size: .4rem;
text-align: center;
color: #888;
padding: .4rem 0;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes loading {
from{
transform: rotateZ(0);
}
to{
transform: rotateZ(-360deg);
}
}
</style>
src/pages/merit-box/index.vue
+49 -57
View File
@@ -1,5 +1,5 @@
<template>
<div class="merit-box" :style="{height: screenHeight - root.tabHeight + 'px'}">
<div class="merit-box" :style="{height: root.minHeight + 'px'}">
<van-nav-bar
left-arrow
v-if="$route.meta.showNavBar"
@@ -8,7 +8,7 @@
: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="">
<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">
@@ -19,20 +19,24 @@
<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">
<swiper class="swiper-container" :options="SwiperOption" ref="swiper" @swiper="onSwiper" @slideChange="onSlideChange">
<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 class="body" ref="swiper">
<scroll-view
ref="scrollView"
:height="containerHeight - 20"
pulldown
pullup
@pulldown="refresh"
@pullup="loadMore"
>
<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'}">
@@ -46,14 +50,9 @@
<script>
import { getMeritBox, } from '@/api';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import { mapState } from 'vuex';
export default {
components: {
swiper,
swiperSlide
},
inject: ['screenHeight', 'root'],
data(){
const { query } = this.$route;
@@ -72,29 +71,18 @@ export default {
tabHeight: 0,
info: {},
list: [],
loading: true,
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();
}
}
}
}
},
computed: {
...mapState(['temple_merit_id']),
swiper(){
return this.$refs.swiper.swiper;
noMore(){
return this.list.length === this.total;
}
},
mounted(){
this.width = window.innerWidth;
this.containerHeight = this.$refs.swiper.$el.offsetHeight;
this.getMeritBox();
if(this.query.open_box){
this.openBox()
@@ -107,22 +95,15 @@ export default {
openBox(){
this.randVisible = true
},
onSwiper(swiper){
console.log('on swiper', swiper)
},
onSlideChange(){
const { activeIndex } = this.swiper;
const { id } = this.nav[activeIndex];
this.type_id = id;
this.getMeritBox()
},
async getMeritBox(){
const current = this.nav.find(item => item.id === this.type_id);
const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', current.id, current.page, current.size);
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;
current.list = res.merit_box_order.list
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){
@@ -136,23 +117,33 @@ export default {
link: location.href
})
this.$nextTick(() => {
this.containerHeight = this.$refs.swiper.offsetHeight;
this.$refs.scrollView.refresh();
})
},
onListBy(n, index){
onListBy(n){
this.type_id = n.id;
this.swiper.slideTo(index, 300, false)
this.page = 1;
this.total = 0;
this.list = [];
this.getMeritBox();
},
loadMore(){
console.log('加载更多')
const current = this.nav.find(item => item.id === this.type_id);
current.page += 1;
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){
console.log(obj)
this.$router.push({
name: 'pay',
query: {
@@ -191,7 +182,7 @@ export default {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-top: 5rem;
height: 65vh;
height: 61vh;
.head{
padding: .53rem .4rem;
padding-bottom: .13rem;
@@ -224,7 +215,8 @@ export default {
}
}
.body{
height: 10rem;
height: calc(100% - 1.16rem);
overflow: hidden;
.swiper-container{
height: 100%;
}
@@ -238,7 +230,7 @@ export default {
right: 0;
background: white;
padding-top: .2rem;
padding-bottom: calc(.2rem + env(safe-area-inset-bottom));
padding-bottom: calc(.2rem );
border-top: .01rem solid #ddd;
display: flex;
padding-left: .4rem;
wap/index.html
+1 -1
View File
File diff suppressed because one or more lines are too long