提交测试版

package.json

@@ -17,6 +17,7 @@
     "delay": "^5.0.0",
     "mescroll.js": "^1.4.2",
     "qs": "^6.10.1",
+    "safe-area-insets": "^1.4.1",
     "swiper": "5",
     "vant": "^2.12.30",
     "vue": "^2.6.11",

public/index.html

@@ -2,12 +2,11 @@
 <html lang="">
   <head>
     <meta charset="utf-8">
-
     <meta http-equiv="Expires" content="0">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Cache-control" content="no-cache,must-revalidate">
     <meta http-equiv="Cache" content="no-cache">
-    
+    <meta name="referrer" content="never">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <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>

src/App.vue

@@ -1,8 +1,9 @@
 <template>
-    <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
+    <div class="app-safe-area" :style="{minHeight: minHeight + 'px'}">
+        <div id="app" :data-height="minHeight - tabHeight" :style="{ minHeight: minHeight - tabHeight + 'px', paddingBottom: tabHeight + 'px'}">
             <router-view />
             <van-tabbar v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
-            <van-tabbar-item replace v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
+                <van-tabbar-item replace name v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
                     <span>{{ tab.title }}</span>
                     <template #icon="props">
                         <img :src="props.active ? tab.active: tab.inactive" alt="">
@@ -10,23 +11,30 @@
                 </van-tabbar-item>
             </van-tabbar>
         </div>
+    </div>
 </template>
 
 <script>
 import { tabbar } from '../src/router';
-
+import safeAreaInsets from 'safe-area-insets';
+console.log('底部安全区：', window.screen.availHeight, safeAreaInsets.bottom)
 export default {
     name: 'App',
     data() {
         return {
             active: '3',
-            tabbar
+            minHeight: window.innerHeight - safeAreaInsets.bottom,
+            tabbar,
+            tabHeight: 0,
         };
     },
     provide() {
         return {
             root: this,
-            tabbar: this.$refs.tabbar
+            refs: this.$refs,
+            safeAreaInsetBottom: safeAreaInsets.bottom,
+            screenHeight: window.innerHeight - safeAreaInsets.bottom,
+            parentHeight: this.minHeight - this.tabHeight
         };
     },
     components: {},
@@ -37,8 +45,24 @@ export default {
                 this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
             },
             deep: true,
+        },
+        showTabbar: {
+            handler() {
+                this.$nextTick(() => {
+                    const { tabbar } = this.$refs;
+                    console.log(tabbar)
+                    this.tabHeight = tabbar ? tabbar.$el.offsetHeight - safeAreaInsets.bottom: 0;
+                    console.log(this.tabHeight, )
+                })
+            },
+            immediate: true,
         }
     },
