xiaoyu
223 lines
11 KiB
PHP
223 lines
11 KiB
PHP
<body class="bg-f6">
|
|
<div id="app" ref="app">
|
|
<div class="container relative pb130">
|
|
<!--轮播-->
|
|
<div class="goods-banner relative imgsize-750X680 z-index-0" v-if='info.banner.length>1'>
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="item in info.banner">
|
|
<img class="imgsize-750X680" :src="item" alt="#" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination ulib-rl750 font-22 color-fff"></div>
|
|
</div>
|
|
<div v-else><img class="imgsize-750X680" :src="info.banner[0]" alt="#" /></div>
|
|
<!--end 轮播-->
|
|
<div class="relative pl30 pr30 pb30 z-index-1 goods-con">
|
|
<div class="relative bg-fff mb30 ml30 mr30 inner40 pr220 ulib-r20 box-shadow-darkGray">
|
|
<div class="font-36">{{info.title}}</div>
|
|
<div class="mt10 font-22 color-999">{{info.validity}}</div>
|
|
<div class="absolute right-0 box-middle mr30 color-c4302c">
|
|
<span class="font-28">¥</span>
|
|
<span class="font-64">{{info.price}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="relative bg-fff mb30 ml30 mr30 inner40 ulib-r20 box-shadow-darkGray">
|
|
<div class="pb20 text-center"><div class="inline-block relative pl10 pr10 introTitle font-36"><span class="relative z-index-1">{{info.introTitle}}</span></div></div>
|
|
<div class="line-height-17 font-28 color-666 text-break space-pre-line rich-text-img" v-html="info.content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed left-0 bottom-0 right-0 inner30 bg-fff z-index-2" >
|
|
<template v-if="info.e_time>0">
|
|
<a class="block bg-1a1a1a pt20 pb20 text-center color-fff ulib-r10" v-if="info.stock>0" @click="showReg" href="javascript:void(0)">
|
|
<div class="font-32">立即支付<span>{{info.price}}</span>元</div>
|
|
<div class="mt10 font-20 color-888" v-html="showTime"></div>
|
|
</a>
|
|
<div class="bg-999 pt30 pb30 text-center color-fff ulib-r10" v-else>已售罄</div>
|
|
</template>
|
|
<div class="bg-999 pt30 pb30 text-center color-fff ulib-r10" v-else>活动已结束</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="msg fn-hide" :style="isShowReg?'display:block':'display:none'" v-if="isShowReg">
|
|
<div class="msgBg" @click="closeReg"></div>
|
|
<div class="msgMain">
|
|
<div class="content">
|
|
<div class="word">
|
|
|
|
<div class="mt30 relative bg-f6 ulib-r10">
|
|
<input class="wp100 inner30 font-30 bg-f6 border-none ulib-r10" type="text" v-model="name" placeholder="请输入您的姓名" />
|
|
</div>
|
|
|
|
<div class="mt30 relative bg-f6 ulib-r10">
|
|
<input class="wp100 inner30 font-30 bg-f6 border-none ulib-r10" type="tel" v-model="telPhone" placeholder="请输入手机号" />
|
|
</div>
|
|
</div>
|
|
<div class="mt20 opt pl40 pr40">
|
|
<a class="block pt25 pb25 bg-1a1a1a text-center font-32 color-fff ulib-r750" @click="toPay()">确定支付</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let hostUrl = ''
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
// info:{
|
|
// title:"纳米Box 轻Young空间",
|
|
// e_time: 5,
|
|
// price:9.9,
|
|
// validity:'有效期 2022-08-01 -2022 -08-31',
|
|
// introTitle:'权益说明',
|
|
// content:'纳米BOX充分考虑到了用户的用车续航焦虑问题，新车采用了高密度电池组，CLTC续航331km。此外，纳米BOX全系支持快充、慢充功能，快充30分钟可以完成30～80%的补电，慢充4小时即可满电，轻松覆盖日常用车需求。纳米BOX充分考虑到了用户的用车续航焦虑问题，新车采用了高密度电池组，CLTC续航331km。此外，纳米BOX全系支持快充、慢充功能，快充30分钟可以完成30～80%的补电，慢充4小时即可满电，轻松覆盖日常用车需求。',
|
|
// "banner": [
|
|
// "https://img.zcool.cn/community/0144975f5d8a2711013e3187fe2bb7.jpg@1280w_1l_2o_100sh.jpg",
|
|
// "https://qs.liche.cn/web/images/project/H5-ShiYu/upload/v-5.jpg",
|
|
// ],
|
|
// },
|
|
info : <?=json_encode($info)?>,
|
|
bundleIntervalEvent: '',//倒计时
|
|
isShowReg: false,
|
|
name: '',
|
|
telPhone: '',
|
|
isSubmiting: false,
|
|
},
|
|
created(){
|
|
|
|
},
|
|
computed: {
|
|
//用计算属性显示结果
|
|
showTime() {
|
|
//剩余秒数<=0
|
|
if (this.info.e_time <= 0) {
|
|
return "活动已结束";
|
|
}
|
|
// 剩余秒数>0
|
|
else {
|
|
let day = Math.floor(this.info.e_time / 86400);
|
|
let hour = Math.floor((this.info.e_time % 86400) / 3600);
|
|
let min = Math.floor(((this.info.e_time % 86400) % 3600) / 60);
|
|
let sec = Math.floor(((this.info.e_time % 86400) % 3600) % 60);
|
|
if(day>0){
|
|
return ("<span class='text-middle'>距抢购结束还有</span><em class='text-middle pl5 pr5'>"+day+ "</em><em class='text-middle'>天</em><em class='text-middle pl5 pr5'>"+(hour < 10 ? "0" : "") + hour + "</em><em class='text-middle'>时</em><em class='text-middle pl5 pr5'>" + (min < 10 ? "0" : "") + min + "</em><em class='text-middle'>分</em><em class='text-middle pl5 pr5'>" + (sec <
|
|
10 ? "0" : "") + sec+"</em><em class='text-middle'>秒</em>");
|
|
}else if(hour>0){
|
|
return ("<span class='text-middle'>距抢购结束还有</span><em class='text-middle color-ff7200 pl5 pr5'>"+(hour < 10 ? "0" : "") + hour + "</em><em class='text-middle'>时</em><em class='text-middle color-ff7200 pl5 pr5'>" + (min < 10 ? "0" : "") + min + "</em><em class='text-middle'>分</em><em class='text-middle color-ff7200 pl5 pr5'>" + (sec <
|
|
10 ? "0" : "") + sec+"</em><em class='text-middle'>秒</em>");
|
|
}else if(min>0){
|
|
return ("<span class='text-middle'>距抢购结束还有</span><em class='text-middle color-ff7200 pl5 pr5'>" + (min < 10 ? "0" : "") + min + "</em><em class='text-middle'>分</em><em class='text-middle color-ff7200 pl5 pr5'>" + (sec <
|
|
10 ? "0" : "") + sec+"</em><em class='text-middle'>秒</em>");
|
|
}else if(sec>0){
|
|
return ("<span class='text-middle'>距抢购结束还有</span><em class='text-middle color-ff7200 pl5 pr5'>" + (sec <
|
|
10 ? "0" : "") + sec+"</em><em class='text-middle'>秒</em>");
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
let that = this
|
|
let swiper = new Swiper('.goods-banner .swiper-container', {
|
|
//loop: true,
|
|
//autoHeight: true,
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
type: 'fraction',
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
on: {
|
|
slideChangeTransitionEnd: function(){
|
|
that.activeIndex = this.activeIndex
|
|
},
|
|
},
|
|
});
|
|
|
|
//倒计时
|
|
this.bundleIntervalEvent = setInterval(this.intervalEvent, 1000);
|
|
|
|
},
|
|
beforeDestroy() {
|
|
clearInterval(this.bundleIntervalEvent);
|
|
},
|
|
methods: {
|
|
|
|
showReg: function() {
|
|
this.isShowReg = true
|
|
},
|
|
closeReg: function() {
|
|
this.isShowReg = false
|
|
},
|
|
|
|
toPay() {
|
|
var that = this
|
|
if (!this.name) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入您的姓名"
|
|
});
|
|
}else if (!/^1[3456789]\d{9}$/.test(this.telPhone)) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入正确手机号"
|
|
});
|
|
}else{
|
|
if(that.isSubmit){
|
|
return ''
|
|
}
|
|
that.isSubmiting = true
|
|
$.post('/h5/market/sylive/act/post_pay',{'skey':'<?=$info['skey']?>','name':that.name,'telPhone':that.telPhone},function (res){
|
|
that.isSubmiting = false
|
|
this.isShowReg = false
|
|
if(res.code==200){
|
|
var jsondata = res.data;
|
|
WeixinJSBridge.invoke(
|
|
'getBrandWCPayRequest',
|
|
jsondata,
|
|
function(res){
|
|
if(res.err_msg == "get_brand_wcpay_request:ok" ){//前端返回成功支付
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "恭喜您购买成功",
|
|
onClose:function(){
|
|
window.location = "/h5/market/sylive/act/ucenter?skey=<?=$info['skey']?>";
|
|
}
|
|
});
|
|
}else{
|
|
mDialog.msg({content: "支付失败"});
|
|
}
|
|
}
|
|
);
|
|
}else{
|
|
mDialog.msg({content: res.msg});
|
|
}
|
|
},'json')
|
|
}
|
|
},
|
|
|
|
//直播倒计时
|
|
intervalEvent() {
|
|
if (this.info.e_time > 0) {
|
|
this.info.e_time--;
|
|
} else {
|
|
clearInterval(this.bundleIntervalEvent);
|
|
}
|
|
},
|
|
|
|
},
|
|
})
|
|
</script>
|
|
<?=$this->load->view('h5/market/sylive/share_script')?>
|
|
</body>
|