Files
liche/home/views/h5/market/sylive2/item/detail.php
T
xiaoyu 6a9316dd64 0507
2025-05-07 12:39:07 +08:00

548 lines
28 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">
<template v-if="info.price>0">
<span class="font-24">¥</span>
<span class="font-48 text-bold">{{info.price}}</span>
</template>
<template v-else>
<span class="font-48 text-bold">免费</span>
</template>
</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" v-if="info.price>0">立即支付<span>{{info.price}}</span></div>
<div class="font-32" v-else>立即领取</div>
<div class="mt10 font-20 color-fff" v-html="showTime"></div>
</a>
</template>
<template v-else-if="info.e_time>0">
<template v-if="info.item_status==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" v-if="info.price>0">立即支付<span>{{info.price}}</span></div>
<div class="font-32" v-else>立即领取</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>
<template v-else>
<div class="bg-999 pt30 pb30 text-center color-fff ulib-r10">商品已下架</div>
</template>
</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>
<?php if($info['a_id'] == 31){ ?>
<div class="mt30 relative bg-f6 ulib-r10">
<input class="wp100 inner30 font-30 bg-f6 border-none ulib-r10" type="text" v-model="remark" placeholder="请输入意向车型" />
</div>
<?php }?>
<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" v-if="info.protocolTitle">
<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/sylive2/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: '',
remark: '',
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);
if(this.info.click){
this.showReg()
}
},
beforeDestroy() {
clearInterval(this.bundleIntervalEvent);
},
methods: {
showReg: function() {
if(!this.info.all_info){
window.location = "/h5/market/sylive2/act/userinfo?skey=<?=$info['skey']?>&type=item";
}else{
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/sylive2/item/get_code',{'mobile':that.telPhone,'a_id':that.info.a_id,'item_id':that.info.itemId},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.protocolTitle){
this.isXYChecked = true;
}
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: "请阅读并同意《"+this.info.protocolTitle+"》"
});
}else{
if(that.isSubmit){
return ''
}
that.isSubmiting = true
var params = {
'skey':'<?=$info['skey']?>',
'itemId':'<?=$info['itemId']?>',
'name':that.name,
'telPhone':that.telPhone,
'remark':that.remark,
'code' : that.vCode,
'province' : that.province,
'city' : that.city,
'biz' : that.biz
}
$.post('/h5/market/sylive2/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/sylive2/ucenter/orders?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/sylive2/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/sylive2/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/sylive2/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/sylive2/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/sylive2/hidden_wx_share')?>
</body>