608 lines
20 KiB
Vue
608 lines
20 KiB
Vue
<template>
|
|
<div class="everyday-donation" v-if="data">
|
|
<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>
|
|
<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 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 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">
|
|
<button class="merit-button" @click="showSpec = true">去行善</button>
|
|
</div>
|
|
|
|
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" safe-area-inset-bottom :close-on-click-overlay="false" :close-on-popstate="true">
|
|
<!-- 显示日行一善的商品规格 -->
|
|
<div class="caret" v-if="query.goods_type == '1'">
|
|
<div class="head">
|
|
<span>选择行善金额</span>
|
|
</div>
|
|
<ul class="spec">
|
|
<li class="random">
|
|
<!-- <span class="border-circle" @click="showRandom = true">随喜</span>-->
|
|
<span class="border-circle" @click="onCustomeBrike">随喜</span>
|
|
</li>
|
|
<li v-for="(spec, index) in data.spec" :key="index">
|
|
<span class="border-circle" :class="[Number(spec.money) === priceUnit && 'active', isDisabled(spec)]" @click="onPriceUnit(spec)">{{spec.money}}元</span>
|
|
</li>
|
|
</ul>
|
|
<div class="auto-donate">
|
|
<p class="label">自动行善</p>
|
|
<div class="donate">
|
|
<span>每天早上六点寺院联盟帮你自动行善一次</span>
|
|
<van-checkbox v-model="is_auto" shape="square" checked-color="#cf9e3b"></van-checkbox>
|
|
</div>
|
|
</div>
|
|
<div class="auto-donate-time" v-if="is_auto">
|
|
<div class="donate">
|
|
<span class="label">行善时间</span>
|
|
<span class="time-cycle">
|
|
<van-stepper v-model="monthQuantity" step="1" />
|
|
<span class="unit">个月</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="next-group">
|
|
<span class="total">合计：￥{{priceTotal}}</span>
|
|
<button class="next" @click="onToPay">下一步</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 显示添砖加瓦的商品规格 -->
|
|
<div class="caret" v-if="query.goods_type == '2'">
|
|
<div class="head">
|
|
<span>选择行善金额</span>
|
|
</div>
|
|
<ul class="spec brick-spec">
|
|
<li class="random" v-if="onlySpecs && onlySpecs.length == 0">
|
|
<span class="border-circle" :class="[is_assign && 'active']" @click="onCustomeBrike">{{data.rule_btn}}</span>
|
|
<van-stepper v-model="buy_quantity" step="1" v-if="is_assign" />
|
|
</li>
|
|
<li v-for="(spec, index) in data.spec" :key="index">
|
|
<span
|
|
class="border-circle"
|
|
:class="[
|
|
Number(spec.money) === priceUnit && !is_assign && 'active',
|
|
isDisabled(spec),
|
|
]"
|
|
@click="onPriceUnit(spec)"
|
|
>{{spec.spec_name}} {{spec.donate_number * Number(data.price)}}元</span>
|
|
</li>
|
|
</ul>
|
|
<div class="auto-donate">
|
|
<p class="label">每日填砖</p>
|
|
<div class="donate">
|
|
<span>每天早上六点寺院联盟帮你自动填砖一次</span>
|
|
<van-checkbox v-model="is_auto" shape="square" checked-color="#cf9e3b"></van-checkbox>
|
|
</div>
|
|
</div>
|
|
<div class="auto-donate-time" v-if="is_auto">
|
|
<div class="donate">
|
|
<span class="label">行善时间</span>
|
|
<span class="time-cycle">
|
|
<van-stepper v-model="monthQuantity" step="1" />
|
|
<span class="unit">个月</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="next-group-wrapper">
|
|
<safe-area>
|
|
<div class='next-group'>
|
|
<span class="total">合计：<em>￥{{priceTotal}}</em></span>
|
|
<button class="next" :disabled="!priceUnitId" @click="onToPay">下一步</button>
|
|
</div>
|
|
</safe-area>
|
|
</div>
|
|
</div>
|
|
</van-popup>
|
|
|
|
<!-- 随喜金额 -->
|
|
<random-money :value.sync="showRandom" @change="onRandomNext"></random-money>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import 'swiper/css/swiper.css'
|
|
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
|
import { getDynamicData, getGoodsDetail } from '@/api';
|
|
|
|
export default {
|
|
components: {
|
|
swiper,
|
|
swiperSlide,
|
|
},
|
|
data(){
|
|
const { query } = this.$route;
|
|
let title = '详情';
|
|
if(query.goods_type === '1'){
|
|
title = '日行一善';
|
|
}
|
|
if(query.goods_type === '2'){
|
|
title = '添砖加瓦'
|
|
}
|
|
document.title = title;
|
|
for(let i in query){
|
|
query[i] = query[i].toString()
|
|
}
|
|
let onlySpecs = query.spec_ids ? query.spec_ids.split(',').map(v => Number(v)) : null;
|
|
|
|
return {
|
|
onlySpecs,
|
|
showRandom: false, // 随喜
|
|
documentTitle: title,
|
|
query,
|
|
data: null,
|
|
value: 1,
|
|
is_auto: false, // 是否自动行善
|
|
showSpec: false,
|
|
priceUnit: 0,
|
|
priceUnitId: '',
|
|
monthQuantity: 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: {
|
|
priceTotal(){
|
|
const { priceUnit, is_assign, is_auto, buy_quantity, monthQuantity } = this;
|
|
if(is_assign){
|
|
return (priceUnit * 100 * buy_quantity) / 100;
|
|
}
|
|
if(is_auto){
|
|
return (priceUnit * 100 * monthQuantity * 30) / 100
|
|
}
|
|
return (priceUnit * 100 ) / 100;
|
|
}
|
|
},
|
|
mounted(){
|
|
if(this.query.goods_type === '1'){
|
|
return this.getGoodsDetail('friendly');
|
|
}
|
|
if(this.query.goods_type === '2'){
|
|
return this.getGoodsDetail('tile');
|
|
}
|
|
|
|
},
|
|
methods: {
|
|
|
|
isDisabled(spec){
|
|
const { id } = spec;
|
|
if(!this.onlySpecs) return false;
|
|
return !this.onlySpecs.includes(id) ? 'spec-disabled': ''
|
|
},
|
|
getSelectedSpec() {
|
|
const { goods_type } = this.query;
|
|
if(goods_type === '2' || goods_type === '1'){
|
|
// 随喜
|
|
if(this.is_assign){
|
|
return {
|
|
specId: '',
|
|
specName: goods_type === '1' ? '随喜': this.data.rule_btn
|
|
}
|
|
}
|
|
const spec = this.data.spec.find(item => item.id === this.priceUnitId);
|
|
if(!spec){
|
|
return {
|
|
specId: '',
|
|
specName: ''
|
|
}
|
|
}
|
|
return {
|
|
specId: spec.id,
|
|
specName: spec.spec_name,
|
|
}
|
|
}
|
|
},
|
|
// 获取商品详情
|
|
/*
|
|
type = friendly: 获取日行一善商品
|
|
type = tile: 获取添砖加瓦商品
|
|
type = common: 获取普通商品
|
|
*/
|
|
async getGoodsDetail(type){
|
|
const { goods_id, temple_id } = 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);
|
|
this.data = response;
|
|
if(!this.onlySpecs){
|
|
const { donate_number, money, id } = this.data.spec[0];
|
|
const priceUnit = donate_number || money;
|
|
this.priceUnit = Number(priceUnit) * Number(this.data.price)
|
|
this.priceUnitId = id;
|
|
}
|
|
},
|
|
async getDynamicDataByGoodsId(goods_id){
|
|
const res = await getDynamicData(1, 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.is_assign = false;
|
|
this.priceUnit = Number(money);
|
|
this.priceUnitId = id;
|
|
this.buy_quantity = 1;
|
|
this.spec_id = '';
|
|
},
|
|
onRandomNext({ money}){
|
|
this.anyPrice = money;
|
|
this.priceUnit = money;
|
|
this.onToPay();
|
|
},
|
|
onToPay(){
|
|
// 不需要跳转到功德芳名
|
|
if(this.query.goods_type === '1'){
|
|
this.$router.push({
|
|
name: 'pay',
|
|
query: {
|
|
...this.$route.query,
|
|
is_auto: this.is_auto ? 1 : 0,
|
|
spec_id: this.priceUnitId,
|
|
friendly_time: this.monthQuantity,
|
|
title: this.data.name,
|
|
subTitle: '日行一善捐赠',
|
|
quantity: 1,
|
|
amount: this.priceTotal,
|
|
is_customized: this.is_assign ? 1 : 0,
|
|
price: this.priceUnit,
|
|
from: 'friendly_day', // 标识为日行一善
|
|
}
|
|
})
|
|
}
|
|
if(this.query.goods_type === '2'){
|
|
this.$router.push({
|
|
name: 'pay',
|
|
query: {
|
|
...this.$route.query,
|
|
is_auto: this.is_auto ? 1 : 0,
|
|
is_assign: this.is_assign ? 1 : 0,
|
|
spec_id: this.getSelectedSpec().specId,
|
|
friendly_time: this.monthQuantity,
|
|
quantity: this.buy_quantity,
|
|
title: this.data.name,
|
|
subTitle: this.getSelectedSpec().specName,
|
|
amount: this.priceTotal,
|
|
is_customized: this.is_assign ? 1 : 0,
|
|
price: this.priceUnit,
|
|
buy_quantity: this.buy_quantity,
|
|
from: 'brike', // 标识为填砖加瓦
|
|
}
|
|
})
|
|
}
|
|
},
|
|
amountAbs(number, price){
|
|
return (parseInt(number * 100, 10) * price) / 100
|
|
},
|
|
// 自定义砖数
|
|
onCustomeBrike(){
|
|
this.priceUnit = Number(this.data.price) || 0;
|
|
this.buy_quantity = 1;
|
|
this.is_assign = true;
|
|
this.showRandom = true;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.swiper-container{
|
|
background: #f5f5f5;
|
|
.picture, img{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.caret{
|
|
padding-bottom: 2.2rem;
|
|
.head{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: .4rem;
|
|
padding: .4rem;
|
|
align-items: center;
|
|
margin-top: .13rem;
|
|
.iconfont{
|
|
font-size: .7rem;
|
|
}
|
|
}
|
|
.spec{
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr;
|
|
grid-gap: .3rem;
|
|
padding: .4rem;
|
|
.random{
|
|
grid-column-start: 1;
|
|
grid-column-end: 5;
|
|
text-align: left;
|
|
span{
|
|
font-size: .35rem;
|
|
border-radius: .11rem;
|
|
width: auto;
|
|
display: inline-block;
|
|
padding: .3rem .7rem;
|
|
&:active{
|
|
background: #f5f5f5;
|
|
}
|
|
}
|
|
span.spec-disabled{
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
li{
|
|
text-align: center;
|
|
span{
|
|
font-size: .35rem;
|
|
width: 100%;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding: .3rem 0;
|
|
line-height: 1.2;
|
|
user-select: none;
|
|
color: #666;
|
|
&:active{
|
|
background: rgba($primary-color, 0.1);
|
|
}
|
|
}
|
|
span.spec-disabled{
|
|
pointer-events: none;
|
|
background: #f9f9f9;
|
|
color: #aaa;
|
|
}
|
|
}
|
|
}
|
|
.brick-spec{
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-rows: 1fr 1fr 1fr;
|
|
grid-gap: .3rem;
|
|
.random{
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
text-align: left;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
span.active{
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
.auto-donate{
|
|
padding: 0 .4rem;
|
|
margin-top: .6rem;
|
|
.label{
|
|
font-size: .4rem;
|
|
}
|
|
.donate{
|
|
display: flex;
|
|
margin-top: .3rem;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
span{
|
|
font-size: .35rem;
|
|
}
|
|
}
|
|
}
|
|
.auto-donate-time{
|
|
padding: .4rem ;
|
|
margin-top: .4rem;
|
|
.donate{
|
|
.label{
|
|
font-size: .4rem;
|
|
}
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.time-cycle{
|
|
display: flex;
|
|
align-items: flex-end;
|
|
.unit{
|
|
font-size: .3rem;
|
|
color: #666;
|
|
padding-left: .2rem;
|
|
}
|
|
}
|
|
}
|
|
.next-group-wrapper{
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
border-top: 1px solid #ededed;
|
|
}
|
|
.next-group{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: .4rem;
|
|
background: white;
|
|
align-items: center;
|
|
|
|
.total{
|
|
font-size: .4rem;
|
|
em{
|
|
color: $primary-color;
|
|
font-size: .4rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.next{
|
|
font-size: .4rem;
|
|
padding: .3rem 1rem;
|
|
background: $primary-color;
|
|
border: 1px solid $primary-color;
|
|
color: white;
|
|
border-radius: .1rem;
|
|
}
|
|
}
|
|
}
|
|
.support{
|
|
.support-head{
|
|
padding: 0 .4rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 1.07rem;
|
|
line-height: 1.07rem;
|
|
.label{
|
|
font-size: .4rem;
|
|
font-weight: bold;
|
|
}
|
|
.external{
|
|
display: flex;
|
|
align-items: center;
|
|
li{
|
|
margin-left: .3rem;
|
|
font-size: .35rem;
|
|
color: #666;
|
|
}
|
|
li.active{
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
.position{
|
|
font-size: .5rem;
|
|
padding-top: .2rem;
|
|
text-align: justify;
|
|
line-height: 1.3;
|
|
color: #19282E;
|
|
}
|
|
.bar{
|
|
margin-top: .27rem;
|
|
}
|
|
.status{
|
|
padding: .2rem .3rem;
|
|
background: orange;
|
|
color: white;
|
|
display: inline-block;
|
|
border-radius: .04rem;
|
|
margin-right: .3rem;
|
|
font-size: .3rem;
|
|
}
|
|
span{
|
|
color: #666;
|
|
font-size: .28rem;
|
|
}
|
|
}
|
|
.merit-button-group{
|
|
text-align: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
z-index: 10;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
padding: .4rem 0;
|
|
padding-bottom: calc(env(safe-area-inset-bottom) + .2rem);
|
|
.merit-button{
|
|
display: inline-block;
|
|
background: $primary-color;
|
|
color: white;
|
|
height: 1.2rem;
|
|
font-size: .37rem;
|
|
width: 60%;
|
|
padding: 0 .53rem;
|
|
border: .01rem solid $primary-color;
|
|
border-radius: 1.33rem
|
|
}
|
|
}
|
|
}
|
|
</style>
|