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

完成搜索页面

Browse Source
This commit is contained in:
wenfp
2021-11-27 11:05:29 +08:00
parent 84380ef55a
commit 6f4b7a7b02
19 changed files with 1174 additions and 599 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/temple-home/index.vue
+472 -406
View File
@@ -1,352 +1,395 @@
<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 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>
<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>
<user-dynamic></user-dynamic>
</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 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>
</div>
<div class="panel">
<div class="panel-head">
<span class="title">功德无量</span>
<arrow-more></arrow-more>
</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 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>
</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">
<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 class="divider"></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">
<div class="user">
<img class="avatar" src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
<div class="profile">
<h5 class="name">奔跑</h5>
<p class="account">用户号: 1452134</p>
</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>
<ul class="user-list">
<li>
<img src="@/assets/img/user-popup/我的善缘.png" alt="">
<span>我的善缘</span>
</li>
<li>
<img src="@/assets/img/user-popup/联系客服.png" alt="">
<span>联系客服</span>
</li>
<li>
<img src="@/assets/img/user-popup/功德箱.png" alt="">
<span>功德箱</span>
</li>
<li>
<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>
<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 } from "@/api"
import { getTempleIndex, getUserData } from '@/api';
export default {
data(){
return {
query: this.$route.query,
showUserMenu: false,
data: null
}
},
mounted(){
this.getTempleIndex();
},
methods: {
async getTempleIndex(){
const res = await getTempleIndex(this.query.temple_id);
this.data = res;
this.data.icon_data = this.sliceNav(res.icon_data)
data() {
return {
query: this.$route.query,
showUserMenu: false,
data: null,
user: null,
};
},
sliceNav(navData){
const nav = [];
const slice = 8;
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'})
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-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;
.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;
.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;
padding-left: 1rem;
justify-content: center;
align-items: center;
.avatar{
width: 1.33rem;
height: 1.33rem;
border-radius: 1.33rem;
margin-right: .4rem;
flex-direction: column;
background: #f1f1f1;
border: 1px solid #ddd;
border-radius: 50%;
.menu-text {
font-size: .27rem;
margin-top: .1rem;
}
.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;
.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;
}
}
}
.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;
.merit-rank-container {
.head {
padding: .53rem .4rem;
padding-bottom: .13rem;
}
span.current{
color: #222;
border-bottom-color: rgb(168, 28, 28);
}
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;
.grid-nav {
margin-bottom: .8rem;
.nav-icon {
width: 1.07rem;
height: 1.07rem;
}
.van-swipe__indicator--active{
background: $primary-color;
.van-swipe__indicators {
bottom: 0;
.van-swipe__indicator {
width: 20px;
height: 2px;
border-radius: 10px;
}
.van-swipe__indicator--active {
background: $primary-color;
}
}
}
}
.certed-temple{
.certed-temple {
display: flex;
border: 1px solid $primary-color;
border-radius: 4px;
@@ -355,127 +398,150 @@ export default {
font-size: .37rem;
padding: .3rem;
margin-bottom: .2rem;
.cert-icon{
width: .3rem;
margin-right: .1rem;
.cert-icon {
width: .3rem;
margin-right: .1rem;
}
.text{
.text {
flex: 1;
font-size: .3rem;
color: #888;
padding-top: 2px;
}
.btn{
.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;
.process-more {
line-height: 1.5rem;
text-align: center;
img{
width: 100%;
height: 100%;
border-radius: .16rem;
font-size: .4rem;
.iconfont {
vertical-align: middle;
}
}
.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;
.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;
}
}
}
.panel-body{
padding: 0 .4rem;
overflow-x: scroll;
.merit-group{
display: flex;
width: 11.36rem;
margin-bottom: .91rem;
.swiper {
margin-bottom: .4rem;
}
.van-notice-bar {
border: 1px solid #E6B759;
border-radius: .16rem;
}
}
}
.temple-home-activity{
.process{
padding: .4rem 0;
.bar{
padding-bottom: 0;
.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;
}
}
}
}
.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;
.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;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .37rem;
padding: 0 .11rem;
}
& ~ .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{
.temple-home-page {
.temple-home {
display: flex;
font-size: .37rem;
justify-content: space-between;
align-items: center;
padding: .4rem .3rem;
.temple-name{
.temple-name {
font-size: .45rem;
color: #666;
}
.visitor{
.visitor {
color: #999;
font-size: .3rem;
span{
span {
padding-left: 10px;
}
}