提交测试版

src/App.vue

@@ -14,8 +14,6 @@
 
 <script>
 import { tabbar } from '../src/router';
-import { getWechatSign } from './api';
-import { signToWechat } from './common/wechat-web';
 
 export default {
     name: 'App',
@@ -32,14 +30,10 @@ export default {
         };
     },
     components: {},
-    beforeCreate: () => {
-        getWechatSign(location.href).then(res => {
-            signToWechat(res);
-        });
-    },
     watch: {
         '$route': {
             handler(val) {
+                document.title = val.meta.title || '自在福田'
                 this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
             },
             deep: true,

src/api/index.js

@@ -105,7 +105,7 @@ const getMeritBox = (temple_id = '', type, page,  size = 10) => service.get(`/ap
 const createMeritBoxOrder = data => service.post(`/api/order/create-merit-box`, data)
 
 // 获取动态（佛事）列表
-const getDynamicData = (page = 1, goods_id = '', size = 10) => service.get(`/api/dynamic/get-page?page=${page}&size=${size}&goods_id=${goods_id}`);
+const getDynamicData = (temple_id = '', page = 1, goods_id = '', size = 10) => service.get(`/api/dynamic/get-page?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}`);
 
 // 获取动态（佛事）详情
 const getDynamicDetail = (dynamic_id = '') => service.get(`/api/dynamic/detail?id=${dynamic_id}`);
@@ -125,6 +125,9 @@ const getMyCollectionList = (page = 1, size = 10) => service.get(`/api/dynamic/g
 // 订单列表
 const getOrderList = (status = 0, page = 1, size = 10) => service.get(`/api/order/get-page?status=${status}&page=${page}&size=${size}`)
 
+// 订单详情
+const getOrder = order_id => service.get(`/api/order/details?id=${order_id}`);
+
 // 客服中心
 const getCustomerList = () => service.get(`/api/customer/get-list`);
 
@@ -169,6 +172,7 @@ export {
     getOrderCompare,
     getMyCollectionList,
     getOrderList,
+    getOrder,
     getCustomerList,
     getCertList
-}
+}

src/assets/scss/common.scss

@@ -125,4 +125,9 @@ display: -webkit-box;
     font-size: .4rem;
     color: #666;
     text-align: center;
-}
+}
+button:disabled{
+    background: #e1e1e1 !important;
+    border-color: #e1e1e1 !important;
+
+}

src/common/vant.js

@@ -28,11 +28,13 @@ import {
 	Cascader,
 	ActionSheet,
 	ShareSheet,
-	Dialog
+	Dialog,
+	Icon
 } from "vant";
 
 Vue.use(Button);
 Vue.use(NavBar);
+Vue.use(Icon);
 Vue.use(Search);
 Vue.use(Swipe);
 Vue.use(SwipeItem);
@@ -61,4 +63,4 @@ Vue.use(RadioGroup)
 Vue.use(Switch)
 Vue.use(ActionSheet)
 Vue.use(Cascader)
-Vue.use(Dialog)
+Vue.use(Dialog)

src/common/wechat-web.js

@@ -1,6 +1,6 @@
 let wechatInstance;
 
-function signToWechat(config) {
+function signToWechat(config, readFunction) {
     if (!wx) {
         console.warn('请安装微信网页JS-SDK, url: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js');
     }
@@ -23,6 +23,7 @@ function signToWechat(config) {
             console.warn('wechat sdk config success');
             wechatInstance = wx;
             resolve(wx);
+            readFunction && readFunction(wx)
         });
     });
 }
@@ -92,11 +93,10 @@ function updateTimelineShareData(title = '', desc = '', link = '', imgUrl = '')
 }
 
 function previewImage(current, urls){
-    console.log(current, urls)
     wechatInstance.previewImage({
         current, urls
     })
 }
 
 
-export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData, previewImage };
+export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData, previewImage };

src/components/buddha-process/index.vue

@@ -75,8 +75,8 @@ export default {
             })
         },
         onGoodsDetail(){
-            const { goods_type, goods_id, temple_id } = this.privateData;
+            const { goods_type, goods_id, temple_id, spec_ids } = this.privateData;
-            this.onPushToGoodsDetail(goods_type, goods_id, temple_id)
+            this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids)
         }
     },
 };
