126 lines
3.4 KiB
Vue
126 lines
3.4 KiB
Vue
<template>
|
|
<div class="thanks-giving">
|
|
<div class="head">
|
|
<span class="title">感恩功德</span>
|
|
<div class="list">
|
|
<span :class="[nav.id === type_id && 'current']" v-for="nav in type_nav" :key="nav.id" @click="onSetType(nav)">{{ nav.title }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="body">
|
|
<div :options="swiperOptions">
|
|
<div v-for="slide in type_nav" :key="slide.id">
|
|
<div v-if="type_id === slide.id">
|
|
<user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic" ></user-merit>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="thanks-more" @click="onThankMore">查看更多</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getOrderCompare } from "@/api";
|
|
export default {
|
|
name: 'thanks-giving',
|
|
props: {
|
|
templeId: {
|
|
type: [String, Number],
|
|
default: ''
|
|
},
|
|
goodsType: {
|
|
type: String,
|
|
},
|
|
goodsId: {
|
|
type: [String, Number]
|
|
},
|
|
typeId: {
|
|
type: [String, Number]
|
|
}
|
|
},
|
|
|
|
data(){
|
|
return {
|
|
type_id: this.typeId || 1,
|
|
type_nav: [
|
|
{ id: 1, title: "实时", list: [] },
|
|
{ id: 2, title: "月榜", list: [] },
|
|
{ id: 3, title: "总榜", list: [] },
|
|
],
|
|
swiperOptions: {
|
|
|
|
// onSlideChangeEnd: ({realIndex}) => {
|
|
// this.type_id = this.type_nav[realIndex].id;
|
|
// this.getOrderCompare();
|
|
// }
|
|
}
|
|
}
|
|
},
|
|
mounted(){
|
|
this.getOrderCompare();
|
|
},
|
|
methods: {
|
|
onSetType(type){
|
|
this.type_id = type.id;
|
|
this.getOrderCompare();
|
|
},
|
|
async getOrderCompare(){
|
|
const res = await getOrderCompare(this.templeId || '1', this.type_id, this.goodsId, this.goodsType)
|
|
const current = this.type_nav.find(item => item.id === this.type_id);
|
|
current.list = res.list
|
|
},
|
|
onThankMore(){
|
|
this.$router.push({
|
|
name: 'merit-box',
|
|
query: {
|
|
type_id: this.type_id,
|
|
temple_id: this.templeId
|
|
}
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.thanks-giving {
|
|
.head {
|
|
padding: 0.53rem 0.4rem;
|
|
padding-bottom: 0.13rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title {
|
|
font-size: 0.43rem;
|
|
color: #222222;
|
|
}
|
|
.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{
|
|
|
|
.swiper-container{
|
|
height: 5.33rem;
|
|
}
|
|
.thanks-more{
|
|
height: 1rem;
|
|
line-height: 1rem;
|
|
font-size: .4rem;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style> |