316 lines
9.4 KiB
Vue
316 lines
9.4 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="" @click="onLocationTo(banner)" />
|
|
</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>
|
|
</div>
|
|
<thanks-giving :temple-id="query.temple_id" :agent-id="query.agent_id"></thanks-giving>
|
|
</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: {
|
|
onLocationTo({ url }) {
|
|
if (url) {
|
|
location.href = url;
|
|
}
|
|
},
|
|
mescrollInit(mescroll) {
|
|
this.mescroll = mescroll;
|
|
},
|
|
onToGoods(goods) {
|
|
this.$router.push({
|
|
name: "goods-detail",
|
|
query: {
|
|
goods_id: goods.goods_id,
|
|
temple_id: goods.temple_id,
|
|
goods_type: goods.goods_type,
|
|
},
|
|
});
|
|
},
|
|
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,
|
|
},
|
|
});
|
|
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);
|
|
this.wechatReady({
|
|
...res.shareConfig,
|
|
link: location.href.replace("#/home", ""),
|
|
title: "菩提家园",
|
|
desc: "给心一个家",
|
|
imgUrl: "https://temple-h5-new.oss-cn-hangzhou.aliyuncs.com/uploads/dev/2025/04/16/phpGweHzl.jpg",
|
|
});
|
|
|
|
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: 0.4rem;
|
|
}
|
|
.goods-panel-body {
|
|
.buddha-process {
|
|
padding-left: 0.4rem;
|
|
padding-right: 0.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: 0.1rem;
|
|
.van-swipe__indicator {
|
|
width: 20px;
|
|
height: 2px;
|
|
border-radius: 10px;
|
|
}
|
|
.van-swipe__indicator--active {
|
|
background: #cf9e3b;
|
|
}
|
|
}
|
|
.panel {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.merit-scroll-container {
|
|
margin: 0 0.4rem;
|
|
height: 3.39rem;
|
|
overflow-x: auto;
|
|
.merit-scroll-wrapper {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
.merit-group {
|
|
padding-bottom: 0.4rem;
|
|
}
|
|
.merit {
|
|
display: flex;
|
|
position: relative;
|
|
vertical-align: top;
|
|
gap: 0.2rem;
|
|
border-bottom: 1px solid #f1f1f1;
|
|
padding-bottom: 0.4rem;
|
|
& ~ .merit {
|
|
margin-top: 0.4rem;
|
|
}
|
|
|
|
img {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
object-fit: cover;
|
|
border-radius: 0.1rem;
|
|
}
|
|
|
|
.title {
|
|
color: #333;
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
font-size: 0.37rem;
|
|
padding: 0 0.11rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|