对接接口
This commit is contained in:
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div class="goods-detail" v-if="data">
|
||||
<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="support">
|
||||
<div class="support-head">
|
||||
<span class="label">供养者</span>
|
||||
<ul class="external">
|
||||
<li class="active">实时</li>
|
||||
<li>月榜</li>
|
||||
<li>总榜</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
<user-merit></user-merit>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-button-group">
|
||||
<button class="merit-button" @click="showSpec = true">{{data.pay_name}}</button>
|
||||
</div>
|
||||
|
||||
<van-popup v-model="showSpec" position="bottom" closeable :style="{ height: 'auto' }" :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']" @click="current = 0">选择类型</li>
|
||||
<li :class="[ current === 1 && 'current']" @click="current = 1">填写信息</li>
|
||||
<li :class="[ current === 2 && 'current']" >参与成功</li>
|
||||
</ul>
|
||||
</div>
|
||||
<transition>
|
||||
<template>
|
||||
<select-spec v-if="current === 0" v-model="spec_id" :data="data"></select-spec>
|
||||
<fill-information v-if="current === 1" :data="data"></fill-information>
|
||||
</template>
|
||||
</transition>
|
||||
<div class="next-group">
|
||||
<span class="total">合计：￥289</span>
|
||||
<button class="next" @click="onNextStep">下一步</button>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import 'swiper/css/swiper.css'
|
||||
import { swiper, swiperSlide } from 'vue-awesome-swiper'
|
||||
import { getGoodsDetail } 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 {
|
||||
query: this.$route.query,
|
||||
showSpec: true,
|
||||
checked: false,
|
||||
current: 0,
|
||||
data: null,
|
||||
value: '',
|
||||
spec_id: '',
|
||||
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
|
||||
step: 0,
|
||||
swiperOption: {
|
||||
autoplay: 8000,
|
||||
initialSlide: 1,
|
||||
loop: true,
|
||||
pagination: '.swiper-pagination',
|
||||
onSlideChangeEnd: swiper => {
|
||||
console.log('onSlideChangeEnd', swiper.realIndex)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted(){
|
||||
this.getGoodsDetail('common');
|
||||
},
|
||||
methods: {
|
||||
onNextStep(){
|
||||
this.current += 1;
|
||||
if(this.current > 3){
|
||||
this.current = 0
|
||||
}
|
||||
},
|
||||
async getGoodsDetail(type){
|
||||
const { goods_id, temple_id } = this.$route.query;
|
||||
const response = await getGoodsDetail(type, goods_id, temple_id);
|
||||
this.data = response;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.goods-detail{
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-container{
|
||||
background: #f5f5f5;
|
||||
.picture, img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.monk-profile{
|
||||
padding: .4rem;
|
||||
margin-bottom: .53rem;
|
||||
.position{
|
||||
font-size: .5rem;
|
||||
padding-top: .2rem;
|
||||
color: #19282E;
|
||||
}
|
||||
.introduction{
|
||||
font-size: .37rem;
|
||||
margin-top: .4rem;
|
||||
line-height: 1.3;
|
||||
text-align: justify;
|
||||
color: #666;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.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{
|
||||
display: inline-block;
|
||||
background: $primary-color;
|
||||
color: white;
|
||||
height: 1.2rem;
|
||||
font-size: .37rem;
|
||||
min-width: 60%;
|
||||
padding: 0 .53rem;
|
||||
border: .01rem solid $primary-color;
|
||||
border-radius: .13rem;
|
||||
}
|
||||
}
|
||||
.caret-spec{
|
||||
padding-bottom: 1.6rem;
|
||||
.head{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: .4rem;
|
||||
padding: .4rem;
|
||||
align-items: center;
|
||||
margin-top: .13rem;
|
||||
.iconfont{
|
||||
font-size: .7rem;
|
||||
}
|
||||
.step-inline{
|
||||
display: inline-block;
|
||||
flex: 1;
|
||||
font-size: .35rem;
|
||||
li{
|
||||
display: inline-block;
|
||||
& ~ li:before{
|
||||
content: '-';
|
||||
padding: 0 .1rem;
|
||||
}
|
||||
|
||||
}
|
||||
li.current{
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.auto-donate-time{
|
||||
padding: .4rem ;
|
||||
margin-top: .4rem;
|
||||
margin-bottom: 1rem;
|
||||
.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{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: .4rem ;
|
||||
position: absolute;
|
||||
background: white;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
align-items: center;
|
||||
border-top: 1px solid #ededed;
|
||||
.total{
|
||||
font-size: .4rem;
|
||||
}
|
||||
.next{
|
||||
font-size: .4rem;
|
||||
padding: .3rem 1rem;
|
||||
background: $primary-color;
|
||||
border: 1px solid $primary-color;
|
||||
color: white;
|
||||
border-radius: .1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user