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
2022-03-16 19:10:41 +08:00
parent dd4c5f4dfd
commit ef0d060731
9 changed files with 153 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+16 -1
View File
@@ -96,7 +96,7 @@ export default {
<style lang="scss">
@import '~@/assets/css/reset.css';
@import '//at.alicdn.com/t/font_2897403_lklpexeunn.css';
@import '//at.alicdn.com/t/font_2897403_8d7w3rodyu2.css';
.app-safe-area{
position: relative;
padding-bottom: env(safe-area-inset-bottom);
@@ -133,6 +133,21 @@ export default {
}
}
.icon-home{
width: 1.1rem;
height: 1.1rem;
font-size: .5rem;
background: white;
border: 1px solid #ddd;
border-radius: 1rem;
position: absolute;
left: .4rem;
top: .4rem;
&:active{
background: #f1f1f1;
}
}
.no-more{
font-size: .4rem;
text-align: center;
src/api/index.js
+4
View File
@@ -122,6 +122,9 @@ const createMeritBoxOrder = data => service.post(`/api/order/create-merit-box`,
// 获取动态（佛事）列表
const getDynamicData = (temple_id = '', page = 1, goods_id = '', size = 10) => service.get(`/api/dynamic/get-page?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}`);
// 获取动态列表
const getDynamicDataByGoodsId = (temple_id = '', page = 1, goods_id = '', goods_type = '', size = 10) => service.get(`/api/dynamic/get-list?temple_id=${temple_id}&page=${page}&size=${size}&goods_id=${goods_id}&goods_type=${goods_type}`);
// 获取动态（佛事）详情
const getDynamicDetail = (dynamic_id = '') => service.get(`/api/dynamic/detail?id=${dynamic_id}`);
@@ -165,6 +168,7 @@ const getPlatformHome = agent_id => service.get(`/api/home?agent_id=${agent_id}`
const hasLogin = () => service.get('/api/has-login');
export {
getDynamicDataByGoodsId,
hasLogin,
getHotWords,
getMonkAppellation,
src/components/buddha-process/index.vue
+6
View File
@@ -83,6 +83,12 @@ export default {
</script>
<style lang="scss">
.panel-body {
.buddha-process{
padding-left: 0;
padding-right: 0;
}
}
.buddha-process {
display: flex;
position: relative;
src/pages/everyday-donation/index.vue
+47 -13
View File
@@ -30,7 +30,7 @@
<div class="panel-head">
<span class="title">进展动态</span>
</div>
<div class="panel-body">
<div class="panel-body goods-panel-body">
<buddha-process v-for="dynamic in goodsDynamicList" :key="dynamic.id" :data="dynamic" :show-goods-btn="false"></buddha-process>
<div class="process-more" @click="onMoreProcess">
<span>查看更多进展状态</span>
@@ -38,21 +38,22 @@
</div>
</div>
</div>
<div class="support" v-if="payRecords.length">
<div class="support">
<div class="support-head">
<span class="label">感恩功德</span>
<ul class="external">
<li class="active">实时</li>
<li>月榜</li>
<li>总榜</li>
<li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{lType.name}}</li>
</ul>
</div>
<div>
<!-- <user-merit v-for=""></user-merit> -->
<user-merit v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
<div class="read-more" v-if="noMore">没有更多了</div>
<div class="read-more" v-else @click="loadMoreFn">查看更多</div>
</div>
</div>
</div>
<div class="merit-button-group border-top">
<button class="iconfont icon-home" v-if="query.no_login === '1'" @click="backHome"></button>
<button class="merit-button" @click="onHasLoginToNext">去行善</button>
</div>
@@ -149,7 +150,7 @@
<script>
import 'swiper/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import { getDynamicData, getGoodsDetail, hasLogin } from "@/api";
import { getDynamicDataByGoodsId, getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
export default {
components: {
@@ -193,7 +194,16 @@ export default {
loop: true,
pagination: '.swiper-pagination',
},
payRecords: []
listType: 1,
listTypes: [
{ id: 1, name: '实时', },
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
],
lTypeId: 1,
payList: [],
page: 1,
noMore: false,
}
},
computed: {
@@ -218,6 +228,11 @@ export default {
},
methods: {
backHome(){
const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home'
this.$router.replace({ name, query: { temple_id: query.temple_id }})
},
async onHasLoginToNext(){
await hasLogin();
this.showSpec = true
@@ -227,6 +242,11 @@ export default {
if(!this.onlySpecs) return false;
return !this.onlySpecs.includes(id) ? 'spec-disabled': ''
},
// 获取更多感恩功德1
loadMoreFn(){
this.page += 1;
this.getPayRecords(this.lTypeId, this.page)
},
getSelectedSpec() {
const { goods_type } = this.query;
if(goods_type === '2' || goods_type === '1'){
@@ -257,12 +277,13 @@ export default {
type = common: 获取普通商品
*/
async getGoodsDetail(type){
const { goods_id, temple_id } = this.$route.query;
const { goods_id, temple_id, goods_type } = this.$route.query;
const response = await getGoodsDetail(type, goods_id, temple_id);
if(this.query.goods_type === '2'){
response.spec = response.spec.map(v => ({ ...v, money: this.amountAbs(v.donate_number, Number(response.price))}))
}
await this.getDynamicDataByGoodsId(goods_id);
await this.getDynamicDataByGoodsId(goods_id, goods_type);
await this.getPayRecords(this.lTypeId, 1);
this.data = response;
if(!this.onlySpecs){
const { donate_number, money, id } = this.data.spec[0];
@@ -275,9 +296,21 @@ export default {
link: location.href
})
},
async getDynamicDataByGoodsId(goods_id){
const res = await getDynamicData(1, 1, goods_id);
this.goodsDynamicList = res.results;
// 获取感恩功德
async getPayRecords(lTypeId, page){
this.page = page;
this.lTypeId = lTypeId;
const res = await getOrderCompare(this.query.temple_id, this.page, this.lTypeId, this.query.goods_id, 3 );
if(this.page === 1){
this.payList = [];
}
this.payList = this.payList.concat(res.list);
this.noMore = res.list.length === 0;
},
async getDynamicDataByGoodsId(goods_id, goods_type){
const { temple_id } = this.$route.query;
const res = await getDynamicDataByGoodsId(temple_id, this.page, goods_id, goods_type);
this.goodsDynamicList = res;
},
onMoreProcess() {
const { goods_id, temple_id } = this.$route.query;
@@ -365,6 +398,7 @@ export default {
height: 100%;
}
}
.caret{
padding-bottom: 2.2rem;
.head{
src/pages/goods-detail/index.vue
+9 -8
View File
@@ -14,13 +14,7 @@
<span>已有{{data.sales || 0}}人参与</span>
</div>
</div>
<div class="temple-info">
<img class="temple-img" :src="data.cover_url" alt="">
<div class="temple-name">
<h4 class="name">铜梁古佛寺</h4>
<p class="visitor">已有 <span>1525</span> 人到访过</p>
</div>
</div>
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
@@ -33,7 +27,7 @@
<div class="support-head">
<span class="label">感恩功德</span>
<ul class="external">
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{lType.name}}</li>
<li :class="[lTypeId === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType.id, 1)">{{lType.name}}</li>
</ul>
</div>
<div>
@@ -44,6 +38,7 @@
</div>
<fixed-bottom ref="fixedBottom">
<button class="iconfont icon-home" v-if="query.no_login === '1'" @click="backHome"></button>
<button class="merit-button" @click="onHasLoginToNext">{{data.pay_name}}</button>
</fixed-bottom>
@@ -121,6 +116,7 @@ export default {
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
],
lTypeId: 1,
payList: [],
page: 1,
noMore: false,
@@ -149,6 +145,11 @@ export default {
this.getGoodsDetail('common');
},
methods: {
backHome(){
const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home'
this.$router.replace({ name, query: { temple_id: query.temple_id }})
},
async onHasLoginToNext(){
await hasLogin();
this.showSpec = true
src/pages/goods-light-detail/index.vue
+49 -21
View File
@@ -14,13 +14,13 @@
<span>已有{{data.details.sales || 0}}人参与</span>
</div>
</div>
<div class="temple-info">
<img class="temple-img" :src="data.temple.picture" alt="">
<div class="temple-name">
<h4 class="name">{{data.temple.unit_name}}</h4>
<p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>
</div>
</div>
<!-- <div class="temple-info">-->
<!-- <img class="temple-img" :src="data.temple.picture" alt="">-->
<!-- <div class="temple-name">-->
<!-- <h4 class="name">{{data.temple.unit_name}}</h4>-->
<!-- <p class="visitor">已有 <span>{{data.temple.visit}}</span> 人到访过</p>-->
<!-- </div>-->
<!-- </div>-->
<div class="divider"></div>
<div class="panel">
<div class="panel-head">
@@ -33,15 +33,18 @@
<div class="support-head">
<span class="label">感恩功德</span>
<ul class="external">
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType)">{{lType.name}}</li>
<li :class="[listType === lType.id && 'active']" v-for="lType in listTypes" :key="lType.id" @click="getPayRecords(lType, 1)">{{lType.name}}</li>
</ul>
</div>
<div>
<user-merit v-for="pay in payList" :key="pay.id" :data="pay"></user-merit>
<div class="read-more" v-if="noMore">没有更多了</div>
<div class="read-more" v-else @click="loadMoreFn">查看更多</div>
</div>
</div>
<fixed-bottom ref="fixedBottom">
<button class="iconfont icon-home" v-if="query.no_login === '1'" @click="backHome"></button>
<button class="merit-button" @click="onLightAction">点击供灯</button>
</fixed-bottom>
@@ -62,7 +65,7 @@
<div class="light-group">
<van-swipe :loop="false">
<van-swipe-item v-for="(item, index) in lights" :key="index">
<van-grid :border="false" class="home-grid-nav" column-num="5">
<van-grid :border="false" class="home-grid-nav" column-num="4">
<van-grid-item icon="photo-o" :text="nav.name" v-for="(nav, _index) in item" :key="_index" @click="onSelectLight(nav)">
<div class="light" :class="[currentLight.id === nav.id && 'current-light']">
<img :src="nav.picture" class="light-icon" />
@@ -139,11 +142,13 @@ export default {
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
],
page: 1,
payList: [],
currentLight: null,
currentLightPrice: 0,
currentLightSize: 53,
buy_quantity: 1, // 购买数量
noMore: false,
}
},
computed: {
@@ -156,10 +161,11 @@ export default {
const data = this.data;
if(!data) return [];
const { goods } = data;
const len = Math.ceil(goods.length / 15);
const sliceNumber = 16;
const len = Math.ceil(goods.length / sliceNumber);
const lights = [];
for(let i = 0; i < len; i++){
lights.push(goods.slice(15 * i, i * 15 + 15))
lights.push(goods.slice(sliceNumber * i, i * sliceNumber + sliceNumber))
}
return lights;
},
@@ -172,6 +178,11 @@ export default {
this.getGoodsLightDetail('common');
},
methods: {
backHome(){
const { query } = this.$router.currentRoute;
const name = query.temple_id === '1' ? 'home': 'temple-home'
this.$router.replace({ name, query: { temple_id: query.temple_id }})
},
async onLightAction(){
await hasLogin();
this.showSpec = true
@@ -201,6 +212,11 @@ export default {
this.onToFillMeritName();
}
},
// 获取更多感恩功德1
loadMoreFn(){
this.page += 1;
this.getPayRecords({id: this.listType}, this.page)
},
onToFillMeritName(){
this.$router.push({
name: 'fill-name',
@@ -223,7 +239,7 @@ export default {
this.data = response;
this.currentLight = response.goods[0];
this.currentLightSize = this.currentLight.children[0].id
await this.getPayRecords({ id: 1});
await this.getPayRecords({ id: 1}, 1);
this.$nextTick(() => {
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight()
})
@@ -233,17 +249,22 @@ export default {
})
},
// 获取感恩功德
async getPayRecords(lType){
async getPayRecords(lType, page){
this.listType = lType.id;
const res = await getOrderCompare(this.query.temple_id, this.listType, '', 5 );
this.payList = res.list;
this.page = page;
const res = await getOrderCompare(this.query.temple_id, this.page, this.listType, '', 5 );
if(this.page === 1){
this.payList = [];
}
this.payList = this.payList.concat(res.list);
this.noMore = res.list.length < 3;
},
}
}
</script>
<style lang="scss">
$lightWidth: 1.5rem;
$lightWidth: 1.15rem;
.goods-detail{
.goods-content{
padding-left: .3rem;
@@ -261,9 +282,9 @@ $lightWidth: 1.5rem;
.light-wrapper{
border-top: 1px solid #ddd;
h1{
font-size: .4rem;
font-size: .35rem;
margin-top: .4rem;
margin-bottom: 3px;
margin-bottom: .5rem;
}
.light-group{
.light{
@@ -299,6 +320,9 @@ $lightWidth: 1.5rem;
white-space: nowrap;
overflow: hidden;
}
.van-grid-item__content{
padding-top: .1rem;
}
}
.van-swipe__indicators {
bottom: 0rem;
@@ -333,9 +357,13 @@ $lightWidth: 1.5rem;
font-size: .35rem;
}
.van-radio__icon .van-icon{
width: .5rem;
height: .5rem;
line-height: .5rem;
width: .45rem;
height: .45rem;
line-height: .45rem;
}
.van-radio__icon--checked .van-icon{
background: #CF9E3B;
border-color: #CF9E3B;
}
}
.light-count{
src/pages/home.vue
+8 -3
View File
@@ -49,7 +49,7 @@
<span class="title">进展状态</span>
<arrow-more @click="onMoreProcess"></arrow-more>
</div>
<div class="panel-body">
<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>
@@ -162,9 +162,8 @@ export default {
this.data = res;
this.$store.commit('setTempleMeritId', res.temple_merit_id);
this.data.icon_data = this.sliceNav(res.icon_data);
console.log(res.temple_data.unit_name)
setTimeout(() => {
document.title = res.temple_data.unit_name;
document.title = '自在福田';
}, 10)
},
onMoreProcess() {
@@ -202,6 +201,12 @@ export default {
.van-search{
padding: .4rem
}
.goods-panel-body{
.buddha-process{
padding-left: .4rem;
padding-right: .4rem;
}
}
.container {
padding: 0.4rem;
padding-top: 0;
src/pages/temple-home/index.vue
+13 -1
View File
@@ -73,7 +73,7 @@
<span class="title">进展状态</span>
<arrow-more @click="onMoreProcess"></arrow-more>
</div>
<div class="panel-body">
<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>
@@ -154,6 +154,18 @@ export default {
},
locationTo(nav) {
// nav.type: 0外部链接，1日行一善商品，2添砖加瓦类商品，3通用商品，4功德箱，5进展动态
if(nav.type === 6){
this.$router.push({
name: 'goods-light-detail',
query: {
goods_type: nav.type,
temple_id: nav.temple_id,
goods_id: nav.goods_id,
}
})
return
}
if(nav.type === 0){
window.location.href = nav.url;
return
wap/index.html
+1 -1
View File
File diff suppressed because one or more lines are too long