|
|
@@ -0,0 +1,270 @@
|
|
|
+<?php defined('InShopNC') or exit('Access Invalid!'); ?>
|
|
|
+
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>砍价团</title>
|
|
|
+ <meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi">
|
|
|
+ <meta name="format-detection" content="telephone=no">
|
|
|
+ <link rel="stylesheet" href="<?php echo RESOURCE_SITE_URL; ?>/mobile/bargain/css/main.css?<?php echo bonus_version(); ?>"/>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="maincontent">
|
|
|
+ <div class="main">
|
|
|
+ <div class="content">
|
|
|
+ <div class="goods">
|
|
|
+ <div class="thumbnail">
|
|
|
+ <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1515563446629&di=54394197eb40785021584b377f7c1c09&imgtype=0&src=http%3A%2F%2Fimgqn.koudaitong.com%2Fupload_files%2F2014%2F11%2F16%2FFlCgXx2oQYxENNLkllLxme4Oq2fI.jpg%2521580x580.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="introduce">
|
|
|
+ <p class="goods_name">泊美 | 菁盈粹系列植物活肤三件套 洁面水乳 礼物首选</p>
|
|
|
+ <div class="price_describe">
|
|
|
+ <div class="price_box">
|
|
|
+ <span class="current_price" id="current_price">现价850</span><span class="original_price">原价1000</span>
|
|
|
+ </div>
|
|
|
+ <div class="rush_num">
|
|
|
+ <span>已抢2030份</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="count_down">
|
|
|
+ <p>剩： <span class="days time_color"></span> 天 <span class="hours time_color"></span>：<span class="minutes time_color"></span> ：<span class="seconds time_color"></span> 结束</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/bargain/images/stamp.png" id="stamp" class="stamp hide stamp_scale">
|
|
|
+ </div>
|
|
|
+ <div class="bargain_handle">
|
|
|
+ <span class="bargain_btn" id="bargain_btn">帮砍一刀</span>
|
|
|
+ <span class="join_btn" id="join_btn">我要参加</span
|
|
|
+ </div>
|
|
|
+ <div class="bargain_users">
|
|
|
+ <p class="title">看看小伙伴说了啥？</p>
|
|
|
+ <div class="slide_containe">
|
|
|
+ <ul class="users_list" id="slide_list">
|
|
|
+ <li><img class="avatar" src="http://img1.imgtn.bdimg.com/it/u=4026848961,760222886&fm=214&gp=0.jpg">小西1说：希望多砍点，加油！</li>
|
|
|
+ <li><img class="avatar" src="http://img1.imgtn.bdimg.com/it/u=4026848961,760222886&fm=214&gp=0.jpg">小西2说：希望多砍点，加油！</li>
|
|
|
+ <li><img class="avatar" src="http://img1.imgtn.bdimg.com/it/u=4026848961,760222886&fm=214&gp=0.jpg">小西3说：希望多砍点，加油！</li>
|
|
|
+ <li><img class="avatar" src="http://img1.imgtn.bdimg.com/it/u=4026848961,760222886&fm=214&gp=0.jpg">小西4说：希望多砍点，加油！</li>
|
|
|
+ <li><img class="avatar" src="http://img1.imgtn.bdimg.com/it/u=4026848961,760222886&fm=214&gp=0.jpg">小西5说：希望多砍点，加油！</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rules_box">
|
|
|
+ <img src="<?php echo RESOURCE_SITE_URL; ?>/mobile/bargain/images/rules.png" class="rules">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<div class="fixed_bottom" id="fixed_bottom">
|
|
|
+ <div>
|
|
|
+ <input type="text" placeholder="我想说几句" class="send_input" id="send_msg">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button class="send_msg" id="send_btn">发送</button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <button class="download_app" id="download_app">下载app</button>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/shake/js/zepto.min.js"></script>
|
|
|
+<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/animate.js"></script>
|
|
|
+<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/websocket.js"></script>
|
|
|
+<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL; ?>/mobile/comm/new_bridge.js"></script>
|
|
|
+<script type="text/javascript">
|
|
|
+
|
|
|
+ //发送弹幕
|
|
|
+ var Barrage = function()
|
|
|
+ {
|
|
|
+ this.sendData = null;
|
|
|
+ this.barrage_html = '';
|
|
|
+ this.dataParse = function(data)
|
|
|
+ {
|
|
|
+ return {
|
|
|
+ posY :parseInt(Math.random() * (380 - 20) + 20),
|
|
|
+ avatar: data.get_from().avatar,
|
|
|
+ nickname : data.get_from().nickname,
|
|
|
+ msg:data.get_msg()
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.add = function(send_data){
|
|
|
+ this.sendData = this.dataParse(send_data);
|
|
|
+ return this;
|
|
|
+ };
|
|
|
+ this.send = function()
|
|
|
+ {
|
|
|
+ if(this.sendData)
|
|
|
+ {
|
|
|
+ if(this.sendData.msg > 0) {
|
|
|
+ this.barrage_html = '<div class="barrage" style="top:'+this.sendData.posY+'%"><img src="'+this.sendData.avatar+'">'+this.sendData.nickname+'砍了<span class="price">'+this.sendData.msg+'元</span></div>';
|
|
|
+ }
|
|
|
+ $('body').append(this.barrage_html);
|
|
|
+ this.sendData = null;
|
|
|
+ this.barrage_html = '';
|
|
|
+ this.clear();
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ console.log('没有弹幕可以发送');
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.clear = function()
|
|
|
+ {
|
|
|
+ $('.barrage').on('webkitAnimationEnd',function(){
|
|
|
+ $(this).remove();
|
|
|
+ });
|
|
|
+ return this;
|
|
|
+ };
|
|
|
+ };
|
|
|
+
|
|
|
+ var barrage = new Barrage();
|
|
|
+
|
|
|
+ var room = <?php echo $output['room']; ?>;
|
|
|
+ var roomkey = "<?php echo $output['room_key']; ?>";
|
|
|
+ var addr = "<?php echo $output['addr']; ?>";
|
|
|
+
|
|
|
+ var room_msgs = {
|
|
|
+ room : room,
|
|
|
+ roomkey :roomkey
|
|
|
+ };
|
|
|
+ var callbacks = {
|
|
|
+ onOpen:sOpen,
|
|
|
+ onError:sError,
|
|
|
+ onClose:sClose
|
|
|
+ };
|
|
|
+ var msg_handler = {
|
|
|
+ room_info:ret_join,
|
|
|
+ message:message
|
|
|
+ };
|
|
|
+ var websocket = new WebsocketConnect(addr,true,true,callbacks,room_msgs,msg_handler);
|
|
|
+
|
|
|
+ function sOpen(){
|
|
|
+ }
|
|
|
+ function sError(e){
|
|
|
+ alert('网络连接失败！请刷新重试');
|
|
|
+ }
|
|
|
+ function sClose(e){
|
|
|
+ console.log('网络连接关闭！');
|
|
|
+ }
|
|
|
+
|
|
|
+ function message(datas)
|
|
|
+ {
|
|
|
+ var jsonDatas = new websocket.Json_parse(datas);
|
|
|
+ var msg_type = datas.content.type;
|
|
|
+ var msg_from_userId = datas.content.from.userid;
|
|
|
+ try
|
|
|
+ {
|
|
|
+ if(msg_type == 'message') {
|
|
|
+ if(msg_from_userId !== websocket.getMeId) {
|
|
|
+ barrage.add(jsonDatas).send();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ catch (e) {
|
|
|
+ alert(e.message)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function ret_join(datas){
|
|
|
+ var jsonDatas = new websocket.Json_parse(datas);
|
|
|
+ websocket.setMeId(jsonDatas.content.me);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //倒计时
|
|
|
+ var over_time = (new Date(2018,0,14).getTime())/1000;
|
|
|
+
|
|
|
+ setInterval(function(){
|
|
|
+ var local_time = (new Date().getTime())/1000;
|
|
|
+ var count_down_time = (over_time - local_time).toFixed(0);
|
|
|
+ formatDuring(count_down_time);
|
|
|
+ },1000);
|
|
|
+
|
|
|
+ function formatDuring(mss) {
|
|
|
+ var days = parseInt( mss / 60 / 60 / 24, 10); //计算剩余的天数
|
|
|
+ var hours = parseInt(mss / 60 / 60 % 24, 10); //计算剩余的小时
|
|
|
+ var minutes = parseInt(mss / 60 % 60, 10);//计算剩余的分钟
|
|
|
+ var seconds = parseInt(mss % 60, 10);//计算剩余的秒数
|
|
|
+ if(days < 10) {
|
|
|
+ days = '0' + days;
|
|
|
+ }
|
|
|
+ if(hours < 10) {
|
|
|
+ hours = '0' + hours;
|
|
|
+ }
|
|
|
+ if(minutes < 10) {
|
|
|
+ minutes = '0' + minutes;
|
|
|
+ }
|
|
|
+ if(seconds < 10) {
|
|
|
+ seconds = '0' + seconds;
|
|
|
+ }
|
|
|
+ $('.days').text(days);
|
|
|
+ $('.hours').text(hours);
|
|
|
+ $('.minutes').text(minutes);
|
|
|
+ $('.seconds').text(seconds);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //消息滚动
|
|
|
+ setInterval(function(){
|
|
|
+ var $parent = $('#slide_list');
|
|
|
+ var $first = $('#slide_list li').first();
|
|
|
+ var height = $first.height();
|
|
|
+ $first.animate({
|
|
|
+ marginTop: -height + 'px'
|
|
|
+ },'ease-out',function(){
|
|
|
+ $parent.append($first.css('marginTop',0));
|
|
|
+ })
|
|
|
+ },2000);
|
|
|
+
|
|
|
+
|
|
|
+ var random = function(){
|
|
|
+ return (Math.random()*10).toFixed(2);
|
|
|
+ };
|
|
|
+
|
|
|
+
|
|
|
+ document.querySelector('#bargain_btn').addEventListener('click',function(){
|
|
|
+ $('.stamp').removeClass('hide');
|
|
|
+ document.getElementById('stamp').addEventListener('webkitAnimationEnd',function(){
|
|
|
+ setTimeout(function(){
|
|
|
+ $('.stamp').addClass('hide');
|
|
|
+ },500);
|
|
|
+ setTimeout(function(){
|
|
|
+ var current_price = document.querySelector('#current_price').innerHTML;
|
|
|
+ var price = current_price.replace('现价',"");
|
|
|
+ document.querySelector('#current_price').innerHTML = "现价"+((price - random()).toFixed(2));
|
|
|
+ $('.current_price').addClass('scale');
|
|
|
+ document.getElementById('current_price').addEventListener('webkitAnimationEnd',function(){
|
|
|
+ $('.current_price').removeClass('scale');
|
|
|
+ });
|
|
|
+ },500);
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ //发送信息
|
|
|
+ $('#send_btn').on('click',function(){
|
|
|
+ var sendMsg = $('#send_msg').val();
|
|
|
+ if(!sendMsg){return;}
|
|
|
+ websocket.send(sendMsg);
|
|
|
+ $('#send_msg').val('');
|
|
|
+ });
|
|
|
+
|
|
|
+ //判断用户设备下载app
|
|
|
+ var bridge = new Bridge();
|
|
|
+ function skip_download_app(){
|
|
|
+ if(bridge.isMobile.iOS()) {
|
|
|
+ window.location.href = 'itms-apps://itunes.apple.com/app/id945609424';
|
|
|
+ }
|
|
|
+ else if(bridge.isMobile.Android()) {
|
|
|
+ window.location.href = 'http://p.lrlz.com/hfive/android_down';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ $('#download_app').on('click',function(){
|
|
|
+ skip_download_app();
|
|
|
+ });
|
|
|
+ $('#join_btn').on('click',function(){
|
|
|
+ skip_download_app();
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+
|
stanley-king
