wenfp/temple-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交测试版

Browse Source
This commit is contained in:
wenfp
2021-12-10 19:32:49 +08:00
parent e4173eeb2c
commit e72f07c233
17 changed files with 14936 additions and 3275 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -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",
pnpm-lock.yaml
Generated
+11473
View File
File diff suppressed because it is too large Load Diff
public/index.html
+1 -2
View File
@@ -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
+58 -29
View File
@@ -1,32 +1,40 @@
<template>
<div id="app" :style="{paddingBottom: paddingBottom + '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">
<span>{{ tab.title }}</span>
<template #icon="props">
<img :src="props.active ? tab.active: tab.inactive" alt="">
</template>
</van-tabbar-item>
</van-tabbar>
<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 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="">
</template>
</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';
#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;
}
.tabbar {
/* padding-top: .57rem; */
/* background: url('~@/assets/img/bg.png') top center no-repeat; */
/* background-size: contain; */
@import '//at.alicdn.com/t/font_2897403_lklpexeunn.css';
.app-safe-area{
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 {
/* padding-top: .57rem; */
/* background: url('~@/assets/img/bg.png') top center no-repeat; */
/* background-size: contain; */
position: fixed;
bottom: 0;
}
}
</style>
src/assets/img/tabbar/tabbar_icon_01.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 11 KiB

src/assets/img/tabbar/tabbar_icon_01_click.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 12 KiB

src/assets/scss/common.scss
+3 -1
View File
@@ -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
+11 -7
View File
@@ -1,6 +1,5 @@
<template>
<div v-if="data" class="platform_home">
<van-nav-bar title="自在福田" style="background: #bf9330; color: white" />
<div v-if="data" class="platform_home" >
<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
+25 -13
View File
@@ -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;
bottom: 0;
z-index: 10;
position: absolute;
z-index: 1;
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
+17 -3
View File
@@ -11,17 +11,31 @@
<span>参与成功</span>
</div>
<div class="button-group">
<button class="detail">查看详情</button>
<button class="again">再结善缘</button>
<button class="detail" @click="onToOrder">查看详情</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
+2
View File
@@ -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
+7 -5
View File
@@ -87,8 +87,7 @@
</div>
<div class="panel-menu-btn" @click="showUserMenu = true">
<span><i class="iconfont icon-jingwen"></i></span>
<span class="menu-text">菜单</span>
<span class="iconfont icon-liebiao"></span>
</div>
@@ -301,10 +300,13 @@ export default {
justify-content: center;
align-items: center;
flex-direction: column;
background: #f1f1f1;
border: 1px solid #ddd;
background: $primary-color;
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
+38 -34
View File
@@ -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;
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
console.log(this.$refs.topbar.offsetHeight)
this.containerHeight = this.parentHeight - this.$refs.topbar.offsetHeight - 100;
})
if(this.query.search){
@@ -159,39 +160,42 @@ export default {
</script>
<style lang="scss">
.operation-bar{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .4rem;
color: #333;
margin-bottom: .4rem;
margin-top: .3rem;
.position{
line-height: .37rem;
color: green;
span{
font-size: .37rem;
display: inline-block;
margin-right: .13rem;
.temple-list{
.operation-bar{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 .4rem;
color: #333;
padding-bottom: .4rem;
padding-top: .3rem;
.position{
line-height: .37rem;
color: green;
span{
font-size: .37rem;
display: inline-block;
margin-right: .13rem;
}
}
.show-mode{
line-height: .37rem;
span{
font-size: .37rem;
display: inline-block;
margin-left: .13rem;
}
}
}
.show-mode{
line-height: .37rem;
span{
font-size: .37rem;
display: inline-block;
margin-left: .13rem;
}
}
}
.temple-list-container{
background: #f5f5f5;
overflow: hidden;
padding: .3rem;
.temple-map{
height: 100%;
.temple-list-container{
background: #f5f5f5;
overflow: hidden;
padding: .3rem;
.temple-map{
height: 100%;
background: #f5f5f5;
}
}
}
</style>
src/pages/user/temple-station/index.vue
+4 -1
View File
@@ -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
+17 -6
View File
@@ -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',
name: 'user',
path: '/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 -3
View File
@@ -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 -->
wap/js/app.js
+3275 -3169
View File
File diff suppressed because one or more lines are too long