+
+    mounted(){
+        console.log('safe-area-inset-bottom', safeAreaInsets.bottom)
+
+    },
     computed: {
         showTabbar() {
             const path = tabbar.map(tab => tab.path);
@@ -51,22 +75,27 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
 @import '~@/assets/css/reset.css';
-@import '//at.alicdn.com/t/font_2897403_mztfr3fibh.css';
+@import '//at.alicdn.com/t/font_2897403_lklpexeunn.css';
-
+.app-safe-area{
-#app {
+    position: relative;
+    padding-bottom: env(safe-area-inset-bottom);
+    #app {
         font-family: Avenir, Helvetica, Arial, sans-serif;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
         max-width: 750px;
         margin-left: auto;
         margin-right: auto;
-}
+        min-height: 100%;
-
+    }
-.tabbar {
+    .tabbar {
         /* padding-top: .57rem; */
         /* background: url('~@/assets/img/bg.png') top center no-repeat; */
         /* background-size: contain; */
+        position: fixed;
+        bottom: 0;
+    }
 }
 </style>

src/assets/scss/common.scss

@@ -21,8 +21,10 @@ display: -webkit-box;
 }
 
 .panel {
+    padding-bottom: .4rem;
     .panel-head {
-        padding: .53rem .4rem;
+        //padding: .53rem .4rem;
+        padding: .3rem .4rem;
         display: flex;
         justify-content: space-between;
         align-items: center;

src/pages/home.vue

@@ -1,6 +1,5 @@
 <template>
-    <div v-if="data" class="platform_home">
+    <div v-if="data" class="platform_home" >
-        <van-nav-bar title="自在福田" style="background: #bf9330; color: white" />
         <van-search v-model="value" readonly placeholder="寺院、主持、监寺" @click="onSearch" />
         <div class="container">
             <div class="swiper">
@@ -69,6 +68,7 @@ import { getTempleIndex } from '@/api';
 export default {
     components: {
     },
+    inject: ['safeAreaInsetBottom'],
     data() {
         return {
             query: this.$route.query,
@@ -134,10 +134,12 @@ export default {
 }
 .merit-rank-container {
 }
-
+.van-search{
+    padding: .4rem
+}
 .container {
     padding: 0.4rem;
-    padding-bottom: 0.53rem;
+    padding-top: 0;
     .my-swipe .van-swipe-item {
         color: #fff;
         font-size: 20px;
@@ -150,7 +152,7 @@ export default {
         }
     }
     .swiper {
-        margin-bottom: 0.4rem;
+        margin-bottom: 0
     }
     .van-notice-bar {
         border: 1px solid #e6b759;
@@ -168,7 +170,6 @@ export default {
         margin-top: 0.5rem;
         height: 1.26rem;
         overflow: hidden;
-        margin-bottom: 0.5rem;
         .van-swipe {
             height: 100%;
         }
@@ -177,7 +178,7 @@ export default {
         }
     }
     .van-swipe__indicators {
-        bottom: 0;
+        bottom: .1rem;
         .van-swipe__indicator {
             width: 20px;
             height: 2px;
@@ -187,6 +188,9 @@ export default {
             background: $primary-color;
         }
     }
+    .panel{
+        padding-bottom: 0;
+    }
 }
 .merit-scroll-container{
     margin: 0 .4rem;

src/pages/merit-box/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="merit-box" >
+	<div class="merit-box" :style="{height: screenHeight - root.tabHeight + 'px'}">
 		<van-nav-bar
 			left-arrow
 			v-if="$route.meta.showNavBar"
@@ -35,7 +35,7 @@
 					</swiper>
 				</div>
 			</div>
-			<div class="merit-button-group">
+			<div class="merit-button-group" :style="{bottom: tabHeight + 'px'}">
 				<button class="merit-button" @click="randVisible = true">随喜功德</button>
 			</div>
 		</div>
@@ -53,6 +53,7 @@ export default {
         swiper,
         swiperSlide
     },
+    inject: ['screenHeight', 'root'],
 	data(){
 		return {
 			query: this.$route.query,
@@ -66,6 +67,7 @@ export default {
 				{ id: 3, title: '总榜', page: 1, size: 10, list: [], },
 			],
 			containerHeight: 0,
+            tabHeight: 0,
 			info: {},
 			list: [],
 			total: 0,
@@ -91,8 +93,6 @@ export default {
 		this.width = window.innerWidth;
 		this.containerHeight = this.$refs.swiper.$el.offsetHeight;
 		this.getMeritBox();
-		this.$nextTick(() => {
-		})
 	},
 	methods: {
         onSwiper(swiper){
@@ -151,15 +151,27 @@ export default {
 
 <style lang="scss">
 .merit-box{
+    position: relative;
+    height: 100%;
 	.goods-picture{
 		vertical-align: top;
+        position: fixed;
+        left: 0;
+        top: 0;
+        right: 0;
+	}
+    .merit-container{
+        height: 100%;
+        position: relative;
+        overflow: hidden;
     }
 	.merit-rank-container{
 		background: white;
 		position: relative;
-		margin-top: -.4rem;
 		border-top-left-radius: 10px;
 		border-top-right-radius: 10px;
+        margin-top: 5rem;
+        height: 65vh;
 		.head{
 			padding: .53rem .4rem;
 			padding-bottom: .13rem;
@@ -192,30 +204,30 @@ export default {
 			}
 		}
 		.body{
-			height: 80vh;
+            height: 10rem;
 			.swiper-container{
-				height: 100%;;
+				height: 100%;
 			}
 		}
 	}
 	.merit-button-group{
 		text-align: center;
-		position: fixed;
+		position: absolute;
-		bottom: 0;
+		z-index: 1;
-		z-index: 10;
 		left: 0;
 		right: 0;
 		background: white;
-		padding: .4rem 0;
+		padding-top: .2rem;
+		padding-bottom: .2rem;
 		border-top: .01rem solid #ddd;
-        padding-bottom: calc(env(safe-area-inset-bottom) + 0rem);
 		.merit-button{
 			display: inline-block;
+            vertical-align: top;
 			background: $primary-color;
 			color: white;
 			height: .93rem;
 			font-size: .37rem;
-			padding: 0 .53rem;
+			padding: 0 2rem;
 			border: .01rem solid $primary-color;
 			border-radius: $btn-border-radius;
 

src/pages/pay-result/index.vue

@@ -11,17 +11,31 @@
             <span>参与成功</span>
 		</div>
         <div class="button-group">
-            <button class="detail">查看详情</button>
+            <button class="detail" @click="onToOrder">查看详情</button>
-            <button class="again">再结善缘</button>
+            <button class="again" @click="onPayAgain">再结善缘</button>
         </div>
 	</div>
 </template>
 
 <script>
 export default {
+    data(){
+        return {
+            query: this.$route.query
+        }
+    },
     computed: {
         src(){
-            return `https://wdx-temple.oss-cn-hangzhou.aliyuncs.com/uploads/merit/certificate/66.jpg`
+            return `https://wdx-temple.oss-cn-hangzhou.aliyuncs.com/uploads/merit/certificate/${this.query.order_id}.jpg`
+        }
+    },
+    methods: {
+        onToOder(){
+            this.$router.push('/user/order')
+        },
+        onPayAgain(){
+            const { goods_type, goods_id, temple_id, spec_ids } = this.query;
+            this.onPushToGoodsDetail(goods_type, goods_id, temple_id, spec_ids)
         }
     }
 };

src/pages/pay/index.vue

@@ -113,6 +113,8 @@ export default {
             await this.$router.push({
                 name: 'pay-result',
                 query: {
+                    ...this.query,
+                    order_id: order.id,
                     ...result,
                     ...payResult
                 }

src/pages/temple-home/index.vue

@@ -87,8 +87,7 @@
         </div>
 
         <div class="panel-menu-btn" @click="showUserMenu = true">
-            <span><i class="iconfont icon-jingwen"></i></span>
+            <span class="iconfont icon-liebiao"></span>
-            <span class="menu-text">菜单</span>
         </div>
 
 
@@ -301,10 +300,13 @@ export default {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    background: #f1f1f1;
+    background: $primary-color;
-    border: 1px solid #ddd;
+    border: 1px solid $primary-color;
     border-radius: 50%;
-
+    .iconfont{
+        font-size: .5rem;
+        color: white;
+    }
     .menu-text {
         font-size: .27rem;
         margin-top: .1rem;

src/pages/temple-list/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="temple-list" :style="{height: root.minHeight - root.tabHeight + 'px'}">
         <div class="topbar" ref="topbar">
             <van-nav-bar left-arrow :title="$route.meta.title" v-if="$route.meta.showNavBar" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
             <van-search v-model="keyword" show-action action-text="搜索" placeholder="请输入寺院、方丈、监院名称" @search="onSearch" @cancel="onCancel">
@@ -66,16 +66,17 @@ export default {
             map: null,
         }
     },
-    inject: ['root', 'tabbar'],
+    inject: ['root', 'parentHeight'],
     computed: {
         scroll(){
             return this.$refs.scroll
         }
     },
     mounted(){
+        console.log(this.parentHeight)
         this.$nextTick(() => {
-            const { offsetHeight } = this.root.$refs.tabbar.$el;
+            console.log(this.$refs.topbar.offsetHeight)
-            this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
+            this.containerHeight = this.parentHeight - this.$refs.topbar.offsetHeight - 100;
         })
 
         if(this.query.search){
@@ -159,14 +160,15 @@ export default {
 </script>
 
 <style lang="scss">
-.operation-bar{
+.temple-list{
+    .operation-bar{
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0 .4rem;
         color: #333;
-    margin-bottom: .4rem;
+        padding-bottom: .4rem;
-    margin-top: .3rem;
+        padding-top: .3rem;
         .position{
             line-height: .37rem;
             color: green;
@@ -184,8 +186,8 @@ export default {
                 margin-left: .13rem;
             }
         }
-}
+    }
-.temple-list-container{
+    .temple-list-container{
         background: #f5f5f5;
         overflow: hidden;
         padding: .3rem;
@@ -193,5 +195,7 @@ export default {
             height: 100%;
             background: #f5f5f5;
         }
+    }
 }
+
 </style>

src/pages/user/temple-station/index.vue

@@ -37,7 +37,7 @@
                 <div class="group">
                     <label class="label-temple" for="#">寺院信息设置</label>
                     <van-field label="单位名称" v-model="form.unit_name"  name="单位名称" placeholder="单位名称" />
-                    <van-field label="机构代码" v-model="form.institution_code"  name="机构代码" placeholder="机构代码" />
+                    <van-field label="机构代码" v-model="form.institution_code"  name="机构代码" placeholder="机构代码、信用代码（18位）" />
                     <van-field label="省份城市" v-model="form.city_name"  name="省份城市" is-link readonly placeholder="省份城市" @click="showProvince = true" />
                     <van-field label="详细地址" v-model="form.details_address"  name="详细地址" placeholder="请输入详细地址" >
                         <template #right-icon>
@@ -187,6 +187,9 @@ export default {
             this.geocoder = new TMap.service.Geocoder();
         })
         this.getParams();
+        this.wechatReady(() => {
+            console.log('wechat ready')
+        });
     },
     mounted(){
         if(this.form.register_cert_url.length === 0 && Number(this.$route.query.step) !== 1){

src/router/index.js

@@ -5,7 +5,11 @@ Vue.use(Router);
 
 const routes = [
     {
-        path: '/',
+        path: '',
+        redirect: '/home'
+    },
+    {
+        path: '/home',
         name: 'home',
         component: () => import('../pages/home.vue') 
     },
@@ -29,7 +33,7 @@ const routes = [
             {
                 path: '',
                 name: 'temple-home',
-                meta: { title: '寺院', navBarBackgroundColor: 'white', showNavBar: false },
+                meta: { title: '寺院首页', navBarBackgroundColor: 'white', showNavBar: false },
                 component: () => import('@/pages/temple-home')
             },
             {
@@ -52,6 +56,12 @@ const routes = [
         meta: { title: '进展活动', navBarBackgroundColor: 'white' },
         component: () => import('@/pages/buddha-activity')
     },
+    {
+        path: '/buddha-activity-scroll',
+        name: 'buddha-activity-scroll',
+        meta: { title: '进展活动', navBarBackgroundColor: 'white' },
+        component: () => import('@/pages/buddha-activity-scroll')
+    },
     {
         path: '/buddha-detail',
         name: 'buddha-detail',
@@ -174,6 +184,7 @@ const routes = [
             {
                 path: 'course',
                 meta: { title: '修行' },
+                name: 'user-course',
                 component: { render: h => h('router-view')},
                 children: [
                     { 
@@ -214,7 +225,7 @@ export default router;
 
 export const tabbar = [
     {
-        path: '/',
+        path: '/home',
         name: 'home',
         active: require('../assets/img/tabbar/tabbar_icon_01_click.png'),
         inactive: require('../assets/img/tabbar/tabbar_icon_01.png'),
@@ -222,7 +233,7 @@ export const tabbar = [
     },
     {
         path: '/user/course',
-        name: 'user-course',
+        name: 'user-course-list',
         active: require('../assets/img/tabbar/tabbar_icon_02_click.png'),
         inactive: require('../assets/img/tabbar/tabbar_icon_02.png'),
         title: '修行'
@@ -242,8 +253,8 @@ export const tabbar = [
         title: '参寺'
     },
     {
-        path: '/user',
+        path: '/user/',
-        name: 'user',
+        name: 'user-home',
         active: require('../assets/img/tabbar/tabbar_icon_05_click.png'),
         inactive: require('../assets/img/tabbar/tabbar_icon_05.png'),
         title: '我的'

wap/index.html

@@ -2,12 +2,11 @@
 <html lang="">
   <head>
     <meta charset="utf-8">
-
     <meta http-equiv="Expires" content="0">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Cache-control" content="no-cache,must-revalidate">
     <meta http-equiv="Cache" content="no-cache">
-    
+    <meta name="referrer" content="never">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <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>
@@ -16,7 +15,7 @@
   <link href="/wap/js/app.js" rel="preload" as="script"></head>
   <body>
     <noscript>
-      <strong>We're sorry but 自在福田 - 寺庙联盟 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but temple-union doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->