-
Notifications
You must be signed in to change notification settings - Fork 43
/
Copy pathindex.html
109 lines (103 loc) · 5.66 KB
/
index.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue shopping cart</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="g-panel">
<div class="device" id="page-list">
<header><span class="header-title">商品列表</span></header>
<div class="page">
<div class="tab-wrap">
<ul class="cate-tab">
<li class="cate" v-bind:class="{'tab-active': cate_index === index}" v-for="(item, index) in cate" @click="toggleCate(index)">{{ item.des }}</li>
</ul>
</div>
<ul class="filter-bar">
<li class="filter-opt" v-bind:class="{'filter-active': filter_index === index, 'filter-price': item.method === 'sortPrice', 'price-down': price_isAsc, 'price-up': !price_isAsc}" v-for="(item, index) in sortMethods" @click="sortBy(item.method)">{{ item.name }}</li>
</ul>
<ul class="goods-list">
<li class="goods-item" v-for="(item, index) in list">
<div class="goods-img">
<img v-bind:src="item.img" v-bind:alt="item.name">
<div class="flag" v-if="item.ishot">热</div>
</div>
<div class="goods-info">
<p class="goods-title">{{ item.name }}</p>
<div class="goods-price">
<span>¥<b>{{ item.price }}</b></span>
</div>
<span class="des">{{ item.sales }}人付款</span>
<span class="save" @click="addToCart(item)">+</span>
</div>
</li>
</ul>
</div>
</div>
<div class="device" id="page-cart">
<header>
<span class="header-title">购物清单</span>
<span class="header-edit" @click="toggleDelBtn">
<span v-show="!delFlag">编辑</span>
<span v-show="delFlag">完成</span>
</span>
</header>
<div class="page">
<div class="empty-states" v-if="cart.length === 0">
<span>这里是空的，快去逛逛吧</span>
</div>
<ul class="goods-list cart-list" v-else>
<li class="goods-item" v-for="(item, index) in cart">
<div class="item-selector">
<div class="icon-selector" v-bind:class="{'selector-active': item.checked}" @click="selectGoods(item)">
<svg t="1504061791962" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2922" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
<path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z"
fill="#ffffff" p-id="2923"></path>
</svg>
</div>
</div>
<div class="goods-img">
<img v-bind:src="item.img" v-bind:alt="item.name">
</div>
<div class="goods-info">
<p class="goods-title">{{ item.name }}</p>
<div class="goods-price">
<span>¥<b>{{ item.price }}</b></span>
</div>
<span class="des">库存{{ item.stock }}件</span>
<div class="goods-num">
<div class="num-btn" @click="changeQty(true, item)">+</div>
<div class="show-num">{{ item.quantity }}</div>
<div class="num-btn" @click="changeQty(false, item)">-</div>
</div>
</div>
</li>
</ul>
</div>
<div class="action-bar" v-bind:class="{ 'del-box': delFlag }">
<!-- del-box -->
<div class="g-selector" @click="checkAll">
<div class="item-selector">
<div class="icon-selector" v-bind:class="{'selector-active': checkAllFlag}">
<svg t="1504061791962" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2922" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
<path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z"
fill="#ffffff" p-id="2923"></path>
</svg>
</div>
</div>
<span>全选</span>
</div>
<div class="action-btn buy-btn">去结算({{ selectedNum }})</div>
<div class="action-btn del-btn" @click="delGoods">删除({{ selectedNum }})</div>
<div class="total">合计：<span>¥<b>{{ totalPrice }}</b></span></div>
</div>
</div>
</div>
<!-- <script src="https://unpkg.com/[email protected]"></script> -->
<script src="vue.min.js"></script>
<script src="app.js"></script>
</body>
</html>