master

分支 (1)

管理

管理

master

yitao-portal
/
seckill-item.html

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>易淘商城--秒杀详情页</title>
	 <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-zoom.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-seckill-item.css" />
    <link rel="stylesheet" type="text/css" href="css/widget-cartPanelView.css" />
</head>

<body>
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$("#service").hover(function(){
		$(".service").show();
	},function(){
		$(".service").hide();
	});
	$("#shopcar").hover(function(){
		$("#shopcarlist").show();
	},function(){
		$("#shopcarlist").hide();
	});

})
</script>
<script type="text/javascript" src="js/czFunction.js"></script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<script type="text/javascript">
	$(function(){
		$("ul.btn-choose li a.btn-xlarge").click(function(){
			alert("钻中");
		});
		$("#star").click(function(){
			alert("关注成功");
		})
	})
</script>
	<script src="./js/vue/vue.js"></script>
	<script src="./js/axios.min.js"></script>
	<script src="./js/common.js"></script>
</body>
<div id="seckillDetailApp">
	<div id="nav-bottom">
		<yt-top/>
	</div>

	<div class="py-container">
		<div id="item">
			<div class="crumb-wrap">
				<ul class="sui-breadcrumb">

				</ul>
			</div>
			<!--product-info-->
			<div class="product-info">
				<div class="fl preview-wrap">
					<!--放大镜效果-->
					<div class="zoom">
						<!--默认第一个预览-->
						<div id="preview" class="spec-preview">
							<span class="jqzoom"><img jqimg="goods.image" :src="goods.image" width="400px" height="400px" /></span>
						</div>
					</div>

				</div>
				<div class="fr itemInfo-wrap">
					<div class="sku-name">
						<h4>{{goods.title}}</h4>
					</div>
					<div class="news">
						<span><img src="img/_/clock.png"/>易淘秒杀</span>
						<span class="overtime">距离结束：{{countTime}}</span>
					</div>
					<div class="summary">
						<div class="summary-wrap">

							<div class="fl title">
								<i>秒杀价</i>
							</div>
							<div class="fl price">
								<i>¥</i>
								<em id="sekillPrice">{{yt.formatPrice(goods.seckillPrice)}}</em>
								<span>原价：{{yt.formatPrice(goods.price)}}</span>
							</div>
							<div class="fr remark">
								剩余库存:{{goods.stock}}
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>促　　销</i>
							</div>
							<div class="fl fix-width">
								<i class="red-bg">加价购</i>
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
							</div>
						</div>
					</div>
					<div class="support">
						<div class="summary-wrap">
							<div class="fl title">
								<i>支　　持</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">以旧换新，闲置手机回收  4G套餐超值抢  礼品购</em>
							</div>
						</div>
						<div class="summary-wrap">
							<div class="fl title">
								<i>配 送 至</i>
							</div>
							<div class="fl fix-width">
								<em class="t-gray">满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</em>
							</div>
						</div>
					</div>
					<div class="clearfix choose">
						<div class="summary-wrap">
							<div class="fl title">

							</div>
							<div class="fl">
								<ul class="btn-choose unstyled">
									<li>
										<img id="verifyCodeImg" :src="verifyImage" width="80" height="32" v-show="flag" @click="refreshVerifyCode(goods.skuId)"/>
										<input id="verifyCode" v-model="verifyCode" class="form-control" v-show="flag" style="width: 40px;height:26px;"/>
										<a href="javascript:;" target="_blank" class="sui-btn  btn-danger addshopcar" @click="getSecKillPath(goods.skuId)">立即抢购</a>
									</li>
									<span v-text="msg" style="color: red"></span>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--product-detail-->
			<div class="clearfix product-detail">
				<div class="fl aside">
					<div class="shop">
						<span class="fl">三星旗舰店</span><span class="fr"><a href="shop.html" target="_blank" class="sui-btn btn-bordered btn-danger">进入店铺</a></span>
					</div>
					<div class="clearfix"></div>
					<ul class="sui-nav nav-tabs tab-wraped">
						<li class="active">
							<a href="#index" data-toggle="tab">
								<span>相关分类</span>
							</a>
						</li>
						<li>
							<a href="#profile" data-toggle="tab">
								<span>推荐品牌</span>
							</a>
						</li>
					</ul>
					<div class="tab-content tab-wraped">
						<div id="index" class="tab-pane active">
							<ul class="part-list unstyled">
								<li>手机</li>
								<li>手机壳</li>
								<li>内存卡</li>
								<li>Iphone配件</li>
								<li>贴膜</li>
								<li>手机耳机</li>
								<li>移动电源</li>
								<li>平板电脑</li>
							</ul>
							<ul class="goods-list unstyled">
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part01.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
								<li>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part02.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
									<div class="list-wrap">
										<div class="p-img">
											<img src="img/_/part03.png" />
										</div>
										<div class="attr">
											<em>Apple苹果iPhone 6s (A1699)</em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i>6088.00</i>
											</strong>
										</div>
										<div class="operate">
											<a href="javascript:void(0);" class="sui-btn btn-bordered">加入购物车</a>
										</div>
									</div>
								</li>
							</ul>
						</div>
						<div id="profile" class="tab-pane">
							<p>推荐品牌</p>
						</div>
					</div>
				</div>
				<div class="fr detail">

					<div class="tab-main intro">
						<ul class="sui-nav nav-tabs tab-wraped">
							<li class="active">
								<a href="#one" data-toggle="tab">
									<span>商品介绍</span>
								</a>
							</li>
							<li>
								<a href="#two" data-toggle="tab">
									<span>规格与包装</span>
								</a>
							</li>
							<li>
								<a href="#three" data-toggle="tab">
									<span>售后保障</span>
								</a>
							</li>
							<li>
								<a href="#four" data-toggle="tab">
									<span>商品评价</span>
								</a>
							</li>
							<li>
								<a href="#five" data-toggle="tab">
									<span>手机社区</span>
								</a>
							</li>
						</ul>
						<div class="clearfix"></div>
						<div class="tab-content tab-wraped">
							<div id="one" class="tab-pane active">
								<ul class="goods-intro unstyled">

								</ul>
							</div>
							<div id="two" class="tab-pane">
								<p>规格与包装</p>
							</div>
							<div id="three" class="tab-pane">
								<p>售后保障</p>
							</div>
							<div id="four" class="tab-pane">
								<p>商品评价</p>
							</div>
							<div id="five" class="tab-pane">
								<p>手机社区</p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
    var seckillDetailVm = new Vue({
        el:"#seckillDetailApp",
        data:{
            yt,
			verifyCode:'',
            verifyImage:'',
			msg:'',
			flag:true, // 显示验证码
			countTime:{},
			goods:{},
			tip:'', // 提示结果
        },
        created:function () {
           yt.http.get("/seckill/"+yt.getUrlParam("goodsId"))
			   .then((resp) => {
			       this.goods = resp.data;
			       // 服务端当前时间：
				   let startSeconds = new Date(this.goods.currentTime).getTime();
				   // 结束时间:
				   let endSeconds = new Date(this.goods.endTime).getTime();
			       let seconds = Math.floor((endSeconds - startSeconds)/1000);

			       const time = setInterval(() => {
			           seconds = seconds - 1;
			           this.countTime = this.convertTimeString(seconds);

			           if (seconds <= 0) {
			               clearInterval(time);
					   }
				   },1000);
			   });
			   // 获取验证图片
			   this.verifyImage = "http://api.yitao.com/api/seckill/verifyCode?goodsId="+yt.getUrlParam("goodsId");
        },
        methods:{
            //转换秒为天小时分钟秒格式  XXX天 10:22:33
            convertTimeString(timeSeconds){
                let days= Math.floor( timeSeconds/(60*60*24));//天数
                let hours= Math.floor((timeSeconds-days*60*60*24)/(60*60));//小数数
                let minutes= Math.floor((timeSeconds -days*60*60*24 - hours*60*60)/60);//分钟数
                let seconds= timeSeconds -days*60*60*24 - hours*60*60 -minutes*60; //秒数
                let timeString="";
                // 0补全2位
                hours = hours < 10 ? "0"+hours : hours;
                minutes = minutes < 10 ? "0"+minutes : minutes;
                seconds = seconds < 10 ? "0"+seconds : seconds;

                if(days>0){
                    timeString=days+"天 ";
                }
                return timeString+hours+":"+minutes+":"+seconds;
            },
			// 获取秒杀地址
            getSecKillPath(goodsId) {
				yt.http.post("/seckill/getPath",{
				    goodsId: goodsId,
                    verifyCode: this.verifyCode
				}).then((resp) => {
                    this.tip = resp.data;
				    // 真正执行秒杀
				    this.doSecKill(this.tip.data,goodsId);
				}).catch(() => {
				    console.log(this.tip);
				    layer.msg(this.tip.msg == null ? "验证码错误！" : this.tip.msg);
				    this.refreshVerifyCode(goodsId);
				});
			},
			// 执行秒杀
			doSecKill(path,goodsId) {
                yt.http.post("/seckill/"+path+"/seck/"+goodsId)
				.then((resp) =>{
					if (resp.data.code == 0) {
					    // 获取秒杀结果
					    this.getSecKillResult(goodsId);
					} else {
					    layer.msg(resp.data.msg);
                        this.refreshVerifyCode(goodsId);
					}
				}).catch(()=>{
					layer.msg("客户端请求异常");
                    this.refreshVerifyCode(goodsId);
				});
			},
			// 获取秒杀结果
            getSecKillResult(goodsId) {
                let loading = layer.load(1, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                //3.2开启定时任务，查询秒杀订单状态
                const taskId = setInterval(() => {
                    yt.http.get("/seckill/result?goodsId="+goodsId,{
                        transformResponse: [
                            function (data) {
                                return data;
                            }
                        ]
                    }).then(resp => {
                        let orderId = resp.data;
                        console.log(resp);
                        console.log(orderId);

                        if (orderId != "undefined" || orderId != -1){
                            //3.5秒杀成功
                            clearInterval(taskId);
                            layer.close(loading);
                            layer.confirm("恭喜你，秒杀成功！查看订单？", {btn:["确定","取消"]},
                                function(){
                                	yt.store.set("totalPay", $("#sekillPrice").text());
                                	yt.store.set("orderId", orderId);
                                    window.location.href="/pay.html";
                                },
                                function(){
                                    layer.closeAll();
                                });
                        } else {
                            layer.close(loading);
                            //3.5秒杀失败
                            clearInterval(taskId);
                            layer.msg("对不起，秒杀失败");
                        }
                    }).catch(()=>{layer.msg("对不起，秒杀失败")});
                },3000);
			},
            refreshVerifyCode(goodsId){
                this.verifyImage = "http://api.yitao.com/api/seckill/verifyCode?goodsId="+goodsId+"&timestamp="+new Date().getTime();
    		}

        },
        components:{
            ytTop: () => import("./js/pages/top.js")
        }
    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

<!--侧栏面板开始,由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div class="J-global-toolbar"></div>
<script type="text/javascript">$(".J-global-toolbar").load("side.html");</script>

<!--购物车单元格 模板-->
<script type="text/template" id="tbar-cart-item-template">
	<div class="tbar-cart-item" >
		<div class="jtc-item-promo">
			<em class="promo-tag promo-mz">满赠<i class="arrow"></i></em>
			<div class="promo-text">已购满600元，您可领赠品</div>
		</div>
		<div class="jtc-item-goods">
			<span class="p-img"><a href="#" target="_blank"><img src="{2}" alt="{1}" height="50" width="50" /></a></span>
			<div class="p-name">
				<a href="#">{1}</a>
			</div>
			<div class="p-price"><strong>¥{3}</strong>×{4} </div>
			<a href="#none" class="p-del J-del">删除</a>
		</div>
	</div>
</script>
<!--侧栏面板结束-->
</html>