-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshoppingCartDemo.html
56 lines (53 loc) · 2.06 KB
/
shoppingCartDemo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>我的购物车</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/components/component-shopping-cart-demo.css">
</head>
<body>
<div id="shoppingCart" v-cloak>
<div class="item" v-if="itemPriceData.length>0&!ifLoading">
<table class="shopping-cart-table">
<thead>
<tr>
<th>序号</th>
<th>图片</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
</tr>
</thead>
<tbody>
<tr v-for="(itemList,index) in itemPriceData ">
<td>
<button @click="removeItem(index)">{{index+1}}</button>
</td>
<td class="item-pic">
<img :src='"https://img11.360buyimg.com/n2/"+itemList.productLogo' alt="">
</td>
<td class="item-name">{{itemList.productName}}</td>
<td>¥{{itemList.currentPrice}}</td>
<td class="item-count">
<button @click="reduceCount(index)"
:disabled="itemList.isBuy==1">-
</button>
{{itemList.isBuy}}
<button @click="addCount(index)">+</button>
</td>
<td>¥{{itemList.isBuy*itemList.currentPrice}}</td>
</tr>
</tbody>
</table>
<div class="total-price">总价格：¥{{totalPrice}}</div>
</div>
<div class="empty-box" v-else-if="itemPriceData.length==0&&!ifLoading">穷*！购物车里都没东西，跟咸鱼有什么分别！</div>
<div class="empty-box" v-if='ifLoading'>loading</div>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="js/shoppingCartDemo.js"></script>
</body>
</html>