512 lines
16 KiB
Vue
512 lines
16 KiB
Vue
<template>
|
||
<div class="goods-detail" v-if="data" :style="{ paddingBottom: paddingBottom + 'px' }">
|
||
<swiper class="swiper-container" :options="swiperOption">
|
||
<swiper-slide>
|
||
<div style="height: 100vw" class="picture">
|
||
<img :src="data.cover_url" 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>
|
||
<detail-content-expand>
|
||
<div v-html="data.content" class="goods-content"></div>
|
||
</detail-content-expand>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div class="support">
|
||
<div class="support-head">
|
||
<span class="label">感恩功德</span>
|
||
<ul class="external">
|
||
<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="pay in payList" :key="pay.id" :data="pay"></user-merit>
|
||
<div class="read-more" v-if="noMore && page > 1">没有更多了</div>
|
||
<div class="read-more" v-if="noMore && page === 1">暂无数据</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="onHasLoginToNext">{{ data.pay_name }}</button>
|
||
</fixed-bottom>
|
||
|
||
<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-spec">
|
||
<div class="head">
|
||
<span>参与流程： </span>
|
||
<ul class="step-inline">
|
||
<li :class="[current === 0 && 'current']">选择类型</li>
|
||
<li :class="[current === 1 && 'current']">填写信息</li>
|
||
<li :class="[current === 2 && 'current']">参与成功</li>
|
||
</ul>
|
||
</div>
|
||
<transition>
|
||
<template>
|
||
<select-spec v-if="current === 0" v-model="spec_id" :number.sync="quantity" :data="data"></select-spec>
|
||
<fill-information v-if="current === 1" :data="data" @change="onDreamInfoChange"></fill-information>
|
||
</template>
|
||
</transition>
|
||
<div class="next-group">
|
||
<span class="total"
|
||
>合计：<em>￥{{ priceTotal }}</em></span
|
||
>
|
||
<button class="next" @click="onNextStep">下一步</button>
|
||
</div>
|
||
</div>
|
||
</van-popup>
|
||
|
||
<!-- 随喜金额-->
|
||
<random-money v-if="showAnyAmount" :value.sync="showAnyAmount" @change="onReceiveAnyAmount"></random-money>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import "swiper/css/swiper.css";
|
||
import { swiper, swiperSlide } from "vue-awesome-swiper";
|
||
import { getGoodsDetail, getOrderCompare, hasLogin } from "@/api";
|
||
import SelectSpec from "./components/select-spec.vue";
|
||
import FillInformation from "./components/fill-information.vue";
|
||
|
||
export default {
|
||
components: {
|
||
swiper,
|
||
swiperSlide,
|
||
SelectSpec,
|
||
FillInformation,
|
||
},
|
||
data() {
|
||
return {
|
||
result: "a",
|
||
showAnyAmount: false,
|
||
paddingBottom: 0,
|
||
fixedBottomHeight: 0,
|
||
query: this.$route.query,
|
||
showSpec: false,
|
||
checked: false,
|
||
current: 0,
|
||
data: null,
|
||
value: "",
|
||
spec_id: "",
|
||
step: 0,
|
||
quantity: 1,
|
||
dreamInfo: null,
|
||
anyPrice: 0, // 随喜金额
|
||
swiperOption: {
|
||
autoplay: 8000,
|
||
initialSlide: 1,
|
||
loop: false,
|
||
pagination: ".swiper-pagination",
|
||
onSlideChangeEnd: () => {},
|
||
},
|
||
listType: 1,
|
||
listTypes: [
|
||
{ id: 1, name: "实时" },
|
||
{ id: 2, name: "月榜" },
|
||
{ id: 3, name: "总榜" },
|
||
],
|
||
lTypeId: 1,
|
||
payList: [],
|
||
page: 1,
|
||
noMore: false,
|
||
};
|
||
},
|
||
computed: {
|
||
priceUnit() {
|
||
if (this.spec_id === "is_customized") {
|
||
return this.anyPrice;
|
||
}
|
||
const spec = this.data.spec.find((item) => item.id === this.spec_id);
|
||
if (!spec) {
|
||
return 0;
|
||
}
|
||
return Number(spec.price);
|
||
},
|
||
priceTotal() {
|
||
if (this.is_auto) {
|
||
return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100;
|
||
}
|
||
return (parseInt(this.priceUnit * 100, 10) * this.quantity) / 100;
|
||
},
|
||
},
|
||
mounted() {
|
||
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;
|
||
},
|
||
// 接收随喜金额·
|
||
onReceiveAnyAmount(anyObj) {
|
||
this.anyPrice = anyObj.money;
|
||
this.onToFillMeritName();
|
||
},
|
||
// dreamInfo: 心愿信息
|
||
onDreamInfoChange(dreamInfo) {
|
||
this.dreamInfo = dreamInfo;
|
||
},
|
||
getSelectedSpec() {
|
||
const spec = this.data.spec.find((spec) => spec.id === this.spec_id);
|
||
return (
|
||
spec || {
|
||
id: "",
|
||
spec_name: this.data.rule_btn || "随喜",
|
||
}
|
||
);
|
||
},
|
||
onNextStep() {
|
||
if (!this.spec_id) {
|
||
this.$toast.fail("请选择类型");
|
||
return;
|
||
}
|
||
|
||
if (this.spec_id === "is_customized") {
|
||
this.showAnyAmount = true;
|
||
return;
|
||
}
|
||
|
||
this.current += 1;
|
||
|
||
if (this.current > 0) {
|
||
this.onToFillMeritName();
|
||
}
|
||
},
|
||
onToFillMeritName() {
|
||
const selectedSpec = this.getSelectedSpec();
|
||
this.$router.push({
|
||
name: "fill-name",
|
||
query: {
|
||
...this.query,
|
||
is_auto: this.is_auto ? 1 : 0,
|
||
spec_id: selectedSpec.id,
|
||
friendly_time: this.number,
|
||
quantity: this.quantity,
|
||
title: this.data.name,
|
||
subTitle: selectedSpec.spec_name,
|
||
is_die: selectedSpec.is_die,
|
||
amount: this.priceTotal,
|
||
is_customized: this.spec_id === "is_customized" ? 1 : 0,
|
||
from: "common_goods", // 标识为通用商品
|
||
},
|
||
});
|
||
},
|
||
async getGoodsDetail(type) {
|
||
const { goods_id, temple_id } = this.$route.query;
|
||
const response = await getGoodsDetail(type, goods_id, temple_id);
|
||
this.data = response;
|
||
await this.getPayRecords(this.lTypeId, 1);
|
||
this.$nextTick(() => {
|
||
this.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
|
||
});
|
||
this.wechatReady({
|
||
...this.data.shareConfig,
|
||
link: location.href,
|
||
});
|
||
},
|
||
// 获取更多感恩功德1
|
||
loadMoreFn() {
|
||
this.page += 1;
|
||
this.getPayRecords(this.lTypeId, this.page);
|
||
},
|
||
// 获取感恩功德
|
||
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, this.query.goods_type);
|
||
if (this.page === 1) {
|
||
this.payList = [];
|
||
}
|
||
this.payList = this.payList.concat(res.list);
|
||
this.noMore = res.list.length === 0;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
$lightWidth: 1.3rem;
|
||
.goods-detail {
|
||
.goods-content {
|
||
padding-left: 0.3rem;
|
||
padding-right: 0.3rem;
|
||
* {
|
||
max-width: 100%;
|
||
font-size: 0.35rem;
|
||
}
|
||
}
|
||
.light-container {
|
||
padding-left: 0.4rem;
|
||
padding-right: 0.4rem;
|
||
max-height: 10rem;
|
||
overflow: auto;
|
||
.light-wrapper {
|
||
border-top: 1px solid #ddd;
|
||
h1 {
|
||
font-size: 0.4rem;
|
||
margin-top: 0.4rem;
|
||
margin-bottom: 3px;
|
||
}
|
||
.light-group {
|
||
img.light-icon {
|
||
width: $lightWidth;
|
||
height: $lightWidth;
|
||
vertical-align: top;
|
||
}
|
||
span {
|
||
font-size: 0.4rem;
|
||
display: block;
|
||
text-align: center;
|
||
padding-top: 0.3rem;
|
||
}
|
||
}
|
||
.van-swipe__indicators {
|
||
bottom: 0rem;
|
||
.van-swipe__indicator {
|
||
width: 20px;
|
||
height: 2px;
|
||
border-radius: 10px;
|
||
background: #bbb;
|
||
}
|
||
.van-swipe__indicator--active {
|
||
background: #cf9e3b;
|
||
}
|
||
}
|
||
}
|
||
.light-size,
|
||
.light-count {
|
||
font-size: 0.4rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 0.6rem;
|
||
align-items: center;
|
||
margin-bottom: 0.65rem;
|
||
span {
|
||
color: black;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.light-size {
|
||
margin-top: 1.1rem;
|
||
}
|
||
.light-count {
|
||
align-items: center;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
}
|
||
.support {
|
||
margin-bottom: 0.5rem;
|
||
.support-head {
|
||
padding: 0 0.4rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 1.07rem;
|
||
line-height: 1.07rem;
|
||
.label {
|
||
font-size: 0.4rem;
|
||
font-weight: bold;
|
||
}
|
||
.external {
|
||
display: flex;
|
||
align-items: center;
|
||
li {
|
||
margin-left: 0.3rem;
|
||
font-size: 0.35rem;
|
||
color: #666;
|
||
}
|
||
li.active {
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.swiper-container {
|
||
background: #f5f5f5;
|
||
.picture,
|
||
img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.monk-profile {
|
||
padding: 0.4rem;
|
||
.position {
|
||
font-size: 0.5rem;
|
||
padding-top: 0.2rem;
|
||
color: #19282e;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.introduction {
|
||
font-size: 0.37rem;
|
||
margin-top: 0.4rem;
|
||
line-height: 1.3;
|
||
text-align: justify;
|
||
color: #666;
|
||
}
|
||
.bar {
|
||
margin-top: 0.27rem;
|
||
}
|
||
.status {
|
||
padding: 0.2rem 0.3rem;
|
||
background: orange;
|
||
color: white;
|
||
display: inline-block;
|
||
border-radius: 0.04rem;
|
||
margin-right: 0.3rem;
|
||
font-size: 0.3rem;
|
||
}
|
||
span {
|
||
color: #666;
|
||
font-size: 0.28rem;
|
||
}
|
||
}
|
||
.temple-info {
|
||
border-top: 1px solid #ddd;
|
||
padding: 0.3rem 0.4rem;
|
||
display: flex;
|
||
align-items: center;
|
||
.temple-img {
|
||
width: 1rem;
|
||
height: 1rem;
|
||
border-radius: 1rem;
|
||
margin-right: 0.3rem;
|
||
}
|
||
.temple-name {
|
||
flex: 1;
|
||
.name {
|
||
font-size: 0.35rem;
|
||
color: #333;
|
||
}
|
||
.visitor {
|
||
color: #666;
|
||
font-size: 0.3rem;
|
||
margin-top: 0.2rem;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
.detail-button-group {
|
||
text-align: center;
|
||
position: fixed;
|
||
bottom: 0;
|
||
z-index: 10;
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
border-top: 0.01rem solid #ddd;
|
||
padding: 0.3rem;
|
||
}
|
||
.merit-button {
|
||
display: block;
|
||
background: #cf9e3b;
|
||
color: white;
|
||
height: 1.2rem;
|
||
font-size: 0.37rem;
|
||
min-width: 60%;
|
||
padding: 0 0.53rem;
|
||
margin-top: 0.3rem;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
border: 0.01rem solid #cf9e3b;
|
||
border-radius: 0.13rem;
|
||
margin-bottom: 0.3rem;
|
||
}
|
||
.caret-spec {
|
||
.head {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.4rem;
|
||
padding: 0.4rem;
|
||
align-items: center;
|
||
margin-top: 0.13rem;
|
||
.iconfont {
|
||
font-size: 0.7rem;
|
||
}
|
||
.step-inline {
|
||
display: inline-block;
|
||
flex: 1;
|
||
font-size: 0.35rem;
|
||
li {
|
||
display: inline-block;
|
||
& ~ li:before {
|
||
content: "-";
|
||
padding: 0 0.1rem;
|
||
}
|
||
}
|
||
li.current {
|
||
color: #cf9e3b;
|
||
}
|
||
}
|
||
}
|
||
|
||
.auto-donate-time {
|
||
padding: 0.4rem;
|
||
margin-top: 0.4rem;
|
||
margin-bottom: 1rem;
|
||
.donate {
|
||
.label {
|
||
font-size: 0.4rem;
|
||
}
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.time-cycle {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
.unit {
|
||
font-size: 0.3rem;
|
||
color: #666;
|
||
padding-left: 0.2rem;
|
||
}
|
||
}
|
||
}
|
||
.next-group {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 0.2rem 0.4rem;
|
||
background: white;
|
||
align-items: center;
|
||
border-top: 1px solid #ededed;
|
||
.total {
|
||
font-size: 0.4rem;
|
||
em {
|
||
color: #cf9e3b;
|
||
font-size: 0.4rem;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.next {
|
||
font-size: 0.4rem;
|
||
padding: 0.3rem 1rem;
|
||
background: #cf9e3b;
|
||
border: 1px solid #cf9e3b;
|
||
color: white;
|
||
border-radius: 0.1rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|