添加佛前供灯

.env.development

@@ -1,3 +1,4 @@
-VUE_APP_HOST=https://test-temple.wdx-tc.com/
+# VUE_APP_HOST=https://test-temple.wdx-tc.com/
+VUE_APP_HOST=https://demo.6bsq.com/
 NODE_ENV = development
 VUE_APP_TMAP_KEY=ZFGBZ-76ICF-BG5JY-NH4HX-MQOOJ-VJB4E

package.json

@@ -23,7 +23,8 @@
     "vue": "^2.6.11",
     "vue-awesome-swiper": "3.1.3",
     "vue-router": "^3.5.3",
-    "vuex": "^3.6.2"
+    "vuex": "3",
+    "vuex-persistedstate": "^4.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

public/index.html

@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>自在福田</title>
+    <title></title>
   </head>
   <body>
     <noscript>

src/App.vue

@@ -37,7 +37,6 @@ export default {
             parentHeight: this.minHeight - this.tabHeight
         };
     },
-    components: {},
     watch: {
         '$route': {
             handler(val) {
@@ -51,16 +50,14 @@ export default {
                 this.$nextTick(() => {
                     const { tabbar } = this.$refs;
                     this.tabHeight = tabbar ? tabbar.$el.offsetHeight - safeAreaInsets.bottom: 0;
-                    console.log(this.tabHeight, )
                 })
             },
             immediate: true,
         }
     },
-
     mounted(){
-        console.log('safe-area-inset-bottom', safeAreaInsets.bottom)
+        console.log('launch', this.$route.query)
-
+        this.$store.commit('SET_LAUNCH', this.$route.query)
     },
     computed: {
         showTabbar() {

src/api/index.js

@@ -56,12 +56,18 @@ const postMobileCode = (mobile, code) => service.post('/api/sms-validate', { mob
 // 添砖加瓦日行一善商品
 const getGoodsDetail = (goods_type, goods_id, temple_id) => service.get(`/api/${goods_type}/get-info?id=${goods_id}&temple_id=${temple_id}`);
 
+// 佛前供灯商品
+const getGoodsLightDetail = (goods_type, goods_id, temple_id) => service.get(`/api/temple/light?id=${goods_id}&temple_id=${temple_id}`);
+
 // 创建日行一善商品订单
 const createFriendlyDayOrder = data => service.post('/api/order/create-friendly', data);
 
 //创建通用商品订单
 const createCommonOrder = data => service.post(`/api/order/create-common`, data);
 
+//创建佛前供灯订单
+const createLightOrder = data => service.post(`/api/order/create-light`, data);
+
 // 创建添砖加瓦订单
 const createBrickDayOrder = data => service.post('/api/order/create-tile', data);
 
@@ -108,7 +114,7 @@ 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 getMeritBox = (temple_id = '', type, page,  size = 10, domain = '3') => service.get(`/api/temple/get-merit-box?temple_id=${temple_id}&type=${type}&page=${page}&size=${size}&domain=${domain}`,)
 
 // 添加功德箱订单
 const createMeritBoxOrder = data => service.post(`/api/order/create-merit-box`, data)
@@ -125,6 +131,9 @@ const getCommonGoods = (temple_id = '', page, size = 10) => service.get(`/api/co
 // 获取订单榜
 const getOrderCompare = (temple_id = '1', 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}`);
 
+// 根据agent_id获取订单榜
+const getOrderCompareByAgentId = (agent_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?agent_id=${agent_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}`)
 
@@ -149,6 +158,9 @@ const getHotWords = () => service.get(`/api/keywords/get-list`);
 // 获取入驻模板
 const getStationTemplate = template_id => service.get(`/api/temple-template-share?id=${template_id}`);
 
+// 平台首页
+const getPlatformHome = agent_id => service.get(`/api/home?agent_id=${agent_id}`)
+
 export {
     getHotWords,
     getMonkAppellation,
@@ -161,6 +173,7 @@ export {
     certifyMonk,
     getUserData,
     getGoodsDetail,
+    getGoodsLightDetail,
     getDreamList,
     getMeritName,
     createFriendlyDayOrder,
@@ -181,14 +194,17 @@ export {
     getMeritBox,
     createMeritBoxOrder,
     createCommonOrder,
+    createLightOrder,
     getDynamicData,
     getDynamicDetail,
     getCommonGoods,
     getOrderCompare,
+    getOrderCompareByAgentId,
     getMyCollectionList,
     getOrderList,
     getOrder,
     getCustomerList,
     getCertList,
-    getStationTemplate
+    getStationTemplate,
+    getPlatformHome
 }

src/common/vant.js

@@ -30,7 +30,7 @@ import {
 	ShareSheet,
 	Loading,
 	Dialog,
-	Icon
+	Icon,
 } from "vant";
 
 Vue.use(NavBar);

src/components/Thanksgiving/index.vue

@@ -20,14 +20,11 @@
 </template>
 
 <script>
-import { getOrderCompare } from "@/api";
+import { getOrderCompare, getOrderCompareByAgentId } from "@/api";
 export default {
     name: 'thanks-giving',
     props: {
-        templeId: {
+        templeId: [String, Number],
-            type: [String, Number],
-            default: ''
-        },
         goodsType: {
             type: String,
         },
@@ -36,7 +33,9 @@ export default {
         },
         typeId: {
             type: [String, Number]
-        }
+        },
+        agentId: [String, Number],
+
     },
     
     data(){
@@ -65,7 +64,12 @@ export default {
             this.getOrderCompare();
         },
         async getOrderCompare(){
-            const res = await getOrderCompare(this.templeId || '1', this.type_id, this.goodsId, this.goodsType)
+            let res;
+            if(this.templeId){
+                res = await getOrderCompare(this.templeId || '1', this.type_id, this.goodsId, this.goodsType)
+            } else {
+                res = await getOrderCompareByAgentId(this.agentId, this.type_id, this.goodsId, this.goodsType)
+            }
             const current = this.type_nav.find(item => item.id === this.type_id);
             current.list = res.list
         },

src/components/merit-name/index.vue

@@ -38,6 +38,7 @@ export default {
     },
     data() {
         return {
+            loading: false,
             name: '',
             names: [],
             selectedName: [],
@@ -46,7 +47,6 @@ export default {
     watch: {
         visible(value){
             if(value){
-
                 this.selectedName = this.selected.map(v => v.id)
             }
         }
@@ -76,7 +76,15 @@ export default {
             const data = await getMeritName();
             this.names = data;
         },
-        onConfirmMeritName() {
+        async onConfirmMeritName() {
+            if(this.name){
+                const name = this.name;
+                await this.addName(this.name);
+                const selected = this.names.filter(item => item.name === name);
+                this.onClose();
+                this.$emit('change', selected);
+                return ;
+            }
             const selected = this.names.filter(item => this.selectedName.includes(item.id));
             this.onClose();
             this.$emit('change', selected);
@@ -124,14 +132,14 @@ export default {
         height: 30vh;
         span {
             display: inline-block;
-            padding: .2rem .3rem;
+            padding: .3rem .6rem;
             background: #fff;
             border: 1px solid #ddd;
             border-radius: .08rem;
             position: relative;
             margin-right: .2rem;
             margin-bottom: .2rem;
-            font-size: .35rem;
+            font-size: .4rem;
             position: relative;
             vertical-align: top;
 
@@ -139,7 +147,7 @@ export default {
                 position: absolute;
                 right: -.25rem;
                 top: -.25rem;
-                font-size: .5rem;
+                font-size: .7rem;
                 color: red;
             }
             input[type=checkbox]{

src/main.js

@@ -4,9 +4,11 @@ import globalMixin from './mixins';
 import App from './App.vue'
 import delay from 'delay'
 import router from './router';
+import store from './store';
 import '@/assets/js/flexable.js';
 import './common/vant';
 import './components/index'
+
 // swiper 样式全局引入， 组件页面引入。 Ref: https://www.jianshu.com/p/03f9fa94c474
 import 'swiper/css/swiper.css';
 import config from './config';
@@ -18,6 +20,7 @@ Vue.config.productionTip = false
 Vue.prototype.$delay = delay;
 Vue.prototype.$config = config;
 Vue.prototype.$utils = utils;
+Vue.prototype.$store = store;
 Vue.component('mescroll-vue', MescrollVue)
 
 new Vue({

src/pages/fill-name/index.vue

@@ -9,14 +9,14 @@
                     </div>
                 </div>
                 <div class="field">
-                    <label class="required">心愿</label>
+                    <label  >心愿</label>
                     <div class="input-wrapper" @click="onShowDesire">
                         <textarea class="input" v-model="dream" placeholder="请填写您的心愿" readonly type="textarea" />
                         <i class="iconfont icon-arrow-right"></i>
                     </div>
                 </div>
                 <div class="field">
-                    <label class="required">手机号码</label>
+                    <label  >手机号码</label>
                     <div class="input-wrapper">
                         <input class="input" v-model="mobile" type="tel" placeholder="请填写手机号码">
                     </div>
@@ -79,12 +79,12 @@ export default {
             if(!this.meritId){
                 return this.$toast.fail('请填写功德芳名');
             }
-            if(!this.dream){
+            // if(!this.dream){
-                return this.$toast.fail('请填写心愿');
+            //     return this.$toast.fail('请填写心愿');
-            }
+            // }
-            if(!this.mobile){
+            // if(!this.mobile){
-                return this.$toast.fail('请填写功德主手机号');
+            //     return this.$toast.fail('请填写功德主手机号');
-            }
+            // }
             console.log('query',  {
             ...this.$route.query,
                     dream: this.dream,

src/pages/goods-detail/index.vue

@@ -14,6 +14,13 @@
                 <span>已有{{data.sales || 0}}人参与</span>
             </div>
         </div>
+        <div class="temple-info">
+            <img class="temple-img" :src="data.cover_url" alt="">
+            <div class="temple-name">
+                <h4 class="name">铜梁古佛寺</h4>
+                <p class="visitor">已有 <span>1525</span> 人到访过</p>
+            </div>
+        </div>
         <div class="divider"></div>
         <div class="panel">
             <div class="panel-head">
@@ -49,7 +56,7 @@
                     </ul>
                 </div>
                 <transition>
-                    <template>
+                    <template >
                         <select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec>
                         <fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
                     </template>
@@ -82,6 +89,7 @@ export default {
     },
     data(){
         return {
+            result: 'a',
             showAnyAmount: false,
             paddingBottom: 0,
             fixedBottomHeight: 0,
@@ -130,7 +138,8 @@ export default {
                 return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100
             }
             return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
-        }
+        },
+
     },
     mounted(){
         this.getGoodsDetail('common');
@@ -212,6 +221,7 @@ export default {
 </script>
 
 <style lang="scss">
+$lightWidth: 1.3rem;
 .goods-detail{
     .goods-content{
         padding-left: .3rem;
@@ -221,6 +231,65 @@ export default {
             font-size: .35rem;
         }
     }
+    .light-container{
+        padding-left: .4rem;
+        padding-right: .4rem;
+        max-height: 10rem;
+        overflow: auto;
+        .light-wrapper{
+            border-top: 1px solid #ddd;
+            h1{
+                font-size: .4rem;
+                margin-top: .4rem;
+                margin-bottom: 3px;
+            }
+            .light-group{
+                img.light-icon{
+                    width: $lightWidth;
+                    height: $lightWidth;
+                    vertical-align: top;
+                }
+                span{
+                    font-size: .4rem;
+                    display: block;
+                    text-align: center;
+                    padding-top: .3rem;
+                }
+            }
+            .van-swipe__indicators {
+                bottom: 0rem;
+                .van-swipe__indicator {
+                    width: 20px;
+                    height: 2px;
+                    border-radius: 10px;
+                    background: #bbb;
+                }
+                .van-swipe__indicator--active {
+                    background: $primary-color;
+                }
+            }
+        }
+        .light-size,
+        .light-count{
+            font-size: .4rem;
+            display: flex;
+            justify-content: space-between;
+            margin-top: .6rem;
+            align-items: center;
+            margin-bottom: .65rem;
+            span{
+                color: black;
+                opacity: 1;
+            }
+        }
+        .light-size{
+            margin-top: 1.1rem;
+        }
+        .light-count{
+            align-items: center;
+            margin-bottom: .2rem;
+        }
+    }
     .support{
         margin-bottom: .5rem;
         .support-head{
@@ -257,13 +326,13 @@ export default {
     }
     .monk-profile{
         padding: .4rem;
-        margin-bottom: .53rem;
         .position{
             font-size: .5rem;
             padding-top: .2rem;
             color: #19282E;
             line-height: 1.3;
         }
+
         .introduction{
             font-size: .37rem;
             margin-top: .4rem;
@@ -288,6 +357,31 @@ export default {
             font-size: .28rem;
         }
     }
+    .temple-info{
+        border-top: 1px solid #ddd;
+        padding: .3rem .4rem;
+        display: flex;
+        align-items: center;
+        .temple-img{
+            width: 1rem;
+            height: 1rem;
+            border-radius: 1rem;
+            margin-right: .3rem;
+        }
+        .temple-name{
+            flex: 1;
+            .name{
+                font-size: .35rem;
+                color: #333;
+            }
+            .visitor{
+                color: #666;
+                font-size: .3rem;
+                margin-top: .2rem;
+                display: block;
+            }
+        }
+    }
     .detail-button-group{
 		text-align: center;
 		position: fixed;

src/pages/goods-light-detail/components/fill-information.vue

@@ -0,0 +1,202 @@
+<template>
+	<div>
+		<van-cell-group>
+			<van-cell title="功德芳名" :value="person.name" is-link @click="onAction('name')"/>
+			<van-cell title="心愿" :value="dream"  is-link @click="onAction('desire')" />
+		</van-cell-group>
+        <van-popup v-model="showDialog" position="bottom" safe-area-inset-bottom style="min-height: 50vh">
+            <div class="add-merit-name" v-if="actionName === 'name'">
+                <h3 class="title">功德芳名</h3>
+                <div class="add-name">
+                    <input class="input" type="text" v-model="name" placeholder="请输入功德主姓名">
+                    <button class="btn" @click="addName">添加</button>
+                </div>
+                <div class="name-group">
+                    <span class="name" v-for="(name, index) in names" :key="name.id" @click="onSelectName(name)">
+                        {{name.name}} 
+                        <i class="iconfont icon-biaodankongjianshanchu" @click.stop="onDeleteName(name, index)"></i>
+                    </span>
+                </div>
+                <button class="confirm" @click="onConfirmMeritName">确认</button>
+            </div>
+            <div class="add-merit-name" v-if="actionName === 'desire'">
+                <h3 class="title">心愿</h3>
+                <div class="desire-input">
+                    <textarea class="desire-textarea" v-model="dream" type="text" maxlength="50" placeholder="请输入您的心愿" />
+                    <span>{{dream.length}}/50</span>
+                </div>
+                <div class="desire-quike">
+                    <div class="bar">
+                        <span>快捷输入</span>
+                        <span class="update" @click="getDreamList">换一组<i class="iconfont icon-shuaxin"></i></span>
+                    </div>
+                    <div class="name-group">
+                        <span class="name" v-for="(dream, index) in dreamList" :key="index" @click="desire = dream">{{dream}}</span>
+                    </div>
+                </div>
+                <button class="confirm" @click="onConfirmDream">确认</button>
+            </div>
+        </van-popup>
+	</div>
+</template>
+
+<script>
+import { getDreamList, getMeritName } from '@/api';
+
+export default {
+    data(){
+        return {
+            checked: false,
+            showDialog: false,
+            actionName: 'name',
+            person: {},
+            name: '',
+            dream: '',
+            desire: '',
+            names: [],
+            dreamList: []
+        }
+    },
+    mounted(){
+        this.getName();
+        this.getDreamList();
+    },
+    methods: {
+        onAction(name){
+            this.showDialog = true;
+            this.actionName = name;
+        },
+        onConfirmMeritName(){
+            this.$emit('change', {
+                ...this.person,
+                merit_name_id: this.person.id,
+                dream: this.dream,
+            })
+        },
+        onSelectName(name){
+            this.person = name;
+            this.showDialog = false;
+        },
+        onConfirmDream(){
+            this.showDialog = false;
+            this.dream = this.desire;
+            this.onConfirmMeritName();
+        },
+
+        async getName() {
+            const data = await getMeritName();
+            this.names = data;
+        },
+        //获取心愿列表
+        async getDreamList(){
+            const list = await getDreamList();
+            console.log(list)
+            this.dreamList = list;
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.add-merit-name{
+    padding: .4rem;
+    .title{
+        font-size: .4rem;
+        margin-bottom: .4rem;
+    }
+    .add-name{
+        display: flex;
+        .input{
+            flex: 1;
+            height: .8rem;
+            line-height: .8rem;
+            padding-left: .3rem;
+            border: 1px solid #ddd;
+            border-radius: .11rem;
+            font-size: .4rem;
+        }
+        .btn{
+            padding: .2rem .6rem;
+            background: $primary-color;
+            color: white;
+            border: 1px solid $primary-color;
+            font-size: .4rem;
+            border-radius: .11rem;
+            margin-left: .3rem;
+        }
+    }
+    .name-group{
+        padding: .5rem 0;
+        span{
+            display: inline-block;
+            padding: .2rem .3rem;
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: .08rem;
+            position: relative;
+            margin-right: .4rem;
+            margin-bottom: .3rem;
+            font-size: .35rem;
+            vertical-align: top;
+            .iconfont{
+                position: absolute;
+                right: -.25rem;
+                top: -.25rem;
+                font-size: .5rem;
+                color: red;
+            }
+        }
+    }
+    .desire-input{
+        border: 1px solid #ddd;
+        border-radius: .13rem;
+        overflow: hidden;
+        .desire-textarea{
+            border: none;
+            display: block;
+            font-size: .35rem;
+            width: calc(100% - .5rem);
+            padding: .25rem;
+            height: 2rem;
+            resize: none;
+        }
+        span{
+            display: block;
+            text-align: right;
+            padding: .2rem;
+            font-size: .35rem;
+        }
+    }
+    .desire-quike{
+        margin-top: 1rem;
+        .bar{
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: .4rem;
+            margin-bottom: .3rem;
+            .update{
+                font-size: .35rem;
+                color: $primary-color;
+            }
+        }
+        .name-group{
+            padding: .1rem 0;
+            .name{
+              
+            }
+        }
+    }
+    .confirm{
+        background: $primary-color;
+        color: white;
+        border: 1px solid $primary-color;
+        width: 3rem;
+        padding: .3rem 0;
+        border-radius: .07rem;
+        display: block;
+        margin: 0 auto;
+        font-size: .4rem;
+    }
+}
+</style>

src/pages/goods-light-detail/components/select-spec.vue

@@ -0,0 +1,86 @@
+<template>
+	<span>
+		<ul class="spec-group">
+			<li class="border-circle" :class="[value === 'is_customized' && 'active']" @click="onAnyAmount">
+				<span>{{data.rule_btn}}</span>
+			</li>
+			<li class="border-circle" v-for="spec in data.spec" :key="spec.id" :class="[ value === spec.id && 'active']" @click="onSelectSpec(spec)">
+				<span>{{spec.spec_name}}</span>
+				<span>￥ {{spec.price}}</span>
+			</li>
+		</ul>
+
+		<div class="auto-donate-time">
+			<div class="donate">
+				<span class="label">数量</span>
+				<span class="time-cycle">
+					<van-stepper v-model="num" step="1" @change="onChangeNumber"/>
+				</span>
+			</div>
+		</div>
+	</span>
+</template>
+
+<script>
+
+
+export default {
+    props: {
+        value: {
+            type: [String, Number]
+        },
+        data: {
+            type: Object,
+        },
+        number: Number,
+    },
+    data(){
+        return {
+            num: 0,
+            is_customized: false,
+        }
+    },
+    watch: {
+        number: {
+            handler(val) {
+                this.num = val;
+            }
+        }
+    },
+    
+    methods: {
+        onChangeNumber(value){
+            this.$emit('update:number', value)
+        },
+        onSelectSpec(spec){
+            this.$emit('input', spec.id)
+        },
+        onAnyAmount(){
+            this.$emit('input', 'is_customized')
+        }
+    }
+};
+</script>
+
+<style lang="scss">
+.spec-group{
+    padding: .2rem .4rem;
+    max-height: 50vh;
+    overflow: scroll;
+    li{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 .4rem;
+        font-size: .4rem;
+        height: 1rem;
+        & ~ li{
+            margin-top: .3rem;
+        }
+    }
+    li.active{
+        border-color: $primary-color;
+        color: $primary-color;
+    }
+}
+</style>

src/pages/goods-light-detail/index.vue

@@ -0,0 +1,528 @@
+<template>
+    <div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
+        <swiper class="swiper-container" :options="swiperOption">
+            <swiper-slide v-for="(cover, index) in data.details.covers" :key="index">
+                <div style="height: 100vw;" class="picture">
+                    <img :src="cover" alt="">
+                </div>
+            </swiper-slide>
+        </swiper>
+        <div class="monk-profile">
+            <h1 class="position">{{data.details.title}}</h1>
+            <div class="bar">
+                <span class="status">进行中</span>
+                <span>已有{{data.details.sales || 0}}人参与</span>
+            </div>
+        </div>
+        <div class="temple-info">
+            <img class="temple-img" :src="data.temple.picture" alt="">
+            <div class="temple-name">
+                <h4 class="name">{{data.temple.unit_name}}</h4>
+                <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>
+            </div>
+        </div>
+        <div class="divider"></div>
+        <div class="panel">
+            <div class="panel-head">
+                <span class="title">详情</span>
+            </div>
+            <div v-html="data.content" class="goods-content"></div>
+        </div>
+        <div class="divider"></div>
+        <div class="support">
+            <div class="support-head">
+                <span class="label">感恩功德</span>
+                <ul class="external">
+                    <li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType)">{{lType.name}}</li>
+                </ul>
+            </div>
+            <div>
+                <user-merit v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
+            </div>
+        </div>
+
+        <fixed-bottom ref="fixedBottom">
+            <button class="merit-button" @click="showSpec = true">点击供灯</button>
+        </fixed-bottom>
+
+        <van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
+            <div class="caret-spec" >
+                <div class="head">
+                    <span>参与流程： </span>
+                    <ul class="step-inline">
+                        <li :class="[ current === 0 && 'current']">选择类型</li>
+                        <li :class="[ current === 1 && 'current']">填写信息</li>
+                        <li :class="[ current === 2 && 'current']">参与成功</li>
+                    </ul>
+                </div>
+                <transition>
+                    <div class="light-container">
+                        <div class="light-wrapper">
+                            <h1>选择祈福类型</h1>
+                            <div class="light-group">
+                                <van-swipe :loop="false">
+                                    <van-swipe-item v-for="(item, index) in lights" :key="index">
+                                        <van-grid :border="false" class="home-grid-nav" column-num="5">
+                                            <van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="onSelectLight(nav)">
+                                                <div class="light" :class="[currentLight.id === nav.id && 'current-light']">
+                                                    <img :src="nav.picture" class="light-icon"  />
+                                                    <span class="light-name">{{nav.name}}</span>
+                                                </div>
+                                            </van-grid-item>
+                                        </van-grid>
+                                    </van-swipe-item>
+                                </van-swipe>
+                            </div>
+                        </div>
+                        <div class="light-size">
+                            <span>灯型</span>
+                            <van-radio-group v-model="currentLightSize"  direction="horizontal">
+                                <van-radio :name="size.id" v-for="size in currentLight.children" :key="size.id" shape="square">{{size.name}}</van-radio>
+                            </van-radio-group>
+                        </div>
+                        <div class="light-count">
+                            <span>数量</span>
+                            <van-stepper v-model="buy_quantity" :min="1" input-width="40px" button-size="30px" />
+                        </div>
+                    </div>
+                </transition>
+                <div class="next-group">
+                    <span class="total">合计：<em>￥{{lightSize.price || 0}}</em></span>
+                    <button class="next" @click="onNextStep">下一步</button>
+                </div>
+            </div>
+        </van-popup>
+
+<!--        随喜金额-->
+        <random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
+    </div>
+</template>
+
+<script>
+import 'swiper/css/swiper.css'
+import { swiper, swiperSlide } from 'vue-awesome-swiper'
+import { getGoodsLightDetail, getOrderCompare } from '@/api';
+
+export default {
+    components: {
+        swiper, 
+        swiperSlide,
+    },
+    data(){
+        return {
+            result: [],
+            showAnyAmount: false,
+            paddingBottom: 0,
+            fixedBottomHeight: 0,
+            query: this.$route.query,
+            showSpec: false,
+            checked: false,
+            current: 0,
+            data: null,
+            value: '',
+            spec_id: '',
+            step: 0,
+            quantity: 1,
+            dreamInfo: null,
+            anyPrice: 0, // 随喜金额
+            swiperOption: {
+                autoplay: 8000,
+                initialSlide: 1,
+                loop: false,
+                pagination: '.swiper-pagination',
+                onSlideChangeEnd: swiper => {
+                    console.log('onSlideChangeEnd', swiper.realIndex)
+                }
+            },
+            listType: 1,
+            listTypes: [
+                { id: 1, name: '实时', },
+                { id: 2, name: '月榜', },
+                { id: 3, name: '总榜', },
+            ],
+            payList: [],
+            currentLight: null,
+            currentLightPrice: 0,
+            currentLightSize: '',
+            buy_quantity: 1, // 购买数量
+        }
+    },
+    computed: {
+        lightSize(){
+            const { currentLight, currentLightSize } = this;
+            if(!this.currentLightSize) return 0;
+            return currentLight.children.find(item => item.id === currentLightSize);
+        },
+        lights(){
+            const data = this.data;
+            if(!data) return [];
+            const { goods } = data;
+            const len = Math.ceil(goods.length / 15);
+            const lights = [];
+            for(let i = 0; i < len; i++){
+                lights.push(goods.slice(0 * i, 0 * i + 15))
+            }
+            return lights;
+        }
+    },
+    mounted(){
+        this.getGoodsLightDetail('common');
+    },
+    methods: {
+        // 选择供灯种类
+        onSelectLight(light){
+            this.currentLight = light;
+            this.currentLightSize = ''
+        },
+        // 接收随喜金额
+        onReceiveAnyAmount(anyObj){
+            this.anyPrice = anyObj.money;
+            this.onToFillMeritName();
+        },
+        // dreamInfo: 心愿信息
+        onDreamInfoChange(dreamInfo){
+            this.dreamInfo = dreamInfo;
+        },
+
+        onNextStep(){
+            if(!this.currentLightSize){
+                this.$toast.fail('请选择灯型')
+                return;
+            }
+            this.current += 1;
+            if(this.current > 0){
+                this.onToFillMeritName();
+            }
+        },
+        onToFillMeritName(){
+            this.$router.push({
+                name: 'fill-name',
+                query: {
+                    ...this.query,
+                    goods_id: this.currentLight.id,
+                    spec_id: this.lightSize.id,
+                    friendly_time: this.number,
+                    quantity: this.quantity,
+                    title: this.data.details.title,
+                    subTitle: this.currentLight.name + '：'+this.lightSize.name,
+                    amount: this.lightSize.price,
+                    from: 'goods_light', // 标识为通用商品
+                }
+            })
+        },
+        async getGoodsLightDetail(type){
+            const { goods_id, temple_id } = this.$route.query;
+            const response = await getGoodsLightDetail(type, goods_id, temple_id);
+            this.data = response;
+            this.currentLight = response.goods[0];
+            await this.getPayRecords({ id: 1});
+            this.$nextTick(() => {
+                this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight()
+            })
+            this.wechatReady({
+                ...this.data.shareConfig,
+                link: location.href
+            })
+        },
+        // 获取感恩功德
+        async getPayRecords(lType){
+            this.listType = lType.id;
+            const res = await getOrderCompare(this.query.temple_id, this.listType, this.query.goods_id, 3 );
+            console.log('pay record', res)
+            this.payList = res.list;
+        },
+    }
+}
+</script>
+
+<style lang="scss">
+$lightWidth: 1.3rem;
+.goods-detail{
+    .goods-content{
+        padding-left: .3rem;
+        padding-right: .3rem;
+        * {
+            max-width: 100%;
+            font-size: .35rem;
+        }
+    }
+    .light-container{
+        padding-left: .4rem;
+        padding-right: .4rem;
+        max-height: 10rem;
+        overflow: auto;
+        .light-wrapper{
+            border-top: 1px solid #ddd;
+            h1{
+                font-size: .4rem;
+                margin-top: .4rem;
+                margin-bottom: 3px;
+            }
+            .light-group{
+                .light{
+                    padding: 5px;
+                    text-align: center;
+                    border: 1px solid transparent;
+                }
+                .current-light{
+                    border: 1px solid $primary-color;
+                    border-radius: 4px;
+                    span{
+                        color: $primary-color;
+                    }
+                }
+                img.light-icon{
+                    width: $lightWidth;
+                    height: $lightWidth;
+                    vertical-align: top;
+                }
+                span{
+                    font-size: .4rem;
+                    display: block;
+                    text-align: center;
+                    padding-top: .3rem;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+            }
+            .van-swipe__indicators {
+                bottom: 0rem;
+                .van-swipe__indicator {
+                    width: 20px;
+                    height: 2px;
+                    border-radius: 10px;
+                    background: #bbb;
+                }
+                .van-swipe__indicator--active {
+                    background: $primary-color;
+                }
+            }
+        }
+        .light-size,
+        .light-count{
+            font-size: .4rem;
+            display: flex;
+            justify-content: space-between;
+            margin-top: .6rem;
+            align-items: center;
+            margin-bottom: .65rem;
+            span{
+                color: black;
+                opacity: 1;
+            }
+        }
+        .light-size{
+            margin-top: 1.1rem;
+            .van-radio__label{
+                margin-left: 4px;
+                font-size: .35rem;
+            }
+            .van-radio__icon .van-icon{
+                width: .5rem;
+                height: .5rem;
+                line-height: .5rem;
+            }
+        }
+        .light-count{
+            align-items: center;
+            margin-bottom: .2rem;
+        }
+    }
+    .support{
+        margin-bottom: .5rem;
+        .support-head{
+            padding: 0 .4rem;
+            display: flex;
+            justify-content: space-between;
+            height: 1.07rem;
+            line-height: 1.07rem;
+            .label{
+                font-size: .4rem;
+                font-weight: bold;
+            }
+            .external{
+                display: flex;
+                align-items: center;
+                li{
+                    margin-left: .3rem;
+                    font-size: .35rem;
+                    color: #666;
+                }
+                li.active{
+                    color: #333;
+                    font-weight: bold;
+                }
+            }
+        }
+    }
+    .swiper-container{
+        background: #f5f5f5;
+        .picture, img{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    .monk-profile{
+        padding: .4rem;
+        .position{
+            font-size: .5rem;
+            padding-top: .2rem;
+            color: #19282E;
+            line-height: 1.3;
+        }
+
+        .introduction{
+            font-size: .37rem;
+            margin-top: .4rem;
+            line-height: 1.3;
+            text-align: justify;
+            color: #666;
+        }
+        .bar{
+            margin-top: .27rem;
+        }
+        .status{
+            padding: .2rem .3rem;
+            background: orange;
+            color: white;
+            display: inline-block;
+            border-radius: .04rem;
+            margin-right: .3rem;
+            font-size: .3rem;
+        }
+        span{
+            color: #666;
+            font-size: .28rem;
+        }
+    }
+    .temple-info{
+        border-top: 1px solid #ddd;
+        padding: .3rem .4rem;
+        display: flex;
+        align-items: center;
+        .temple-img{
+            width: 1rem;
+            height: 1rem;
+            border-radius: 1rem;
+            margin-right: .3rem;
+        }
+        .temple-name{
+            flex: 1;
+            .name{
+                font-size: .35rem;
+                color: #333;
+            }
+            .visitor{
+                color: #666;
+                font-size: .3rem;
+                margin-top: .2rem;
+                display: block;
+            }
+        }
+    }
+    .detail-button-group{
+		text-align: center;
+		position: fixed;
+		bottom: 0;
+		z-index: 10;
+		left: 0;
+		right: 0;
+		background: white;
+		border-top: .01rem solid #ddd;
+        padding: .3rem;
+
+	}
+    .merit-button{
+        display: block;
+        background: $primary-color;
+        color: white;
+        height: 1.2rem;
+        font-size: .37rem;
+        min-width: 60%;
+        padding: 0 .53rem;
+        margin-top: .3rem;
+        margin-left: auto;
+        margin-right: auto;
+        border: .01rem solid $primary-color;
+        border-radius: .13rem;
+        margin-bottom: .3rem;
+    }
+    .caret-spec{
+        .head{
+            display: flex;
+            justify-content: space-between;
+            font-size: .4rem;
+            padding: .4rem;
+            align-items: center;
+            margin-top: .13rem;
+            .iconfont{
+                font-size: .7rem;
+            }
+            .step-inline{
+                display: inline-block;
+                flex: 1;
+                font-size: .35rem;
+                li{
+                    display: inline-block;
+                    & ~ li:before{
+                        content: '-';
+                        padding: 0 .1rem;
+                    }
+                    
+                }
+                li.current{
+                    color: $primary-color;
+                }
+            }
+        }
+        
+        .auto-donate-time{
+            padding: .4rem ;
+            margin-top: .4rem;
+            margin-bottom: 1rem;
+            .donate{
+                .label{
+                    font-size: .4rem;
+                }
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+            .time-cycle{
+                display: flex;
+                align-items: flex-end;
+                .unit{
+                    font-size: .3rem;
+                    color: #666;
+                    padding-left: .2rem;
+                }
+            }
+        }
+        .next-group{
+            display: flex;
+            justify-content: space-between;
+            padding: .2rem .4rem ;
+            background: white;
+            align-items: center;
+            border-top: 1px solid #ededed;
+            .total{
+                font-size: .4rem;
+                em{
+                    color: $primary-color;
+                    font-size: .4rem;
+                    font-weight: bold;
+                }
+            }
+            .next{
+                font-size: .4rem;
+                padding: .3rem 1rem;
+                background: $primary-color;
+                border: 1px solid $primary-color;
+                color: white;
+                border-radius: .1rem;
+            }
+        }
+    }
+}
+</style>

src/pages/home.vue

@@ -57,13 +57,13 @@
                 </div>
             </div>
             <div class="divider"></div>
-            <thanks-giving :temple-id="query.temple_id || '1' "></thanks-giving>
+            <thanks-giving :temple-id="query.temple_id " :agent-id="query.agent_id"></thanks-giving>
         </div>
     </div>
 </template>
 
 <script>
-import { getTempleIndex } from '@/api';
+import { getPlatformHome, getTempleIndex } from "@/api";
 
 export default {
     components: {
@@ -97,6 +97,17 @@ export default {
         },
         locationTo(nav) {
             // nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
+            if(nav.type === 6){
+                this.$router.push({
+                    name: 'goods-light-detail',
+                    query: {
+                        goods_type: nav.type,
+                        temple_id: nav.temple_id,
+                    }
+                })
+                return
+            }
+
             if(nav.type === 0){
                 window.location.href = nav.url;
                 return
@@ -140,9 +151,21 @@ export default {
             }
         },
         async getTempleIndex() {
-            const res = await getTempleIndex(this.query.temple_id);
+            const { agent_id } = this.$route.query;
+            let res;
+            if(agent_id){
+                res = await getPlatformHome(agent_id)
+            } else {
+                res = await getTempleIndex(this.query.temple_id);
+            }
             this.data = res;
+            this.$store.commit('setTempleMeritId', res.temple_merit_id);
             this.data.icon_data = this.sliceNav(res.icon_data);
+            console.log(res.temple_data.unit_name)
+            setTimeout(() => {
+                document.title = res.temple_data.unit_name;
+                console.log(document.title)
+            }, 10)
         },
         onMoreProcess() {
             this.$router.push({
@@ -163,13 +186,14 @@ export default {
                 const b = navData.slice(i * slice, i * slice + slice);
                 nav.push(b);
             }
+
             return nav;
         },
     },
 };
 </script>
 
-<style lang="scss" scope>
+<style lang="scss">
 .van-nav-bar__title {
     color: white;
 }

src/pages/merit-box/index.vue

@@ -46,7 +46,7 @@
 <script>
 import { getMeritBox,  } from '@/api';
 import { swiper, swiperSlide } from 'vue-awesome-swiper';
-
+import { mapState } from 'vuex';
 
 export default {
     components: {
@@ -86,6 +86,7 @@ export default {
 		}
 	},
     computed: {
+        ...mapState(['temple_merit_id']),
         swiper(){
             return this.$refs.swiper.swiper;
         }
@@ -114,7 +115,7 @@ export default {
 
 		async getMeritBox(){
 			const current = this.nav.find(item => item.id === this.type_id);
-			const res = await getMeritBox(this.query.temple_id || '1', current.id, current.page, current.size);
+			const res = await getMeritBox(this.temple_merit_id || this.query.temple_id || '1', current.id, current.page, current.size);
 			this.info = res.merit_box_info;
 			this.total = res.merit_box_order.total;
 			current.list = res.merit_box_order.list

src/pages/pay/index.vue

@@ -40,8 +40,16 @@
 </template>
 
 <script>
-import { createFriendlyDayOrder, createBrickDayOrder, createPay, createMeritBoxOrder, createCommonOrder } from '@/api';
+import {
+    createFriendlyDayOrder,
+    createBrickDayOrder,
+    createPay,
+    createMeritBoxOrder,
+    createCommonOrder,
+    createLightOrder
+} from "@/api";
 import { requestPayment } from '@/common/wechat-web';
+import { mapState } from "vuex";
 
 export default {
     components: {
@@ -52,10 +60,14 @@ export default {
             payType: '1'
         }
     },
+    computed: {
+        ...mapState(['temple_merit_id', 'launch']),
+    },
     mounted(){
         this.wechatReady(() => {
 
         })
+
     },
     methods: {
         onContinuePayOrder(){
@@ -79,9 +91,11 @@ export default {
 
             // 创建功德箱订单
             if(this.query.from === 'meritBox'){
+                const domain = this.launch?.agent_id ? '2': '3'
                 const request = {
-                    temple_id: this.query.temple_id,
+                    temple_id: this.temple_merit_id || this.query.temple_id,
-                    price: this.query.amount
+                    price: this.query.amount,
+                    domain
                 }
                 const order = await createMeritBoxOrder(request)
                 this.onPayment(order)
@@ -100,6 +114,17 @@ export default {
                 await this.onPayment(order);
             }
 
+            // 创建佛前供灯订单
+            if(this.query.from === 'goods_light'){
+                const request = {
+                    ...this.query,
+                    price: this.query.amount,
+                    buy_quantity: this.query.quantity
+                }
+
+                const order = await createLightOrder(request);
+                await this.onPayment(order);
+            }
         },
         async onPayment(order){
             const result = await createPay(order.id);

src/router/index.js

@@ -117,6 +117,12 @@ const routes = [
         meta: { title: '详情', navBarBackgroundColor: 'white' },
         component: () => import('@/pages/goods-detail')
     },
+    {
+        path: '/goods-light-detail',
+        name: 'goods-light-detail',
+        meta: { title: '详情', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/goods-light-detail')
+    },
     {
         path: '/fill-name',
         name: 'fill-name',

src/store/index.js

@@ -0,0 +1,32 @@
+import Vue from "vue";
+import Vuex from 'vuex'
+import VuexPersistedstateEs from "vuex-persistedstate";
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+    state: {
+        temple_merit_id: null,
+        launch: null
+    },
+    mutations: {
+        setTempleMeritId(state, payload){
+            state.temple_merit_id = payload;
+        },
+        SET_LAUNCH(state, payload){
+            state.launch = payload
+        }
+    },
+    getters: {
+        getLaunch(state){
+            return state.launch
+        }
+    },
+    plugins: [
+        VuexPersistedstateEs({
+            storage: window.sessionStorage
+        })
+    ]
+})
+
+export default store;

vue.config.js

@@ -1,10 +1,10 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CompressionWebpackPlugin = require('compression-webpack-plugin')
 
 module.exports = {
     publicPath: '/wap/',
     outputDir: 'wap',
     productionSourceMap: false,
+    filenameHashing: false,
     devServer: {
         // https:true,
         disableHostCheck: false,

yarn.lock

@@ -3274,6 +3274,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.nlark.com/deepmerge/download/deepmerge-1.5.2.tgz?cache=0&sync_timestamp=1622025358084&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fdeepmerge%2Fdownload%2Fdeepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmmirror.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.nlark.com/default-gateway/download/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -7616,6 +7621,11 @@ shell-quote@^1.6.1:
   resolved "https://registry.npmmirror.com/shell-quote/download/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
   integrity sha1-qkDtrBcERbmkMeF7tiwLiBucQSM=
 
+shvl@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmmirror.com/shvl/-/shvl-2.0.3.tgz#eb4bd37644f5684bba1fc52c3010c96fb5e6afd1"
+  integrity sha512-V7C6S9Hlol6SzOJPnQ7qzOVEWUQImt3BNmmzh40wObhla3XOYMe4gGiYzLrJd5TFa+cI2f9LKIRJTTKZSTbWgw==
+
 side-channel@^1.0.4:
   version "1.0.4"
   resolved "https://registry.nlark.com/side-channel/download/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
@@ -8667,10 +8677,18 @@ vue@^2.6.11:
   resolved "https://registry.npmmirror.com/vue/download/vue-2.6.14.tgz?cache=0&sync_timestamp=1633712790340&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue%2Fdownload%2Fvue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
   integrity sha1-5RqlJQJQ1Wmj+606ilpofWA24jU=
 
-vuex@^3.6.2:
+vuex-persistedstate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmmirror.com/vuex-persistedstate/-/vuex-persistedstate-4.1.0.tgz#127165f85f5b4534fb3170a5d3a8be9811bd2a53"
+  integrity sha512-3SkEj4NqwM69ikJdFVw6gObeB0NHyspRYMYkR/EbhR0hbvAKyR5gksVhtAfY1UYuWUOCCA0QNGwv9pOwdj+XUQ==
+  dependencies:
+    deepmerge "^4.2.2"
+    shvl "^2.0.3"
+
+vuex@3:
   version "3.6.2"
-  resolved "https://registry.nlark.com/vuex/download/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  resolved "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
-  integrity sha1-I2vAhqhww655lG8QfxbeWdWJXnE=
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
 
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"