添加佛前供灯

2022-03-09 10:56:14 +08:00
parent 442fea23f5
commit c0b25db38d
32 changed files with 1095 additions and 49 deletions
@@ -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
@@ -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",
@@ -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>
@@ -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() {
@@ -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
 }
@@ -30,7 +30,7 @@ import {
 	ShareSheet,
 	Loading,
 	Dialog,
-	Icon
+	Icon,
 } from "vant";

 Vue.use(NavBar);
@@ -20,14 +20,11 @@
 </template>

 <script>
-import { getOrderCompare } from "@/api";
+import { getOrderCompare, getOrderCompareByAgentId } from "@/api";
 export default {
    name: 'thanks-giving',
    props: {
-        templeId: {
-            type: [String, Number],
-            default: ''
-        },
+        templeId: [String, Number],
        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
        },
@@ -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]{
@@ -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({
@@ -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){
-                return this.$toast.fail('请填写心愿');
-            }
-            if(!this.mobile){
-                return this.$toast.fail('请填写功德主手机号');
-            }
+            // if(!this.dream){
+            //     return this.$toast.fail('请填写心愿');
+            // }
+            // if(!this.mobile){
+            //     return this.$toast.fail('请填写功德主手机号');
+            // }
            console.log('query',  {
            ...this.$route.query,
                    dream: this.dream,
@@ -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;
@@ -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>
@@ -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>
@@ -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>
@@ -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;
 }
@@ -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
@@ -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,
-                    price: this.query.amount
+                    temple_id: this.temple_merit_id || this.query.temple_id,
+                    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);
@@ -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',
@@ -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;
@@ -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,
@@ -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"
-  integrity sha1-I2vAhqhww655lG8QfxbeWdWJXnE=
+  resolved "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
+  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==

 watchpack-chokidar2@^2.0.1:
  version "2.0.1"