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

feat: 增加界面

Browse Source
This commit is contained in:
wenfp
2021-11-25 21:13:38 +08:00
parent 52c1603176
commit 29da9c7746
33 changed files with 1896 additions and 870 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/home.vue
+34 -54
View File
@@ -1,50 +1,27 @@
<template>
<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"/>
<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"
>
<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-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 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">
<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"
>
<van-swipe-item v-for="order in data.order_data" :key="order.id">
<user-dynamic :data="order"></user-dynamic>
</van-swipe-item>
</van-swipe>
@@ -54,20 +31,12 @@
<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>
<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">
<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>
@@ -76,13 +45,13 @@
</div>
</div>
<div class="divider"></div>
<div class="panel">
<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">
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process" ></buddha-process>
<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>
@@ -95,13 +64,13 @@
</template>
<script>
import { getTempleIndex } from "@/api";
import { getTempleIndex } from '@/api';
export default {
data() {
return {
query: this.$route.query,
value: "",
value: '',
data: null,
};
},
@@ -109,6 +78,15 @@ export default {
this.getTempleIndex();
},
methods: {
onToGoods(goods){
this.$router.push({
name: 'goods-detail',
query: {
goods_id: goods.goods_id,
temple_id: goods.temple_id
}
})
},
locationTo(nav) {
window.location.href = nav.url;
},
@@ -119,14 +97,14 @@ export default {
},
onMoreProcess() {
this.$router.push({
name: "buddha-activity",
name: 'buddha-activity',
});
},
onSearch(){
this.$router.push({
name: 'temple-list',
query: {}
})
onSearch() {
this.$router.push({
name: 'temple-list',
query: {},
});
},
sliceNav(navData) {
const nav = [];
@@ -202,7 +180,9 @@ export default {
}
}
}
.merit-group{
padding-bottom: .4rem;
}
.merit {
width: 3.39rem;
height: 3.39rem;