@@ -114,6 +114,7 @@ export default {
         .title {
             font-size: 0.43rem;
             color: #222;
+            line-height: 1.3;
             margin-bottom: 0.32rem;
         }
         .desc {
@@ -200,4 +201,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/components/order/index.vue

@@ -38,7 +38,12 @@ export default {
                         amount: this.data.order_amount
                     }
                 })
+                return;
             }
+            this.$router.push({
+                name: 'user-order-detail',
+                query: { id: this.data.id }
+            })
         }
     }
 }
@@ -110,4 +115,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/mixins/index.js

@@ -1,4 +1,6 @@
 import { Toast } from 'vant';
+import { getWechatSign } from '@/api';
+import { signToWechat } from '@/common/wechat-web';
 
 export default {
     directives: {
@@ -30,6 +32,43 @@ export default {
         }
     },
     methods: {
+        wechatReady(callback){
+            getWechatSign(location.href).then(async res => {
+                await signToWechat(res, function(wx){
+                    console.log('wechat sign success', wx)
+                    callback && callback(wx);
+                });
+            });
+        },
+        shareToWechat(wx, shareConfig){
+            if(!shareConfig){
+                return console.error(`wechat share config error: ${shareConfig}`);
+            }
+            wx.updateAppMessageShareData({
+                title: shareConfig.title,
+                desc: shareConfig.desc,
+                link: shareConfig.link,
+                imgUrl: shareConfig.url,
+                complete: res => {
+                    shareConfig.callback && shareConfig.callback({
+                        key: 'updateAppMessageShareData',
+                        ...res
+                    });
+                }
+            });
+            wx.updateTimelineShareData({
+                title: shareConfig.title,
+                desc: shareConfig.desc,
+                link: shareConfig.link,
+                imgUrl: shareConfig.imgUrl,
+                complete: res => {
+                    shareConfig.callback && shareConfig.callback({
+                        key: 'updateTimelineShareData',
+                        ...res
+                    });
+                }
+            });
+        },
         getHasFullScreen() {
             let result = false;
             const rate = window.screen.height / window.screen.width;
@@ -46,7 +85,12 @@ export default {
          * @param temple_id: 寺院id
          * @return void
          */
-        onPushToGoodsDetail(goods_type, goods_id, temple_id){
+        onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids = ''){
+            const type = Object.prototype.toString;
+            if(type.call(spec_ids) !== '[object String]'){
+                spec_ids = spec_ids.toString()
+            }
+
             if (goods_type == 1 || goods_type == 2 || goods_type == 4) {
                 this.$router.push({
                     name: 'everyday-donation',
@@ -54,6 +98,7 @@ export default {
                         goods_type,
                         goods_id,
                         temple_id,
+                        spec_ids
                     },
                 });
                 return;
@@ -64,8 +109,9 @@ export default {
                     goods_type,
                     goods_id,
                     temple_id,
+                    spec_ids
                 },
             });
         }
     }
-}
+}

src/pages/buddha-activity/index.vue

