550 lines
14 KiB
Vue
550 lines
14 KiB
Vue
<template>
|
|
<div class="temple-home-page" v-if="data">
|
|
<div class="temple-home">
|
|
<span class="temple-name">{{ data.temple_data.unit_name }}</span>
|
|
<div class="visitor">
|
|
<span>{{ data.temple_data.region }}</span>
|
|
<span>{{ data.temple_data.visit }}到访</span>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
<div class="container">
|
|
<div class="swiper">
|
|
<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-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>
|
|
<div class="user-dynamic-container" v-if="data.order_data.length > 0">
|
|
<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="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 }})">
|
|
<img class="avatar" :src="manager.avatar_url" alt="">
|
|
<div class="manager-container">
|
|
<h3 class="name">{{ manager.title }}</h3>
|
|
<p class="content">
|
|
<span v-html="manager.description"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel">
|
|
<div class="panel-head">
|
|
<span class="title">功德无量</span>
|
|
<arrow-more></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" @click="onToGoods(goods)">
|
|
<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 temple-home-activity">
|
|
<div class="panel-head">
|
|
<span class="title">进展状态</span>
|
|
<arrow-more></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">
|
|
<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">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-menu-btn" @click="showUserMenu = true">
|
|
<span><i class="iconfont icon-jingwen"></i></span>
|
|
<span class="menu-text">菜单</span>
|
|
</div>
|
|
|
|
<van-popup v-model="showUserMenu" position="left" style="width: 80%; height: 100%">
|
|
<div class="user-menu" v-if="user">
|
|
<div class="user">
|
|
<img class="avatar" :src="user.avatar" alt="">
|
|
<div class="profile">
|
|
<h5 class="name">{{user.nickname}}</h5>
|
|
<p class="account">用户号: {{user.account_no}}</p>
|
|
</div>
|
|
</div>
|
|
<ul class="user-list">
|
|
<li @click="onPushForRouteName('user-order')">
|
|
<img src="@/assets/img/user-popup/我的善缘.png" alt="">
|
|
<span>我的善缘</span>
|
|
</li>
|
|
<li @click="onPushForRouteName('user-customer')">
|
|
<img src="@/assets/img/user-popup/联系客服.png" alt="">
|
|
<span>联系客服</span>
|
|
</li>
|
|
<li @click="onPushForRouteName('merit-box')">
|
|
<img src="@/assets/img/user-popup/功德箱.png" alt="">
|
|
<span>功德箱</span>
|
|
</li>
|
|
<li @click="onPushForRouteName('temple-list')">
|
|
<img src="@/assets/img/user-popup/查看更多寺院.png" alt="">
|
|
<span>查看更多寺院</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<p class="put-away" @click="showUserMenu = false">
|
|
<span class="iconfont icon-arrow-left"></span>
|
|
</p>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getTempleIndex, getUserData } from '@/api';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
query: this.$route.query,
|
|
showUserMenu: false,
|
|
data: null,
|
|
user: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getTempleIndex();
|
|
this.getUserData();
|
|
},
|
|
methods: {
|
|
onPushForRouteName(routeName){
|
|
this.$router.push({ name: routeName })
|
|
},
|
|
async getUserData(){
|
|
const res = await getUserData();
|
|
console.log(res);
|
|
this.user = res;
|
|
},
|
|
onToGoods(goods) {
|
|
this.$router.push({
|
|
name: 'goods-detail',
|
|
query: {
|
|
goods_id: goods.goods_id,
|
|
temple_id: goods.temple_id
|
|
}
|
|
});
|
|
},
|
|
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' });
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scope>
|
|
.van-nav-bar__title {
|
|
color: white;
|
|
}
|
|
|
|
.van-popup {
|
|
.put-away {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1.3rem;
|
|
line-height: 1.3rem;
|
|
border-top: 1px solid #f1f1f1;
|
|
text-align: right;
|
|
|
|
.iconfont {
|
|
font-size: .8rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-menu {
|
|
.user {
|
|
margin-top: 1.33rem;
|
|
display: flex;
|
|
padding-left: 1rem;
|
|
align-items: center;
|
|
|
|
.avatar {
|
|
width: 1.33rem;
|
|
height: 1.33rem;
|
|
border-radius: 1.33rem;
|
|
margin-right: .4rem;
|
|
}
|
|
|
|
.profile {
|
|
.name {
|
|
font-size: .4rem;
|
|
color: #666;
|
|
}
|
|
|
|
.account {
|
|
margin-top: .2rem;
|
|
color: #666;
|
|
font-size: .3rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-list {
|
|
padding-left: 1rem;
|
|
margin-top: 1rem;
|
|
margin-right: .6rem;
|
|
|
|
li {
|
|
height: 1.2rem;
|
|
line-height: 1.2rem;
|
|
font-size: .4rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: .8rem;
|
|
margin-right: .27rem;
|
|
}
|
|
|
|
& ~ li {
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-menu-btn {
|
|
position: fixed;
|
|
left: .53rem;
|
|
bottom: 1.33rem;
|
|
z-index: 1000;
|
|
width: 1.33rem;
|
|
height: 1.33rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
background: #f1f1f1;
|
|
border: 1px solid #ddd;
|
|
border-radius: 50%;
|
|
|
|
.menu-text {
|
|
font-size: .27rem;
|
|
margin-top: .1rem;
|
|
}
|
|
}
|
|
|
|
.temple-manager {
|
|
.manager {
|
|
display: flex;
|
|
margin: .4rem;
|
|
|
|
& ~ .manager {
|
|
border-top: 1px solid #ddd;
|
|
padding-top: .4rem;
|
|
}
|
|
|
|
.avatar {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border-radius: 1.33rem;
|
|
border: .08rem solid #f7e4bf;
|
|
vertical-align: top;
|
|
|
|
}
|
|
|
|
.manager-container {
|
|
flex: 1;
|
|
margin-left: .4rem;
|
|
|
|
.name {
|
|
padding: .3rem .3rem .3rem 0;
|
|
font-size: .4rem;
|
|
color: #666;
|
|
}
|
|
|
|
.content {
|
|
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: 4.3em;
|
|
-webkit-box-orient: vertical;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 $primary-color;
|
|
border-radius: 4px;
|
|
margin: 0 .4rem;
|
|
align-items: center;
|
|
font-size: .37rem;
|
|
padding: .3rem;
|
|
margin-bottom: .2rem;
|
|
|
|
.cert-icon {
|
|
width: .3rem;
|
|
margin-right: .1rem;
|
|
}
|
|
|
|
.text {
|
|
flex: 1;
|
|
font-size: .3rem;
|
|
color: #888;
|
|
padding-top: 2px;
|
|
}
|
|
|
|
.btn {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
|
|
.process-more {
|
|
line-height: 1.5rem;
|
|
text-align: center;
|
|
font-size: .4rem;
|
|
|
|
.iconfont {
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.container {
|
|
padding: .4rem;
|
|
padding-bottom: .33rem;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.panel {
|
|
.panel-head {
|
|
padding: .53rem .4rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: .43rem;
|
|
color: #222222;
|
|
}
|
|
|
|
}
|
|
|
|
.panel-body {
|
|
padding: 0 .4rem;
|
|
overflow-x: scroll;
|
|
|
|
.merit-group {
|
|
display: flex;
|
|
width: 11.36rem;
|
|
margin-bottom: .91rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.temple-home-activity {
|
|
.process {
|
|
padding: .4rem 0;
|
|
|
|
.bar {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
color: white;
|
|
line-height: .91rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: .37rem;
|
|
padding: 0 .11rem;
|
|
}
|
|
}
|
|
|
|
.temple-home-page {
|
|
.temple-home {
|
|
display: flex;
|
|
font-size: .37rem;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: .4rem .3rem;
|
|
|
|
.temple-name {
|
|
font-size: .45rem;
|
|
color: #666;
|
|
}
|
|
|
|
.visitor {
|
|
color: #999;
|
|
font-size: .3rem;
|
|
|
|
span {
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |