<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>我的购物车</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="amazeui/css/amazeui.min.css"/>
<link rel="stylesheet" href="default/style.css"/>
<script src="amazeui/js/jquery.min.js"></script>
<script src="amazeui/js/amazeui.min.js"></script>
<script src="amazeui/js/config.js"></script>
<script src="vue/axios.min.js"></script>
<script src="vue/vue.js"></script>
<script src="components/nav-footer.js"></script>
</head>
<body>
<div class="container" id="container">
<header data-am-widget="header" class="am-header am-header-default my-header">
<div class="am-header-left am-header-nav">
<a href="javascript:history.go(-1)" class="">
<i class="am-header-icon am-icon-chevron-left"></i>
</a>
</div>
<h1 class="am-header-title">
<a href="#title-link" class="">我的购物车</a>
</h1>
<div class="am-header-right am-header-nav">
<a href="index.html" class="">
<i class="am-header-icon am-icon-home"></i>
</a>
</div>
</header>
<div class="am-cf cart-panel">
<div class="cart-list-panel">
<ul class="am-avg-sm-1 cart-panel-ul">
<li v-for="(item,index) in cartlist">
<div class="imgpanel"><a href="#"><img :src="[imgPath+'upload/'+item.goods.pic]" class="am-img-responsive" style="max-height:200px;"/></a></div>
<div class="infopanel">
<h3><a href="#">{{item.goods.name}}</a></h3>
<p>类型：{{item.goods.category.name}}</p>
<p>单价：<span class="red2 bold">￥{{item.goods.price}}</span> 元 X <input class="am-input-sm txt-qty" @change="changenum(item.id,index,$event)" type="number" :value="nums[index]" /></p>
<p><span class="am-fr"><a class="am-badge am-badge-danger am-round" :href="['javascript:deleteCart(\''+item.id+'\')']">删除</a></span></p>
</div>
</li>
</ul>
</div>
</div>
<div class="cart_foot">总价：<span class="red2 bold" id="total_amount">{{totalprice}}</span>元</span></div>
<div class="cart-tool">
<a class="am-btn am-btn-sm am-btn-success" href="javascript:history.go(-1);">
<i class="am-icon-chevron-left"></i>
返回
</a>
<a class="am-btn am-btn-sm am-btn-warning" href="javascript:addOrder()">
<i class="am-icon-shopping-cart"></i>
结账
</a>
</div>
<footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{}">
<hr data-am-widget="divider" style="" class="am-divider am-divider-default"/>
<div class="am-footer-miscs ">
<p>版权所有@2019.</p>
<p> </p>
</div>
</footer>
<nav-footer></nav-footer>
</div>
</body>
<script>
var container=new Vue({
el:"#container",
data:{
imgPath:_basePath,
uid:0,
cartlist:[],
nums:[],
totalprice:0
},mounted(){//网页加载读取
if(_ss.getItem("uid")!=null){
this.uid=_ss.getItem("uid");
}else{
this.uid=2;
}
//异步请求
axios.get(_basePath+"cart/jsonlist",{params:{"uid":this.uid}}).then(function(response){
container.cartlist=response.data;
//console.log(container.cartlist);
for(i=0;i<container.cartlist.length;i++){
container.nums.push(container.cartlist[i].gnum);
container.totalprice+=container.cartlist[i].goods.price*container.nums[i];
}
});
},methods:{
changenum(id,index,event){
var el = event.currentTarget;
axios.get(_basePath+"cart/jsonupdate",{params:{"id":id,"gnum":el.value}}).then(function(response){
location.href="cart.html";
});
}
}
});
function deleteCart(id){
axios.get(_basePath+"cart/jsondelete",{params:{"id":id}}).then(function(response){
myalert(response.data.data);
location.href="cart.html";
});
}
//点击购买
function addOrder(){
axios.get(_basePath+"orders/jsonadd",{params:{"uid":container.uid}}).then(function(response){
location.href="myorder.html";
});
}
</script>
</html>
这是网页。。。
购物车功能的html，异步获取商品信息，购物详情类型的