-
Notifications
You must be signed in to change notification settings - Fork 4
/
cart.html
168 lines (164 loc) · 8.99 KB
/
cart.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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta content="IE=dege,chrom=1" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<title>Cart</title>
<link href="css/base.css" rel="stylesheet">
<link href="css/checkout.css" rel="stylesheet">
<link href="css/modal.css" rel="stylesheet">
<style type="text/css">
.quentity input {
width: 40px;
padding: 5px 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="checkout">
<div id="app">
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-add" viewBox="0 0 32 32">
<title>add2</title>
<path class="path1" d="M15 17h-13.664c-0.554 0-1.002-0.446-1.002-1 0-0.552 0.452-1 1.002-1h13.664v-13.664c0-0.554 0.446-1.002 1-1.002 0.552 0 1 0.452 1 1.002v13.664h13.664c0.554 0 1.002 0.446 1.002 1 0 0.552-0.452 1-1.002 1h-13.664v13.664c0 0.554-0.446 1.002-1 1.002-0.552 0-1-0.452-1-1.002v-13.664z"></path>
</symbol>
<symbol id="icon-ok" viewBox="0 0 39 32">
<title>ok</title>
<path class="path1" d="M14.084 20.656l-7.845-9.282c-1.288-1.482-3.534-1.639-5.016-0.351s-1.639 3.534-0.351 5.016l10.697 12.306c1.451 1.669 4.057 1.623 5.448-0.096l18.168-22.456c1.235-1.527 0.999-3.765-0.528-5.001s-3.765-0.999-5.001 0.528l-15.573 19.337z"></path>
</symbol>
<symbol id="icon-edit" viewBox="0 0 32 32">
<title>edit</title>
<path class="path1" d="M25.599 11.292l-4.892-4.892 3.825-3.825 4.892 4.892-3.825 3.825zM4.732 23.308l3.959 3.959-5.939 1.98 1.98-5.939zM10.666 26.225l-4.892-4.892 13.425-13.425 4.892 4.892-13.425 13.425zM31.687 6.713l-6.4-6.4c-0.417-0.417-1.091-0.417-1.508 0l-20.267 20.267c-0.114 0.115-0.191 0.25-0.242 0.393-0.003 0.009-0.012 0.015-0.015 0.025l-3.2 9.6c-0.128 0.383-0.029 0.806 0.257 1.091 0.203 0.204 0.476 0.313 0.754 0.313 0.112 0 0.227-0.017 0.337-0.054l9.6-3.2c0.011-0.003 0.017-0.013 0.027-0.016 0.142-0.052 0.276-0.128 0.39-0.242l20.267-20.267c0.417-0.416 0.417-1.091 0-1.508v0z"></path>
</symbol>
<symbol id="icon-del" viewBox="0 0 26 32">
<title>delete</title>
<path class="path1" d="M17.723 28c0.543 0 0.984-0.448 0.984-1v-12c0-0.552-0.441-1-0.984-1s-0.985 0.448-0.985 1v12c0 0.552 0.441 1 0.985 1v0zM7.877 28c0.543 0 0.984-0.448 0.984-1v-12c0-0.552-0.441-1-0.984-1s-0.985 0.448-0.985 1v12c0 0.552 0.441 1 0.985 1v0zM12.8 28c0.543 0 0.985-0.448 0.985-1v-12c0-0.552-0.441-1-0.985-1s-0.984 0.448-0.984 1v12c0 0.552 0.441 1 0.984 1v0zM23.631 4h-5.908v-2c0-1.104-0.882-2-1.969-2h-5.908c-1.087 0-1.969 0.896-1.969 2v2h-5.908c-1.087 0-1.969 0.896-1.969 2v2c0 1.104 0.882 2 1.969 2v18c0 2.208 1.765 4 3.939 4h13.784c2.174 0 3.938-1.792 3.938-4v-18c1.087 0 1.969-0.896 1.969-2v-2c0-1.104-0.882-2-1.969-2v0zM9.846 3c0-0.552 0.441-1 0.984-1h3.938c0.544 0 0.985 0.448 0.985 1v1h-5.908v-1zM21.662 28c0 1.104-0.882 2-1.969 2h-13.784c-1.087 0-1.97-0.896-1.97-2v-18h17.723v18zM22.646 8h-19.692c-0.543 0-0.985-0.448-0.985-1s0.441-1 0.985-1h19.692c0.543 0 0.984 0.448 0.984 1s-0.441 1-0.984 1v0z"></path>
</symbol>
<symbol id="icon-clock" viewBox="0 0 32 32">
<title>clock</title>
<path class="path1" d="M29.333 16c0-7.364-5.97-13.333-13.333-13.333s-13.333 5.97-13.333 13.333c0 7.364 5.97 13.333 13.333 13.333s13.333-5.97 13.333-13.333v0 0 0 0 0 0zM0 16c0-8.837 7.163-16 16-16s16 7.163 16 16c0 8.837-7.163 16-16 16s-16-7.163-16-16zM14.667 14.667v1.333h2.667v-10.667h-2.667v9.333zM24 18.667h1.333v-2.667h-10.667v2.667h9.333z"></path>
</symbol>
</defs>
</svg>
<div class="container">
<div class="cart">
<div class="checkout-title">
<span>购物车</span>
</div>
<!-- table -->
<div class="item-list-wrap">
<div class="cart-item">
<div class="cart-item-head">
<ul>
<li>商品信息</li>
<li>商品金额</li>
<li>商品数量</li>
<li>总金额</li>
<li>编辑</li>
</ul>
</div>
<ul class="cart-item-list">
<li v-for="(item,index) in productList">
<div class="cart-tab-1">
<div class="cart-item-check">
<a href="javascript:void 0" class="item-check-btn" @click="seletcedPro(item)" :class="{'check':item.checked}">
<svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
</a>
</div>
<div class="cart-item-pic">
<img :src="item.productImage" alt="烟">
</div>
<div class="cart-item-title">
<div class="item-name">{{item.productName}}</div>
</div>
<div class="item-include" >
<dl>
<dt>赠送:</dt>
<dd v-for="part in item.parts">{{part.partsName}}</dd>
</dl>
</div>
</div>
<div class="cart-tab-2">
<div class="item-price">{{item.productPrice | fomatMoney}}</div>
</div>
<div class="cart-tab-3">
<div class="item-quantity">
<div class="select-self select-self-open">
<div class="quantity">
<a href="javascript:void 0" @click="changMoney(item,0)">-</a>
<input type="text" :value="item.productQuantity" disabled>
<a href="javascript:void 0" @click="changMoney(item,1)">+</a>
</div>
</div>
<div class="item-stock">有货</div>
</div>
</div>
<div class="cart-tab-4">
<div class="item-price-total">{{item.productPrice*item.productQuantity | fomatMoney}}</div>
</div>
<div class="cart-tab-5">
<div class="cart-item-operation">
<a href="javascript:void 0" class="item-edit-btn" @click="delConfirm(item)">
<svg class="icon icon-del"><use xlink:href="#icon-del" ></use></svg>
</a>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- footer -->
<div class="cart-foot-wrap">
<div class="cart-foot-l">
<div class="item-all-check">
<a href="javascript:void 0">
<span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAll(true)">
<svg class="icon icon-ok"><use xlink:href="#icon-ok"></use></svg>
</span>
<span>全选</span>
</a>
</div>
<div class="item-all-del">
<a href="javascript:void 0" class="item-del-btn" @click="checkAll(false)">
<span>取消全选</span>
</a>
</div>
</div>
<div class="cart-foot-r">
<div class="item-total">
Item total: <span class="total-price">{{totalPrice | fomatMoney}}</span>
</div>
<div class="next-btn-wrap">
<a href="address.html" class="btn btn--red" style="width: 200px">结账</a>
</div>
</div>
</div>
</div>
</div>
<div class="md-modal modal-msg md-modal-transition" id="showModal" :class="{'md-show':delFlag}">
<div class="md-modal-inner">
<div class="md-top">
<button class="md-close" @click="delFlag=false">关闭</button>
</div>
<div class="md-content">
<div class="confirm-tips">
<p id="cusLanInfo">你确认删除此订单信息吗?</p>
</div>
<div class="btn-wrap col-2">
<button class="btn btn--m" id="btnModalConfirm" @click="delSure">Yes</button>
<button class="btn btn--m btn--red" id="btnModalCancel" @click="delFlag=false">No</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="js/lib/vue-resource.js"></script>
<script src="js/cart.js"></script>
</body>
</html>