xiaoyu
520 lines
26 KiB
PHP
520 lines
26 KiB
PHP
<link rel="stylesheet" href="https://qs.liche.cn/web/javascript/LArea/css/LArea.css">
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/LArea/js/LAreaData1.js"></script>
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/LArea/js/LAreaData2.js"></script>
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/LArea/js/LArea.js"></script>
|
|
<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 && 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 pb30 z-index-1 goods-con">
|
|
<div class="relative bg-fff mb30 ml30 mr30 inner40 pr220 ulib-r20 box-shadow-darkGray">
|
|
<div class="font-32 line-height-13 ">{{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-24">¥</span>
|
|
<span class="font-48 text-bold">{{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.s_time>0">
|
|
<a class="block bg-999 pt20 pb20 text-center color-fff ulib-r10" href="javascript:void(0)">
|
|
<div class="font-32">立即支付<span>{{info.price}}</span>元</div>
|
|
<div class="mt10 font-20 color-fff" v-html="showTime"></div>
|
|
</a>
|
|
</template>
|
|
<template v-else-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="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" oninput="if(value.length>11)value=value.slice(0,11)" v-model="telPhone" placeholder="请输入手机号" />
|
|
</div>
|
|
<div class="mt30 relative bg-f6 ulib-r10 pr200">
|
|
<div><input class="wp100 inner30 font-30 bg-f6 border-none ulib-r10" type="number" oninput="if(value.length>4)value=value.slice(0,4)" v-model="vCode" placeholder="请输入验证码" /></div>
|
|
<a :class="[codeState ?'color-333':'color-999','absolute right-0 mr20 box-middle font-30']" @click="getcode()">{{codeTx}}</a>
|
|
</div>
|
|
<div class="mt30 fn-flex" v-if="info.need_shop">
|
|
<select class="fn-flex-item height-70 wp25 pt10 pb10 mr20 select-more ulib-r10 font-30" v-model="province">
|
|
<option value="">选择省</option>
|
|
<option v-for="item in province_arr" :value="item.name">{{item.name}}</option>
|
|
</select>
|
|
<select class="fn-flex-item height-70 wp25 pt10 pb10 mr20 select-more ulib-r10 font-30" v-model="city">
|
|
<option value="">选择市</option>
|
|
<option v-for="item in city_arr" :value="item.name">{{item.name}}</option>
|
|
</select>
|
|
<select class="fn-flex-item height-70 wp25 pt10 pb10 select-more ulib-r10 font-30" v-model="biz">
|
|
<option value="">选择店</option>
|
|
<option v-for="item in biz_arr" :value="item.name">{{item.name}}</option>
|
|
</select>
|
|
</div>
|
|
<div class="mt30 pl5 font-26 color-666">
|
|
<label class="text-middle"><input class="text-middle" type="checkbox" v-model="isXYChecked" />
|
|
<span class="text-middle ml5">我已阅读并同意</span>
|
|
</label>
|
|
<a class="text-middle color-ff0000" :href="'/h5/market/sylive/item/agreement?a_id='+info['a_id']">《{{info.protocolTitle}}》</a>
|
|
</div>
|
|
</div>
|
|
<div class="mt30">
|
|
<a class="block pt25 pb25 bg-1a1a1a text-center font-32 color-fff ulib-r10" @click="toPay()">确定支付</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="msg fn-hide" :style="isShowSuccess?'display:block':'display:none'" v-if="isShowSuccess">
|
|
<div class="msgBg" @click="closeSuccess()"></div>
|
|
<div class="msgMain">
|
|
<div class="content">
|
|
<div class="word text-center">
|
|
<div class="font-36">支付成功</div>
|
|
<div class="mt15 font-22 color-999">请输入您的收货地址</div>
|
|
<div class="mt30 relative bg-f6 ulib-r10">
|
|
<input id="region" class="wp100 inner30 font-28 bg-f6 border-none ulib-r10" type="text" readonly="" v-model="region" placeholder="选择省/市/区" />
|
|
<input id="regionvalue" type="hidden" v-model="regionvalue"/>
|
|
</div>
|
|
<div class="mt30 relative bg-f6 ulib-r10">
|
|
<input class="wp100 inner30 font-28 bg-f6 border-none ulib-r10" type="text" v-model="address" placeholder="请输入详细地址" />
|
|
</div>
|
|
</div>
|
|
<div class="mt30">
|
|
<a class="block pt25 pb25 bg-1a1a1a text-center font-32 color-fff ulib-r10" @click="postAddress()">确认</a>
|
|
</div>
|
|
<div class="mt30 text-center">
|
|
<a class="font-24 text-underline" @click="goLive()">不了，看完直播再说></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,
|
|
vCode:'',
|
|
codeState:true,
|
|
codeTx:'立即获取',
|
|
isXYChecked: false,
|
|
region:'',
|
|
regionvalue:'',
|
|
address:'',
|
|
isShowSuccess: false,
|
|
province_arr:<?=json_encode($province_arr,JSON_UNESCAPED_UNICODE)?>,
|
|
city_arr:<?=json_encode($city_arr,JSON_UNESCAPED_UNICODE)?>,
|
|
biz_arr:<?=json_encode($biz_arr,JSON_UNESCAPED_UNICODE)?>,
|
|
province:'',
|
|
city:'',
|
|
biz:'',
|
|
oid:0,
|
|
},
|
|
created(){
|
|
|
|
},
|
|
computed: {
|
|
//用计算属性显示结果
|
|
showTime() {
|
|
//剩余秒数<=0
|
|
if(this.info.s_time>0){
|
|
let day = Math.floor(this.info.s_time / 86400);
|
|
let hour = Math.floor((this.info.s_time % 86400) / 3600);
|
|
let min = Math.floor(((this.info.s_time % 86400) % 3600) / 60);
|
|
let sec = Math.floor(((this.info.s_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>");
|
|
}
|
|
}else if(this.info.e_time <= 0) {
|
|
return "活动已结束";
|
|
} else {// 剩余秒数>0
|
|
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
|
|
},
|
|
countDownTime(time) {
|
|
let that = this;
|
|
if (time > 1) {
|
|
time--;
|
|
this.codeState = false;
|
|
this.codeTx = time + "s后重新获取";
|
|
Timer = setTimeout(function() {
|
|
that.countDownTime(time);
|
|
}, 1000)
|
|
} else {
|
|
clearTimeout(Timer);
|
|
that.codeState = true;
|
|
that.codeTx = "立即获取";
|
|
}
|
|
},
|
|
|
|
getcode() {
|
|
if(!this.codeState) return;
|
|
if (!/^1[3456789]\d{9}$/.test(this.telPhone)) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入正确手机号"
|
|
});
|
|
} else {
|
|
//按钮倒计时
|
|
var that = this
|
|
$.post('/h5/market/sylive/item/get_code',{'mobile':that.telPhone},function (response){
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: response.msg
|
|
});
|
|
if(response.code==200){
|
|
that.countDownTime(91)
|
|
}
|
|
},'json');
|
|
}
|
|
},
|
|
toPay() {
|
|
var that = this
|
|
if(this.info.need_shop){
|
|
if(!this.province){
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请选择省份"
|
|
});
|
|
return ''
|
|
}
|
|
if(!this.city){
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请选择城市"
|
|
});
|
|
return ''
|
|
}
|
|
if(!this.biz){
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请选择门店"
|
|
});
|
|
return ''
|
|
}
|
|
}
|
|
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(!this.vCode) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入验证码"
|
|
});
|
|
}else if(!this.isXYChecked) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请阅读并同意《关于用户门票须知》"
|
|
});
|
|
}else{
|
|
if(that.isSubmit){
|
|
return ''
|
|
}
|
|
|
|
that.isSubmiting = true
|
|
var params = {
|
|
'skey':'<?=$info['skey']?>',
|
|
'itemId':'<?=$info['itemId']?>',
|
|
'name':that.name,
|
|
'telPhone':that.telPhone,
|
|
'code' : that.vCode,
|
|
'province' : that.province,
|
|
'city' : that.city,
|
|
'biz' : that.biz
|
|
}
|
|
$.post('/h5/market/sylive/item/post_pay',params,function (res){
|
|
that.isSubmiting = false
|
|
if(res.code==200){
|
|
that.isShowReg = false
|
|
var jsondata = res.data.wxjson;
|
|
that.oid = res.data.oid
|
|
WeixinJSBridge.invoke('getBrandWCPayRequest', jsondata, function(res){
|
|
if(res.err_msg == "get_brand_wcpay_request:ok" ){//前端返回成功支付
|
|
that.showSuccess()
|
|
}else{
|
|
mDialog.msg({content: "支付失败"});
|
|
}
|
|
}
|
|
);
|
|
}else{
|
|
mDialog.msg({content: res.msg});
|
|
}
|
|
},'json')
|
|
}
|
|
},
|
|
|
|
//直播倒计时
|
|
intervalEvent() {
|
|
if (this.info.s_time > 0){
|
|
this.info.s_time--;
|
|
}else if (this.info.e_time > 0) {
|
|
this.info.e_time--;
|
|
} else {
|
|
clearInterval(this.bundleIntervalEvent);
|
|
}
|
|
},
|
|
|
|
//关闭支付成功提示
|
|
closeSuccess: function() {
|
|
this.isShowSuccess = false
|
|
},
|
|
showSuccess: function (){
|
|
if(this.info.ifAddress>0){ //需要填写收货地址
|
|
this.isShowSuccess = true;
|
|
//选择省市初始化
|
|
setTimeout(function () {
|
|
let area = new LArea();
|
|
area.init({
|
|
'trigger': '#region', //触发选择控件的文本框，同时选择完毕后name属性输出到该位置
|
|
'valueTo': '#regionvalue', //选择完毕后id属性输出到该位置
|
|
'keys': {
|
|
id: 'value',
|
|
name: 'text'
|
|
}, //绑定数据源相关字段 id对应valueTo的value属性输出 name对应trigger的value属性输出
|
|
'type': 2,
|
|
'data': [provs_data, citys_data, dists_data]
|
|
});
|
|
if(that.region !=''){
|
|
for(var i in provs_data){
|
|
if(provs_data[i].text==that.region.split(",")[0]){
|
|
var x=i;
|
|
var city=citys_data[provs_data[i].value];
|
|
for(var j in city){
|
|
if(city[j].text==that.region.split(",")[1]){
|
|
var y=j;
|
|
var district=dists_data[city[j].value];
|
|
for(var k in district){
|
|
if(district[k].text==that.region.split(",")[2]){
|
|
var z=k;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
area.value=[x,y,z];//控制初始位置，注意：该方法并不会影响到input的value
|
|
}else{
|
|
area.value=[12,1,1];//控制初始位置，注意：该方法并不会影响到input的value
|
|
}
|
|
area.success = function(){
|
|
that.regionvalue = $("#regionvalue").val();
|
|
}
|
|
}, 200)
|
|
}else{
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: '支付成功',
|
|
onClose:function(){
|
|
window.location = "/h5/market/sylive/ucenter?skey=<?=$info['skey']?>";
|
|
}
|
|
});
|
|
}
|
|
},
|
|
//提交地址
|
|
postAddress() {
|
|
if (this.isSubmiting) return;
|
|
if (!this.region) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请选择所在地区"
|
|
});
|
|
}else if (!this.address) {
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "请输入详细地址"
|
|
});
|
|
}else{
|
|
this.isSubmiting = true
|
|
var params = {
|
|
'skey':'<?=$skey?>',
|
|
'region':this.region,
|
|
'address':this.address,
|
|
'id':this.oid
|
|
}
|
|
var that = this;
|
|
$.post('/h5/market/sylive/ucenter/edit_address',params,function (res){
|
|
that.isSubmiting = false
|
|
if(res.code==200){
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: res.msg,
|
|
onClose:function(){
|
|
window.location = "/h5/market/sylive/ucenter?skey=<?=$info['skey']?>";
|
|
}
|
|
});
|
|
}else{
|
|
mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: res.msg
|
|
});
|
|
}
|
|
},'json');
|
|
}
|
|
},
|
|
//跳转直播间
|
|
goLive(){
|
|
window.location = this.info.live_url;
|
|
}
|
|
},
|
|
watch: {
|
|
'province': function (nv, ov) {
|
|
var vm = this;
|
|
vm.city_arr = vm.biz_arr = {}
|
|
vm.biz = vm.city = ''
|
|
if (nv != '') {
|
|
$.get('/h5/market/sylive/item/biz_info',{'type':'city','p_name':vm.province},function (res){
|
|
vm.city_arr = res.data.lists
|
|
},'json')
|
|
}
|
|
},
|
|
'city': function (nv, ov) {
|
|
var vm = this;
|
|
vm.biz_arr = {};
|
|
vm.biz = ''
|
|
if (nv != '') {
|
|
$.get('/h5/market/sylive/item/biz_info',{'type':'biz','p_name':vm.province,'c_name':vm.city},function (res){
|
|
vm.biz_arr = res.data.lists
|
|
},'json')
|
|
}
|
|
},
|
|
}
|
|
})
|
|
</script>
|
|
<?=$this->load->view('h5/market/sylive/share_script')?>
|
|
</body>
|