123

2021-11-11 15:10:51 +08:00
parent ec0724c873
commit b4af257c70
63 changed files with 3189 additions and 832 deletions
@@ -0,0 +1,122 @@
+<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" >{{ nav.title }}</span>
+            </div>
+        </div>
+        <div class="body">
+            <swiper :options="swiperOptions">
+                <swiper-slide v-for="slide in type_nav" :key="slide.id">
+                    <scroll-view>
+                        <user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic" ></user-merit>
+                    </scroll-view>
+                </swiper-slide>
+            </swiper>
+            <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: {
+        async getOrderCompare(){
+            const res = await getOrderCompare(this.templeId, this.type_id, this.goodsId, this.goodsType)
+            console.log(res)
+            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>