feat: 增加界面
This commit is contained in:
@@ -1,51 +1,60 @@
|
||||
<template>
|
||||
<div class="everyday-donation" v-if="data">
|
||||
<div class="topbar" ref="topbar">
|
||||
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||||
</div>
|
||||
<swiper class="swiper-container" :options="swiperOption">
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="monk-profile">
|
||||
<h1 class="position">{{data.name}}</h1>
|
||||
<div class="bar">
|
||||
<span class="status">进行中</span>
|
||||
<span>已有{{data.sales || 0}}人参与</span>
|
||||
<div class="content-view">
|
||||
<div class="topbar" ref="topbar">
|
||||
<van-nav-bar left-arrow v-if="$route.meta.showNavBar" :title="$route.meta.title" @click-left="$router.back()" :style="{backgroundColor: $route.meta.navBarBackgroundColor}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="title">进展动态</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<buddha-process></buddha-process>
|
||||
<div class="process-more">
|
||||
<span>查看更多进展状态</span>
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
<swiper class="swiper-container" :options="swiperOption">
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<div style="height: 100vw;" class="picture">
|
||||
<img src="https://img1.baidu.com/it/u=3715184423,1831753068&fm=26&fmt=auto" alt="">
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="monk-profile">
|
||||
<h1 class="position">{{data.name}}</h1>
|
||||
<div class="bar">
|
||||
<span class="status">进行中</span>
|
||||
<span>已有{{data.sales || 0}}人参与</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="support">
|
||||
<div class="support-head">
|
||||
<span class="label">感恩功德</span>
|
||||
<ul class="external">
|
||||
<li class="active">实时</li>
|
||||
<li>月榜</li>
|
||||
<li>总榜</li>
|
||||
</ul>
|
||||
<div class="divider"></div>
|
||||
<div class="panel">
|
||||
<div class="panel-head">
|
||||
<span class="title">详情</span>
|
||||
</div>
|
||||
<div v-html="data.content" class="goods-content"></div>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <user-merit v-for=""></user-merit> -->
|
||||
<div class="divider"></div>
|
||||
<div class="panel" v-if="goodsDynamicList.length > 0">
|
||||
<div class="panel-head">
|
||||
<span class="title">进展动态</span>
|
||||
</div>
|
||||
<div class="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>
|
||||
<i class="iconfont icon-arrow-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="support" v-if="payRecords.length">
|
||||
<div class="support-head">
|
||||
<span class="label">感恩功德</span>
|
||||
<ul class="external">
|
||||
<li class="active">实时</li>
|
||||
<li>月榜</li>
|
||||
<li>总榜</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<!-- <user-merit v-for=""></user-merit> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="merit-button-group border-top">
|
||||
@@ -54,7 +63,7 @@
|
||||
|
||||
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :close-on-click-overlay="false" :close-on-popstate="true">
|
||||
<!-- 显示日行一善的商品规格 -->
|
||||
<div class="caret" v-if="query.goods_type === '-1'">
|
||||
<div class="caret" v-if="query.goods_type == '1'">
|
||||
<div class="head">
|
||||
<span>选择行善金额</span>
|
||||
</div>
|
||||
@@ -89,7 +98,7 @@
|
||||
</div>
|
||||
|
||||
<!-- 显示添砖加瓦的商品规格 -->
|
||||
<div class="caret" v-if="query.goods_type === '-2'">
|
||||
<div class="caret" v-if="query.goods_type == '2'">
|
||||
<div class="head">
|
||||
<span>选择行善金额</span>
|
||||
</div>
|
||||
@@ -122,9 +131,13 @@
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="next-group">
|
||||
<span class="total">合计：￥{{priceTotal}}</span>
|
||||
<button class="next" @click="onToPay">下一步</button>
|
||||
<div class="next-group-wrapper">
|
||||
<safe-area>
|
||||
<div class='next-group'>
|
||||
<span class="total">合计：￥{{priceTotal}}</span>
|
||||
<button class="next" @click="onToPay">下一步</button>
|
||||
</div>
|
||||
</safe-area>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -136,13 +149,13 @@
|
||||
<script>
|
||||
import 'swiper/css/swiper.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import { getGoodsDetail } from '@/api'
|
||||
import { getDynamicData, getGoodsDetail } from '@/api';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
swiper,
|
||||
swiperSlide,
|
||||
},
|
||||
swiper,
|
||||
swiperSlide,
|
||||
},
|
||||
data(){
|
||||
const { query } = this.$route;
|
||||
let title = '详情';
|
||||
@@ -170,13 +183,15 @@ export default {
|
||||
number: 1,
|
||||
is_assign: false, // 是否为自动认捐砖块数
|
||||
buy_quantity: 1, // 自定义认捐砖块数
|
||||
goodsDynamicList: [], // 商品动态列表
|
||||
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
|
||||
swiperOption: {
|
||||
autoplay: 8000,
|
||||
initialSlide: 1,
|
||||
loop: true,
|
||||
pagination: '.swiper-pagination',
|
||||
}
|
||||
},
|
||||
payRecords: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -210,8 +225,23 @@ export default {
|
||||
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);
|
||||
this.data = response;
|
||||
},
|
||||
async getDynamicDataByGoodsId(goods_id){
|
||||
const res = await getDynamicData(1, goods_id);
|
||||
this.goodsDynamicList = res.results;
|
||||
},
|
||||
onMoreProcess() {
|
||||
const { goods_id, temple_id } = this.$route.query;
|
||||
this.$router.push({
|
||||
name: 'buddha-activity',
|
||||
query: {
|
||||
temple_id,
|
||||
goods_id
|
||||
}
|
||||
});
|
||||
},
|
||||
// 设置行善单价
|
||||
onPriceUnit({id, money}){
|
||||
this.priceUnit = Number(money);
|
||||
@@ -380,17 +410,20 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.next-group{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .4rem ;
|
||||
.next-group-wrapper{
|
||||
position: absolute;
|
||||
background: white;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
align-items: center;
|
||||
border-top: 1px solid #ededed;
|
||||
}
|
||||
.next-group{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .4rem;
|
||||
background: white;
|
||||
align-items: center;
|
||||
|
||||
.total{
|
||||
font-size: .4rem;
|
||||
}
|
||||
@@ -431,6 +464,25 @@ export default {
|
||||
}
|
||||
}
|
||||
.everyday-donation{
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
.goods-content{
|
||||
padding-left: .3rem;
|
||||
padding-right: .3rem;
|
||||
* {
|
||||
max-width: 100%;
|
||||
font-size: .35rem;
|
||||
}
|
||||
}
|
||||
.content-view{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 1.6rem);
|
||||
}
|
||||
.monk-profile{
|
||||
padding: .4rem;
|
||||
margin-bottom: .2rem;
|
||||
@@ -467,6 +519,7 @@ export default {
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: .4rem 0;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + .2rem);
|
||||
.merit-button{
|
||||
display: inline-block;
|
||||
background: $primary-color;
|
||||
|
||||
Reference in New Issue
Block a user