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

123

Browse Source
This commit is contained in:
wenfp
2021-11-11 15:10:51 +08:00
parent ec0724c873
commit b4af257c70
63 changed files with 3189 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/temple-home/index.vue
+114 -117
View File
@@ -1,75 +1,45 @@
<template>
<div class="temple-home-page">
<div class="temple-home-page" v-if="data">
<div class="temple-home">
<span class="temple-name">重庆石林寺</span>
<span class="temple-name">{{data.temple_data.unit_name}}</span>
<div class="visitor">
<span>重庆市大渡口区</span>
<span>123232到访</span>
<span>{{data.temple_data.region}}</span>
<span>{{data.temple_data.visit}}到访</span>
</div>
</div>
<div class="certed-temple">
<span class="text">佛教协会认证寺院 可放心访问</span>
<span class="btn">查看</span>
<div class="certed-temple" @click="$router.push({name: 'temple-detail', query: { temple_id: query.temple_id}})">
<img class="cert-icon" src="@/assets/img/cert.jpg" alt="">
<span class="text">佛教协会认证寺院 可放心访问</span>
<span class="btn">查看</span>
</div>
<van-search v-model="value" placeholder="寺院、主持、监寺" />
<div class="container">
<div class="swiper">
<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
</van-swipe-item>
<van-swipe-item>
<img src="https://img1.baidu.com/it/u=685186368,3327475445&fm=253&fmt=auto&app=120&f=PNG?w=641&h=420" alt="">
<van-swipe class="my-swipe" :autoplay="8000" indicator-color="white">
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
<img :src="banner.cover" alt="" @click="$router.push({ path: banner.url})">
</van-swipe-item>
</van-swipe>
</div>
<van-grid :border="false">
<van-grid-item icon="photo-o" text="佛前供灯" />
<van-grid-item icon="photo-o" text="日行一善" />
<van-grid-item icon="photo-o" text="祈福" />
<van-grid-item icon="photo-o" text="放生修福" />
<van-grid-item icon="photo-o" text="供养三宝" />
<van-grid-item icon="photo-o" text="供奉排位" />
<van-grid-item icon="photo-o" text="捐建寺院" />
<van-grid-item icon="photo-o" text="功德箱" />
</van-grid>
<van-notice-bar
border
left-icon="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto"
:scrollable="false"
mode="closeable"
text="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
<van-swipe class="grid-nav" :loop="false">
<van-swipe-item v-for="(item, index) in data.icon_data" :key="index">
<van-grid :border="false">
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index">
<img :src="nav.icon_url" class="nav-icon" slot="icon">
</van-grid-item>
</van-grid>
</van-swipe-item>
</van-swipe>
<user-dynamic></user-dynamic>
</div>
<div class="divider"></div>
<div class="user-dynamic">
<img class="avatar" src="https://img2.baidu.com/it/u=2192265457,2884791613&fm=26&fmt=auto" alt="">
<span class="username">信众信众信众信众</span>
<span class="content">永沐佛恩，慈悲加持，世代永沐佛恩，慈悲加持，世代...</span>
<span class="time">2小时前</span>
</div>
<div class="temple-manager">
<div class="manager">
<img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
<div class="manager" v-for="manager in data.member_data" :key="manager.id" @click="$router.push({ name: 'monk', query: { master_id: manager.id }})">
<img class="avatar" :src="manager.avatar_url" alt="">
<div class="manager-container">
<h3 class="name">住持：素全大法师</h3>
<h3 class="name">{{manager.title}}</h3>
<p class="content">
<span>素全法师，法名智国，属羊，出生于成都市。2006-7-28日入驻四川省什邡市的罗汉寺。1989年，出于对佛教文化的特别喜爱，于昭觉寺皈依清定上师，法名智国。1992～1996年，受隆莲法师影响和介绍到成都市的龙泉驿区的石经寺依贞意大和尚出家。1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</span>
</p>
</div>
</div>
<div class="manager">
<img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
<div class="manager-container">
<h3 class="name">住持：素全大法师</h3>
<p class="content">
<span>素全法师，法名智国，属羊，出生于成都市。2006-7-28日入驻四川省什邡市的罗汉寺。1989年，出于对佛教文化的特别喜爱，于昭觉寺皈依清定上师，法名智国。1992～1996年，受隆莲法师影响和介绍到成都市的龙泉驿区的石经寺依贞意大和尚出家。1994年，于山西五台山碧山寺依本焕大和尚、一诚大和尚、香港圣一大和尚为三师，美国寿冶大和尚为学戒和尚受具足戒。1996～1999年，于山西五台山塔院寺学修。曾任传戒引礼、尊证等职先后参加了四川省佛教协会宝光寺、峨眉山、石经寺、广德寺的传授三坛大戒法会。</span>
<span v-html="manager.description"></span>
</p>
</div>
</div>
@@ -77,7 +47,7 @@
<div class="panel">
<div class="panel-head">
<span class="title">功德无量</span>
<span class="external">更多</span>
<arrow-more></arrow-more>
</div>
<div class="panel-body">
<div class="merit-group">
@@ -97,16 +67,14 @@
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel temple-home-activity">
<div class="panel-head">
<span class="title">进展状态</span>
<span class="external">更多</span>
<arrow-more></arrow-more>
</div>
<div class="panel-body">
<buddha-process></buddha-process>
<buddha-process></buddha-process>
<buddha-process></buddha-process>
<div class="process-more">
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process>
<div class="process-more" @click="onMoreDynamic">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
</div>
@@ -173,11 +141,37 @@
</template>
<script>
import { getTempleIndex } from "@/api"
export default {
data(){
return {
showUserMenu: true,
value: ''
query: this.$route.query,
showUserMenu: false,
data: null
}
},
mounted(){
this.getTempleIndex();
},
methods: {
async getTempleIndex(){
const res = await getTempleIndex(this.query.temple_id);
this.data = res;
this.data.icon_data = this.sliceNav(res.icon_data)
},
sliceNav(navData){
const nav = [];
const slice = 8;
for(let i = 0; i < Math.ceil(navData.length / slice); i++){
const b = navData.slice(i * slice, i * slice + slice);
nav.push(b)
}
return nav;
},
onMoreDynamic(){
this.$router.push({ name: 'buddha-activity'})
}
}
}
@@ -265,40 +259,7 @@ export default {
margin-top: .1rem;
}
}
.user-dynamic{
display: flex;
border: 1px solid #d6d6d6;
border-radius: .08rem;
background: white;
padding: .2rem .2rem;
margin: .3rem .4rem;
align-items: center;
.avatar{
width: 1.07rem;
height: 1.07rem;
border-radius: 1.07rem;
}
.username{
padding: 0 .2rem;
white-space: nowrap;
max-width: 1.33rem;
overflow: hidden;
text-overflow: ellipsis;
font-size: .37rem;
}
.content{
flex: 1;
font-size: .32rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: .4rem;
}
.time{
font-size: .3rem;
color: rgb(105, 105, 105);
}
}
.temple-manager{
.manager{
display: flex;
@@ -308,9 +269,12 @@ export default {
padding-top: .4rem;
}
.avatar{
width: 1.33rem;
height: 1.33rem;
width: 1rem;
height: 1rem;
border-radius: 1.33rem;
border: .08rem solid #f7e4bf;
vertical-align: top;
}
.manager-container{
flex: 1;
@@ -318,19 +282,20 @@ export default {
.name{
padding: .3rem .3rem .3rem 0;
font-size: .4rem;
color: #666;
}
.content{
font-size: .37rem;
line-height: 1.3;
font-size: .35rem;
line-height: 1.5;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 3;
text-align: justify;
height: 3.8em;
height: 4.3em;
-webkit-box-orient: vertical;
color: #666;
color: #999;
}
}
}
@@ -363,34 +328,58 @@ export default {
}
}
}
.grid-nav{
margin-bottom: .8rem;
.nav-icon{
width: 1.07rem;
height: 1.07rem;
}
.van-swipe__indicators{
bottom: 0;
.van-swipe__indicator{
width: 20px;
height: 2px;
border-radius: 10px;
}
.van-swipe__indicator--active{
background: $primary-color;
}
}
}
.certed-temple{
display: flex;
border: 1px solid #ddd;
border: 1px solid $primary-color;
border-radius: 4px;
margin: 0 .4rem;
align-items: center;
font-size: .37rem;
padding: .4rem;
padding: .3rem;
margin-bottom: .2rem;
.cert-icon{
width: .3rem;
margin-right: .1rem;
}
.text{
flex: 1;
font-size: .35rem;
color: #666;
font-size: .3rem;
color: #888;
padding-top: 2px;
}
.btn{
color: $primary-color;
}
}
.process-more{
line-height: 1.17rem;
line-height: 1.5rem;
text-align: center;
font-size: .37rem;
font-size: .4rem;
.iconfont{
vertical-align: middle;
}
}
.container{
padding: .4rem;
padding-bottom: .53rem;
padding-bottom: .33rem;
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
@@ -416,14 +405,12 @@ export default {
padding: .53rem .4rem;
display: flex;
justify-content: space-between;
align-items: center;
.title{
font-size: .43rem;
color: #222222;
}
.external{
font-size: .37rem;
color: #666666;
}
}
.panel-body{
padding: 0 .4rem;
@@ -435,6 +422,14 @@ export default {
}
}
}
.temple-home-activity{
.process{
padding: .4rem 0;
.bar{
padding-bottom: 0;
}
}
}
.merit{
width: 3.39rem;
height: 3.39rem;
@@ -475,9 +470,11 @@ export default {
padding: .4rem .3rem;
.temple-name{
font-size: .45rem;
color: #666;
}
.visitor{
color: #666;
color: #999;
font-size: .3rem;
span{
padding-left: 10px;
}