308 lines
9.0 KiB
Vue
308 lines
9.0 KiB
Vue
<template>
|
|
<div v-if="data" class="platform_home" >
|
|
<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" 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="panel" v-if="data.common_data.length">
|
|
<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">
|
|
<div class="merit-scroll-container">
|
|
<div class="merit-scroll-wrapper">
|
|
<div class="merit" v-for="goods in data.common_data" :key="goods.id" @click="onToGoods(goods)">
|
|
<img :src="goods.cover_url" alt="" />
|
|
<p class="title">{{ goods.alias }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="panel" v-if="data.dynamic_data.length > 0">
|
|
<div class="panel-head">
|
|
<span class="title">进展状态</span>
|
|
<arrow-more @click="onMoreProcess"></arrow-more>
|
|
</div>
|
|
<div class="panel-body goods-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 " :agent-id="query.agent_id"></thanks-giving>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getPlatformHome, getTempleIndex } from "@/api";
|
|
|
|
export default {
|
|
components: {
|
|
},
|
|
inject: ['safeAreaInsetBottom'],
|
|
data() {
|
|
return {
|
|
query: this.$route.query,
|
|
value: '',
|
|
data: null,
|
|
mescrollDown: {},
|
|
mescrollUp: {},
|
|
mescroll: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getTempleIndex();
|
|
},
|
|
methods: {
|
|
mescrollInit(mescroll){
|
|
this.mescroll = mescroll;
|
|
},
|
|
onToGoods(goods){
|
|
this.$router.push({
|
|
name: 'goods-detail',
|
|
query: {
|
|
goods_id: goods.goods_id,
|
|
temple_id: goods.temple_id
|
|
}
|
|
})
|
|
},
|
|
locationTo(nav) {
|
|
// nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
|
|
if(nav.icon_type === 6){
|
|
this.$router.push({
|
|
name: 'goods-light-detail',
|
|
query: {
|
|
goods_type: nav.goods_type,
|
|
temple_id: nav.temple_id,
|
|
goods_id: nav.goods_id,
|
|
}
|
|
})
|
|
return
|
|
}
|
|
|
|
if(nav.icon_type === 0){
|
|
window.location.href = nav.url;
|
|
return
|
|
}
|
|
|
|
if(nav.icon_type === 5){
|
|
this.$router.push({
|
|
name: 'buddha-detail',
|
|
query: { id: nav.dynamic_id }
|
|
})
|
|
return
|
|
}
|
|
|
|
if(nav.icon_type === 4){
|
|
this.$router.push({
|
|
name: 'merit-box'
|
|
})
|
|
return
|
|
}
|
|
|
|
if(nav.icon_type === 3){
|
|
this.$router.push({
|
|
name: 'goods-detail',
|
|
query: {
|
|
goods_type: nav.goods_type,
|
|
goods_id: nav.goods_id ,
|
|
temple_id: nav.temple_id,
|
|
}
|
|
})
|
|
}
|
|
|
|
if(nav.icon_type === 1 || nav.icon_type === 2){
|
|
this.$router.push({
|
|
name: 'everyday-donation',
|
|
query: {
|
|
goods_type: nav.goods_type,
|
|
goods_id: nav.goods_id ,
|
|
temple_id: nav.temple_id,
|
|
},
|
|
});
|
|
}
|
|
},
|
|
async getTempleIndex() {
|
|
const { agent_id } = this.$route.query;
|
|
let res;
|
|
if(agent_id){
|
|
res = await getPlatformHome(agent_id)
|
|
} else {
|
|
res = await getTempleIndex(this.query.temple_id);
|
|
}
|
|
this.data = res;
|
|
this.$store.commit('setTempleMeritId', res.temple_merit_id);
|
|
this.data.icon_data = this.sliceNav(res.icon_data);
|
|
setTimeout(() => {
|
|
document.title = '自在福田';
|
|
}, 10)
|
|
},
|
|
onMoreProcess() {
|
|
this.$router.push({
|
|
name: 'buddha-activity',
|
|
});
|
|
},
|
|
onSearch() {
|
|
this.$router.push({
|
|
name: 'search',
|
|
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">
|
|
.van-nav-bar__title {
|
|
color: white;
|
|
}
|
|
.merit-rank-container {
|
|
}
|
|
.van-search{
|
|
padding: .4rem
|
|
}
|
|
.goods-panel-body{
|
|
.buddha-process{
|
|
padding-left: .4rem;
|
|
padding-right: .4rem;
|
|
}
|
|
}
|
|
.container {
|
|
padding: 0.4rem;
|
|
padding-top: 0;
|
|
.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
|
|
}
|
|
.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;
|
|
.van-swipe {
|
|
height: 100%;
|
|
}
|
|
.van-swipe__indicators {
|
|
display: none;
|
|
}
|
|
}
|
|
.van-swipe__indicators {
|
|
bottom: .1rem;
|
|
.van-swipe__indicator {
|
|
width: 20px;
|
|
height: 2px;
|
|
border-radius: 10px;
|
|
}
|
|
.van-swipe__indicator--active {
|
|
background: $primary-color;
|
|
}
|
|
}
|
|
.panel{
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.merit-scroll-container{
|
|
margin: 0 .4rem;
|
|
height: 3.39rem;
|
|
overflow-x: auto;
|
|
.merit-scroll-wrapper{
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.merit-group{
|
|
padding-bottom: .4rem;
|
|
}
|
|
.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>
|