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

556 lines
26 KiB
PHP

<body class="bg-fff">
<div class="height-500 fixed left-0 right-0 top-0 z-index-0 bg-1a1a1a"></div>
<div class="bg-fff" id="app" ref="app">
<div class="container relative bg-no-repeat bg-size-fullwidth bg-pos-top">
<img class="block wp100" :src="info.bg" alt="#"/>
<div class="fixed top-0 right-0 bg-fff mt40 mr25 pl20 pr20 ulib-r750 fn-flex overflowhidden font-20">
<a class="fn-flex-item pt10 pb10 pl20 pr20" v-if="info.statisticsurl" :href="info.statisticsurl">
<img class="imgsize-40X40" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-shuju.png"
alt="#">
<div class="text-middle">数据</div>
</a>
<a class="fn-flex-item pt10 pb10 pl20 pr20" v-if="info.rankingurl" :href="info.rankingurl">
<img class="imgsize-40X40" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-paihang.png"
alt="#">
<div class="text-middle">排行</div>
</a>
<a class="fn-flex-item pt10 pb10 pl20 pr20" v-if="info.shareurl" :href="info.shareurl">
<img class="imgsize-40X40" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-fenxiang.png"
alt="#">
<div class="text-middle">分享</div>
</a>
</div>
<div class="fixed left-0 bottom-0 right-0 inner20 pb30 bg-fff ulib-rt20 z-index-4 fn-flex text-center">
<div class="relative fn-flex-item pl20 pr20" flexsize="0" v-for="item in info.menu">
<a v-if="item.type==1" :href="item.url">
<img class="imgsize-50X50" :src="item.icon" alt="#">
<div class="space-nowrap con-min60 font-22">{{item.title}}</div>
</a>
<div v-else-if="item.type==2">
<img class="imgsize-50X50" :src="item.icon" alt="#">
<div class="space-nowrap con-min60 font-22">{{item.title}}</div>
<div class="absolute top-0 left-0 right-0 bottom-0 overflowhidden z-index-1">
<wx-open-launch-weapp
id='launch-btn'
:username="item.wechat_ghid"
:path="item.wechat_path"
>
<template>
<button class="btn" style="width:100px;height:60px;opacity:0"></button>
</template>
<script type="text/wxtag-template">
<button class="btn" style="width:100px;height:60px;opacity:0"></button>
</script>
</wx-open-launch-weapp>
</div>
</div>
<div v-else-if="item.type==3" @click="enroll">
<img class="imgsize-50X50" :src="item.icon" alt="#">
<div class="space-nowrap con-min60 font-22">{{item.title}}</div>
</div>
<div v-else-if="item.type==4" @click="goSubscribemsg()">
<img class="imgsize-50X50" :src="item.icon" alt="#">
<div class="space-nowrap con-min60 font-22">{{item.title}}</div>
</div>
</div>
<a class="fn-flex-item pl20 pr20" flexsize="0" href="javascript:;" @click="goSubscribemsg()"
v-if="info.a_id == 21 && info.live_status == 0">
<img class="imgsize-50X50"
src="https://img.liche.cn/liche/market/202310/p_812aba80492024d60ca31c5049235182.png"
alt="#">
<div class="space-nowrap con-min60 font-22">订阅直播</div>
</a>
<a class="fn-flex-item pl20 pr20" flexsize="0" href="javascript:;" @click="showCode"
v-if="info.a_id == 23 && info.live_status == 0">
<img class="imgsize-50X50"
src="https://img.liche.cn/liche/market/202310/p_812aba80492024d60ca31c5049235182.png"
alt="#">
<div class="space-nowrap con-min60 font-22">领取家电好物礼</div>
</a>
<a class="fn-flex-item pl20 pr20" flexsize="0" href="javascript:;" @click="showCode"
v-if="info.a_id == 25 && info.live_status == 0">
<img class="imgsize-50X50"
src="https://img.liche.cn/liche/market/202310/p_812aba80492024d60ca31c5049235182.png"
alt="#">
<div class="space-nowrap con-min60 font-22">预约试驾</div>
</a>
<a class="fn-flex-item pl20 pr20" flexsize="0" href="javascript:;" @click="goSubscribemsg()"
v-if="info.a_id == 28 && info.live_status == 0">
<img class="imgsize-50X50"
src="https://img.liche.cn/liche/market/202403/p_73c97c1b5f171438fd7afb360b8b9c15.png"
alt="#">
<div class="space-nowrap con-min60 font-22">预约直播</div>
</a>
<a class="fn-flex-item pl20 pr20" flexsize="0" :href="info.my_url">
<img class="imgsize-50X50" src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-wode.png"
alt="#">
<div class="space-nowrap con-min60 font-22">我的</div>
</a>
<div class="fn-flex-item pl20" flexsize="1">
<!--relative只有id=34用到-->
<template v-if="info.live_status<2">
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r20"
v-if="info.live_status==1" href="javascript:;" @click="goLive">进入直播间</a>
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r20"
v-else-if="info.a_id == 21"
href="https://www.liche.cn/h5/market/sylive2/item/detail?skey=YV9pZD0yMSZpdGVtSWQ9Mjc">
{{info.btn_text}}
</a>
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r20"
v-else-if="info.a_id == 23"
href="https://www.liche.cn/h5/market/sylive2/item/detail?skey=YV9pZD0yMyZpdGVtSWQ9MzA">
立即支付99元权益金
</a>
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r20"
v-else-if="info.a_id == 25"
href="https://www.liche.cn/h5/market/sylive2/item/detail?skey=YV9pZD0yNSZpdGVtSWQ9MzM">
立即支付10元宠爱金
</a>
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r20"
v-else-if="info.a_id == 26"
href="https://www.liche.cn/h5/market/sylive2/item/detail?skey=YV9pZD0yNiZpdGVtSWQ9MzU">
支付9.9元瓜分百万红包
</a>
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r20"
v-else-if="info.a_id == 28"
href="https://www.liche.cn/h5/market/sylive2/item/detail?skey=YV9pZD0yOCZpdGVtSWQ9Mzg">
99元下定赢免单
</a>
<a class="block pt20 pb20 text-center font-36 color-fff ulib-r20" style="background-color:#de3f39;"
v-else-if="info.a_id == 34" href="javascript:;">
<div class="absolute top-0 left-0 right-0 bottom-0 overflowhidden z-index-1">
<wx-open-launch-weapp
id='launch-btn'
username="gh_166300b36245"
:path="ukeyPath">
<script type="text/wxtag-template">
<button class="btn" style="width:200px;height:60px;opacity:0"></button>
</script>
</wx-open-launch-weapp>
</div>
</a>
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r20" v-else
href="javascript:;" @click="showCode">
<!--<i class="iconfont icon-tixing mr10"></i>-->
{{info.btn_text}}
</a>
</template>
<template v-else>
<a class="block bg-1a1a1a pt20 pb20 text-center font-36 color-fff ulib-r20" href="javascript:;">活动已结束</a>
</template>
</div>
</div>
<!--直播字幕-->
<div>
<div class="notice-shadow"></div>
<div class="notice bg-000-op10 pl20 pr20 line-height-17 font-28 ulib-r750 z-index-1"
:style="'animation-delay:'+item.delay+'s;'+'color:'+info.notice_color" v-for="(item,index) in notice1">
<span>{{item.name}}</span>
<span class="ml10">{{item.tip}}</span>
</div>
<div class="notice bg-000-op10 pl20 pr20 line-height-17 font-28 ulib-r750 z-index-1"
:style="'animation-delay:'+item.delay+'s;'+'color:'+info.notice_color" v-for="(item,index) in notice2">
<span>{{item.name}}</span>
<span class="ml10">{{item.tip}}</span>
</div>
</div>
</div>
<div class="msg fn-hide" :style="msgisShowCode?'display:block':'display:none'" v-if="msgisShowCode">
<div class="msgBg" @click="closeCode"></div>
<div class="msgMain">
<div class="content">
<div class="word text-center">
<div class="mt20 font-22 line-height-15 color-666">
<div class="mt10">
看直播,好礼享不停!
</div>
<div class="mt10">添加【东风EV官方企微号】</div>
<div class="mt10">
了解更多惊喜内幕!
</div>
</div>
<div class="mt20 pt10 text-center">
<img class='inline-block imgsize-360X360' :src='info.code'/>
</div>
<div class="pt10 pb20 pl20 pr20 font-24 color-fe9538 line-height-15">
<img class="imgsize-24X24 text-middle"
src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-finger2.png" alt="#"/>
<span class="text-middle">长按识别二维码添加</span>
</div>
</div>
<!-- <div class="opt pl40 pr40">
<a class="block bg-1a1a1a pt25 pb25 text-center font-32 color-fff ulib-r750" @click="closeCode" href="javascript:" >知道了</a>
</div> -->
</div>
</div>
</div>
<div class="msg fn-hide" :style="msgisShowReg?'display:block':'display:none'" v-if="msgisShowReg">
<div class="msgBg" @click="msgisShowReg = false"></div>
<div class="msgMain">
<div class="content">
<div class="word">
<div class="pt10 pb10 text-center font-36 color-000">{{info.appoint_title}}</div>
<div class="mt20 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 class="mt30 relative bg-f6 ulib-r10 pr200">
<div><input class="wp100 inner30 font-30 bg-f6 border-none ulib-r10" type="number"
v-model="vCode" placeholder="请输入验证码"
oninput="if(value.length>4)value=value.slice(0,4)" maxlength="4"/></div>
<a :class="[codeState ?'color-333':'color-999','absolute right-0 mr20 box-middle font-30']"
@click="getcode()">{{codeTx}}</a>
</div>
</div>
<div class="opt mt30 pl20 pr20 fn-flex">
<a class="fn-flex-item bg-fff bds-2-1a1a1a mr15 pt20 pb20 text-center font-32 color-000 ulib-r750"
@click="msgisShowReg = false" href="javascript:">取消</a>
<a class="fn-flex-item bg-1a1a1a ml15 pt20 pb20 text-center font-32 color-fff ulib-r750"
@click="postCustomers()" href="javascript:">确定</a>
</div>
</div>
</div>
</div>
<div class="msg fn-hide" :style="msgisShowSuccess?'display:block':'display:none'" v-if="msgisShowSuccess">
<div class="msgBg" @click="msgisShowSuccess = false"></div>
<div class="msgMain">
<img class="absolute top-0 right-0 mt30 mr25 imgsize-32X32" @click="msgisShowSuccess = false"
src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-colse.png" alt="关闭"/>
<div class="content">
<div>
<div class="pt10 pb10 text-center font-28">{{succesTx.title}}</div>
<div class="inner30 text-break font-22 line-height-17 color-666" v-html="succesTx.content"></div>
</div>
<div class="opt pl20 pr20 text-center" v-if="info.a_id == 35">
<a class="inline-block relative wp80 bg-ff0000 pt20 pb20 text-center font-32 color-fff ulib-r750"
href="javascript:">
<i class="iconfont icon-tixing mr10"></i>
马上去抽奖
<div class="absolute top-0 left-0 right-0 bottom-0 overflowhidden z-index-1">
<wx-open-launch-weapp
id='launch-btn'
username="gh_629e59e5211b"
:path="ukeyPath">
<template>
<button class="btn" style="width:100px;height:60px;opacity:0"></button>
</template>
<script type="text/wxtag-template">
<button class="btn" style="width:100px;height:60px;opacity:0"></button>
</script>
</wx-open-launch-weapp>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="msg fn-hide" :style="subShowSuccess?'display:block':'display:none'" v-if="subShowSuccess">
<div class="msgBg" @click="subShowSuccess = false"></div>
<div class="msgMain">
<img class="absolute top-0 right-0 mt30 mr25 imgsize-32X32" @click="subShowSuccess = false"
src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-colse.png" alt="关闭"/>
<div class="content">
<div>
<div class="pt10 pb10 text-center font-36">{{succesTx.title}}</div>
<div class="inner30 text-break font-22 line-height-17 color-666" v-html="succesTx.content"></div>
</div>
<div class="opt pl20 pr20 text-center ">
<a class="inline-block relative wp80 bg-1a1a1a pt20 pb20 text-center font-32 color-fff ulib-r750"
href="javascript:" @click="goSubscribemsg()">
<i class="iconfont icon-tixing mr10"></i>开播提醒
</a>
</div>
</div>
</div>
</div>
</div>
<script>
let hostUrl = ''
var app = new Vue({
el: '#app',
data: {
info: '',
page: 1,
notice1: [],
notice2: [],
code: '',
msgisShowCode: false,
noticeTime: null,
msgisShowReg: false,
telPhone: '',
isSubmiting: false,
vCode: '',
codeState: true,
codeTx: '立即获取',
msgisShowSuccess: false,//报名成功
succesTx: '',//报名成功提示
subShowSuccess: false,
ukeyPath: '',
},
created() {
},
computed: {},
mounted() {
this.getInfo()
this.getNotice()
if (this.info.alert_code) {
mDialog.msg({content: '预约成功'});
}
if (this.info.apt) {
this.msgisShowReg = true
}
},
beforeDestroy() {
this.notice1 = []
this.notice2 = []
clearTimeout(this.noticeTime);
},
methods: {
showSub: function () {
// this.subShowSuccess = true
this.goSubscribemsg()
},
showCode: function () {
var that = this
if (that.info.pay_item_url) {
window.location.href = that.info.pay_item_url;
} else {
if (that.info.appoint_mobile) {
that.enroll()
}
}
},
enroll: function () {
var that = this
if (that.info.is_appoint) {
//提交成功
that.msgisShowSuccess = true
that.ukeyPath = '/pages/lottery/index?encrypt=97ba7e8aaefdaec53e482b65cdddc3e0&weshop_key=ed2e4ae&third_u_key=' + that.info.ukey
that.succesTx = {
title: that.info.appoint_title,
content: that.info.appoint_msg,
}
} else {
if (that.info.auth_url) {
window.location.href = that.info.auth_url;
} else {
that.msgisShowReg = true
}
}
},
closeCode: function () {
this.msgisShowCode = false
},
goSubscribemsg: function () {
var that = this
if (that.info.subscribemsg == '已订阅直播') {
mDialog.msg({content: that.info.subscribemsg});
} else {
window.location.href = that.info.subscribemsg;
}
},
//获取基础信息
getInfo() {
this.info = <?=json_encode($info, JSON_UNESCAPED_UNICODE)?>;
// this.info['menu'] = [
// {
// type:'2',
// icon:'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-shijia.png',
// title:'约试驾',
// wechat_ghid:'gh_54cc250f3a1a',
// wechat_path:'subpackage/pages/testDrive/testDrive',
// },
// {
// type:'1',
// icon:'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-shangpin.png',
// title:'热商品',
// url:'goods.html',
// },
// ]
// this.info = {
// state:0,//0未开始,1直播中,2结束
// bg:"https://qs.liche.cn/web/images/project/H5-ShiYu/upload/linebg.jpg",
// shareurl:'poster.html',
// statisticsurl:'221201-statistics-home.html',
// rankingurl:'221201-statistics-ranking.html',
// code:'https://qs.liche.cn/web/images/project/H5-ShiYu/wx-code.png',
// menu:[
// {
// type:'2',
// icon:'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-shijia.png',
// title:'约试驾',
// wechat_ghid:'gh_54cc250f3a1a',
// wechat_path:'subpackage/pages/testDrive/testDrive',
// },
// {
// type:'1',
// icon:'https://qs.liche.cn/web/images/project/H5-ShiYu/icon-shangpin.png',
// title:'热商品',
// url:'goods.html',
// },
// ],
// }
},
//获取底部订阅提示
getNotice() {
let that = this
if (that.info.live_status == 2) {
return '';
}
$.get('/h5/market/sylive2/act/subscribemsg_lists', {
'a_id': that.info.a_id,
'live_status': that.info.live_status
}, function (result) {
that.notice = result.data.lists
that.page = that.page + 1
alldelay = 0
that.notice.forEach(item => {
item.delay = alldelay + Math.floor(Math.random() * (3)) / 10 + 1
alldelay = item.delay
})
if (that.page % 2 == 0) {
that.notice2 = that.notice
setTimeout(function () {
that.notice1 = []
}, 6000);
} else {
that.notice1 = that.notice
setTimeout(function () {
that.notice2 = []
}, 6000);
}
setTimeout(function () {
that.getNotice()
}, (alldelay < 20 ? 20 : alldelay) * 1000);
}, 'json')
},
//进入直播间
goLive() {
$.get('/h5/market/sylive2/act/golive', {'a_id': this.info.a_id}, function (result) {
window.location.href = "<?=$info['live_url']?>"
})
},
//获取验证码倒计时
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/act/get_code', {'mobile': this.telPhone}, function (response) {
mDialog.msg({
duration: 250,
pause: 2000,
content: response.msg
});
if (response.code == 200) {
that.countDownTime(91)
}
}, 'json')
}
},
//提交手机号
postCustomers() {
if (this.isSubmiting) return;
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 {
this.isSubmiting = true
var that = this;
$.post('/h5/market/sylive2/act/appointment', {
'mobile': this.telPhone,
'code': this.vCode,
'a_id': this.info.a_id
}, function (response) {
that.isSubmiting = false
if (response.code == 200) {
that.info.is_appoint = 1
that.msgisShowReg = false
//提交成功
that.msgisShowSuccess = true
that.ukeyPath = '/pages/lottery/index?encrypt=97ba7e8aaefdaec53e482b65cdddc3e0&weshop_key=ed2e4ae&third_u_key=' + response.data.ukey
that.succesTx = {
title: that.info.appoint_title,
content: that.info.appoint_msg,
}
// mDialog.msg({
// duration: 250,
// pause: 2000,
// content: response.msg,
// onClose:function(){
// window.location.href = that.info.subscribemsg;
// }
// });
} else {
mDialog.msg({
duration: 250,
pause: 2000,
content: response.msg
})
}
}, 'json')
}
},
}
})
Vue.config.ignoredElements = ['wx-open-launch-weapp', 'wx-open-subscribe'];
</script>
<?= $this->load->view('h5/market/sylive/share_script') ?>
</body>