master

分支 (1)

管理

管理

master

yitao-portal
/
seckill-index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>易淘商城--秒杀页面</title>
    <link rel="stylesheet" type="text/css" href="./css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-jquery.autocomplete.css" />
    <link rel="stylesheet" type="text/css" href="./css/pages-seckill-index.css" />
</head>
<body>
<!-- 头部栏位 -->
<!--页面顶部，由js动态加载-->
<script type="text/javascript" src="./js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="./js/widget/jquery.autocomplete.js"></script>
<script type="text/javascript" src="./js/widget/nav.js"></script>
<script type="text/javascript" src="./js/pages/seckill-index.js"></script>
<script>
    $(function(){
        $("#code").hover(function(){
            $(".erweima").show();
        },function(){
            $(".erweima").hide();
        });
    })
</script>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<div id="seckillApp">
	<div id="nav-bottom">
		<yt-top/>
	</div>

	<div class="py-container index">
		<!--banner-->
		<div class="banner">
			<img src="img/_/banner.png" class="img-responsive" alt="">
		</div>

		<!--商品列表-->
		<div class="goods-list">
			<ul class="seckill" id="seckill">
				<li class="seckill-item" v-for="(item,i) in seckillList">
					<div class="pic" @click="gotoSeckillItem(item.skuId)">
						<img :src="item.image" alt=''  >
					</div>
					<div class="intro"><span>{{item.title}}</span></div>
					<div class='price'><b class='sec-price'>￥{{yt.formatPrice(item.seckillPrice)}}</b><b class='ever-price'>￥{{yt.formatPrice(item.price)}}</b></div>
					<div class='num'>
						<div>已售{{((item.seckillTotal - item.stock)/item.seckillTotal*100).toFixed(0)}}%</div>
						<div class='progress'>
							<div class='sui-progress progress-danger'><span :style="{width: (((item.seckillTotal - item.stock)/item.seckillTotal*100).toFixed(0))+'%'}" class='bar'></span></div>
						</div>
						<div>剩余<b class='owned'>{{item.stock}}</b>件</div>
					</div>
					<a class='sui-btn btn-block btn-buy' href='javascript:;' @click="gotoSeckillItem(item.skuId)" target='_blank'>立即抢购</a>
				</li>
			</ul>
		</div>
		<div class="cd-top">
			<div class="top">
				<img src="img/_/gotop.png" />
				<b>TOP</b>
			</div>
			<div class="code" id="code">
				<span><img src="img/_/code.png"/></span>
			</div>
			<div class="erweima">
				<img src="img/_/erweima.jpg" alt="">
				<s></s>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var seckillVm = new Vue({
		el:"#seckillApp",
		data:{
            yt,
			seckillList:[],
		},
		created:function () {
			this.loadData();
        },
		methods:{
		  loadData() {
			  yt.http.get("/seckill/list").then((resp)=>{
			      this.seckillList = resp.data;
			  });
		  },
		  gotoSeckillItem(id) {
		      location.href = "/seckill-item.html?goodsId="+id;
		  }
		},
        components:{
            ytTop: () => import("./js/pages/top.js")
		}
	});
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
</body>
</html>