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/App.vue
+58 -59
View File
@@ -1,61 +1,59 @@
<template> <template>
<div id="app" :style="{paddingBottom: paddingBottom + 'px'}"> <div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
<router-view /> <router-view />
<van-tabbar v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999"> <van-tabbar v-if="showTabbar" class="tabbar" ref="tabbar" route active-color="#CF9E3B" inactive-color="#999">
<van-tabbar-item replace v-for="(tab, index) in tabbar" :key="index" :to="tab.path"> <van-tabbar-item replace v-for="(tab, index) in tabbar" :key="index" :to="tab.path">
<span>{{tab.title}}</span> <span>{{ tab.title }}</span>
<template #icon="props"> <template #icon="props">
<img :src="props.active ? tab.active: tab.inactive" alt=""> <img :src="props.active ? tab.active: tab.inactive" alt="">
</template> </template>
</van-tabbar-item> </van-tabbar-item>
</van-tabbar> </van-tabbar>
</div> </div>
</template> </template>
<script> <script>
import { tabbar } from '../src/router' import { tabbar } from '../src/router';
import { getWechatSign } from './api' import { getWechatSign } from './api';
import { signToWechat } from './common/wechat-web'; import { signToWechat } from './common/wechat-web';
export default { export default {
name: 'App', name: 'App',
data(){ data() {
return { return {
active: '3', active: '3',
tabbar tabbar
} };
},
provide(){
return {
root: this,
tabbar: this.$refs.tabbar,
}
},
components: {
},
beforeCreate: () => {
getWechatSign(location.href).then(res => {
signToWechat(res)
})
},
watch: {
'$route': {
handler(val){
console.log(val)
this.active = tabbar.map(v => v.name).indexOf(val.name).toString()
}
}
},
computed: {
showTabbar(){
const path = tabbar.map(tab => tab.path);
return path.includes(this.$route.path)
}, },
paddingBottom(){ provide() {
return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0 return {
root: this,
tabbar: this.$refs.tabbar
};
},
components: {},
beforeCreate: () => {
getWechatSign(location.href).then(res => {
signToWechat(res);
});
},
watch: {
'$route': {
handler(val) {
this.active = tabbar.map(v => v.name).indexOf(val.name).toString();
}
}
},
computed: {
showTabbar() {
const path = tabbar.map(tab => tab.path);
return path.includes(this.$route.path);
},
paddingBottom() {
return this.showTabbar ? this.$refs.tabbar ? this.$refs.tabbar.$el.offsetHeight : 0 : 0;
}
} }
}, };
}
</script> </script>
<style> <style>
@@ -63,16 +61,17 @@ export default {
@import '//at.alicdn.com/t/font_2897403_mztfr3fibh.css'; @import '//at.alicdn.com/t/font_2897403_mztfr3fibh.css';
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
max-width: 750px; max-width: 750px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.tabbar{
/* padding-top: .57rem; */ .tabbar {
/* background: url('~@/assets/img/bg.png') top center no-repeat; */ /* padding-top: .57rem; */
/* background-size: contain; */ /* background: url('~@/assets/img/bg.png') top center no-repeat; */
/* background-size: contain; */
} }
</style> </style>
src/api/index.js
+5 -1
View File
@@ -114,7 +114,7 @@ const getDynamicDetail = (dynamic_id) => service.get(`/api/dynamic/detail?id=${d
const getCommonGoods = (temple_id, page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`); const getCommonGoods = (temple_id, page, size = 10) => service.get(`/api/common/get-list?temple_id=${temple_id}&page=${page}&size=${size}`);
// 获取订单榜 // 获取订单榜
const getOrderCompare = (temple_id, type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?temple_id=${temple_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`); const getOrderCompare = (temple_id = '1', type = '', goods_id = '', goods_type = '') => service.get(`/api/order/get-compare?temple_id=${temple_id}&type=${type}&goods_id=${goods_id}&goods_type=${goods_type}`);
// 寺院列表 // 寺院列表
const getTempleList = (keywords = '', lng = '', lat = '', page = 1, size = 10) => service.get(`/api/temple/get-List?keywords=${keywords}&lng=${lng}&lat=${lat}&page=${page}&size=${size}`) const getTempleList = (keywords = '', lng = '', lat = '', page = 1, size = 10) => service.get(`/api/temple/get-List?keywords=${keywords}&lng=${lng}&lat=${lat}&page=${page}&size=${size}`)
@@ -131,7 +131,11 @@ const getCustomerList = () => service.get(`/api/customer/get-list`);
// 功德证书 // 功德证书
const getCertList = () => service.get(`/api/user/get-cert-list`); const getCertList = () => service.get(`/api/user/get-cert-list`);
// 热门搜索
const getHotWords = () => service.get(`/api/keywords/get-list`);
export { export {
getHotWords,
getMonkAppellation, getMonkAppellation,
getRegion, getRegion,
postTemple, postTemple,
src/common/vant.js
+3 -1
View File
@@ -27,6 +27,7 @@ import {
Switch, Switch,
Cascader, Cascader,
ActionSheet, ActionSheet,
ShareSheet,
Dialog Dialog
} from "vant"; } from "vant";
@@ -35,8 +36,9 @@ Vue.use(NavBar);
Vue.use(Search); Vue.use(Search);
Vue.use(Swipe); Vue.use(Swipe);
Vue.use(SwipeItem); Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem); Vue.use(GridItem);
Vue.use(Grid);
Vue.use(ShareSheet);
Vue.use(NoticeBar); Vue.use(NoticeBar);
Vue.use(Tabbar); Vue.use(Tabbar);
Vue.use(TabbarItem); Vue.use(TabbarItem);
src/common/wechat-web.js
+66 -29
View File
@@ -1,39 +1,44 @@
let wechatInstance; let wechatInstance;
function signToWechat(config){ function signToWechat(config) {
if(!wx){ if (!wx) {
console.warn('请安装微信网页JS-SDK, url: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js'); console.warn('请安装微信网页JS-SDK, url: https://res2.wx.qq.com/open/js/jweixin-1.6.0.js');
} }
const defaultConfig = { const defaultConfig = {
debug: true, ...config,
} jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'scanQRCode',
'getLocation',
'openLocation',
'updateAppMessageShareData',
'updateTimelineShareData'
],
};
return new Promise((resolve) => { return new Promise((resolve) => {
wx.config({ console.log('defaultConfig', defaultConfig);
...defaultConfig, wx.config(defaultConfig);
debug: true, wx.ready(function() {
...config, console.warn('wechat sdk config success');
})
wx.ready(function(){
console.warn('wechat sdk config success')
wechatInstance = wx; wechatInstance = wx;
resolve(wx) resolve(wx);
}) });
}) });
} }
function getLocation(){ function getLocation() {
return new Promise(resolve => { return new Promise(resolve => {
wechatInstance.getLocation({ wechatInstance.getLocation({
type: 'wgs84', type: 'wgs84',
success: res => { success: res => {
resolve(res) resolve(res);
} }
}) });
}) });
} }
function requestPayment(paymentConfig){ function requestPayment(paymentConfig) {
return new Promise(resolve => { return new Promise(resolve => {
wechatInstance.chooseWXPay({ wechatInstance.chooseWXPay({
timestamp: paymentConfig.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 timestamp: paymentConfig.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
@@ -41,18 +46,50 @@ function requestPayment(paymentConfig){
package: paymentConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） package: paymentConfig.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType: paymentConfig.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致 signType: paymentConfig.signType, // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
paySign: paymentConfig.paySign, // 支付签名 paySign: paymentConfig.paySign, // 支付签名
success: function (res) { success: function(res) {
// 支付成功后的回调函数 // 支付成功后的回调函数
resolve(res) resolve(res);
}, },
fail(res){ fail(res) {
alert(JSON.stringify(res)) alert(JSON.stringify(res));
} }
}); });
}) });
} }
function openLocation(config){ function openLocation(config) {
return wechatInstance.openLocation(config) return wechatInstance.openLocation(config);
} }
export { signToWechat, getLocation, requestPayment, openLocation };
// 分享给朋友
function updateAppMessageShareData(title = '', desc = '', link = '', imgUrl = '') {
return new Promise((resolve) => {
wechatInstance.updateAppMessageShareData({
title,
desc,
link,
imgUrl,
complete: res => {
resolve(res);
}
});
});
}
// 分享到朋友圈
function updateTimelineShareData(title = '', desc = '', link = '', imgUrl = '') {
return new Promise((resolve) => {
wechatInstance.updateTimelineShareData({
title,
desc,
link,
imgUrl,
complete: res => {
resolve(res);
}
});
});
}
export { signToWechat, getLocation, requestPayment, openLocation, updateAppMessageShareData, updateTimelineShareData };
src/components/Thanksgiving/index.vue
+17 -13
View File
@@ -3,17 +3,17 @@
<div class="head"> <div class="head">
<span class="title">感恩功德</span> <span class="title">感恩功德</span>
<div class="list"> <div class="list">
<span :class="[nav.id === type_id && 'current']" v-for="nav in type_nav" :key="nav.id" >{{ nav.title }}</span> <span :class="[nav.id === type_id && 'current']" v-for="nav in type_nav" :key="nav.id" @click="onSetType(nav)">{{ nav.title }}</span>
</div> </div>
</div> </div>
<div class="body"> <div class="body">
<swiper :options="swiperOptions"> <div :options="swiperOptions">
<swiper-slide v-for="slide in type_nav" :key="slide.id"> <div v-for="slide in type_nav" :key="slide.id">
<scroll-view> <div v-if="type_id === slide.id">
<user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic" ></user-merit> <user-merit v-for="dynamic in slide.list" :key="dynamic.id" :data="dynamic" ></user-merit>
</scroll-view> </div>
</swiper-slide> </div>
</swiper> </div>
<div class="thanks-more" @click="onThankMore">查看更多</div> <div class="thanks-more" @click="onThankMore">查看更多</div>
</div> </div>
</div> </div>
@@ -48,10 +48,11 @@ export default {
{ id: 3, title: "总榜", list: [] }, { id: 3, title: "总榜", list: [] },
], ],
swiperOptions: { swiperOptions: {
onSlideChangeEnd: ({realIndex}) => {
this.type_id = this.type_nav[realIndex].id; // onSlideChangeEnd: ({realIndex}) => {
this.getOrderCompare(); // this.type_id = this.type_nav[realIndex].id;
} // this.getOrderCompare();
// }
} }
} }
}, },
@@ -59,9 +60,12 @@ export default {
this.getOrderCompare(); this.getOrderCompare();
}, },
methods: { methods: {
onSetType(type){
this.type_id = type.id;
this.getOrderCompare();
},
async getOrderCompare(){ async getOrderCompare(){
const res = await getOrderCompare(this.templeId, this.type_id, this.goodsId, this.goodsType) const res = await getOrderCompare(this.templeId || '1', this.type_id, this.goodsId, this.goodsType)
console.log(res)
const current = this.type_nav.find(item => item.id === this.type_id); const current = this.type_nav.find(item => item.id === this.type_id);
current.list = res.list current.list = res.list
}, },
src/components/buddha-process/index.vue
+1 -1
View File
@@ -12,7 +12,7 @@
<div class="bar"> <div class="bar">
<span class="join">已有{{ privateData.sales }}人参与</span> <span class="join">已有{{ privateData.sales }}人参与</span>
<div class="btn-group"> <div class="btn-group">
<span class="btn" :class="[privateData.is_collected === 1 ? 'collect' : 'un-collect']" @click.stop="onCollect"> <span class="btn" :class="[privateData.is_collected === 1 || privateData.collect === 1 ? 'collect' : 'un-collect']" @click.stop="onCollect">
<i class="iconfont icon-guanzhu-yiguanzhu"></i> <i class="iconfont icon-guanzhu-yiguanzhu"></i>
<b>关注</b> <b>关注</b>
</span> </span>
src/components/user-merit/index.vue
+8 -4
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="user-merit border-bottom" v-if="data"> <div class="user-merit border-bottom" v-if="data && data.user_info">
<img <img
:src="data.user_info.avatar" :src="data.user_info.avatar"
alt="" alt=""
@@ -10,7 +10,7 @@
<span>{{data.user_info.nickname}}</span> <span>{{data.user_info.nickname}}</span>
<span>{{data.user_info.region}}</span> <span>{{data.user_info.region}}</span>
</div> </div>
<p>{{data.goods_name}}</p> <p class="goods_name">{{data.goods_name}}</p>
</div> </div>
</div> </div>
<div class="result"> <div class="result">
@@ -27,7 +27,7 @@ export default {
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.user-merit { .user-merit {
display: flex; display: flex;
padding: .27rem 0.4rem; padding: .27rem 0.4rem;
@@ -58,8 +58,12 @@ export default {
display: inline-block; display: inline-block;
} }
} }
p { p.goods_name{
font-size: 0.32rem; font-size: 0.32rem;
max-width: 4rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
} }
.result { .result {
src/main.js
+1
View File
@@ -8,6 +8,7 @@ import '@/assets/js/flexable.js';
import './common/vant'; import './common/vant';
import './components/index' import './components/index'
import 'swiper/css/swiper.css' import 'swiper/css/swiper.css'
Vue.mixin(globalMixin) Vue.mixin(globalMixin)
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.prototype.$delay = delay; Vue.prototype.$delay = delay;
src/pages/buddha-detail/index.vue
+32 -2
View File
@@ -1,7 +1,7 @@
<template> <template>
<div class="process-detail-wrapper" v-if="data"> <div class="process-detail-wrapper" v-if="data">
<div class="process-detail"> <div class="process-detail">
<h1 class="title">{{ data.title }} </h1> <h1 class="title">{{ data.title }} 123456</h1>
<p class="date">{{ data.time || data.date }}</p> <p class="date">{{ data.time || data.date }}</p>
<p class="desc">{{ data.description }}</p> <p class="desc">{{ data.description }}</p>
@@ -19,24 +19,37 @@
<i class="iconfont icon-guanzhu-yiguanzhu"></i> <i class="iconfont icon-guanzhu-yiguanzhu"></i>
<b>关注</b> <b>关注</b>
</span> </span>
<span class="btn"> <span class="btn" @click="onShare">
<i class="iconfont icon-zhuanfa"></i> <i class="iconfont icon-zhuanfa"></i>
<b>转发</b> <b>转发</b>
</span> </span>
</div> </div>
</div> </div>
</div> </div>
<van-share-sheet
v-model="showShare"
title="立即分享给好友"
:options="options"
@select="onSelect"
/>
</div> </div>
</template> </template>
<script> <script>
import { getDynamicDetail, toggleCollect } from '@/api'; import { getDynamicDetail, toggleCollect } from '@/api';
import { updateAppMessageShareData, updateTimelineShareData } from '@/common/wechat-web';
export default { export default {
name: 'buddha-detail', name: 'buddha-detail',
data() { data() {
return { return {
data: null, data: null,
showShare: false,
options: [
{ name: '微信', icon: 'wechat' },
{ name: '朋友圈', icon: 'wechat-moments' },
],
}; };
}, },
computed: { computed: {
@@ -51,6 +64,22 @@ export default {
this.getDynamicDetail(); this.getDynamicDetail();
}, },
methods: { methods: {
onShare(){
this.showShare = true;
},
onSelect(option) {
this.showShare = false;
if(option.icon === 'wechat'){
updateAppMessageShareData(this.data.title, this.data.description, location.href, this.data.covers[0]).then(result => {
console.log('result', result)
})
}
if(option.icon === 'wechat-moments'){
updateTimelineShareData(this.data.title, this.data.description, location.href, this.data.covers[0]).then(result => {
console.log('result', result)
})
}
},
async getDynamicDetail(){ async getDynamicDetail(){
const data = await getDynamicDetail(this.$route.query.id); const data = await getDynamicDetail(this.$route.query.id);
this.data = data; this.data = data;
@@ -74,6 +103,7 @@ export default {
display: flex; display: flex;
position: relative; position: relative;
padding: .5rem .4rem env(safe-area-inset-bottom) .4rem; padding: .5rem .4rem env(safe-area-inset-bottom) .4rem;
margin-bottom: 1rem;
&::after { &::after {
content: ''; content: '';
height: 1px; height: 1px;
src/pages/everyday-donation/index.vue
-1
View File
@@ -166,7 +166,6 @@ export default {
title = '添砖加瓦' title = '添砖加瓦'
} }
document.title = title; document.title = title;
console.log( JSON.stringify(query))
for(let i in query){ for(let i in query){
query[i] = query[i].toString() query[i] = query[i].toString()
} }
src/pages/goods-detail/index.vue
+3 -1
View File
@@ -200,7 +200,7 @@ export default {
this.listType = lType.id; this.listType = lType.id;
const res = await getOrderCompare(this.query.temple_id, this.listType, this.query.goods_id, 3 ); const res = await getOrderCompare(this.query.temple_id, this.listType, this.query.goods_id, 3 );
console.log('pay record', res) console.log('pay record', res)
this.payList = res.results; this.payList = res.list;
}, },
} }
} }
@@ -217,6 +217,7 @@ export default {
} }
} }
.support{ .support{
margin-bottom: .5rem;
.support-head{ .support-head{
padding: 0 .4rem; padding: 0 .4rem;
display: flex; display: flex;
@@ -307,6 +308,7 @@ export default {
margin-right: auto; margin-right: auto;
border: .01rem solid $primary-color; border: .01rem solid $primary-color;
border-radius: .13rem; border-radius: .13rem;
margin-bottom: .3rem;
} }
.caret-spec{ .caret-spec{
.head{ .head{
src/pages/home.vue
+2 -2
View File
@@ -58,7 +58,7 @@
</div> </div>
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<thanks-giving :temple-id="query.temple_id"></thanks-giving> <thanks-giving :temple-id="query.temple_id || '1' "></thanks-giving>
</div> </div>
</div> </div>
</template> </template>
@@ -102,7 +102,7 @@ export default {
}, },
onSearch() { onSearch() {
this.$router.push({ this.$router.push({
name: 'temple-list', name: 'search',
query: {}, query: {},
}); });
}, },
src/pages/merit-box/index.vue
+5 -2
View File
@@ -90,7 +90,7 @@ export default {
}, },
async getMeritBox(){ async getMeritBox(){
const current = this.nav.find(item => item.id === this.type_id); const current = this.nav.find(item => item.id === this.type_id);
const res = await getMeritBox(this.query.temple_id, current.id, current.page, current.size); const res = await getMeritBox(this.query.temple_id || '1', current.id, current.page, current.size);
this.info = res.merit_box_info; this.info = res.merit_box_info;
// this.list = res.merit_box_order.list; // this.list = res.merit_box_order.list;
current.list = res.merit_box_order.list current.list = res.merit_box_order.list
@@ -112,8 +112,9 @@ export default {
query: { query: {
...this.$route.query, ...this.$route.query,
title: '功德箱/供奉', title: '功德箱/供奉',
subTitle: '', subTitle: '随喜',
amount: obj.money, amount: obj.money,
quantity: 1,
from: 'meritBox', // 标识为功德箱 from: 'meritBox', // 标识为功德箱
} }
}) })
@@ -181,6 +182,7 @@ export default {
background: white; background: white;
padding: .4rem 0; padding: .4rem 0;
border-top: .01rem solid #ddd; border-top: .01rem solid #ddd;
padding-bottom: calc(env(safe-area-inset-bottom) + 0rem);
.merit-button{ .merit-button{
display: inline-block; display: inline-block;
background: $primary-color; background: $primary-color;
@@ -190,6 +192,7 @@ export default {
padding: 0 .53rem; padding: 0 .53rem;
border: .01rem solid $primary-color; border: .01rem solid $primary-color;
border-radius: $btn-border-radius; border-radius: $btn-border-radius;
} }
} }
} }
src/pages/monk/index.vue
+1 -4
View File
@@ -24,10 +24,7 @@
</ul> </ul>
</div> </div>
<div> <div>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
<user-merit></user-merit>
</div> </div>
</div> </div>
<div class="merit-button-group"> <div class="merit-button-group">
src/pages/pay-result/index.vue
+27 -2
View File
@@ -1,6 +1,9 @@
<template> <template>
<div class="pay-result"> <div class="pay-result">
<div class="cert-show"></div> <div class="cert-show">
<img :src="src">
<span class="long-press">长按图片保存到手机</span>
</div>
<div class="pay-info"> <div class="pay-info">
<span> <span>
<i class="iconfont icon-zhifuchenggong"></i> <i class="iconfont icon-zhifuchenggong"></i>
@@ -15,7 +18,13 @@
</template> </template>
<script> <script>
export default {}; export default {
computed: {
src(){
return `https://wdx-temple.oss-cn-hangzhou.aliyuncs.com/uploads/merit/certificate/66.jpg`
}
}
};
</script> </script>
<style lang="scss"> <style lang="scss">
@@ -23,6 +32,22 @@ export default {};
.cert-show { .cert-show {
height: 70vh; height: 70vh;
background: #f5f5f5; background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
padding: .2rem;
position: relative;
img{
max-width: 90%;
max-height: 100%;
display: inline-block;
}
.long-press{
position: absolute;
font-size: .3rem;
bottom: .1rem;
color: #999;
}
} }
.pay-info{ .pay-info{
text-align: center; text-align: center;
src/pages/search/index.vue
+88 -19
View File
@@ -3,7 +3,7 @@
<form action="/"> <form action="/">
<van-search <van-search
v-model="value" v-model="value"
show-action :show-action="showAction"
placeholder="请输入搜索关键词" placeholder="请输入搜索关键词"
@search="onSearch" @search="onSearch"
@cancel="onCancel" @cancel="onCancel"
@@ -12,46 +12,100 @@
<div class="search-history"> <div class="search-history">
<h1 class="title">热门搜索</h1> <h1 class="title">热门搜索</h1>
<div class="search-text-group"> <div class="search-text-group">
<span class="search-text">放生修福<i class="iconfont icon-hotfill"></i></span> <span class="search-text"
<span class="search-text">在宮腔佛</span> v-for="(hot, index) in hotWords"
<span class="search-text">在宮腔</span> :key="index"
<span class="search-text">在宮腔</span> @click="onHotSearch(hot)"
<span class="search-text">在宮腔</span> >{{hot.keywords}}<i class="iconfont icon-hotfill"></i></span>
<span class="search-text">在宮腔</span>
</div> </div>
</div> </div>
<div class="search-history"> <div class="search-history">
<div class="flex"> <div class="flex">
<h1 class="title">历史记录</h1> <h1 class="title">历史记录</h1>
<span> <span @click="clearHistory">
<i class="iconfont icon-delete"></i> <i class="iconfont icon-delete"></i>
</span> </span>
</div> </div>
<div class="search-text-group"> <div class="search-text-group">
<span class="search-text">放生修福</span> <span class="search-text" v-for="(history, index) in historyList" :key="index" @click="onHistorySearch(history)">{{history}}</span>
<span class="search-text">在宮腔佛</span>
<span class="search-text">在宮腔</span>
<span class="search-text">在宮腔</span>
<span class="search-text">在宮腔</span>
<span class="search-text">在宮腔</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { getHotWords } from '@/api';
const sessionStorageKey = 'searchHistory';
export default { export default {
data(){ data(){
return { return {
value: '', value: '',
hotWords: [],
historyList: [],
} }
}, },
computed: {
showAction(){
return this.value !== '';
}
},
mounted() {
this.getHotWords();
this.setHistoryList()
},
methods: { methods: {
async getHotWords(){
const res = await getHotWords();
this.hotWords = res.hot_data;
},
setHistoryList(){
const sessionStore = sessionStorage.getItem(sessionStorageKey);
this.historyList = sessionStore ? JSON.parse(sessionStore) : [];
},
onHotSearch({keywords}){
this.value = keywords;
this.onSearch();
},
onHistorySearch(keyword){
this.value = keyword;
this.onSearch();
},
onSearch(){ onSearch(){
const sessionStore = sessionStorage.getItem(sessionStorageKey);
let searchHistory = sessionStore ? JSON.parse(sessionStore) : [];
if(!searchHistory.includes(this.value)){
searchHistory.unshift(this.value)
} else {
// 历史记录关键词置顶
const topKey = searchHistory.splice(searchHistory.indexOf(this.value), 1);
searchHistory = [...topKey, ...searchHistory]
}
sessionStorage.setItem(sessionStorageKey, JSON.stringify(searchHistory));
this.setHistoryList();
this.$router.push({
name: 'temple-list',
query: { search: this.value }
})
this.value = '';
},
confirmDeleteHistory(){
return new Promise(resolve => {
this.$dialog.confirm({
title: '删除确认',
message: '是否删除当前历史记录？'
}).then(() => {
resolve();
})
})
},
async clearHistory(){
if(!this.historyList.length) return;
await this.confirmDeleteHistory();
sessionStorage.setItem(sessionStorageKey, JSON.stringify([]));
this.setHistoryList();
}, },
onCancel(){ onCancel(){
this.value = ''
} }
} }
}; };
@@ -61,29 +115,44 @@ export default {
.search-history{ .search-history{
padding: 0 .4rem; padding: 0 .4rem;
margin-bottom: .53rem; margin-bottom: .53rem;
margin-top: .5rem;
.title{ .title{
font-size: .4rem; font-size: .4rem;
color: #222; color: #222;
margin-bottom: .3rem;
} }
.flex{ .flex{
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-bottom: .6rem;
.title{
margin-bottom: 0;
}
span{
display: inline-flex;
}
} }
.search-text-group{ .search-text-group{
.search-text{ .search-text{
font-size: .37rem; font-size: .35rem;
color: #222; color: #222;
display: inline-block; display: inline-block;
padding: .16rem .27rem; padding: .2rem .27rem;
border: .01rem solid #ddd; border: .01rem solid #ddd;
border-radius: .11rem; border-radius: .11rem;
margin-right: .4rem; margin-right: .2rem;
margin-bottom: .2rem;
height: .9rem;
line-height: .5rem;
box-sizing: border-box;
vertical-align: top;
} }
.iconfont{ .iconfont{
display: inline-block; display: inline-block;
color: red; color: red;
margin-left: .13rem; margin-left: .13rem;
font-size: .35rem;
} }
} }
} }
src/pages/temple-home/index.vue
+476 -410
View File
@@ -1,352 +1,395 @@
<template> <template>
<div class="temple-home-page" v-if="data"> <div class="temple-home-page" v-if="data">
<div class="temple-home"> <div class="temple-home">
<span class="temple-name">{{data.temple_data.unit_name}}</span> <span class="temple-name">{{ data.temple_data.unit_name }}</span>
<div class="visitor"> <div class="visitor">
<span>{{data.temple_data.region}}</span> <span>{{ data.temple_data.region }}</span>
<span>{{data.temple_data.visit}}到访</span> <span>{{ data.temple_data.visit }}到访</span>
</div>
</div> </div>
</div> <div class="certed-temple" @click="$router.push({name: 'temple-detail', query: { temple_id: query.temple_id}})">
<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="">
<img class="cert-icon" src="@/assets/img/cert.jpg" alt=""> <span class="text">佛教协会认证寺院 可放心访问</span>
<span class="text">佛教协会认证寺院 可放心访问</span> <span class="btn">查看</span>
<span class="btn">查看</span> </div>
</div> <div class="container">
<div class="container"> <div class="swiper">
<div class="swiper"> <van-swipe class="my-swipe" :autoplay="8000" indicator-color="white">
<van-swipe class="my-swipe" :autoplay="8000" indicator-color="white"> <van-swipe-item v-for="(banner, index) in data.banner_data" :key="index">
<van-swipe-item v-for="(banner, index) in data.banner_data" :key="index"> <img :src="banner.cover" alt="" @click="$router.push({ path: banner.url})">
<img :src="banner.cover" alt="" @click="$router.push({ path: banner.url})"> </van-swipe-item>
</van-swipe-item> </van-swipe>
</van-swipe> </div>
</div> <van-swipe class="grid-nav" :loop="false">
<van-swipe class="grid-nav" :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">
<van-grid :border="false"> <van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index">
<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">
<img :src="nav.icon_url" class="nav-icon" slot="icon"> </van-grid-item>
</van-grid-item> </van-grid>
</van-grid> </van-swipe-item>
</van-swipe-item> </van-swipe>
</van-swipe> <div class="user-dynamic-container" v-if="data.order_data.length > 0">
<user-dynamic></user-dynamic> <van-swipe vertical loop :autoplay="3000" :touchable="false">
</div> <van-swipe-item v-for="order in data.order_data" :key="order.id">
<div class="divider"></div> <user-dynamic :data="order"></user-dynamic>
</van-swipe-item>
</van-swipe>
</div>
</div>
<div class="divider"></div>
<div class="temple-manager"> <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 }})"> <div class="manager" v-for="manager in data.member_data" :key="manager.id"
<img class="avatar" :src="manager.avatar_url" alt=""> @click="$router.push({ name: 'monk', query: { master_id: manager.id }})">
<div class="manager-container"> <img class="avatar" :src="manager.avatar_url" alt="">
<h3 class="name">{{manager.title}}</h3> <div class="manager-container">
<p class="content"> <h3 class="name">{{ manager.title }}</h3>
<span v-html="manager.description"></span> <p class="content">
</p> <span v-html="manager.description"></span>
</p>
</div>
</div>
</div> </div>
</div> <div class="panel">
</div> <div class="panel-head">
<div class="panel"> <span class="title">功德无量</span>
<div class="panel-head"> <arrow-more></arrow-more>
<span class="title">功德无量</span> </div>
<arrow-more></arrow-more> <div class="panel-body">
</div> <van-swipe class="merit-group" :width="140" :loop="false" :show-indicators="false">
<div class="panel-body"> <van-swipe-item v-for="goods in data.common_data" :key="goods.id">
<div class="merit-group"> <div class="merit" @click="onToGoods(goods)">
<div class="merit"> <img :src="goods.cover_url" alt="" />
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt=""> <p class="title">{{ goods.alias }}</p>
<p class="title">为佛像贴金身，菩萨菩萨</p> </div>
</div> </van-swipe-item>
<div class="merit"> </van-swipe>
<img src="https://img0.baidu.com/it/u=4049979356,2546472874&fm=26&fmt=auto" alt=""> </div>
<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> </div>
</div> <div class="divider"></div>
</div> <div class="panel temple-home-activity">
<div class="divider"></div> <div class="panel-head">
<div class="panel temple-home-activity"> <span class="title">进展状态</span>
<div class="panel-head"> <arrow-more></arrow-more>
<span class="title">进展状态</span> </div>
<arrow-more></arrow-more> <div class="panel-body">
</div> <buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process>
<div class="panel-body"> <div class="process-more" @click="onMoreDynamic">
<buddha-process v-for="process in data.dynamic_data" :key="process.id" :data="process"></buddha-process> <span>查看更多进展状态</span>
<div class="process-more" @click="onMoreDynamic"> <i class="iconfont icon-arrow-right"></i>
<span>查看更多进展状态</span> </div>
<i class="iconfont icon-arrow-right"></i> </div>
</div> <div class="divider"></div>
</div> <div class="merit-rank-container">
<div class="divider"></div> <div class="head">
<div class="merit-rank-container"> <span class="title">感恩功德</span>
<div class="head"> <div class="list">
<span class="title">感恩功德</span> <span class="current">实时</span>
<div class="list"> <span>月榜</span>
<span class="current">实时</span> <span>总榜</span>
<span>月榜</span> </div>
<span>总榜</span> </div>
</div> <div class="body">
</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="panel-menu-btn" @click="showUserMenu = true"> </div>
<span><i class="iconfont icon-jingwen"></i></span> </div>
<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> </div>
<ul class="user-list">
<li> <div class="panel-menu-btn" @click="showUserMenu = true">
<img src="@/assets/img/user-popup/我的善缘.png" alt=""> <span><i class="iconfont icon-jingwen"></i></span>
<span>我的善缘</span> <span class="menu-text">菜单</span>
</li> </div>
<li>
<img src="@/assets/img/user-popup/联系客服.png" alt=""> <van-popup v-model="showUserMenu" position="left" style="width: 80%; height: 100%">
<span>联系客服</span> <div class="user-menu" v-if="user">
</li> <div class="user">
<li> <img class="avatar" :src="user.avatar" alt="">
<img src="@/assets/img/user-popup/功德箱.png" alt=""> <div class="profile">
<span>功德箱</span> <h5 class="name">{{user.nickname}}</h5>
</li> <p class="account">用户号: {{user.account_no}}</p>
<li> </div>
<img src="@/assets/img/user-popup/查看更多寺院.png" alt=""> </div>
<span>查看更多寺院</span> <ul class="user-list">
</li> <li @click="onPushForRouteName('user-order')">
</ul> <img src="@/assets/img/user-popup/我的善缘.png" alt="">
</div> <span>我的善缘</span>
<p class="put-away" @click="showUserMenu = false"> </li>
<span class="iconfont icon-arrow-left"></span> <li @click="onPushForRouteName('user-customer')">
</p> <img src="@/assets/img/user-popup/联系客服.png" alt="">
</van-popup> <span>联系客服</span>
</div> </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> </template>
<script> <script>
import { getTempleIndex } from "@/api" import { getTempleIndex, getUserData } from '@/api';
export default { export default {
data(){ data() {
return { return {
query: this.$route.query, query: this.$route.query,
showUserMenu: false, showUserMenu: false,
data: null data: null,
} user: 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)
}, },
sliceNav(navData){ mounted() {
const nav = []; this.getTempleIndex();
const slice = 8; 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++){ for (let i = 0; i < Math.ceil(navData.length / slice); i++) {
const b = navData.slice(i * slice, i * slice + slice); const b = navData.slice(i * slice, i * slice + slice);
nav.push(b) nav.push(b);
} }
return nav; return nav;
}, },
onMoreDynamic(){ onMoreDynamic() {
this.$router.push({ name: 'buddha-activity'}) this.$router.push({ name: 'buddha-activity' });
}
} }
} };
}
</script> </script>
<style lang="scss" scope> <style lang="scss" scope>
.van-nav-bar__title{ .van-nav-bar__title {
color: white; color: white;
} }
.van-popup{
.put-away{ .van-popup {
position: absolute; .put-away {
bottom: 0; position: absolute;
left: 0; bottom: 0;
right: 0; left: 0;
height: 1.3rem; right: 0;
line-height: 1.3rem; height: 1.3rem;
border-top: 1px solid #f1f1f1; line-height: 1.3rem;
text-align: right; border-top: 1px solid #f1f1f1;
.iconfont{ text-align: right;
font-size: .8rem;
.iconfont {
font-size: .8rem;
}
} }
}
} }
.user-menu{
.user{ .user-menu {
margin-top: 1.33rem; .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; display: flex;
padding-left: 1rem; justify-content: center;
align-items: center; align-items: center;
.avatar{ flex-direction: column;
width: 1.33rem; background: #f1f1f1;
height: 1.33rem; border: 1px solid #ddd;
border-radius: 1.33rem; border-radius: 50%;
margin-right: .4rem;
.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{ .temple-manager {
.manager{ .manager {
display: flex; display: flex;
margin: .4rem; 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 {
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{ .merit-rank-container {
padding: .53rem .4rem; .head {
padding-bottom: .13rem; padding: .53rem .4rem;
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; padding-bottom: .13rem;
} display: flex;
span.current{ justify-content: space-between;
color: #222;
border-bottom-color: rgb(168, 28, 28); .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; .grid-nav {
.nav-icon{ margin-bottom: .8rem;
width: 1.07rem;
height: 1.07rem; .nav-icon {
} width: 1.07rem;
.van-swipe__indicators{ height: 1.07rem;
bottom: 0;
.van-swipe__indicator{
width: 20px;
height: 2px;
border-radius: 10px;
} }
.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; display: flex;
border: 1px solid $primary-color; border: 1px solid $primary-color;
border-radius: 4px; border-radius: 4px;
@@ -355,127 +398,150 @@ export default {
font-size: .37rem; font-size: .37rem;
padding: .3rem; padding: .3rem;
margin-bottom: .2rem; margin-bottom: .2rem;
.cert-icon{
width: .3rem; .cert-icon {
margin-right: .1rem; width: .3rem;
margin-right: .1rem;
} }
.text{
.text {
flex: 1; flex: 1;
font-size: .3rem; font-size: .3rem;
color: #888; color: #888;
padding-top: 2px; padding-top: 2px;
} }
.btn{
.btn {
color: $primary-color; color: $primary-color;
} }
} }
.process-more{
line-height: 1.5rem; .process-more {
text-align: center; line-height: 1.5rem;
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; text-align: center;
img{ font-size: .4rem;
width: 100%;
height: 100%; .iconfont {
border-radius: .16rem; vertical-align: middle;
} }
} }
.swiper{
margin-bottom: .4rem; .container {
} padding: .4rem;
.van-notice-bar{ padding-bottom: .33rem;
border: 1px solid #E6B759;
.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; border-radius: .16rem;
} vertical-align: top;
}
.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; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; & ~ .merit {
font-size: .37rem; margin-left: .4rem;
padding: 0 .11rem; }
}
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; display: flex;
font-size: .37rem; font-size: .37rem;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: .4rem .3rem; padding: .4rem .3rem;
.temple-name{
.temple-name {
font-size: .45rem; font-size: .45rem;
color: #666; color: #666;
} }
.visitor{
.visitor {
color: #999; color: #999;
font-size: .3rem; font-size: .3rem;
span{
span {
padding-left: 10px; padding-left: 10px;
} }
} }
src/pages/temple-list/index.vue
+5
View File
@@ -55,6 +55,7 @@ import { getLocation } from '@/common/wechat-web';
export default { export default {
data(){ data(){
return { return {
query: this.$route.query,
containerHeight: 0, containerHeight: 0,
keyword: '', keyword: '',
mode: 'list', mode: 'list',
@@ -77,6 +78,10 @@ export default {
this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20; this.containerHeight = window.innerHeight - this.$refs.topbar.offsetHeight - offsetHeight - 20;
}) })
if(this.query.search){
this.keyword = this.query.search;
}
this.getTempleList(); this.getTempleList();
}, },
methods: { methods: {
wap/js/app.js
+379 -51
View File
File diff suppressed because one or more lines are too long