123

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+    "tabWidth": 4,
+    "singleQuote": true
+}

src/App.vue

@@ -1,8 +1,13 @@
 <template>
   <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
     <router-view />
-    <van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route>
+    <van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
-      <van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">{{tab.title}}</van-tabbar-item>
+      <van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
+        <span>{{tab.title}}</span>
+        <template #icon="props">
+          <img :src="props.active ? tab.active: tab.inactive" alt="">
+        </template>
+      </van-tabbar-item>
     </van-tabbar>
   </div>
 </template>
@@ -41,7 +46,7 @@ export default {
       handler(to){
         const path = tabbar.map(tab => tab.path);
         document.title = to.meta.title || '自在福田';
-        this.showTabbar = path.includes(path)
+        this.showTabbar = path.includes(to.path)
       }
     }
   },
@@ -57,7 +62,7 @@ export default {
 
 <style>
 @import '~@/assets/css/reset.css';
-@import '//at.alicdn.com/t/font_2897403_4wpxnjzf9qy.css';
+@import '//at.alicdn.com/t/font_2897403_mztfr3fibh.css';
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -68,8 +73,8 @@ export default {
   margin-right: auto;
 }
 .tabbar{
-  padding-top: .57rem;
+  /* padding-top: .57rem; */
-  background: url('~@/assets/img/bg.png') top center no-repeat;
+  /* background: url('~@/assets/img/bg.png') top center no-repeat; */
-  background-size: contain;
+  /* background-size: contain; */
 }
 </style>

src/api/index.js

@@ -68,6 +68,44 @@ const getCourseList = () => service.get(`/api/course/get-list`);
 // 获取功课详情
 const getCourseDetail = course_id => service.get(`/api/course/get-details/${course_id}`);
 
+// 寺院首页
+const getTempleIndex = temple_id => service.get(`/api/temple/index?temple_id=${temple_id}`);
+
+// 寺院详情
+const getTempleDetail = temple_id => service.get(`/api/temple/certify-show?temple_id=${temple_id}`);
+
+// 法师、监院人员信息详情
+const getMasterDetail = master_id => service.get(`/api/master/show?master_id=${master_id}`);
+
+// 添加关注
+const toggleCollect = dynamic_id => service.get(`/api/dynamic/collect?dynamic_id=${dynamic_id}`);
+
+// 根据订单ID获取支付参数
+const createPay = order_id => service.get(`/api/order/pay?order_id=${order_id}`);
+
+// 获取随喜金额列表
+const getRandMoney = () => service.get(`/api/order/get-rand-money`)
+
+// 功课详情计数
+const postCount = (course_id, data) => service.put(`/api/course/count/${course_id}`, data);
+
+// 功德箱
+const getMeritBox = (temple_id, type, page,  size = 10) => service.get(`/api/temple/get-merit-box?temple_id=${temple_id}&type=${type}&page=${page}&size=${size}`,)
+
+// 添加功德箱订单
+const createMeritBoxOrder = data => service.post(`/api/order/create-merit-box`, data)
+
+// 获取动态列表
+const getDynamicData = (page = 1, size = 10) => service.get(`/api/dynamic/get-page?page=${page}&size=${size}`);
+
+// 通用商品列表（功德无量）
+const getCommonGoods = (temple_id, page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`);
+
+// 获取订单榜
+const getOrderCompare = (temple_id, type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?temple_id=${temple_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
+
+// 寺院列表
+const getTempleList = (keywords = '', lng = '', lat = '', page = 1, size = 10) => service.get(`/api/temple/get-List?keywords=${keywords}&lng=${lng}&lat=${lat}&page=${page}&size=${size}`)
 
 export {
     getMonkAppellation,
@@ -83,5 +121,18 @@ export {
     postMeritName,
     getWechatSign,
     getCourseList,
-    getCourseDetail
+    getCourseDetail,
+    getTempleIndex,
+    getTempleList,
+    getTempleDetail,
+    toggleCollect,
+    getMasterDetail,
+    createPay,
+    getRandMoney,
+    postCount,
+    getMeritBox,
+    createMeritBoxOrder,
+    getDynamicData,
+    getCommonGoods,
+    getOrderCompare
 }

src/api/service.js

@@ -18,7 +18,7 @@ instance.interceptors.request.use(request => {
     if(request.url.includes('upload')){
         return request
     }
-    if(request.method === 'post' && !request.url.includes('post')){
+    if((request.method === 'post' || request.method === 'put' )&& !request.url.includes('post')){
         request.data = qs.stringify(request.data)
         return request;
     }

src/assets/scss/common.scss

@@ -28,8 +28,9 @@
 
         .merit-group {
             display: flex;
-            width: 11.36rem;
+            flex-wrap: nowrap;
             margin-bottom: .91rem;
+            margin: 0 .4rem;
         }
     }
 }
@@ -102,4 +103,11 @@
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
+}
+.no-more{
+    height: 1rem;
+    line-height: 1rem;
+    font-size: .4rem;
+    color: #666;
+    text-align: center;
 }

src/common/vant.js

@@ -26,7 +26,8 @@ import {
 	RadioGroup,
 	Switch,
 	Cascader,
-	ActionSheet
+	ActionSheet,
+	Dialog
 } from "vant";
 
 Vue.use(Button);
@@ -57,4 +58,5 @@ Vue.use(Radio)
 Vue.use(RadioGroup)
 Vue.use(Switch)
 Vue.use(ActionSheet)
-Vue.use(Cascader)
+Vue.use(Cascader)
+Vue.use(Dialog)

src/common/wechat-web.js

@@ -46,4 +46,20 @@ function getLocation(){
     })
 }
 
-export { signToWechat, getLocation };
+function requestPayment(paymentConfig){
+    return new Promise(resolve => {
+        wechatInstance.chooseWXPay({
+            timestamp: paymentConfig.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
+            nonceStr: paymentConfig.nonceStr, // 支付签名随机串，不长于 32 位
+            package: paymentConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
+            signType: paymentConfig.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
+            paySign: paymentConfig.paySign, // 支付签名
+            success: function (res) {
+              // 支付成功后的回调函数
+              resolve(res)
+            }
+        });
+    })
+}
+
+export { signToWechat, getLocation, requestPayment };

src/components/Thanksgiving/index.vue

@@ -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>

src/components/arrow-more/index.vue

@@ -0,0 +1,24 @@
+<template>
+    <span class="arrow-more" @click="$emit('click')">
+        <em>更多</em>
+        <i class="iconfont icon-arrow-right"></i>
+    </span>
+</template>
+
+<script>
+export default {
+    name: 'arrow-more'
+}
+</script>
+
+<style lang="scss">
+.arrow-more{
+    font-size: .3rem;
+    color: #999;
+    display: flex;
+    align-items: center;
+    em{
+        line-height: .32rem;
+    }
+}
+</style>

src/components/buddha-process/index.vue

@@ -1,19 +1,17 @@
 <template>
-    <div class="process" >
+    <div class="process" v-if="privateData" @click="onProcessDetail">
-        <span class="date">1995.04.09</span>
+        <span class="date">{{privateData.time || privateData.date}}</span>
         <div class="process-detail">
-        <h1 class="title">九月十九观音护法魔法会</h1>
+        <h1 class="title">{{privateData.title}}</h1>
-        <p class="desc">套用模型省时省力，不用冥思苦想，但是，每一个需要设计的内容和体系应…</p>
+        <p class="desc">{{privateData.description}}</p>
         <div class="image-group">
-            <img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
+            <img :src="cover" v-for="(cover, index) in privateData.covers.slice(0, 3)" :key="index" alt="">
-            <img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
-            <img src="https://img2.baidu.com/it/u=1300380272,3129731350&fm=26&fmt=auto" alt="">
         </div>
         <button class="purchase">护膜祈福 功德圆满</button>
         <div class="bar">
-            <span class="join">已有23784人参与</span>
+            <span class="join">已有{{privateData.sales}}人参与</span>
             <div class="btn-group">
-            <span class="btn">
+            <span class="btn" :class="[privateData.is_collected === 1 ? 'collect': 'un-collect']" @click.stop="onCollect">
                 <i class="iconfont icon-guanzhu-yiguanzhu"></i>
                 <b>关注</b>
             </span> 
@@ -28,8 +26,53 @@
 </template>
 
 <script>
+import { toggleCollect } from "@/api"
+
 export default {
-    name: 'buddha-process'
+    name: 'buddha-process',
+    props: ['data'],
+    watch: {
+      data: {
+        handler(val){
+          this.privateData = val;
+        },
+        immediate: true,
+      }
+    },
+    data(){
+      return {
+        privateData: null,
+      }
+    },
+    methods: {
+      async onCollect(){
+        const res = await toggleCollect(this.data.id);
+        console.log(res)
+        this.privateData.is_collected = this.privateData.is_collected === 1 ? 0 : 1
+      },
+      onProcessDetail(){
+        const { goods_type, goods_id, temple_id } = this.privateData;
+        if(goods_type === 1 || goods_type === 2 || goods_type === 4){
+          this.$router.push({
+            name: 'everyday-donation',
+            query: { 
+              goods_type,
+              goods_id,
+              temple_id
+            }
+          })
+          return 
+        }
+        this.$router.push({
+          name: 'goods-detail',
+          query: { 
+            goods_type,
+            goods_id,
+            temple_id
+          }
+      })
+      }
+    }
 }
 </script>
 
@@ -79,7 +122,7 @@ export default {
         width: 2.16rem;
         height: 2.16rem;
         vertical-align: top;
-        border-radius: .16rem;
+        border-radius: .05rem;
         & ~ img{
           margin-left: .27rem;
         }
@@ -112,17 +155,30 @@ export default {
         .btn{
           display: flex;
           margin-left: .5rem;
-          line-height: .40rem;
+          align-items: center;
           
           .iconfont{
             color:$primary-color;
             vertical-align: middle;
-            font-size: .3rem;
+            font-size: .4rem;
+            margin-top: -3px;
           }
           b{
-            font-size: .3rem;
+            font-size: .35rem;
-            padding-left: .07rem;
+            padding-left: .1rem;
             color: #888;
+            display: inline-block;
+            vertical-align: middle;
+          }
+        }
+        .collect{
+          .iconfont{
+            color: $primary-color;
+          }
+        }
+        .un-collect{
+          .iconfont{
+            color: #ddd;
           }
         }
       }

src/components/index.js

@@ -8,6 +8,10 @@ import Order from './order';
 import ScrollView from './scroll-view'
 import Uploader from './uploader'
 import ContentExpand from './content-expand'
+import UserDynamic from './user-dynamic';
+import RandomMoney from './random-money'
+import ThankGiving from './Thanksgiving'
+import ArrowMore from './arrow-more'
 
 Vue.component(UserMerit.name, UserMerit)
 Vue.component(Temple.name, Temple)
@@ -17,3 +21,7 @@ Vue.component(Order.name, Order)
 Vue.component(ScrollView.name, ScrollView)
 Vue.component(Uploader.name, Uploader)
 Vue.component(ContentExpand.name, ContentExpand)
+Vue.component(UserDynamic.name, UserDynamic)
+Vue.component(RandomMoney.name, RandomMoney)
+Vue.component(ThankGiving.name, ThankGiving)
+Vue.component(ArrowMore.name, ArrowMore)

src/components/merit-goods/index.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="merit-goods">
-      <img  class="goods" src="https://img1.baidu.com/it/u=1786251324,3168622427&fm=26&fmt=auto" alt="">
+      <img  class="goods" :src="data.cover_url" alt="">
       <div class="info">
-          <h3 class="title">放生修复|观音出家月放生佛祖坚持护佑，第一迅猛的运转方法</h3>
+          <h3 class="title">{{data.title}}</h3>
           <div class="bar">
-              <span class="join-number">已有100000人参与</span>
+              <span class="join-number">已有{{data.sales}}人参与</span>
-              <button class="join">参与</button>
+              <button class="join" @click="onJoin">参与</button>
           </div>
       </div>
   </div>
@@ -13,7 +13,19 @@
 
 <script>
 export default {
-    name: 'merit-goods'
+    name: 'merit-goods',
+    props: ['data'],
+    methods: {
+        onJoin(){
+            this.$router.push({
+                name: 'goods-detail',
+                query: {
+                    goods_id: this.data.id,
+                    temple_id: this.$route.query.temple_id
+                }
+            })
+        }
+    }
 }
 </script>
 

src/components/random-money/index.vue

@@ -0,0 +1,230 @@
+<template>
+    <van-popup v-model="value" position="bottom" @close="$emit('update:value', false)">
+        <div class="red-packet" v-if="user">
+            <img class="avatar" :src="anonymous ? avatar : user.avatar" alt="">
+            <div class="username-container">
+                <div class="username" v-if="!edit" @click="onEdit">
+                    <span>{{user.nickname}}</span>
+                    <i class="iconfont icon-bianjisekuai"></i>
+                </div>
+                <input class="input-username" ref="input" v-if="edit" v-model="user.nickname" @blur="edit = false">
+            </div>
+            <vue-number-scroll v-model="number"></vue-number-scroll>
+            <div class="money-input">
+                <input type="tel" v-model="money" v-number-only @change="onMoneyInput">
+                <span>元</span>
+            </div>
+            <!-- <div class="bar">
+                <span>
+                    <van-checkbox v-model="anonymous" checked-color="#CF9E3B" @change="onAnonymous">匿名参与</van-checkbox>
+                </span>
+                <span>查看服务协议</span>
+            </div> -->
+            <div class="random-button-group">
+                <button class="change" @click="changeMoney">换个金额</button>
+                <button class="next" @click="onNext">下一步</button>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<script>
+import { getRandMoney, getUserData } from '@/api';
+import VueNumberScroll from '../vue-number-scroll'
+
+export default {
+    name: 'random-money',
+    components: {
+        VueNumberScroll
+    },
+    data(){
+        return {
+            avatar: require('@/assets/img/xiaoheshang.jpg'),
+            edit: false,
+            anonymous: false,
+            numberArr: ['3', '.', '9','9'],
+            number: 0,
+            money: 0,
+            user: null,
+            privateUser: null,
+            inputNickname: '',
+            randList: [],
+        }
+    },
+    props: {
+        value: {
+            type: Boolean,
+            default: false,
+        }
+    },
+    
+    
+    mounted(){
+        this.getRandMoney()
+        this.getUserData();
+    },
+    methods: {
+        onAnonymous(checked){
+            this.anonymous = checked;
+            if(checked){
+                this.user.nickname = '匿名用户'
+            } else {
+                this.user.nickname = this.privateUser.nickname
+            }
+        },
+        onEdit(){
+            this.edit = true;
+            this.$nextTick(() => {
+                this.$refs.input.focus();
+            })
+        },
+        async getUserData(){
+            const res = await getUserData();
+            this.user = res;
+            this.privateUser = Object.assign({}, res);
+            this.inputNickname = res.nickname;
+        },
+        onMoneyInput(e){
+            console.log(e.target.value)
+            this.number = this.money
+        },
+        changeMoney(){
+            const rand = Math.floor(Math.random() * this.randList.length);
+            this.number = Number(this.randList[rand])
+            this.money =  this.number;
+        },
+        async getRandMoney(){
+            const res = await getRandMoney();
+            this.randList = res;
+            this.money =  Number(res[0])
+            this.number = Number(res[0])
+        },
+        onNext(){
+            this.$emit('change', {
+                anonymous: this.anonymous,
+                money: this.number
+            })
+            this.$emit('update:value', false)
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.red-packet{
+    height: 60vh;
+    background: #e85042 url('~@/assets/img/red-packet.jpg') top center no-repeat;
+    background-size: contain;
+    overflow: hidden;
+    .avatar{
+        width: 2rem;
+        height: 2rem;
+        display: block;
+        border-radius: 1.5rem;
+        border: 2px solid yellow;
+        margin: 2rem auto .1rem;
+    }
+    .username-container{
+        padding-top: .3rem;
+        height: 2rem;
+        .username{
+            color: white;
+            font-size: .4rem;
+            text-align: center;
+            margin-top: .3rem;
+            span{
+                padding-right: .1rem;
+            }
+        }
+        .input-username{
+            border: 1px solid yellow;
+            font-size: .4rem;
+            background: transparent;
+            margin-left: auto;
+            margin-right: auto;
+            display: block;
+            height: 1rem;
+            color: white;
+            padding: .1rem .3rem;
+            border-radius: 4px;
+        }
+    }
+    
+    .money{
+        color: yellow;
+        text-align: center;
+        height: 1rem;
+        line-height: 1rem;
+        font-size: 1rem;
+        overflow: hidden;
+        margin-top: .6rem;
+        margin-bottom: .8rem;
+        ul{
+            li{
+                display: inline-block;
+            }
+        }
+    }
+    .bar{
+        display: flex;
+        justify-content: space-between;
+        font-size: .4rem;
+        color: white;
+        padding: .3rem .6rem;
+        margin-top: .6rem;
+    }
+    .money-input{
+        border: 1px solid yellow;
+        height: 1.2rem;
+        width: 60%;
+        margin: 0 auto;
+        color: white;
+        display: flex;
+        align-items: center;
+        border-radius: 2px;
+        justify-content: space-between;
+        input{
+            background: transparent;
+            border: 1px solid transparent;
+            flex: 1;
+            height: 100%;
+            padding-left: .5rem;
+            font-size: .5rem;
+            width: 50%;
+        }
+        span{
+            padding: 0 .2rem;
+            font-size: .5rem;
+        }
+    }
+    .van-checkbox__label{
+        color: white;
+    }
+    .random-button-group{
+        text-align: center;
+        font-size: .5rem;
+        margin-top: .7rem;
+        display: flex;
+        padding: 0 .4rem;
+        button{
+            background: transparent;
+            margin: 0 .2rem;
+            height: 1.3rem;
+            border: 1px solid transparent;
+            color: white;
+        }
+        .change{
+            color: yellow;
+            border: 1px solid yellow;
+            border-radius: 4px;
+            flex: 1.3;
+        }
+        .next{
+            background: yellow;
+            color: rgb(224, 61, 61);
+            border-radius: 4px;
+            flex: 2
+        }
+    }
+}
+</style>

src/components/temple/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="temple-card" @click="onTo">
-      <img :src="data.url" alt="">
+      <img :src="data.picture" alt="">
       <div class="info">
-          <span class="name">{{data.name}}</span>
+          <span class="name">{{data.unit_name}}</span>
-          <span class="visitor">{{data.visitor}} 人到访</span>
+          <span class="visitor">{{data.visit}} 人到访</span>
           <span class="iconfont icon-dingwei"></span>
       </div>
   </div>
@@ -17,16 +17,16 @@ export default {
             type: Object,
             default(){
                 return {
-                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F24237%2F24236884.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638518604&t=074af50479ac14ca13fc6616380fe0f5',
+                    picture: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F24237%2F24236884.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638518604&t=074af50479ac14ca13fc6616380fe0f5',
-                    name: '重庆石林寺',
+                    unit_name: '重庆石林寺',
-                    visitor: 100
+                    visit: 100
                 }
             }
         }
     },
     methods: {
         onTo(){
-            this.$router.push({ name: 'temple-detail', query: { id: this.data.id }})
+            this.$router.push({ name: 'temple-home', query: { temple_id: this.data.id }})
         }
     }
 }

src/components/user-dynamic/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="user-dynamic">
+      <img class="avatar" :src="data.avatar" alt="">
+      <span class="username">{{data.nickname}}</span>
+      <span class="content">{{data.goods_name}}</span>
+      <span class="time">{{data.date}}</span>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'user-dynamic',
+    props: ['data']
+}
+</script>
+
+<style lang="scss">
+.user-dynamic{
+  display: flex;
+  border: 1px solid #f1f1f1;
+  border-radius: .08rem;
+  background: white;
+  padding:  .2rem .2rem;
+  align-items: center;
+  .avatar{
+    width: .8rem;
+    height: .8rem;
+    border-radius: 1.07rem;
+    overflow: hidden;
+  }
+  .username{
+    padding: 0 .2rem;
+    white-space: nowrap;
+    max-width: 1.6rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: .37rem;
+  }
+  .content{
+    flex: 1;
+    font-size: .32rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-right: .4rem;
+  }
+  .time{
+    font-size: .3rem;
+    color: rgb(105, 105, 105);
+  }
+}
+</style>

src/components/user-merit/index.vue

@@ -1,21 +1,21 @@
 <template>
-	<div class="user-merit border-bottom">
+	<div class="user-merit border-bottom" v-if="data">
 		<img
-			src="https://img0.baidu.com/it/u=199023397,1701150760&fm=26&fmt=auto"
+			:src="data.user_info.avatar"
 			alt=""
 		/>
 		<div class="profile">
 			<div>
 				<div class="name">
-					<span>李晓华</span>
+					<span>{{data.user_info.nickname}}</span>
-					<span>湖南长沙</span>
+					<span>{{data.user_info.region}}</span>
 				</div>
-				<p>为佛像贴金身，菩萨护佑</p>
+				<p>{{data.goods_name}}</p>
 			</div>
 		</div>
 		<div class="result">
-            <p class="money">24212.23元</p>
+            <p class="money">{{data.order_amount || data.sum_money}}元</p>
-            <span class="date">2021-10-3 21：58</span>
+            <span class="date">{{data.paid_at}}</span>
 		</div>
 	</div>
 </template>
@@ -23,6 +23,7 @@
 <script>
 export default {
 	name: "user-merit",
+	props: ['data']
 };
 </script>
 
@@ -70,10 +71,12 @@ export default {
         text-align: right;
 		.money {
 			font-size: 0.37rem;
+			color: $primary-color;
+			font-weight: bold;
 		}
 		.date {
-			font-size: 0.32rem;
+			font-size: 0.3rem;
-            color: #666;
+            color: #888;
 		}
 	}
 }

src/components/vue-number-scroll/index.vue

@@ -0,0 +1,143 @@
+<template>
+	<div class="vue-number-scroll">
+		<div class="box-item">
+			<li
+				:class="{
+					'number-item': !isNaN(item),
+					'mark-item': isNaN(item),
+				}"
+				v-for="(item, index) in orderNum"
+				:key="index"
+			>
+				<span v-if="!isNaN(item)">
+					<i ref="numberItem">0123456789</i>
+				</span>
+				<span class="comma" v-else>{{ item }}</span>
+			</li>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type: Number,
+            default: 0
+        }
+    },
+    watch: {
+        value: {
+            handler(val){
+                if(!val) return;
+                this.toOrderNum(val); // 这里输入数字即可调用
+                this.$nextTick(() => {
+                    this.setNumberTransform()
+                })
+            },
+            deep: true,
+            immediate: true,
+        }
+    },
+	data() {
+		return {
+			orderNum: ['0'],
+		};
+	},
+	
+	methods: {
+		// 设置文字滚动
+		setNumberTransform() {
+			const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
+			const numberArr = this.orderNum.filter((item) => !isNaN(item));
+			// 结合CSS 对数字字符进行滚动,显示金额
+			for (let index = 0; index < numberItems.length; index++) {
+				const elem = numberItems[index];
+				elem.style.transform = `translate(-50%, -${
+					numberArr[index] * 10
+				}%)`;
+			}
+		},
+		// 处理总金额
+		toOrderNum(num) {
+            this.orderNum = num.toString().split(""); // 将其变成数据，渲染至滚动数组
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+/*金额滚动数字设置*/
+.vue-number-scroll{
+    .box-item {
+        width: 100%;
+        text-align: center;
+        line-height: 40px;
+        font-size: 1rem;
+        padding: 2% 0;
+        position: relative;
+        list-style: none;
+        text-orientation: upright;
+        /*文字禁止编辑*/
+        -moz-user-select: none; /*火狐*/
+        -webkit-user-select: none; /*webkit浏览器*/
+        -ms-user-select: none; /*IE10*/
+        -khtml-user-select: none; /*早期浏览器*/
+        user-select: none;
+        justify-content: center;
+    }
+
+    /* 默认逗号设置 */
+    .mark-item {
+        width: .4rem;
+        line-height: 10px;
+        height: 30px;
+        font-size: 24px;
+        position: relative;
+        color: yellow;
+        display: inline-block;
+    }
+    .mark-item span {
+        bottom: 0;
+    }
+    /*滚动数字设置*/
+    .number-item {
+        width: .6rem;
+        height: 1.2rem;
+        list-style: none;
+        background-size: 100% 100%;
+        color: yellow;
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .number-item:first-child {
+        margin-left: 0;
+    }
+
+    .number-item span {
+        position: relative;
+        display: inline-block;
+        margin-right: 10px;
+        width: 100%;
+        height: 100%;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        overflow: hidden;
+    }
+
+    .number-item span i {
+        font-style: normal;
+        position: absolute;
+        top: 0px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        transition: transform 0.5s ease-in-out;
+        letter-spacing: 10px;
+    }
+
+    .number-item:last-child {
+        margin-right: 0;
+    }
+}
+</style>

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import VueAwesomeSwiper from 'vue-awesome-swiper';
+import globalMixin from './mixins';
 import App from './App.vue'
 import delay from 'delay'
 import router from './router';
@@ -7,7 +8,7 @@ import '@/assets/js/flexable.js';
 import './common/vant';
 import './components/index'
 import 'swiper/css/swiper.css'
-
+Vue.mixin(globalMixin)
 Vue.config.productionTip = false
 Vue.prototype.$delay = delay;
 Vue.use(VueAwesomeSwiper)

src/mixins/index.js

@@ -0,0 +1,15 @@
+export default {
+    directives: {
+        numberOnly: {
+            bind: function(el) {
+                el.handler = function() {
+                    el.value = el.value.replace(/\D+/, '')
+                }
+                el.addEventListener('input', el.handler)
+            },
+            unbind: function(el) {
+                el.removeEventListener('input', el.handler)
+            }
+        }
+    },
+}

src/pages/buddha-activity/index.vue

@@ -1,15 +1,44 @@
 <template>
-  <div class="buddha-activity">
+    <div class="buddha-activity">
-      <van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+        <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="process-container">
+        <div div class="process-container">
-          <buddha-process v-for="i in 10" :key="i"></buddha-process>
+            <scroll-view  :height="height - 50" ref="scrollView">
-      </div>
+                <buddha-process v-for="(p, i) in list" :key="i" :data="p"></buddha-process>
+                <div v-if="total === list.length" class="no-more">没有更多了</div>
+            </scroll-view>
+        </div>
   </div>
 </template>
 
 <script>
-export default {
+import { getDynamicData } from "@/api"
 
+export default {
+    props: ['data'],
+    data(){
+        return {
+            size: 10,
+            page: 1,
+            total: 0,
+            list: [],
+            height: window.innerHeight
+        }
+    },
+    mounted(){
+        this.getDynamicData();
+    },
+    methods: {
+        async getDynamicData(){
+            const res = await getDynamicData(this.page, this.size)
+            console.log(res)
+            this.total = res.total;
+            this.list = res.results;
+            this.$nextTick(() => {
+                this.$refs.scrollView.refresh();
+            })
+            console.log(res)
+        }
+    }
 }
 </script>
 

src/pages/everyday-donation/index.vue

@@ -45,10 +45,7 @@
                 </ul>
             </div>
             <div>
-                <user-merit></user-merit>
+                <!-- <user-merit v-for=""></user-merit> -->
-                <user-merit></user-merit>
-                <user-merit></user-merit>
-                <user-merit></user-merit>
             </div>
         </div>
         <div class="merit-button-group border-top">
@@ -63,7 +60,7 @@
                 </div>
                 <ul class="spec">
                     <li class="random">
-                        <span class="border-circle">随喜</span>
+                        <span class="border-circle" @click="showRandom = true">随喜</span>
                     </li>
                     <li v-for="(spec, index) in data.spec" :key="index">
                         <span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active']" @click="onPriceUnit(spec)">{{spec.money}}元</span>
@@ -132,6 +129,7 @@
             </div>
 
         </van-popup>
+        <random-money :value.sync="showRandom"></random-money>
     </div>
 </template>
 
@@ -142,25 +140,31 @@ import { getGoodsDetail } from '@/api'
 
 export default {
     components: {
-        swiper, swiperSlide
+    swiper,
-    },
+    swiperSlide,
+},
     data(){
         const { query } = this.$route;
         let title = '详情';
-        if(query.goods_type === '-1'){
+        if(query.goods_type === '1'){
             title = '日行一善';
         }
-        if(query.goods_type === '-2'){
+        if(query.goods_type === '2'){
             title = '添砖加瓦'
         }
         document.title = title;
+        console.log( JSON.stringify(query))
+        for(let i in query){
+            query[i] = query[i].toString()
+        }
         return {
+            showRandom: false, // 随喜
             documentTitle: title,
             query,
             data: null,
             value: 1,
             is_auto: false, // 是否自动行善
-            showSpec: true,
+            showSpec: false,
             priceUnit: 0,
             priceUnitId: '',
             number: 1,
@@ -184,10 +188,11 @@ export default {
         }
     },
     mounted(){
-        if(this.query.goods_type === '-1'){
+        console.log('query', this.query)
+        if(this.query.goods_type === '1'){
             return this.getGoodsDetail('friendly');
         }
-        if(this.query.goods_type === '-2'){
+        if(this.query.goods_type === '2'){
             return this.getGoodsDetail('tile');
         } 
         
@@ -202,7 +207,7 @@ export default {
         async getGoodsDetail(type){
             const { goods_id, temple_id } = this.$route.query;
             const response = await getGoodsDetail(type, goods_id, temple_id);
-            if(this.query.goods_type === '-2'){
+            if(this.query.goods_type === '2'){
                 response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))}))
             }
             this.data = response;
@@ -211,12 +216,12 @@ export default {
         onPriceUnit({id, money}){
             this.priceUnit = Number(money);
             this.priceUnitId = id;
-            if(this.query.goods_type === '-2'){
+            if(this.query.goods_type === '2'){
                 this.is_assign = false;
             }
         },
         onToPay(){
-            if(this.query.goods_type === '-1'){
+            if(this.query.goods_type === '1'){
                 this.$router.push({
                     name: 'pay',
                     query: {
@@ -232,7 +237,7 @@ export default {
                     }
                 })
             }
-            if(this.query.goods_type === '-2'){
+            if(this.query.goods_type === '2'){
                 this.$router.push({
                     name: 'pay',
                     query: {

src/pages/goods-detail/index.vue

@@ -3,12 +3,7 @@
         <swiper class="swiper-container" :options="swiperOption">
             <swiper-slide>
                 <div style="height: 100vw;" class="picture">
-                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+                    <img :src="data.cover_url" alt="">
-                </div>
-            </swiper-slide>
-            <swiper-slide>
-                <div style="height: 100vw;" class="picture">
-                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
                 </div>
             </swiper-slide>
         </swiper>
@@ -81,18 +76,17 @@ export default {
     data(){
         return {
             query: this.$route.query,
-            showSpec: true,
+            showSpec: false,
             checked: false,
             current: 0,
             data: null,
             value: '',
             spec_id: '',
-            banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
             step: 0,
             swiperOption: {
                 autoplay: 8000,
                 initialSlide: 1,
-                loop: true,
+                loop: false,
                 pagination: '.swiper-pagination',
                 onSlideChangeEnd: swiper => {
                     console.log('onSlideChangeEnd', swiper.realIndex)

src/pages/home.vue

@@ -1,197 +1,237 @@
 <template>
-  <div>
+    <div v-if="data" class="platform_home">
-    <van-nav-bar title="自在福田" style="background: #BF9330; color: white" />
+        <van-nav-bar title="自在福田" style="background: #bf9330; color: white" />
-    <van-search v-model="value" placeholder="寺院、主持、监寺" />
+        <van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch"/>
-    <div class="container">
+        <div class="container">
-      <div class="swiper">
+            <div class="swiper">
-        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+                <van-swipe
-          <van-swipe-item>
+                    class="my-swipe"
-            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+                    :autoplay="3000"
-          </van-swipe-item>
+                    indicator-color="white"
-          <van-swipe-item>
+                >
-            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+                    <van-swipe-item
-          </van-swipe-item>
+                        v-for="(banner, index) in data.banner_data"
-          <van-swipe-item>
+                        :key="index"
-            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+                    >
-          </van-swipe-item>
+                        <img :src="banner.cover" alt="" />
-          <van-swipe-item>
+                    </van-swipe-item>
-            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+                </van-swipe>
-          </van-swipe-item>
+            </div>
-        </van-swipe>
+            <van-swipe :loop="false">
-      </div>
+                <van-swipe-item
-      <van-grid :border="false">
+                    v-for="(item, index) in data.icon_data"
-        <van-grid-item icon="photo-o" text="佛前供灯" />
+                    :key="index"
-        <van-grid-item icon="photo-o" text="日行一善" />
+                >
-        <van-grid-item icon="photo-o" text="祈福" />
+                    <van-grid :border="false" class="home-grid-nav">
-        <van-grid-item icon="photo-o" text="放生修福" />
+                        <van-grid-item
-        <van-grid-item icon="photo-o" text="供养三宝" />
+                            icon="photo-o"
-        <van-grid-item icon="photo-o" text="供奉排位" />
+                            :text="nav.name"
-        <van-grid-item icon="photo-o" text="捐建寺院" />
+                            v-for="(nav, _index) in item"
-        <van-grid-item icon="photo-o" text="功德箱" />
+                            :key="_index"
-      </van-grid>
+                            @click="locationTo(nav)"
-      <van-notice-bar
+                        >
-        border
+                            <img
-        left-icon="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto"
+                                :src="nav.icon_url"
-        :scrollable="false"
+                                class="nav-icon"
-        mode="closeable"
+                                slot="icon"
-        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
+                            />
-      />
+                        </van-grid-item>
+                    </van-grid>
+                </van-swipe-item>
+            </van-swipe>
+            <div class="user-dynamic-container">
+                <van-swipe vertical loop :autoplay="3000" :touchable="false">
+                    <van-swipe-item
+                        v-for="order in data.order_data"
+                        :key="order.id"
+                    >
+                        <user-dynamic :data="order"></user-dynamic>
+                    </van-swipe-item>
+                </van-swipe>
+            </div>
+        </div>
+        <div class="divider"></div>
+        <div class="panel">
+            <div class="panel-head">
+                <span class="title">功德无量</span>
+                <arrow-more @click="$router.push({ name: 'merit-list', query: { temple_id: query.temple_id} })"></arrow-more>
+            </div>
+            <div class="panel-body">
+                <van-swipe
+                    class="merit-group"
+                    :width="140"
+                    :loop="false"
+                    :show-indicators="false"
+                >
+                    <van-swipe-item
+                        v-for="goods in data.common_data"
+                        :key="goods.id"
+                    >
+                        <div class="merit">
+                            <img :src="goods.cover_url" alt="" />
+                            <p class="title">{{ goods.alias }}</p>
+                        </div>
+                    </van-swipe-item>
+                </van-swipe>
+            </div>
+        </div>
+        <div class="divider"></div>
+        <div class="panel">
+            <div class="panel-head">
+                <span class="title">进展状态</span>
+                <arrow-more @click="onMoreProcess"></arrow-more>
+            </div>
+            <div class="panel-body">
+                <buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process" ></buddha-process>
+                <div class="process-more" @click="onMoreProcess">
+                    <span>查看更多进展状态</span>
+                    <i class="iconfont icon-arrow-right"></i>
+                </div>
+            </div>
+            <div class="divider"></div>
+            <thanks-giving :temple-id="query.temple_id"></thanks-giving>
+        </div>
     </div>
-    <div class="divider"></div>
-    <div class="panel">
-      <div class="panel-head">
-        <span class="title">功德无量</span>
-        <span class="external">更多</span>
-      </div>
-      <div class="panel-body">
-        <div class="merit-group">
-          <div class="merit">
-            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
-            <p class="title">为佛像贴金身，菩萨菩萨</p>
-          </div>
-          <div class="merit">
-            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
-            <p class="title">为佛像贴金身，菩萨菩萨</p>
-          </div>
-          <div class="merit">
-            <img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
-            <p class="title">为佛像贴金身，菩萨菩萨</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="divider"></div>
-    <div class="panel">
-      <div class="panel-head">
-        <span class="title">进展状态</span>
-        <span class="external">更多</span>
-      </div>
-      <div class="panel-body">
-        
-        <div class="process-more">
-          <span>查看更多进展状态</span>
-          <i class="iconfont icon-arrow-right"></i>
-        </div>
-      </div>
-      <div class="divider"></div>
-      <div class="merit-rank-container">
-        <div class="head">
-          <span class="title">感恩功德</span>
-          <div class="list">
-            <span class="current">实时</span>
-            <span>月榜</span>
-            <span>总榜</span>
-          </div>
-        </div>
-        <div class="body">
-          <user-merit></user-merit>
-          <user-merit></user-merit>
-          <user-merit></user-merit>
-          <user-merit></user-merit>
-          <user-merit></user-merit>
-          <user-merit></user-merit>
-        </div>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script>
+import { getTempleIndex } from "@/api";
+
 export default {
-  data(){
+    data() {
-    return {
+        return {
-      value: ''
+            query: this.$route.query,
-    }
+            value: "",
-  }
+            data: null,
-}
+        };
+    },
+    mounted() {
+        this.getTempleIndex();
+    },
+    methods: {
+        locationTo(nav) {
+            window.location.href = nav.url;
+        },
+        async getTempleIndex() {
+            const res = await getTempleIndex(this.query.temple_id);
+            this.data = res;
+            this.data.icon_data = this.sliceNav(res.icon_data);
+        },
+        onMoreProcess() {
+            this.$router.push({
+                name: "buddha-activity",
+            });
+        },
+        onSearch(){
+          this.$router.push({
+            name: 'temple-list',
+            query: {}
+          })
+        },
+        sliceNav(navData) {
+            const nav = [];
+            const slice = 8;
+
+            for (let i = 0; i < Math.ceil(navData.length / slice); i++) {
+                const b = navData.slice(i * slice, i * slice + slice);
+                nav.push(b);
+            }
+            return nav;
+        },
+    },
+};
 </script>
 
 <style lang="scss" scope>
-.van-nav-bar__title{
+.van-nav-bar__title {
-  color: white;
-}
-.merit-rank-container{
-  .head{
-    padding: .53rem .4rem;
-    padding-bottom: .13rem;
-    display: flex;
-    justify-content: space-between;
-    .title{
-      font-size: .43rem;
-      color: #222222;
-    }
-    .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);
-      }
-    }
-  }
-}
-
-
-.container{
-  padding: .4rem;
-  padding-bottom: .53rem;
-  .my-swipe .van-swipe-item {
-    color: #fff;
-    font-size: 20px;
-    height: 3.57rem;
-    text-align: center;
-    img{
-      width: 100%;
-      height: 100%;
-      border-radius: .16rem;
-    }
-  }
-  .swiper{
-    margin-bottom: .4rem;
-  }
-  .van-notice-bar{
-    border: 1px solid #E6B759;
-    border-radius: .16rem;
-  }
-}
-
-
-.merit{
-  width: 3.39rem;
-  height: 3.39rem;
-  display: inline-block;
-  position: relative;
-  border-radius: .16rem;
-  vertical-align: top;
-  overflow: hidden;
-  & ~ .merit{
-    margin-left: .4rem;
-  }
-  img{
-    width: 100%;
-    height: 100%;
-  }
-  .title{
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: .91rem;
-    background: rgba(0,0,0,0.7);
     color: white;
-    line-height: .91rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font-size: .37rem;
-    padding: 0 .11rem;
-  }
 }
-</style>
+.merit-rank-container {
+}
+
+.container {
+    padding: 0.4rem;
+    padding-bottom: 0.53rem;
+    .my-swipe .van-swipe-item {
+        color: #fff;
+        font-size: 20px;
+        height: 3.57rem;
+        text-align: center;
+        img {
+            width: 100%;
+            height: 100%;
+            border-radius: 0.16rem;
+        }
+    }
+    .swiper {
+        margin-bottom: 0.4rem;
+    }
+    .van-notice-bar {
+        border: 1px solid #e6b759;
+        border-radius: 0.16rem;
+    }
+}
+.platform_home {
+    .home-grid-nav {
+        .nav-icon {
+            width: 1.07rem;
+            height: 1.07rem;
+        }
+    }
+    .user-dynamic-container {
+        margin-top: 0.5rem;
+        height: 1.26rem;
+        overflow: hidden;
+        margin-bottom: 0.5rem;
+        .van-swipe {
+            height: 100%;
+        }
+        .van-swipe__indicators {
+            display: none;
+        }
+    }
+    .van-swipe__indicators {
+        bottom: 0;
+        .van-swipe__indicator {
+            width: 20px;
+            height: 2px;
+            border-radius: 10px;
+        }
+        .van-swipe__indicator--active {
+            background: $primary-color;
+        }
+    }
+}
+
+.merit {
+    width: 3.39rem;
+    height: 3.39rem;
+    display: inline-block;
+    position: relative;
+    border-radius: 0.16rem;
+    vertical-align: top;
+    overflow: hidden;
+    & ~ .merit {
+        margin-left: 0.4rem;
+    }
+    img {
+        width: 100%;
+        height: 100%;
+    }
+    .title {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 0.91rem;
+        background: rgba(0, 0, 0, 0.7);
+        color: white;
+        line-height: 0.91rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 0.37rem;
+        padding: 0 0.11rem;
+    }
+}
+</style>

src/pages/merit-box/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="merit-box">
+	<div class="merit-box" >
 		<van-nav-bar
 			left-arrow
 			v-if="$route.meta.showNavBar"
@@ -8,44 +8,116 @@
 			:style="{ backgroundColor: $route.meta.navBarBackgroundColor }"
 		/>
 		<div class="merit-container">
-			<img class="goods-picture" :style="{width: width + 'px', height: width + 'px'}" src="https://img1.baidu.com/it/u=614501043,2936454496&fm=26&fmt=auto" alt="">
+			<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">重庆石林寺</b>
+						<b class="sub-title">{{info.unit_name}}</b>
 					</span>
 					<div class="list">
-						<span class="current">实时</span>
+						<span :class="[n.id === type_id && 'current']" v-for="n in nav" :key="n.id">{{n.title}}</span>
-						<span>月榜</span>
-						<span>总榜</span>
 					</div>
 				</div>
 				<div class="body">
-					<user-merit></user-merit>
+					<swiper class="swiper-container" :options="SwiperOption" ref="swiper" @change="onSwiperChange">
-					<user-merit></user-merit>
+						<swiper-slide v-for="swipe in nav" :key="swipe.id">
-					<user-merit></user-merit>
+							<scroll-view 
-					<user-merit></user-merit>
+								:height="containerHeight - 20" 
-					<user-merit></user-merit>
+								pulldown 
-					<user-merit></user-merit>
+								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">随喜功德</button>
+				<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 {
-			width: 0
+			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>
@@ -56,6 +128,11 @@ export default {
 		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;
@@ -87,6 +164,12 @@ export default {
 			}
 			}
 		}
+		.body{
+			height: 80vh;
+			.swiper-container{
+				height: 100%;;
+			}
+		}
 	}
 	.merit-button-group{
 		text-align: center;

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">
+		<div class="merit-container" :style="{height: height + 'px'}">
-			<merit-goods v-for="i in 10" :key="i"></merit-goods>
+			<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>

src/pages/monk/index.vue

@@ -1,23 +1,18 @@
 <template>
-    <div class="monk-detail">
+    <div class="monk-detail" v-if="data">
         <div class="topbar" ref="topbar">
-            <van-nav-bar left-arrow :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
         </div>
         <swiper class="swiper-container" :options="swiperOption">
-            <swiper-slide>
+            <swiper-slide v-for="(cover, index) in data.pictures" :key="index">
                 <div style="height: 100vw;" class="picture">
-                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+                    <img :src="cover" alt="">
-                </div>
-            </swiper-slide>
-            <swiper-slide>
-                <div style="height: 100vw;" class="picture">
-                    <img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
                 </div>
             </swiper-slide>
         </swiper>
         <div class="monk-profile">
-            <h1 class="position">方丈： 素全大法师</h1>
+            <h1 class="position">{{data.title}}</h1>
-            <p class="introduction">素全法师的法名智国，是属羊人，他毕业于电子科技大学，他出生于成都市。他出于对佛教文化的特别喜爱，在1989年于昭觉寺皈依清定上师，法名智国。在2006-7-28日入驻四川省什邡市的罗汉寺，在1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。并且在1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</p>
+            <p class="introduction" v-html="data.description"></p>
         </div>
         <div class="support">
             <div class="support-head">
@@ -42,6 +37,7 @@
 </template>
 
 <script>
+import { getMasterDetail } from '@/api'
 import 'swiper/css/swiper.css'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
@@ -51,17 +47,29 @@ export default {
     },
     data(){
         return {
+            query: this.$route.query,
             banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
+            data: null,
             swiperOption: {
                 autoplay: 8000,
                 initialSlide: 1,
                 loop: true,
                 pagination: '.swiper-pagination',
-                onSlideChangeEnd: swiper => {
+                onSlideChangeEnd: () => {
-                    console.log('onSlideChangeEnd', swiper.realIndex)
+                    
                 }
             }
         }
+    },
+    mounted(){
+        this.getMasterDetail();
+    },
+    methods: {
+        async getMasterDetail(){
+            const res = await getMasterDetail(this.query.master_id)
+            console.log(res)
+            this.data = res;
+        }
     }
 }
 </script>

src/pages/pay-result/index.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="pay-result">
+		<div class="cert-show"></div>
+		<div class="pay-info">
+			<span>
+                <i class="iconfont icon-zhifuchenggong"></i>
+            </span>
+            <span>参与成功</span>
+		</div>
+        <div class="button-group">
+            <button class="detail">查看详情</button>
+            <button class="again">再结善缘</button>
+        </div>
+	</div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss">
+.pay-result {
+	.cert-show {
+		height: 70vh;
+		background: #f5f5f5;
+	}
+    .pay-info{
+        text-align: center;
+        padding: .4rem 0;
+        padding-top: 1rem;
+        font-size: .5rem;
+        color: #888;
+        .iconfont{
+            color: #07c160;
+            font-size: 1rem;
+            vertical-align: middle;
+            margin-right: .3rem;
+        }
+    }
+    .button-group{
+        text-align: center;
+        margin-top: 1rem;
+        button{
+            width: 4rem;
+            margin: 0 .4rem;
+            height: 1.2rem;
+            font-size: .4rem;
+            border-radius: 4px;
+            border: 1px solid #ddd;
+            background: white;
+        }
+        .detail{
+            color: $primary-color;
+            border-color: $primary-color;
+        }
+        .again{
+            background: $primary-color;
+            color: white;
+            border-color: $primary-color;
+        }
+    }
+}
+</style>

src/pages/pay/index.vue

@@ -34,7 +34,8 @@
 </template>
 
 <script>
-import { createFriendlyDayOrder, createBrickDayOrder } from '@/api';
+import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder } from '@/api';
+import { requestPayment } from '@/common/wechat-web';
 
 export default {
     components: {
@@ -42,7 +43,7 @@ export default {
     data(){
         return {
             query: this.$route.query,
-            payType: 0
+            payType: '1'
         }
     },
     methods: {
@@ -53,7 +54,9 @@ export default {
                     ...this.query,
 
                 }
-                return createFriendlyDayOrder(request)
+                const order = await createFriendlyDayOrder(request)
+                this.onPayment(order)
+                return
             }
             // 创建填砖加瓦订单
             if(this.query.goods_type === '-2'){
@@ -61,8 +64,20 @@ export default {
                     ...this.query,
 
                 }
-                return createBrickDayOrder(request)
+                const order = await createBrickDayOrder(request)
-                 
+                this.onPayment(order)
+                return  
+            }
+
+            // 创建功德箱订单
+            if(this.query.from === 'meritBox'){
+                const request = {
+                    temple_id: this.query.temple_id,
+                    price: this.query.amount
+                }
+                const order = await createMeritBoxOrder(request)
+                this.onPayment(order)
+                return  
             }
 
             // const request = {
@@ -71,6 +86,19 @@ export default {
 
             // createCommonOrder(request)
 
+        },
+        async onPayment(order){
+            console.log(order)
+            const result = await createPay(order.id);
+            const payResult = await requestPayment(result)
+            console.log(payResult)
+            this.$router.push({
+                name: 'pay-result',
+                query: {
+                    ...result,
+                    ...payResult
+                }
+            })
         }
     }
 }

src/pages/temple-detail/index.vue

@@ -1,7 +1,8 @@
 <template>
-    <div class="temple-detail">
+    <div class="temple-detail" v-if="data">
-        <img class="banner" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg8.zol.com.cn%2Fbbs%2Fupload%2F24237%2F24236884.jpg&refer=http%3A%2F%2Fimg8.zol.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638518604&t=074af50479ac14ca13fc6616380fe0f5" alt="">
+        <img class="banner" :src="data.picture" alt="">
         <div class="authed border-bottom">
+            <img src="@/assets/img/cert.jpg" alt="">
             <span>已通过 寺院联盟 认证 可放心访问</span>
         </div>
 
@@ -10,19 +11,19 @@
             <ul class="list">
                 <li>
                     <span class="label">单位名称：</span>
-                    <span class="value">重庆石林寺</span>
+                    <span class="value">{{data.unit_name}}</span>
                 </li>
                 <li>
                     <span class="label">登记编号：</span>
-                    <span class="value">宗场证字（渝）F3232412324 号</span>
+                    <span class="value">{{data.institution_code}}</span>
                 </li>
                 <li>
                     <span class="label">负责人：</span>
-                    <span class="value">道济</span>
+                    <span class="value">{{data.represent}}</span>
                 </li>
                 <li>
                     <span class="label">所在地址：</span>
-                    <span class="value">深圳市宝安区十包度假村内</span>
+                    <span class="value">{{data.details_address}}</span>
                 </li>
             </ul>
         </div>
@@ -30,29 +31,39 @@
         <div class="auth">
             <h4 class="title border-bottom">认证授权</h4>
             <ul class="cert">
-                <li>
+                <li v-for="(cert, index) in data.register_cert_url" :key="index">
-                    <img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
+                    <img :src="cert" alt="">
-                </li>
-                <li>
-                    <img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
-                </li>
-                <li>
-                    <img src="https://img1.baidu.com/it/u=167820301,4019853019&fm=26&fmt=auto" alt="">
                 </li>
             </ul>
         </div>
 
         <div class="auth">
             <h4 class="title border-bottom">寺院简介</h4>
-            <p class="description">少林寺始建于北魏太和十九年（495年），是孝文帝为了安置他所敬仰的印度高僧跋陀尊者，在与都城洛阳相望的嵩山少室山北麓敕建而成。少林寺常住院占地面积约57600平方米，现任方丈是曹洞正宗第47世、第33代嗣祖沙门释永信。 [1-2]  少林寺是世界著名的佛教寺院，是汉传佛教的禅宗祖庭，在中国佛教史上占有重要地位，被誉为“天下第一名刹”。因其历代少林武僧潜心研创和不断发展的少林功夫而名扬天下，素有“天下功夫出少林，少林功夫甲天下”之说。</p>
+            <p class="description" v-html="data.description"></p>
         </div>
     </div>
 </template>
 
 <script>
+import { getTempleDetail } from "@/api"
 
 export default {
-    
+    data(){
+        return {
+            query: this.$route.query,
+            data: null,
+        }
+    },
+    mounted(){
+        this.getTempleDetail();
+    },
+    methods: {
+        async getTempleDetail(){
+            const res = await getTempleDetail(this.query.temple_id);
+            console.log(res)
+            this.data = res;
+        }
+    }
 }
 </script>
 
@@ -62,9 +73,15 @@ export default {
         width: 100%;
     }
     .authed{
-        font-size: .4rem;
+        font-size: .35rem;
         line-height: 1.2rem;
         padding-left: .4rem;
+        color: #888;
+        img{
+            width: .3rem;
+            vertical-align: middle;
+            margin-right: .1rem;
+        }
     }
     .auth{
         margin: .4rem;
@@ -100,14 +117,14 @@ export default {
                 margin-right: .3rem;
                 img{
                     width: 100%;
+                    vertical-align: top;
                 }
             }
         }
         .description{
             font-size: .4rem;
-            color: #666;
+            color: #888;
-            text-indent: 2em;
+            line-height: 1.7;
-            line-height: 1.4;
             padding-top: .35rem;
             letter-spacing: 1px;
             text-align: justify;

src/pages/temple-home/index.vue

@@ -1,75 +1,45 @@
 <template>
-  <div class="temple-home-page">
+  <div class="temple-home-page" v-if="data">
     <div class="temple-home">
-        <span class="temple-name">重庆石林寺</span>
+        <span class="temple-name">{{data.temple_data.unit_name}}</span>
         <div class="visitor">
-            <span>重庆市大渡口区</span>
+            <span>{{data.temple_data.region}}</span>
-            <span>123232到访</span>
+            <span>{{data.temple_data.visit}}到访</span>
         </div>
     </div>
-    <div class="certed-temple">
+    <div class="certed-temple" @click="$router.push({name: 'temple-detail', query: { temple_id: query.temple_id}})">
-        <span class="text">佛教协会认证寺院 可放心访问</span>
+      <img class="cert-icon" src="@/assets/img/cert.jpg" alt="">
-        <span class="btn">查看</span>
+      <span class="text">佛教协会认证寺院 可放心访问</span>
+      <span class="btn">查看</span>
     </div>
-    <van-search v-model="value" placeholder="寺院、主持、监寺" />
     <div class="container">
       <div class="swiper">
-        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+        <van-swipe class="my-swipe" :autoplay="8000" indicator-color="white">
-          <van-swipe-item>
+          <van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
-            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
+            <img :src="banner.cover" alt="" @click="$router.push({ path: banner.url})">
-          </van-swipe-item>
-          <van-swipe-item>
-            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
-          </van-swipe-item>
-          <van-swipe-item>
-            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
-          </van-swipe-item>
-          <van-swipe-item>
-            <img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
           </van-swipe-item>
         </van-swipe>
       </div>
-      <van-grid :border="false">
+      <van-swipe class="grid-nav" :loop="false">
-        <van-grid-item icon="photo-o" text="佛前供灯" />
+        <van-swipe-item v-for="(item, index) in data.icon_data" :key="index">
-        <van-grid-item icon="photo-o" text="日行一善" />
+          <van-grid :border="false">
-        <van-grid-item icon="photo-o" text="祈福" />
+            <van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index">
-        <van-grid-item icon="photo-o" text="放生修福" />
+              <img :src="nav.icon_url" class="nav-icon" slot="icon">
-        <van-grid-item icon="photo-o" text="供养三宝" />
+            </van-grid-item>
-        <van-grid-item icon="photo-o" text="供奉排位" />
+          </van-grid>
-        <van-grid-item icon="photo-o" text="捐建寺院" />
+        </van-swipe-item>
-        <van-grid-item icon="photo-o" text="功德箱" />
+      </van-swipe>
-      </van-grid>
+      <user-dynamic></user-dynamic>
-      <van-notice-bar
-        border
-        left-icon="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto"
-        :scrollable="false"
-        mode="closeable"
-        text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
-      />
     </div>
     <div class="divider"></div>
-    <div class="user-dynamic">
+   
-      <img class="avatar" src="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto" alt="">
-      <span class="username">信众信众信众信众</span>
-      <span class="content">永沐佛恩，慈悲加持，世代永沐佛恩，慈悲加持，世代...</span>
-      <span class="time">2小时前</span>
-    </div>
     <div class="temple-manager">
-      <div class="manager">
+      <div class="manager" v-for="manager in data.member_data" :key="manager.id" @click="$router.push({ name: 'monk', query: { master_id: manager.id }})">
-        <img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
+        <img class="avatar" :src="manager.avatar_url" alt="">
         <div class="manager-container">
-          <h3 class="name">住持：素全大法师</h3>
+          <h3 class="name">{{manager.title}}</h3>
           <p class="content">
-            <span>素全法师，法名智国，属羊，出生于成都市。2006-7-28日入驻四川省什邡市的罗汉寺。1989年，出于对佛教文化的特别喜爱，于昭觉寺皈依清定上师，法名智国。1992～1996年，受隆莲法师影响和介绍到成都市的龙泉驿区的石经寺依贞意大和尚出家。1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</span>
+            <span v-html="manager.description"></span>
-          </p>
-        </div>
-      </div>
-      <div class="manager">
-        <img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
-        <div class="manager-container">
-          <h3 class="name">住持：素全大法师</h3>
-          <p class="content">
-            <span>素全法师，法名智国，属羊，出生于成都市。2006-7-28日入驻四川省什邡市的罗汉寺。1989年，出于对佛教文化的特别喜爱，于昭觉寺皈依清定上师，法名智国。1992～1996年，受隆莲法师影响和介绍到成都市的龙泉驿区的石经寺依贞意大和尚出家。1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</span>
           </p>
         </div>
       </div>
@@ -77,7 +47,7 @@
     <div class="panel">
       <div class="panel-head">
         <span class="title">功德无量</span>
-        <span class="external">更多</span>
+        <arrow-more></arrow-more>
       </div>
       <div class="panel-body">
         <div class="merit-group">
@@ -97,16 +67,14 @@
       </div>
     </div>
     <div class="divider"></div>
-    <div class="panel">
+    <div class="panel temple-home-activity">
       <div class="panel-head">
         <span class="title">进展状态</span>
-        <span class="external">更多</span>
+        <arrow-more></arrow-more>
       </div>
       <div class="panel-body">
-        <buddha-process></buddha-process>
+        <buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process>
-        <buddha-process></buddha-process>
+        <div class="process-more" @click="onMoreDynamic">
-        <buddha-process></buddha-process>
-        <div class="process-more">
           <span>查看更多进展状态</span>
           <i class="iconfont icon-arrow-right"></i>
         </div>
@@ -173,11 +141,37 @@
 </template>
 
 <script>
+import { getTempleIndex } from "@/api"
+
 export default {
   data(){
     return {
-      showUserMenu: true,
+      query: this.$route.query,
-      value: ''
+      showUserMenu: false,
+      data: null
+    }
+  },
+  mounted(){
+    this.getTempleIndex();
+  },
+  methods: {
+    async getTempleIndex(){
+      const res = await getTempleIndex(this.query.temple_id);
+      this.data = res;
+      this.data.icon_data = this.sliceNav(res.icon_data)
+    },
+    sliceNav(navData){
+      const nav = [];
+      const slice = 8;
+
+      for(let i = 0; i < Math.ceil(navData.length / slice); i++){
+        const b = navData.slice(i * slice, i * slice + slice);
+        nav.push(b)
+      }
+      return nav;
+    },
+    onMoreDynamic(){
+      this.$router.push({ name: 'buddha-activity'})
     }
   }
 }
@@ -265,40 +259,7 @@ export default {
     margin-top: .1rem;
   }
 }
-.user-dynamic{
+
-  display: flex;
-  border: 1px solid #d6d6d6;
-  border-radius: .08rem;
-  background: white;
-  padding:  .2rem .2rem;
-  margin: .3rem .4rem;
-  align-items: center;
-  .avatar{
-    width: 1.07rem;
-    height: 1.07rem;
-    border-radius: 1.07rem;
-  }
-  .username{
-    padding: 0 .2rem;
-    white-space: nowrap;
-    max-width: 1.33rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: .37rem;
-  }
-  .content{
-    flex: 1;
-    font-size: .32rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding-right: .4rem;
-  }
-  .time{
-    font-size: .3rem;
-    color: rgb(105, 105, 105);
-  }
-}
 .temple-manager{
   .manager{
     display: flex;
@@ -308,9 +269,12 @@ export default {
       padding-top: .4rem;
     }
     .avatar{
-      width: 1.33rem;
+      width: 1rem;
-      height: 1.33rem;
+      height: 1rem;
       border-radius: 1.33rem;
+      border: .08rem solid #f7e4bf;
+      vertical-align: top;
+
     }
     .manager-container{
       flex: 1;
@@ -318,19 +282,20 @@ export default {
       .name{
         padding: .3rem .3rem .3rem 0;
         font-size: .4rem;
+        color: #666;
       }
       .content{
-        font-size: .37rem;
+        font-size: .35rem;
-        line-height: 1.3;
+        line-height: 1.5;
         display: -webkit-box;
         overflow: hidden;
         text-overflow: ellipsis;
         word-break: break-all;
         -webkit-line-clamp: 3;
         text-align: justify;
-        height: 3.8em;
+        height: 4.3em;
         -webkit-box-orient: vertical;
-        color: #666;
+        color: #999;
       }
     }
   }
@@ -363,34 +328,58 @@ export default {
     }
   }
 }
+.grid-nav{
+  margin-bottom: .8rem;
+  .nav-icon{
+    width: 1.07rem;
+    height: 1.07rem;
+  }
+  .van-swipe__indicators{
+    bottom: 0;
+    .van-swipe__indicator{
+      width: 20px;
+      height: 2px;
+      border-radius: 10px;
+    }
+    .van-swipe__indicator--active{
+      background: $primary-color;
+    }
+  }
+}
 .certed-temple{
     display: flex;
-    border: 1px solid #ddd;
+    border: 1px solid $primary-color;
     border-radius: 4px;
     margin: 0 .4rem;
+    align-items: center;
     font-size: .37rem;
-    padding: .4rem;
+    padding: .3rem;
     margin-bottom: .2rem;
+    .cert-icon{
+      width: .3rem;
+      margin-right: .1rem;
+    }
     .text{
         flex: 1;
-        font-size: .35rem;
+        font-size: .3rem;
-        color: #666;
+        color: #888;
+        padding-top: 2px;
     }
     .btn{
         color: $primary-color;
     }
 }
 .process-more{
-  line-height: 1.17rem;
+  line-height: 1.5rem;
   text-align: center;
-  font-size: .37rem;
+  font-size: .4rem;
   .iconfont{
     vertical-align: middle;
   }
 }
 .container{
   padding: .4rem;
-  padding-bottom: .53rem;
+  padding-bottom: .33rem;
   .my-swipe .van-swipe-item {
     color: #fff;
     font-size: 20px;
@@ -416,14 +405,12 @@ export default {
     padding: .53rem .4rem;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     .title{
       font-size: .43rem;
       color: #222222;
     }
-    .external{
+    
-      font-size: .37rem;
-      color: #666666;
-    }
   }
   .panel-body{
     padding: 0 .4rem;
@@ -435,6 +422,14 @@ export default {
     }
   }
 }
+.temple-home-activity{
+  .process{
+    padding: .4rem 0;
+    .bar{
+      padding-bottom: 0;
+    }
+  }
+}
 .merit{
   width: 3.39rem;
   height: 3.39rem;
@@ -475,9 +470,11 @@ export default {
         padding: .4rem .3rem;
         .temple-name{
             font-size: .45rem;
+            color: #666;
         }
         .visitor{
-            color: #666;
+            color: #999;
+            font-size: .3rem;
             span{
                 padding-left: 10px;
             }

src/pages/temple-list/index.vue

@@ -2,7 +2,11 @@
     <div>
         <div class="topbar" ref="topbar">
             <van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
-            <van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" />
+            <van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
+                <template #action>
+                    <span @click="onSearch">搜索</span>
+                </template>
+            </van-search>
             <div class="operation-bar">
                 <div class="position">
                     <span class="iconfont icon-dingwei"></span>
@@ -31,7 +35,7 @@
                 @pulldown="refresh"
                 @pullup="loadMore"
             >
-                <temple v-for="i in 10" :key="i"></temple>
+                <temple v-for="temple in templeList" :key="temple.id" :data="temple"></temple>
             </scroll-view>
             <div class="temple-map" id="container" v-show="mode === 'map'">
 
@@ -41,6 +45,7 @@
 </template>
 
 <script>
+import { getTempleList } from '@/api';
 import TMAPLoader from '@/common/tmap';
 
 export default {
@@ -48,7 +53,11 @@ export default {
         return {
             containerHeight: 0,
             keyword: '',
-            mode: 'list'
+            mode: 'list',
+            page: 1,
+            templeList: [],
+            lng: '',
+            lat: ''
         }
     },
     inject: ['root', 'tabbar'],
@@ -69,12 +78,30 @@ export default {
             });
             console.log(map)
         })
-        
+        this.getTempleList();
     },
     methods: {
+        async getTempleList(){
+            const res = await getTempleList(this.keyword, this.lng, this.lat, this.page);
+            console.log(res)
+            if(this.page === 1){
+                this.total = res.total;
+                this.templeList = res.results;
+            } else {
+                this.templeList = this.templeList.concat(res.results);
+            }
+        },
         onModeSwitch(mode){
             this.mode = mode;
         },
+        onCancel(){
+            this.keyword = ''
+            this.page = 1;
+            this.getTempleList();
+        },
+        onSearch(){
+            this.getTempleList();
+        },
         loadMore(){
             console.log('加载更多')
         },

src/pages/user/course/count/index.vue

@@ -6,7 +6,7 @@
        <div class="course-container">
             <h1 class="title border-bottom">
                 <span class="title-text">{{data.name || '波若波罗密多心经'}}</span>
-                <span class="feedback">回向文</span>
+                <span class="feedback" @click="backVisible = true">回向文</span>
             </h1>
             <h2 class="content-name">经文内容</h2>
             <p class="content" v-html="data.content"></p>
@@ -15,23 +15,51 @@
         <div class="operation">
             <div class="bar">
                 <div class="btn-group">
-                    <span class="btn">直接报数</span>
+                    <span class="btn" @click="visible = true">直接报数</span>
-                    <span class="btn">智能计数</span>
+                    <!-- <span class="btn">智能计数</span> -->
                 </div>
-                <span class="volumn">
+                <span class="volumn" @click="muted = !muted">
-                    <i class="iconfont icon-shengyinkai"></i>
+                    <i class="iconfont" :class="[!muted ? 'icon-shengyinkai' : 'icon-shengyinguan']"></i>
                 </span>
             </div>
-            <h4 class="volumn-count">0</h4>
+            <h4 class="volumn-count">{{count}}</h4>
             <div class="picture-wrapper">
-                <span></span>
+                <span @touchstart="onTouchstart" @touchend="onTouchEnd">
+                    <img v-if="pressed" src="@/assets/img/down.jpg" alt="">
+                    <img v-else src="@/assets/img/up.jpg" alt="">
+                </span>
+            </div>
+            <div class="save-group">
+                <span class="save" @click="saveCount"><i class="iconfont icon-baocun"></i>保存</span>
+                <span class="clear" @click="clear"><i class="iconfont icon-qingchu"></i>清零</span>
             </div>
         </div>
+        <audio class="audio" src="@/assets/wav/muyu-voice.wav" ref="audio" :muted="muted"></audio>
+        <!-- <audio class="audio" src="@/assets/wav/muyu2.mp3" ref="audio" :muted="muted"></audio> -->
+
+        <van-popup v-model="visible" round>
+            <div class="input-count">
+                <h1 class="title">直接报数</h1>
+                <input class="input" v-model="inputCount" type="tel" placeholder="请输入1-9的数字" v-number-only>
+                <button class="confirm" @click="onConfirm">确认</button>
+            </div>
+        </van-popup>
+
+        <van-popup v-model="backVisible" round :overlay-style="{backgroundColor: 'rgba(0,0,0,0.5)'}" class="backward-popup">
+            <div class="backword">
+                <h4 class="title">回向文</h4>
+                <textarea v-model="backwards" name="" class="textarea"></textarea>
+            </div>
+            <!-- <div class="">
+                <span class="iconfont icon-weixin"></span>
+                <span class="iconfont icon-pengyouquan"></span>
+            </div> -->
+        </van-popup>
     </div>
 </template>
 
 <script>
-import { getCourseDetail } from "@/api"
+import { getCourseDetail, postCount } from "@/api"
 
 export default {
     data(){
@@ -39,6 +67,13 @@ export default {
         return {
             query,
             data: null,
+            pressed: false,
+            muted: false,
+            count: 0,
+            inputCount: 0,
+            visible: false,
+            backVisible: false,
+            backwards: ''
         }
     },
     mounted(){
@@ -48,8 +83,44 @@ export default {
         async getCourseDetail(){
             const res = await getCourseDetail(this.query.id);
             this.data = res;
+            this.backwards = res.backward
         },
-       
+        onTouchstart(){
+            this.pressed = true;
+            const audio = this.$refs.audio;
+            audio.muted = this.muted
+            audio.play()
+            this.count += 1
+        },
+        onTouchEnd(){
+            this.pressed = false;
+        },
+        onConfirm(){
+            this.count = Number(this.inputCount);
+            this.visible = false;
+        },
+        async saveCount(){
+            const request = {
+                course_id: this.query.id,
+                quantity: this.count,
+                backward: this.backwards
+            }
+            const res = await postCount(this.query.id, request)
+            console.log(res)
+            this.$toast.success('成功')
+        },
+        clear(){
+            this.$dialog.confirm({
+                message: '确认清除计数器？',
+            })
+            .then(() => {
+                // on confirm
+                this.count = 0;
+            })
+            .catch(() => {
+                // on cancel
+            });
+        }
     }
 }
 </script>
@@ -57,6 +128,9 @@ export default {
 <style lang="scss">
 .course-detail-count{
     background-size: 100%;
+    .audio{
+        display: none;
+    }
     .on-count{
         position: fixed;
         right: 0;
@@ -109,7 +183,7 @@ export default {
         .bar{
             display: flex;
             justify-content: space-between;
-            height: 1.2rem;
+            height: 1rem;
             align-items: center;
             padding: 0 .4rem;
             span{
@@ -154,6 +228,15 @@ export default {
             margin-right: auto;
             margin-top: .3rem;
             position: relative;
+            span{
+                width: 100%;
+                height: 100%;
+                display: inline-block;
+            }
+            &::after,
+            &::before{
+                pointer-events: none;
+            }
             &::before{
                 content: '';
                 width: 3rem;
@@ -184,10 +267,83 @@ export default {
                     border-color: $primary-color;
                 }
             }
+            span{
+                img{
+                    width: 3rem;
+                    height: 3rem;
+                }
+            }
+        }
+        .save-group{
+            text-align: center;
+            font-size: .4rem;
+            padding-top: .8rem;
+            span{
+                display: inline-block;
+                padding: 0 1rem;
+                .iconfont{
+                    margin-right: .1rem;
+                    vertical-align: middle;
+                }
+            }
         }
     }
 }
-
+.backward-popup{
+    top: 44%
+}
+.input-count{
+    padding: .4rem ;
+    width: 8rem;
+    .title{
+        font-size: .4rem;
+        text-align: center;
+        padding-bottom: .8rem;
+    }
+    .input{
+        width: 100%;
+        font-size: .4rem;
+        background: #f5f5f5;
+        border: 1px solid #ddd;
+        height: 1rem;
+        line-height: 1rem;
+        border-radius: .06rem;
+        text-indent: 1em;
+    }
+    .confirm{
+        margin: 0 auto;
+        width: 100%;
+        height: 1.2rem;
+        line-height: 1rem;
+        display: block;
+        margin-top: .4rem;
+        font-size: .4rem;
+        color: $primary-color;
+    }
+}
+.backword{
+    width: 90vw;
+    height: 80vh;
+    background: #ECF1F4 url('~@/assets/img/backward2.jpg') bottom center no-repeat;
+    background-size: contain;
+    .title{
+        font-size: .5rem;
+        text-align: center;
+        padding-top: .8rem;
+        padding-bottom: .8rem;
+    }
+    .textarea{
+        background:transparent;
+        border: 1px solid transparent;
+        width: calc(100% - 1.2rem);
+        padding-left: .6rem;
+        padding-right: .6rem;
+        height: 6rem;
+        line-height: 1.4;
+        color: #333;
+        font-size: .4rem;
+    }
+}
 @keyframes scale {
     0%{
         transform: scale(1, 1);

src/router/index.js

@@ -72,6 +72,12 @@ const routes = [
         meta: { title: '支付', navBarBackgroundColor: 'white' },
         component: () => import('@/pages/pay')
     },
+    {
+        path: '/pay-result',
+        name: 'pay-result',
+        meta: { title: '支付成功', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/pay-result')
+    },
     {
         path: '/join-cert',
         name: 'join-cert',
@@ -168,7 +174,14 @@ const routes = [
 ]
 const router = new Router({
     mode: 'hash',
-    routes
+    routes,
+    scrollBehavior(to, from, savedPosition){
+        console.log('savedPositon', savedPosition)
+        return {
+            x: 0,
+            y: 0
+        }
+    }
 })
 
 export default router;
@@ -177,26 +190,36 @@ export const tabbar = [
     {
         path: '/',
         name: 'home',
+        active: require('../assets/img/tabbar/tabbar_icon_01_click.png'),
+        inactive: require('../assets/img/tabbar/tabbar_icon_01.png'),
         title: '首页'
     },
     {
         path: '/user/course',
         name: 'user-course',
+        active: require('../assets/img/tabbar/tabbar_icon_02_click.png'),
+        inactive: require('../assets/img/tabbar/tabbar_icon_02.png'),
         title: '修行'
     },
     {
         path: '/merit-box',
         name: 'merit-box',
+        active: require('../assets/img/tabbar/tabbar_icon_03_click.png'),
+        inactive: require('../assets/img/tabbar/tabbar_icon_03.png'),
         title: '每日功德'
     },
     {
         path: '/temple/list',
         name: 'temple-list',
+        active: require('../assets/img/tabbar/tabbar_icon_04_click.png'),
+        inactive: require('../assets/img/tabbar/tabbar_icon_04.png'),
         title: '参寺'
     },
     {
         path: '/user',
         name: 'user',
+        active: require('../assets/img/tabbar/tabbar_icon_05_click.png'),
+        inactive: require('../assets/img/tabbar/tabbar_icon_05.png'),
         title: '我的'
     },
 ]