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/home.vue
+226 -186
View File
@@ -1,197 +1,237 @@
<template>
<div>
<van-nav-bar title="自在福田" style="background: #BF9330; color: white" />
<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-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="在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。"
/>
<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">
<van-swipe
class="my-swipe"
:autoplay="3000"
indicator-color="white"
>
<van-swipe-item
v-for="(banner, index) in data.banner_data"
:key="index"
>
<img :src="banner.cover" alt="" />
</van-swipe-item>
</van-swipe>
</div>
<van-swipe :loop="false">
<van-swipe-item
v-for="(item, index) in data.icon_data"
:key="index"
>
<van-grid :border="false" class="home-grid-nav">
<van-grid-item
icon="photo-o"
:text="nav.name"
v-for="(nav, _index) in item"
:key="_index"
@click="locationTo(nav)"
>
<img
:src="nav.icon_url"
class="nav-icon"
slot="icon"
/>
</van-grid-item>
</van-grid>
</van-swipe-item>
</van-swipe>
<div class="user-dynamic-container">
<van-swipe vertical loop :autoplay="3000" :touchable="false">
<van-swipe-item
v-for="order in data.order_data"
:key="order.id"
>
<user-dynamic :data="order"></user-dynamic>
</van-swipe-item>
</van-swipe>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">功德无量</span>
<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"
>
<van-swipe-item
v-for="goods in data.common_data"
:key="goods.id"
>
<div class="merit">
<img :src="goods.cover_url" alt="" />
<p class="title">{{ goods.alias }}</p>
</div>
</van-swipe-item>
</van-swipe>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">进展状态</span>
<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="onMoreProcess">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
</div>
</div>
<div class="divider"></div>
<thanks-giving :temple-id="query.temple_id"></thanks-giving>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">功德无量</span>
<span class="external">更多</span>
</div>
<div class="panel-body">
<div class="merit-group">
<div class="merit">
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
<p class="title">为佛像贴金身，菩萨菩萨</p>
</div>
<div class="merit">
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
<p class="title">为佛像贴金身，菩萨菩萨</p>
</div>
<div class="merit">
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt="">
<p class="title">为佛像贴金身，菩萨菩萨</p>
</div>
</div>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
<span class="title">进展状态</span>
<span class="external">更多</span>
</div>
<div class="panel-body">
<div class="process-more">
<span>查看更多进展状态</span>
<i class="iconfont icon-arrow-right"></i>
</div>
</div>
<div class="divider"></div>
<div class="merit-rank-container">
<div class="head">
<span class="title">感恩功德</span>
<div class="list">
<span class="current">实时</span>
<span>月榜</span>
<span>总榜</span>
</div>
</div>
<div class="body">
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
</div>
</div>
</div>
</div>
</template>
<script>
import { getTempleIndex } from "@/api";
export default {
data(){
return {
value: ''
}
}
}
data() {
return {
query: this.$route.query,
value: "",
data: null,
};
},
mounted() {
this.getTempleIndex();
},
methods: {
locationTo(nav) {
window.location.href = nav.url;
},
async getTempleIndex() {
const res = await getTempleIndex(this.query.temple_id);
this.data = res;
this.data.icon_data = this.sliceNav(res.icon_data);
},
onMoreProcess() {
this.$router.push({
name: "buddha-activity",
});
},
onSearch(){
this.$router.push({
name: 'temple-list',
query: {}
})
},
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;
},
},
};
</script>
<style lang="scss" scope>
.van-nav-bar__title{
color: white;
}
.merit-rank-container{
.head{
padding: .53rem .4rem;
padding-bottom: .13rem;
display: flex;
justify-content: space-between;
.title{
font-size: .43rem;
color: #222222;
}
.list{
display: flex;
span{
font-size: .37rem;
color: #999999;
display: inline-block;
margin-left: .4rem;
border-bottom: .03rem solid transparent;
padding-bottom: .13rem;
}
span.current{
color: #222;
border-bottom-color: rgb(168, 28, 28);
}
}
}
}
.container{
padding: .4rem;
padding-bottom: .53rem;
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
height: 3.57rem;
text-align: center;
img{
width: 100%;
height: 100%;
border-radius: .16rem;
}
}
.swiper{
margin-bottom: .4rem;
}
.van-notice-bar{
border: 1px solid #E6B759;
border-radius: .16rem;
}
}
.merit{
width: 3.39rem;
height: 3.39rem;
display: inline-block;
position: relative;
border-radius: .16rem;
vertical-align: top;
overflow: hidden;
& ~ .merit{
margin-left: .4rem;
}
img{
width: 100%;
height: 100%;
}
.title{
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: .91rem;
background: rgba(0,0,0,0.7);
.van-nav-bar__title {
color: white;
line-height: .91rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .37rem;
padding: 0 .11rem;
}
}
</style>
.merit-rank-container {
}
.container {
padding: 0.4rem;
padding-bottom: 0.53rem;
.my-swipe .van-swipe-item {
color: #fff;
font-size: 20px;
height: 3.57rem;
text-align: center;
img {
width: 100%;
height: 100%;
border-radius: 0.16rem;
}
}
.swiper {
margin-bottom: 0.4rem;
}
.van-notice-bar {
border: 1px solid #e6b759;
border-radius: 0.16rem;
}
}
.platform_home {
.home-grid-nav {
.nav-icon {
width: 1.07rem;
height: 1.07rem;
}
}
.user-dynamic-container {
margin-top: 0.5rem;
height: 1.26rem;
overflow: hidden;
margin-bottom: 0.5rem;
.van-swipe {
height: 100%;
}
.van-swipe__indicators {
display: none;
}
}
.van-swipe__indicators {
bottom: 0;
.van-swipe__indicator {
width: 20px;
height: 2px;
border-radius: 10px;
}
.van-swipe__indicator--active {
background: $primary-color;
}
}
}
.merit {
width: 3.39rem;
height: 3.39rem;
display: inline-block;
position: relative;
border-radius: 0.16rem;
vertical-align: top;
overflow: hidden;
& ~ .merit {
margin-left: 0.4rem;
}
img {
width: 100%;
height: 100%;
}
.title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.91rem;
background: rgba(0, 0, 0, 0.7);
color: white;
line-height: 0.91rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.37rem;
padding: 0 0.11rem;
}
}
</style>