@@ -31,7 +31,7 @@ export default {
     },
     methods: {
         async getDynamicData(){
-            const res = await getDynamicData(this.page, this.query.goods_id, this.size)
+            const res = await getDynamicData(this.query.temple_id, this.page, this.query.goods_id, this.size)
             this.total = res.total;
             this.list = res.results;
             this.$nextTick(() => {
@@ -46,4 +46,4 @@ export default {
 .process-container{
     padding: .4rem 0;
 }
-</style>
+</style>

src/pages/buddha-detail/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="process-detail-wrapper" v-if="data">
         <div class="process-detail">
-            <h1 class="title">{{ data.title }} 123456</h1>
+            <h1 class="title">{{ data.title }}</h1>
             <p class="date">{{ data.time || data.date }}</p>
             <p class="desc">{{ data.description }}</p>
 
@@ -19,26 +19,18 @@
                         <i class="iconfont icon-guanzhu-yiguanzhu"></i>
                         <b>关注</b>
                     </span>
-                    <span class="btn" @click="onShare">
+<!--                    <span class="btn" @click="onShare">-->
-                        <i class="iconfont icon-zhuanfa"></i>
+<!--                        <i class="iconfont icon-zhuanfa"></i>-->
-                        <b>转发</b>
+<!--                        <b>转发</b>-->
-                    </span>
+<!--                    </span>-->
                 </div>
             </div>
         </div>
-
-        <van-share-sheet
-            v-model="showShare"
-            title="立即分享给好友"
-            :options="options"
-            @select="onSelect"
-        />
     </div>
 </template>
 
 <script>
 import { getDynamicDetail, toggleCollect } from '@/api';
-import { updateAppMessageShareData, updateTimelineShareData } from '@/common/wechat-web';
 
 export default {
     name: 'buddha-detail',
@@ -67,28 +59,18 @@ export default {
         onShare(){
             this.showShare = true;
         },
-        onSelect(option) {
+
-            this.showShare = false;
-            if(option.icon === 'wechat'){
-                updateAppMessageShareData(this.data.title, this.data.description, location.href, this.data.covers[0]).then(result => {
-                    console.log('result', result)
-                })
-            }
-            if(option.icon === 'wechat-moments'){
-                updateTimelineShareData(this.data.title, this.data.description, location.href, this.data.covers[0]).then(result => {
-                    console.log('result', result)
-                })
-            }
-        },
         async getDynamicDetail(){
             const data = await getDynamicDetail(this.$route.query.id);
             this.data = data;
+            this.wechatReady((wx) => {
+                this.shareToWechat(wx, data.shareConfig)
+            })
         },
 
         async onCollect() {
             await toggleCollect(this.data.id);
             this.data.is_collected = this.data.is_collected === 1 ? 0 : 1;
-            this.$emit('collection', this.data.id);
         },
         onGoodsDetail(){
             const { goods_type, goods_id, temple_id } = this.data;
@@ -132,6 +114,7 @@ export default {
         .title {
             font-size: 0.43rem;
             color: #222;
+            line-height: 1.3;
             margin-bottom: 0.32rem;
         }
         .desc {
@@ -163,6 +146,13 @@ export default {
             img{
                 max-width: 100%;
             }
+            p{
+                margin: .3rem 0;
+                line-height: 1.4;
+                color: #5a5a5a;
+                font-size: .37rem;
+                letter-spacing: 1px;
+            }
         }
         .purchase {
             background: #cf9e3b;
@@ -221,4 +211,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/pages/everyday-donation/index.vue

@@ -72,7 +72,7 @@
                         <span class="border-circle" @click="showRandom = true">随喜</span>
                     </li>
                     <li v-for="(spec, index) in data.spec" :key="index">
-                        <span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active']" @click="onPriceUnit(spec)">{{spec.money}}元</span>
+                        <span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)">{{spec.money}}元</span>
                     </li>
                 </ul>
                 <div class="auto-donate">
@@ -103,14 +103,17 @@
                     <span>选择行善金额</span>
                 </div>
                 <ul class="spec brick-spec">
-                    <li class="random">
+                    <li class="random" v-if="onlySpecs && onlySpecs.length == 0">
                         <span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">{{data.rule_btn}}</span>
                         <van-stepper v-model="buy_quantity" step="1" v-if="is_assign" />
                     </li>
                     <li v-for="(spec, index) in data.spec" :key="index">
                         <span 
                             class="border-circle" 
-                            :class="[Number(spec.money) === priceUnit && !is_assign &&  'active']"
+                            :class="[
+                                Number(spec.money) === priceUnit && !is_assign &&  'active',
+                                isDisabled(spec),
+                            ]"
                             @click="onPriceUnit(spec)"
                         >{{spec.spec_name}} {{spec.donate_number * Number(data.price)}}元</span>
                     </li>
@@ -135,7 +138,7 @@
                     <safe-area>
                         <div class='next-group'>
                             <span class="total">合计：<em>￥{{priceTotal}}</em></span>
-                            <button class="next" @click="onToPay">下一步</button>
+                            <button class="next" :disabled="!priceUnitId" @click="onToPay">下一步</button>
                         </div>
                     </safe-area>
                 </div>
@@ -169,7 +172,11 @@ export default {
         for(let i in query){
             query[i] = query[i].toString()
         }
+        console.log(query)
+        let onlySpecs = query.spec_ids ? query.spec_ids.split(',').map(v => Number(v)) : null;
+
         return {
+            onlySpecs,
             showRandom: false, // 随喜
             documentTitle: title,
             query,
@@ -215,6 +222,11 @@ export default {
         
     },
     methods: {
+        isDisabled(spec){
+            const { id } = spec;
+            if(!this.onlySpecs) return false;
+            return !this.onlySpecs.includes(id) ? 'spec-disabled': ''
+        },
         getSelectedSpec() {
             if(this.query.goods_type === '2'){
                 // 随喜
@@ -245,7 +257,10 @@ export default {
             }
             await this.getDynamicDataByGoodsId(goods_id);
             this.data = response;
-            this.priceUnit = this.data.spec[0].donate_number * Number(this.data.price)
+            if(!this.onlySpecs){
+                this.priceUnit = this.data.spec[0].donate_number * Number(this.data.price)
+                this.priceUnitId = this.data.spec[0].id;
+            }
         },
         async getDynamicDataByGoodsId(goods_id){
             const res = await getDynamicData(1, goods_id);
@@ -360,6 +375,10 @@ export default {
                     background: #f5f5f5;
                 }
             }
+            span.spec-disabled{
+                pointer-events: none;
+                opacity: 0.6;
+            }
         }
         li{
             text-align: center;
@@ -373,9 +392,14 @@ export default {
                 user-select: none;
                 color: #666;
                 &:active{
-                    background: #f5f5f5;
+                    background: rgba($primary-color, 0.1);
                 }
             }
+            span.spec-disabled{
+                pointer-events: none;
+                background: #f9f9f9;
+                color: #aaa;
+            }
         }
     }
     .brick-spec{
@@ -559,4 +583,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

src/pages/fill-name/index.vue

@@ -94,7 +94,7 @@ export default {
                 query: {
                     ...this.$route.query,
                     dream: this.dream,
-                    merit_name_id: this.meritId,
+                    merit_name: this.meritName,
                     mobile: this.mobile,
                 }
             })
@@ -186,4 +186,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/pages/goods-detail/index.vue

@@ -195,6 +195,9 @@ export default {
             this.$nextTick(() => {
                 this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight()
             })
+            this.wechatReady((wx) => {
+                this.shareToWechat(wx, this.data.shareConfig)
+            })
         },
         // 获取感恩功德
         async getPayRecords(lType){
@@ -388,4 +391,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/pages/monk/index.vue

@@ -14,21 +14,21 @@
             <h1 class="position">{{data.title}}</h1>
             <p class="introduction" v-html="data.description"></p>
         </div>
-        <div class="support">
+<!--        <div class="support">-->
-            <div class="support-head">
+<!--            <div class="support-head">-->
-                <span class="label">供养者</span>
+<!--                <span class="label">供养者</span>-->
-                <ul class="external">
+<!--                <ul class="external">-->
-                    <li class="active">实时</li>
+<!--                    <li class="active">实时</li>-->
-                    <li>月榜</li>
+<!--                    <li>月榜</li>-->
-                    <li>总榜</li>
+<!--                    <li>总榜</li>-->
-                </ul>
+<!--                </ul>-->
-            </div>
+<!--            </div>-->
-            <div>
+<!--            <div>-->
 
-            </div>
+<!--            </div>-->
-        </div>
+<!--        </div>-->
         <div class="merit-button-group">
-            <button class="merit-button">供养</button>
+            <button class="merit-button" @click="onProvide">供养</button>
         </div>
     </div>
 </template>
@@ -62,9 +62,12 @@ export default {
         this.getMasterDetail();
     },
     methods: {
+        onProvide(){
+            const { goods_type, goods_id, temple_id, spec_id } = this.data;
+            this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_id)
+        },
         async getMasterDetail(){
             const res = await getMasterDetail(this.query.master_id)
-            console.log(res)
             this.data = res;
         }
     }
@@ -145,4 +148,4 @@ export default {
 		}
 	}
 }
-</style>
+</style>

src/pages/pay/index.vue

@@ -52,7 +52,13 @@ export default {
             payType: '1'
         }
     },
+    mounted(){
+        this.wechatReady(() => {
+
+        })
+    },
     methods: {
+
         onContinuePayOrder(){
             this.onPayment({ id: this.query.order_id })
         },
@@ -160,4 +166,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/pages/temple-detail/index.vue

@@ -3,7 +3,7 @@
         <img class="banner" :src="data.picture" alt="">
         <div class="authed border-bottom">
             <img src="@/assets/img/cert.jpg" alt="">
-            <span>已通过 寺院联盟 认证 可放心访问</span>
+            <span>已通过 <b>寺院联盟</b> 认证，可放心访问</span>
         </div>
 
         <div class="auth">
@@ -32,7 +32,7 @@
             <h4 class="title border-bottom">认证授权</h4>
             <ul class="cert">
                 <li v-for="(cert, index) in data.register_cert_url" :key="index">
-                    <img :src="cert" alt="">
+                    <img :src="cert" @click="previewImage(cert, data.register_cert_url)" alt="">
                 </li>
             </ul>
         </div>
@@ -46,6 +46,7 @@
 
 <script>
 import { getTempleDetail } from "@/api"
+import { previewImage } from '@/common/wechat-web';
 
 export default {
     data(){
@@ -56,11 +57,14 @@ export default {
     },
     mounted(){
         this.getTempleDetail();
+        this.wechatReady()
     },
     methods: {
+        previewImage(cert, certArr){
+            previewImage(cert, certArr)
+        },
         async getTempleDetail(){
             const res = await getTempleDetail(this.query.temple_id);
-            console.log(res)
             this.data = res;
         }
     }
@@ -69,6 +73,7 @@ export default {
 
 <style lang="scss">
 .temple-detail{
+    padding-bottom: env(safe-area-inset-bottom);
     .banner{
         width: 100%;
     }
@@ -82,6 +87,12 @@ export default {
             vertical-align: middle;
             margin-right: .1rem;
         }
+        span{
+            vertical-align: middle;
+            b{
+                color: $primary-color;
+            }
+        }
     }
     .auth{
         margin: .4rem;
@@ -100,6 +111,7 @@ export default {
                     display: inline-block;
                     width: 5em;
                     color: #777;
+                    text-align: right;
                 }
                 .value{
                     color: #666;
@@ -131,4 +143,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/pages/temple-home/index.vue

@@ -38,7 +38,6 @@
             </div>
         </div>
         <div class="divider"></div>
-
         <div class="temple-manager">
             <div class="manager" v-for="manager in data.member_data" :key="manager.id"
                  @click="$router.push({ name: 'monk', query: { master_id: manager.id }})">
@@ -51,49 +50,38 @@
                 </div>
             </div>
         </div>
+        <div class="divider"></div>
         <div class="panel">
             <div class="panel-head">
                 <span class="title">功德无量</span>
-                <arrow-more></arrow-more>
+                <arrow-more @click="$router.push({ name: 'merit-list', query: { temple_id: query.temple_id } })"></arrow-more>
             </div>
             <div class="panel-body">
-                <van-swipe class="merit-group" :width="140" :loop="false" :show-indicators="false">
+                <div class="merit-scroll-container">
-                    <van-swipe-item v-for="goods in data.common_data" :key="goods.id">
+                    <div class="merit-scroll-wrapper">
-                        <div class="merit" @click="onToGoods(goods)">
+                        <div class="merit" v-for="goods in data.common_data" :key="goods.id" @click="onToGoods(goods)">
                             <img :src="goods.cover_url" alt="" />
                             <p class="title">{{ goods.alias }}</p>
                         </div>
-                    </van-swipe-item>
+                    </div>
-                </van-swipe>
+                </div>
             </div>
         </div>
         <div class="divider"></div>
         <div class="panel temple-home-activity">
             <div class="panel-head">
                 <span class="title">进展状态</span>
-                <arrow-more></arrow-more>
+                <arrow-more @click="onMoreProcess"></arrow-more>
             </div>
             <div class="panel-body">
                 <buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process>
-                <div class="process-more" @click="onMoreDynamic">
+                <div class="process-more" @click="onMoreProcess">
                     <span>查看更多进展状态</span>
                     <i class="iconfont icon-arrow-right"></i>
                 </div>
             </div>
             <div class="divider"></div>
-            <div class="merit-rank-container">
+            <thanks-giving :temple-id="query.temple_id || '1' "></thanks-giving>
-                <div class="head">
-                    <span class="title">感恩功德</span>
-                    <div class="list">
-                        <span class="current">实时</span>
-                        <span>月榜</span>
-                        <span>总榜</span>
-                    </div>
-                </div>
-                <div class="body">
-
-                </div>
-            </div>
 
             <button class="temple-station-in" @click="onTempleStation">寺院入驻</button>
         </div>
@@ -163,6 +151,12 @@ export default {
             const res = await getUserData();
             this.user = res;
         },
+        onMoreProcess() {
+            this.$router.push({
+                name: 'buddha-activity',
+                query: this.query
+            });
+        },
         onToGoods(goods) {
             this.$router.push({
                 name: 'goods-detail',
@@ -176,6 +170,10 @@ export default {
             const res = await getTempleIndex(this.query.temple_id);
             this.data = res;
             this.data.icon_data = this.sliceNav(res.icon_data);
+
+            setTimeout(() => {
+                document.title = res.temple_data.unit_name;
+            }, 30)
         },
         onTempleStation(){
             this.$router.push({ name: 'user-temple-station'})
@@ -191,9 +189,6 @@ export default {
 
             return nav;
         },
-        onMoreDynamic() {
-            this.$router.push({ name: 'buddha-activity' });
-        }
     }
 };
 </script>
@@ -203,6 +198,15 @@ export default {
     color: white;
 }
 .temple-home-page{
+    padding-bottom: 2rem;
+    margin-bottom: env(safe-area-inset-bottom);
+    .merit-scroll-container{
+        height: 3.39rem;
+        overflow-x: auto;
+        .merit-scroll-wrapper{
+            white-space: nowrap;
+        }
+    }
     .temple-station-in{
         font-size: .4rem;
         background: $primary-color;
@@ -566,4 +570,4 @@ export default {
         }
     }
 }
-</style>
+</style>

src/pages/user/order-detail/index.vue

@@ -0,0 +1,217 @@
+<template>
+    <div class="order-detail" v-if="data">
+        <div class="topbar" ref="topbar">
+            <van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
+        </div>
+        <div class="order-detail-container" >
+            <div class="top">
+                <h1 class="status">{{data.status}}</h1>
+                <div class="order-panel">
+                    <div class="order-info">
+                        <span class="order-icon">
+                            <van-icon name="success" />
+<!--                            <van-icon name="fail" />-->
+                        </span>
+                        <div class="order-desc">
+                            <h3 class="text">感谢您对自在福田的信任，恭祝再结善缘。</h3>
+                            <p class="desc">处理时间：{{data.created_at}}</p>
+                            <p class="desc">处理单位：{{data.unit_name}}</p>
+                        </div>
+                    </div>
+                    <div class="order-btns">
+                        <button class="order-btn" @click="onCustomer">联系客服</button>
+                        <button class="order-btn" @click="onShowCert">功德证书</button>
+                    </div>
+                    <div class="order-no">
+                        <span>善缘编号：{{data.order_sn}}</span>
+                        <button class="order-repeat" @click="onOrderAgain">再结善缘</button>
+                    </div>
+                </div>
+                <div class="order-feedback" v-if="data.feedback_content">
+                    <h3 class="feed-title">反馈内容</h3>
+                    <p class="feed-content">{{data.feedback_content}}</p>
+                    <div class="feed-picture">
+                        <img v-for="(pic, index) in data.feedback_pictures" :key="index" :src="pic" alt="" class="feed-picture" @click="onPreview(pic, data.feedback_pictures)">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <van-popup v-model="showCert" round>
+            <div class="cert">
+                <img :src="certUrl">
+                <p class="tip">长按图片保存到手机</p>
+            </div>
+        </van-popup>
+    </div>
+</template>
+
+<script>
+import { getOrder } from '@/api';
+import { previewImage } from '@/common/wechat-web';
+
+export default {
+    data(){
+        const { query } = this.$route;
+        return {
+            query,
+            data: null,
+            showCert: false,
+        }
+    },
+    mounted(){
+        this.getOrder();
+    },
+
+    computed: {
+        certUrl(){
+            return `https://wdx-temple.oss-cn-hangzhou.aliyuncs.com/uploads/merit/certificate/${this.data.id}.jpg`
+        }
+    },
+    methods: {
+        onPreview(picture, pictureArr){
+            previewImage(picture, pictureArr)
+        },
+        async getOrder(){
+            const res = await getOrder(this.query.id);
+            this.data = res;
+            this.wechatReady((wx) => {
+                this.shareToWechat(wx, res.data.shareConfig)
+            })
+        },
+        onOrderAgain(){
+            this.onPushToGoodsDetail(this.data.goods_type, this.data.goods_id, this.data.temple_id, this.data.spec_ids)
+        },
+        onCustomer(){
+            this.$router.push({ name: 'user-customer'})
+        },
+        onShowCert(){
+            this.showCert = true;
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.order-detail{
+    font-size: .35rem;
+    min-height: 100vh;
+    background: #f9f9f9;
+    .cert{
+        padding: .3rem;
+        border-radius: .1rem;
+        img{
+            width: 8rem;
+        }
+        .tip{
+            font-size: .4rem;
+            padding: .4rem 0;
+            text-align: center;
+        }
+    }
+    .order-detail-container{
+        padding: 0 .3rem;
+        .top{
+            .status{
+                font-size: .5rem;
+                padding: .3rem 0;
+                padding-top: .6rem;
+                text-indent: .4rem;
+            }
+            .order-panel{
+                background: white;
+                border-radius: .1rem;
+                padding: .4rem;
+                box-shadow: 0 0 .3rem rgba(0,0,0,0.1);
+                .order-info{
+                    display: flex;
+                    padding-bottom: .3rem;
+                    .order-icon{
+                        width: 1rem;
+                        height: 1rem;
+                        display: flex;
+                        background: forestgreen;
+                        color: white;
+                        border-radius: 1rem;
+                        font-size: .6rem;
+                        align-items: center;
+                        justify-content: center;
+                        margin-right: .3rem;
+                    }
+                    .order-desc{
+                        flex: 1;
+                        .text{
+                            font-size: .4rem;
+                            line-height: 1.3;
+                        }
+                        .desc{
+                            font-size: .35rem;
+                            color: #999;
+                            margin-top: .3rem;
+                        }
+                    }
+                }
+                .order-btns{
+                    display: flex;
+                    justify-content: flex-start;
+                    padding-top: .2rem;
+                    border-bottom: 1px solid #eee;
+                    padding-bottom: .5rem;
+                    padding-left: 1.3rem;
+                    padding-right: .3rem;
+                    margin-bottom: .4rem;
+                    .order-btn{
+                        height: 1rem;
+                        border-radius: .1rem;
+                        border: 1px solid #ddd;
+                        background: white;
+                        padding: 0 .5rem;
+                        margin-right: .2rem;
+                    }
+                }
+                .order-no{
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    span{
+                        color: #555;
+                    }
+                    .order-repeat{
+                        height: 1rem;
+                        border-radius: .1rem;
+                        border: 1px solid #e77979;
+                        padding: 0 .5rem;
+                        background: #e77979;
+                        color: white;
+                    }
+                }
+            }
+            .order-feedback{
+                background: white;
+                border-radius: .1rem;
+                padding: .4rem;
+                box-shadow: 0 0 .3rem rgba(0,0,0,0.1);
+                margin-top: 1rem;
+                .feed-title{
+                    font-size: .4rem;
+                }
+                .feed-content{
+                    padding-top: .3rem;
+                    padding-bottom: .3rem;
+                    line-height: 1.4;
+                    font-size: .38rem;
+                    color: #888;
+                    text-align: justify;
+                }
+                .feed-picture{
+                    img{
+                        width: 23%;
+                        margin-right: 2%;
+                        margin-bottom: .1rem;
+                        height: 1.5rem;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

src/pages/user/order/index.vue

@@ -20,9 +20,11 @@ import { getOrderList } from '@/api'
 
 export default {
     data(){
+        const { query } = this.$route;
         return {
+            query,
             containerHeight: window.innerHeight,
-            status: '0',
+            status: Number( query.current),
             orders: [
                 { status: 0, name: '全部', list: [] },
                 { status: 1, name: '待支付', list: [] },
@@ -33,6 +35,7 @@ export default {
     },
     inject: ['root', 'tabbar'],
     mounted(){
+
         this.getOrderList();
     },
     methods: {
@@ -91,4 +94,4 @@ export default {
     background: #f5f5f5;
     padding: .4rem;
 }
-</style>
+</style>

src/router/index.js

@@ -153,6 +153,12 @@ const routes = [
                 meta: { title: '我的善缘' },
                 component: () => import('@/pages/user/order')
             },
+            {
+                path: 'order-detail',
+                name: 'user-order-detail',
+                meta: { title: '善缘详情' },
+                component: () => import('@/pages/user/order-detail')
+            },
             {
                 path: 'focus',
                 name: 'user-focus',
@@ -242,4 +248,4 @@ export const tabbar = [
         inactive: require('../assets/img/tabbar/tabbar_icon_05.png'),
         title: '我的'
     },
-]
+]