This commit is contained in:
2025-05-21 15:48:27 +08:00
parent 553cc38b67
commit b3862ac356
33 changed files with 35390 additions and 16882 deletions
+202 -202
View File
@@ -1,17 +1,17 @@
<template>
<div class="goods-detail" v-if="data" :style="{paddingBottom: paddingBottom + 'px'}">
<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 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>
<h1 class="position">{{ data.name }}</h1>
<div class="bar">
<span class="status">进行中</span>
<span>已有{{data.sales || 0}}人参与</span>
<span>已有{{ data.sales || 0 }}人参与</span>
</div>
</div>
@@ -29,7 +29,7 @@
<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>
<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>
@@ -42,54 +42,56 @@
<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>
<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="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>
<li :class="[current === 0 && 'current']">选择类型</li>
<li :class="[current === 1 && 'current']">填写信息</li>
<li :class="[current === 2 && 'current']">参与成功</li>
</ul>
</div>
<transition>
<template >
<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>
<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 "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';
import SelectSpec from "./components/select-spec.vue";
import FillInformation from "./components/fill-information.vue";
export default {
components: {
swiper,
swiper,
swiperSlide,
SelectSpec,
FillInformation
FillInformation,
},
data(){
data() {
return {
result: 'a',
result: "a",
showAnyAmount: false,
paddingBottom: 0,
fixedBottomHeight: 0,
@@ -98,8 +100,8 @@ export default {
checked: false,
current: 0,
data: null,
value: '',
spec_id: '',
value: "",
spec_id: "",
step: 0,
quantity: 1,
dreamInfo: null,
@@ -108,92 +110,91 @@ export default {
autoplay: 8000,
initialSlide: 1,
loop: false,
pagination: '.swiper-pagination',
onSlideChangeEnd: swiper => {
console.log('onSlideChangeEnd', swiper.realIndex)
}
pagination: ".swiper-pagination",
onSlideChangeEnd: () => {},
},
listType: 1,
listTypes: [
{ id: 1, name: '实时', },
{ id: 2, name: '月榜', },
{ id: 3, name: '总榜', },
{ id: 1, name: "实时" },
{ id: 2, name: "月榜" },
{ id: 3, name: "总榜" },
],
lTypeId: 1,
payList: [],
page: 1,
noMore: false,
}
};
},
computed: {
priceUnit(){
if(this.spec_id === 'is_customized'){
priceUnit() {
if (this.spec_id === "is_customized") {
return this.anyPrice;
}
const spec = this.data.spec.find(item => item.id === this.spec_id);
if(!spec){
const spec = this.data.spec.find((item) => item.id === this.spec_id);
if (!spec) {
return 0;
}
return Number(spec.price)
return Number(spec.price);
},
priceTotal(){
if(this.is_auto){
return (parseInt(this.priceUnit * 100, 10) * this.quantity * 30) / 100
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');
mounted() {
this.getGoodsDetail("common");
},
methods: {
backHome(){
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 }})
const name = query.temple_id === "1" ? "home" : "temple-home";
this.$router.replace({ name, query: { temple_id: query.temple_id } });
},
async onHasLoginToNext(){
async onHasLoginToNext() {
await hasLogin();
this.showSpec = true
this.showSpec = true;
},
// 接收随喜金额
onReceiveAnyAmount(anyObj){
// 接收随喜金额·
onReceiveAnyAmount(anyObj) {
this.anyPrice = anyObj.money;
this.onToFillMeritName();
},
// dreamInfo: 心愿信息
onDreamInfoChange(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 || '随喜'
};
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('请选择类型')
onNextStep() {
if (!this.spec_id) {
this.$toast.fail("请选择类型");
return;
}
if( this.spec_id === 'is_customized'){
if (this.spec_id === "is_customized") {
this.showAnyAmount = true;
return ;
return;
}
this.current += 1;
if(this.current > 0){
if (this.current > 0) {
this.onToFillMeritName();
}
},
onToFillMeritName(){
onToFillMeritName() {
const selectedSpec = this.getSelectedSpec();
this.$router.push({
name: 'fill-name',
name: "fill-name",
query: {
...this.query,
is_auto: this.is_auto ? 1 : 0,
@@ -204,78 +205,78 @@ export default {
subTitle: selectedSpec.spec_name,
is_die: selectedSpec.is_die,
amount: this.priceTotal,
is_customized: this.spec_id === 'is_customized' ? 1 : 0,
from: 'common_goods', // 标识为通用商品
}
})
is_customized: this.spec_id === "is_customized" ? 1 : 0,
from: "common_goods", // 标识为通用商品
},
});
},
async getGoodsDetail(type){
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.paddingBottom = this.$refs.fixedBottom.getOffsetHeight() - 50;
});
this.wechatReady({
...this.data.shareConfig,
link: location.href
})
link: location.href,
});
},
// 获取更多感恩功德1
loadMoreFn(){
loadMoreFn() {
this.page += 1;
this.getPayRecords(this.lTypeId, this.page)
this.getPayRecords(this.lTypeId, this.page);
},
// 获取感恩功德
async getPayRecords(lTypeId, 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){
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: .3rem;
padding-right: .3rem;
.goods-detail {
.goods-content {
padding-left: 0.3rem;
padding-right: 0.3rem;
* {
max-width: 100%;
font-size: .35rem;
font-size: 0.35rem;
}
}
.light-container{
padding-left: .4rem;
padding-right: .4rem;
.light-container {
padding-left: 0.4rem;
padding-right: 0.4rem;
max-height: 10rem;
overflow: auto;
.light-wrapper{
.light-wrapper {
border-top: 1px solid #ddd;
h1{
font-size: .4rem;
margin-top: .4rem;
h1 {
font-size: 0.4rem;
margin-top: 0.4rem;
margin-bottom: 3px;
}
.light-group{
img.light-icon{
.light-group {
img.light-icon {
width: $lightWidth;
height: $lightWidth;
vertical-align: top;
}
span{
font-size: .4rem;
span {
font-size: 0.4rem;
display: block;
text-align: center;
padding-top: .3rem;
padding-top: 0.3rem;
}
}
.van-swipe__indicators {
@@ -292,218 +293,217 @@ $lightWidth: 1.3rem;
}
}
.light-size,
.light-count{
font-size: .4rem;
.light-count {
font-size: 0.4rem;
display: flex;
justify-content: space-between;
margin-top: .6rem;
margin-top: 0.6rem;
align-items: center;
margin-bottom: .65rem;
span{
margin-bottom: 0.65rem;
span {
color: black;
opacity: 1;
}
}
.light-size{
.light-size {
margin-top: 1.1rem;
}
.light-count{
.light-count {
align-items: center;
margin-bottom: .2rem;
margin-bottom: 0.2rem;
}
}
.support{
margin-bottom: .5rem;
.support-head{
padding: 0 .4rem;
.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: .4rem;
.label {
font-size: 0.4rem;
font-weight: bold;
}
.external{
.external {
display: flex;
align-items: center;
li{
margin-left: .3rem;
font-size: .35rem;
li {
margin-left: 0.3rem;
font-size: 0.35rem;
color: #666;
}
li.active{
li.active {
color: #333;
font-weight: bold;
}
}
}
}
.swiper-container{
.swiper-container {
background: #f5f5f5;
.picture, img{
.picture,
img {
width: 100%;
height: 100%;
}
}
.monk-profile{
padding: .4rem;
.position{
font-size: .5rem;
padding-top: .2rem;
color: #19282E;
.monk-profile {
padding: 0.4rem;
.position {
font-size: 0.5rem;
padding-top: 0.2rem;
color: #19282e;
line-height: 1.3;
}
.introduction{
font-size: .37rem;
margin-top: .4rem;
.introduction {
font-size: 0.37rem;
margin-top: 0.4rem;
line-height: 1.3;
text-align: justify;
color: #666;
}
.bar{
margin-top: .27rem;
.bar {
margin-top: 0.27rem;
}
.status{
padding: .2rem .3rem;
.status {
padding: 0.2rem 0.3rem;
background: orange;
color: white;
display: inline-block;
border-radius: .04rem;
margin-right: .3rem;
font-size: .3rem;
border-radius: 0.04rem;
margin-right: 0.3rem;
font-size: 0.3rem;
}
span{
span {
color: #666;
font-size: .28rem;
font-size: 0.28rem;
}
}
.temple-info{
.temple-info {
border-top: 1px solid #ddd;
padding: .3rem .4rem;
padding: 0.3rem 0.4rem;
display: flex;
align-items: center;
.temple-img{
.temple-img {
width: 1rem;
height: 1rem;
border-radius: 1rem;
margin-right: .3rem;
margin-right: 0.3rem;
}
.temple-name{
.temple-name {
flex: 1;
.name{
font-size: .35rem;
.name {
font-size: 0.35rem;
color: #333;
}
.visitor{
.visitor {
color: #666;
font-size: .3rem;
margin-top: .2rem;
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: .01rem solid #ddd;
padding: .3rem;
}
.merit-button{
.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: $primary-color;
color: white;
height: 1.2rem;
font-size: .37rem;
font-size: 0.37rem;
min-width: 60%;
padding: 0 .53rem;
margin-top: .3rem;
padding: 0 0.53rem;
margin-top: 0.3rem;
margin-left: auto;
margin-right: auto;
border: .01rem solid $primary-color;
border-radius: .13rem;
margin-bottom: .3rem;
border: 0.01rem solid $primary-color;
border-radius: 0.13rem;
margin-bottom: 0.3rem;
}
.caret-spec{
.head{
.caret-spec {
.head {
display: flex;
justify-content: space-between;
font-size: .4rem;
padding: .4rem;
font-size: 0.4rem;
padding: 0.4rem;
align-items: center;
margin-top: .13rem;
.iconfont{
font-size: .7rem;
margin-top: 0.13rem;
.iconfont {
font-size: 0.7rem;
}
.step-inline{
.step-inline {
display: inline-block;
flex: 1;
font-size: .35rem;
li{
font-size: 0.35rem;
li {
display: inline-block;
& ~ li:before{
content: '-';
padding: 0 .1rem;
& ~ li:before {
content: "-";
padding: 0 0.1rem;
}
}
li.current{
li.current {
color: $primary-color;
}
}
}
.auto-donate-time{
padding: .4rem ;
margin-top: .4rem;
.auto-donate-time {
padding: 0.4rem;
margin-top: 0.4rem;
margin-bottom: 1rem;
.donate{
.label{
font-size: .4rem;
.donate {
.label {
font-size: 0.4rem;
}
display: flex;
align-items: center;
justify-content: space-between;
}
.time-cycle{
.time-cycle {
display: flex;
align-items: flex-end;
.unit{
font-size: .3rem;
.unit {
font-size: 0.3rem;
color: #666;
padding-left: .2rem;
padding-left: 0.2rem;
}
}
}
.next-group{
.next-group {
display: flex;
justify-content: space-between;
padding: .2rem .4rem ;
padding: 0.2rem 0.4rem;
background: white;
align-items: center;
border-top: 1px solid #ededed;
.total{
font-size: .4rem;
em{
.total {
font-size: 0.4rem;
em {
color: $primary-color;
font-size: .4rem;
font-size: 0.4rem;
font-weight: bold;
}
}
.next{
font-size: .4rem;
padding: .3rem 1rem;
.next {
font-size: 0.4rem;
padding: 0.3rem 1rem;
background: $primary-color;
border: 1px solid $primary-color;
color: white;
border-radius: .1rem;
border-radius: 0.1rem;
}
}
}