3 |
29 |
30 |
31 |
46 |
47 |
82 |
--------------------------------------------------------------------------------
/src/components/head.vue:
--------------------------------------------------------------------------------
1 |
2 | -
4 |
5 |
-
6 |
7 | 8 |9 |
坚果 Pro 210 | 11 | 12 |¥ 1,799.00 起13 | 14 | 15 |
16 | -
17 |
18 | 19 |20 |
坚果 Pro21 | 22 | 23 |¥ 1,299.00 起24 | 25 | 26 |
27 |
3 |
42 |
59 |
60 |
61 |
62 |
90 |
91 |
--------------------------------------------------------------------------------
/src/components/car-panel.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
52 |
10 |
51 |
11 |
14 | 购物车为空
12 |您还没有选购任何商品，现在前往商城选购吧!
13 |
15 |
50 |
16 |
42 |
49 | -
17 |
-
18 | 19 |39 |20 |38 |21 |23 |
22 |
24 |36 |25 |35 |26 | {{item.title}} 27 |
28 |29 | {{item.spec_json.show_name}} 30 |
31 |32 | {{item.price}}x{{item.count}} 33 |
34 |删除37 |
40 |
59 | ![]()
60 |
61 |
3 |
32 |
33 |
34 |
57 |
58 |
214 |
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | import axios from 'axios'
4 | Vue.use(Vuex);
5 | let store= new Vuex.Store({
6 | state:{
7 | carPanelData:[],
8 | orderBy:{},
9 | goods:[],
10 | ball:{
11 | el:null,
12 | show:false,
13 | img:''
14 | },
15 | showCar:false,
16 | maxOff:false,
17 | receiveInfo: [
18 | {
19 | 'name': '王某某',
20 | 'phone': '13811111111',
21 | 'areaCode': '010',
22 | 'landLine': '64627856',
23 | 'provinceId': 110000,
24 | 'province': '北京市',
25 | 'cityId': 110100,
26 | 'city': '市辖区',
27 | 'countyId': 110106,
28 | 'county': '海淀区',
29 | 'add': '上地十街辉煌国际西6号楼319室',
30 | 'default': true,
31 | 'checked':true
32 | },
33 | {
34 | 'name': '李某某',
35 | 'phone': '13811111111',
36 | 'areaCode': '010',
37 | 'landLine': '64627856',
38 | 'provinceId': 110000,
39 | 'province': '北京市',
40 | 'cityId': 110100,
41 | 'city': '市辖区',
42 | 'countyId': 110106,
43 | 'county': '海淀区',
44 | 'add': '上地十街辉煌国际东6号楼350室',
45 | 'default': false,
46 | 'checked':false
47 | }],
48 | orderData:[],
49 | checkGoods:[]
50 | },
51 | actions:{
52 | init({commit}){
53 | axios.get('/api/itemsData').then(res=>{
54 | if(res.data.erron==0){
55 | commit('good',res.data.data)
56 | }
57 | })
58 | }
59 | },
60 | mutations:{
61 | good(state,data){
62 | state.goods=data
63 | },
64 | add(state,data){
65 | let boo=true;
66 | state.carPanelData.forEach(item=>{
67 | if(item.sku_id==data[0].sku_id){
68 | item.count+=data[1]
69 | if(item.count>item.limit_num){
70 | state.maxOff=true;
71 | item.count=item.limit_num
72 | boo=false
73 | return
74 | }
75 | state.showCar=true;
76 | state.ball.el=event.path[0];
77 | state.ball.show=true;
78 | state.ball.img=data[0].ali_image
79 | boo=false
80 | }
81 | })
82 | if(boo){
83 | let goods=data[0]
84 | Vue.set(goods,'count',data[1]);
85 | Vue.set(goods,'checked',true);
86 | state.carPanelData.push(goods)
87 | state.showCar=true;
88 | state.ball.el=event.path[0];
89 | state.ball.show=true;
90 | state.ball.img=data[0].ali_image
91 | }
92 | },
93 | dele(state,id){
94 | state.carPanelData.forEach((item,index)=>{
95 | if(item.sku_id==id){
96 | state.carPanelData.splice(index,1)
97 | }
98 | })
99 | },
100 | carShow(state){
101 | state.showCar=true
102 | },
103 | carHide(state){
104 | state.showCar=false;
105 | },
106 | orderBy(state,data){
107 | state.orderBy=data
108 | },
109 | submitReceive (state,data) {
110 | if(data[0].default){
111 | state.receiveInfo.forEach((receive,index) => {
112 | receive.default = false
113 | receive.checked = false
114 | })
115 | }
116 | if(data[1]==null){
117 | state.receiveInfo.push(data[0])
118 | }else{
119 | console.log(data[0])
120 | state.receiveInfo[data[1]] = data[0]
121 | }
122 | },
123 | submitOrder(state,data){
124 | let i=state.carPanelData.length;
125 | while(i--){
126 | state.carPanelData.forEach((item,index)=>{
127 | if(item.checked){
128 | state.carPanelData.splice(index,1)
129 | }
130 | })
131 | }
132 | state.orderData.unshift(data);
133 | state.receiveInfo.forEach((receive) => {
134 | receive.checked = receive.default
135 | })
136 | },
137 | addClick(state,id){
138 | state.carPanelData.forEach(item=>{
139 | if(item.sku_id==id){
140 | if(item.count>=item.limit_num) return
141 | item.count++
142 | }
143 | })
144 | },
145 | defauClick(state,id){
146 | state.carPanelData.forEach(item=>{
147 | if(item.sku_id==id){
148 | if(item.count==1) return
149 | item.count--
150 | }
151 | })
152 | },
153 | allCheck(state,isChecked){
154 | state.carPanelData.forEach(item=>{
155 | if(isChecked){
156 | item.checked=false
157 | }else{
158 | item.checked=true
159 | }
160 | })
161 | },
162 | onlyCheck(state,id){
163 | state.carPanelData.forEach(item=>{
164 | if(item.sku_id==id){
165 | item.checked=!item.checked
166 | }
167 | })
168 | },
169 | checkGoods(state){
170 | state.carPanelData.forEach((item,index)=>{
171 | if(item.checked){
172 | state.checkGoods.push(item)
173 | }
174 | })
175 | },
176 | allDele(state){
177 | let i=state.carPanelData.length;
178 | while(i--){
179 | if(state.carPanelData[i].checked){
180 | state.carPanelData.splice(i,1)
181 | }
182 | }
183 | }
184 | },
185 | getters:{
186 | totalCount(state){
187 | let total=0;
188 | state.carPanelData.forEach(item=>{
189 | total+=item.count
190 | })
191 | return total
192 | },
193 | checkCount(state){
194 | let count=0;
195 | state.carPanelData.forEach(item=>{
196 | if(item.checked){
197 | count+=item.count
198 | }
199 | })
200 | return count
201 | },
202 | checkPrice(state){
203 | let price=0;
204 | state.carPanelData.forEach(item=>{
205 | if(item.checked){
206 | price+=item.count*item.price
207 | }
208 | })
209 | return price
210 | },
211 | priceCount(state){
212 | let total=0;
213 | state.carPanelData.forEach(item=>{
214 | total+=item.count*item.price
215 | })
216 | return total
217 | },
218 | isChecked(state){
219 | let checked=true;
220 | state.carPanelData.forEach(item=>{
221 | if(!item.checked){
222 | checked=false
223 | }
224 | })
225 | return checked
226 | }
227 | }
228 |
229 | })
230 | export default store
231 |
--------------------------------------------------------------------------------
/src/components/home.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 | ![]()
5 |
6 |
31 | {{item.name}}
7 |{{item.name_title}}
8 |
9 |
17 | -
10 |
-
11 |
12 |
13 | 14 |
15 |
18 |
19 | 查看详情
20 |
21 | 加入购物车
22 |
23 |
24 | ¥{{item.price}}
25 |
26 |
27 |
28 |
30 |
3 |
21 |
22 |
23 |
24 |
50 |
274 |
--------------------------------------------------------------------------------
/src/components/item.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
65 |
66 |
129 |
428 |
--------------------------------------------------------------------------------
/src/assets/css/header.css:
--------------------------------------------------------------------------------
1 | .nav-global {
2 | height: 100px;
3 | background-color: #000;
4 | }
5 |
6 | .container {
7 | height: 100%;
8 | width: 1220px;
9 | margin: 0 auto;
10 | }
11 |
12 |
13 | /*logo*/
14 |
15 | .nav-logo {
16 | float: left;
17 | padding-top: 25px;
18 | }
19 |
20 | .nav-logo a {
21 | display: inline-block;
22 | width: 50px;
23 | height: 50px;
24 | background: url(../img/global-logo.png) no-repeat;
25 | background-size: cover;
26 | }
27 |
28 |
29 | /*导航*/
30 |
31 | .nav-global .nav-list {
32 | float: right;
33 | line-height: 28px;
34 | margin: 36px 23px 0 0;
35 | }
36 |
37 | .nav-global .nav-list li {
38 | float: left;
39 | }
40 |
41 | .nav-global .nav-list a {
42 | color: #c8c8c8;
43 | display: inline-block;
44 | font-size: 14px;
45 | padding: 0 25px;
46 | }
47 |
48 | .nav-global .nav-list a:hover {
49 | color: #fff;
50 | }
51 |
52 | .nav-aside {
53 | box-sizing: border-box;
54 | float: right;
55 | margin-top: 38px;
56 | border-left: 1px solid rgba(255, 255, 255, .2);
57 | }
58 |
59 | .nav-aside>li {
60 | position: relative;
61 | float: left;
62 | }
63 |
64 | .nav-aside>li>a {
65 | font-size: 0;
66 | }
67 |
68 |
69 | /*用户列表*/
70 |
71 | .nav-user {
72 | margin-left: 40px;
73 | width: 36px;
74 | }
75 |
76 | .nav-user>a:before {
77 | content: " ";
78 | position: absolute;
79 | left: 8px;
80 | width: 20px;
81 | top: 0;
82 | height: 20px;
83 | background: url(../img/account-icon.png) -155px 0;
84 | background-size: 240px 107px;
85 | transition: none;
86 | }
87 |
88 | .nav-user:hover>a:before {
89 | background-position: -5px 0;
90 | }
91 |
92 | .nav-user-wrapper {
93 | position: absolute;
94 | z-index: 30;
95 | padding-top: 18px;
96 | opacity: 0;
97 | visibility: hidden;
98 | top: -3000px;
99 | width: 168px;
100 | left: 50%;
101 | margin-left: -70px;
102 | }
103 |
104 | .nav-user:hover .nav-user-wrapper {
105 | top: 18px;
106 | visibility: visible;
107 | opacity: 1;
108 | transition: opacity .15s ease-out;
109 | }
110 |
111 | .nav-user-list {
112 | position: relative;
113 | width: 168px;
114 | padding-top: 20px;
115 | background: #fff;
116 | border: 1px solid #d6d6d6;
117 | border-color: rgba(0, 0, 0, .08);
118 | border-radius: 8px;
119 | box-shadow: 0 20px 40px rgba(0, 0, 0, .15)
120 | }
121 |
122 | .nav-user-list:before {
123 | position: absolute;
124 | content: " ";
125 | background: url(../img/account-icon.png) no-repeat -49px -43px;
126 | background-size: 240px 107px;
127 | width: 20px;
128 | height: 8px;
129 | left: 50%;
130 | top: -8px;
131 | margin-left: -25px;
132 | }
133 |
134 | .nav-user-avatar>dd {
135 | display: block;
136 | position: relative;
137 | margin: 0 auto;
138 | width: 46px;
139 | height: 46px;
140 | margin-bottom: 8px;
141 | }
142 |
143 | .nav-user-avatar>dd:before {
144 | content: "";
145 | position: absolute;
146 | left: 0;
147 | right: 0;
148 | top: 0;
149 | bottom: 0;
150 | border-radius: 50%;
151 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
152 | }
153 |
154 | .nav-user-avatar span {
155 | border-radius: 50%;
156 | display: block;
157 | width: 100%;
158 | height: 100%;
159 | background: url(../img/user-avatar.png) no-repeat;
160 | background-size: contain;
161 | }
162 |
163 | .nav-user-avatar dt {
164 | margin-bottom: 16px;
165 | font-size: 12px;
166 | line-height: 1.5;
167 | text-align: center;
168 | color: #757575;
169 | }
170 |
171 | .nav-user-list li a {
172 | position: relative;
173 | border-top: 1px solid #f5f5f5;
174 | display: block;
175 | padding-left: 54px;
176 | line-height: 44px;
177 | height: 44px;
178 | color: #616161;
179 | font-size: 12px;
180 | }
181 |
182 | .nav-user-list li a:hover {
183 | background-color: #fafafa;
184 | }
185 |
186 | .nav-user-list li a:before {
187 | background: url(../img/account-icon.png) no-repeat;
188 | background-size: 240px 107px;
189 | content: ' ';
190 | display: block;
191 | position: absolute;
192 | left: 22px;
193 | top: 50%;
194 | width: 20px;
195 | height: 20px;
196 | margin-top: -8px;
197 | }
198 |
199 | .nav-user-list li.order a:before {
200 | background-position: 0 -44px;
201 | }
202 |
203 | .nav-user-list li.support a:before {
204 | background-position: -20px -44px;
205 | }
206 |
207 | .nav-user-list li.coupon a:before {
208 | background-position: -20px -84px;
209 | }
210 |
211 | .nav-user-list li.information a:before {
212 | background-position: 0 -64px;
213 | }
214 |
215 | .nav-user-list li.address a:before {
216 | background-position: -20px -64px;
217 | }
218 |
219 | .nav-user-list li.logout a:before {
220 | background-position: 0 -84px;
221 | }
222 |
223 |
224 | /*购物车*/
225 |
226 | .nav-cart {
227 | margin-left: 21px;
228 | width: 61px;
229 | }
230 |
231 | .nav-cart>a {
232 | display: block;
233 | position: absolute;
234 | left: 0;
235 | right: 0;
236 | top: 0;
237 | bottom: 0;
238 | z-index: 1;
239 | }
240 |
241 | .nav-cart>a:before {
242 | content: ' ';
243 | position: absolute;
244 | left: 0;
245 | top: 0;
246 | bottom: 0;
247 | width: 30px;
248 | height: 20px;
249 | background: url(../img/account-icon.png) -150px -22px;
250 | background-size: 240px 107px;
251 | }
252 |
253 | .nav-cart:hover>a:before {
254 | background-position: 0 -22px;
255 | }
256 |
257 | .cart-empty-num {
258 | position: relative;
259 | margin-left: 31px;
260 | margin-top: -1px;
261 | min-width: 30px;
262 | text-indent: 0;
263 | line-height: 20px;
264 | }
265 |
266 | .cart-empty-num i {
267 | font-style: normal;
268 | display: inline-block;
269 | width: 20px;
270 | height: 20px;
271 | line-height: 20px;
272 | border-radius: 10px;
273 | color: #fff;
274 | font-size: 12px;
275 | text-align: center;
276 | background: #969696;
277 | background-image: linear-gradient(#A4A4A4, #909090);
278 | box-shadow: inset 0 0 1px #838383, 0 1px 2px #838383;
279 | }
280 |
281 | .cart-num i {
282 | background: #eb746b;
283 | background-image: linear-gradient(#eb746b, #e25147);
284 | box-shadow: inset 0 0 1px rgba(255, 255, 255, .15), 0 1px 2px rgba(255, 255, 255, .15);
285 | }
286 |
287 | .nav-cart-wrapper {
288 | position: absolute;
289 | right: 0;
290 | padding-top: 18px;
291 | top: 22px;
292 | z-index: 30;
293 | width: 360px;
294 | }
295 |
296 | .nav-cart-wrapper:before {
297 | position: absolute;
298 | content: ' ';
299 | background: url(../img/account-icon.png) no-repeat -49px -43px;
300 | -webkit-background-size: 240px 107px;
301 | background-size: 240px 107px;
302 | width: 20px;
303 | height: 8px;
304 | right: 34px;
305 | top: 10px;
306 | z-index: 11;
307 | }
308 |
309 | .nav-cart.active .nav-cart-wrapper {
310 | display: block;
311 | top: 18px;
312 | opacity: 1;
313 | visibility: visible;
314 | }
315 |
316 | .nav-cart-list {
317 | position: relative;
318 | z-index: 10;
319 | background: #fff;
320 | border: 0 solid rgba(255, 255, 255, .01);
321 | border-radius: 8px;
322 | box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 20px 40px rgba(0, 0, 0, .15);
323 | overflow: hidden;
324 | }
325 |
326 | .nav-cart-list .empty {
327 | overflow: hidden;
328 | height: 134px;
329 | padding-top: 180px;
330 | background: url(../img/cart-empty.png) center 90px no-repeat;
331 | background-size: auto 62px;
332 | text-align: center;
333 | }
334 |
335 | .nav-cart-list .empty h3 {
336 | font-size: 18px;
337 | color: #333;
338 | margin-bottom: 7px;
339 | }
340 |
341 | .nav-cart-list .empty p {
342 | font-size: 12px;
343 | color: #bcbcbc;
344 | }
345 |
346 | .nav-cart-list .full {
347 | border-radius: 8px;
348 | overflow: hidden;
349 | }
350 |
351 | .nav-cart-list .nav-cart-items {
352 | max-height: 665px;
353 | overflow-x: hidden;
354 | overflow-y: auto;
355 | }
356 |
357 | .nav-cart-list .cart-item {
358 | height: 120px;
359 | width: 100%;
360 | overflow: hidden;
361 | border-top: 1px solid #f0f0f0;
362 | }
363 |
364 | .nav-cart-list .cart-item:first-child {
365 | border-top: none;
366 | border-radius: 8px 8px 0 0;
367 | overflow: hidden;
368 | }
369 |
370 | .nav-cart-list .cart-item-inner {
371 | height: 80px;
372 | padding: 20px;
373 | position: relative;
374 | }
375 |
376 | .nav-cart-list .item-thumb {
377 | position: relative;
378 | float: left;
379 | width: 80px;
380 | height: 80px;
381 | border-radius: 3px;
382 | }
383 |
384 | .nav-cart-list .item-thumb:before {
385 | content: "";
386 | position: absolute;
387 | left: 0;
388 | right: 0;
389 | top: 0;
390 | bottom: 0;
391 | z-index: 2;
392 | border: 1px solid #f0f0f0;
393 | border: 0 solid transparent;
394 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
395 | border-radius: 3px;
396 | }
397 |
398 | .nav-cart-list .item-thumb img {
399 | display: block;
400 | width: 80px;
401 | height: 80px;
402 | border-radius: 3px;
403 | overflow: hidden;
404 | }
405 |
406 | .nav-cart-list .item-desc {
407 | margin-left: 98px;
408 | display: table;
409 | width: 205px;
410 | height: 80px;
411 | }
412 |
413 | .nav-cart-list .cart-cell {
414 | display: table-cell;
415 | vertical-align: middle;
416 | }
417 |
418 | .nav-cart-list .item-desc h4,
419 | .nav-cart-list .item-desc h4 a {
420 | color: #000;
421 | }
422 |
423 | .nav-cart-list .item-desc h4 {
424 | width: 185px;
425 | overflow: hidden;
426 | word-break: keep-all;
427 | white-space: nowrap;
428 | text-overflow: ellipsis;
429 | font-size: 14px;
430 | line-height: 16px;
431 | margin-bottom: 10px;
432 | }
433 |
434 | .nav-cart-list .item-desc .attrs {
435 | font-size: 0;
436 | }
437 |
438 | .nav-cart-list .item-desc .attrs span {
439 | position: relative;
440 | /*display: inline-block;*/
441 | margin-right: 20px;
442 | font-size: 14px;
443 | line-height: 14px;
444 | color: #999;
445 | }
446 |
447 | .nav-cart-list .item-desc .attrs span:last-child {
448 | margin-right: 0;
449 | }
450 |
451 | .nav-cart-list .item-desc h6 {
452 | color: #cacaca;
453 | font-size: 12px;
454 | line-height: 14px;
455 | margin-top: 20px;
456 | }
457 |
458 | .nav-cart-list .del-btn {
459 | cursor: pointer;
460 | display: none;
461 | overflow: hidden;
462 | width: 20px;
463 | height: 20px;
464 | position: absolute;
465 | right: 20px;
466 | top: 50%;
467 | margin-top: -11px;
468 | background: url(../img/account-icon.png) -50px -60px no-repeat;
469 | background-size: 240px 107px;
470 | text-indent: -9999em;
471 | }
472 |
473 | .nav-cart-list .cart-item:hover .del-btn {
474 | display: block;
475 | }
476 |
477 | .nav-cart-list .del-btn:hover {
478 | background-position: -75px -60px;
479 | }
480 |
481 | .nav-cart-list .nav-cart-total {
482 | position: relative;
483 | padding: 20px;
484 | height: 40px;
485 | background: #fafafa;
486 | border-top: 1px solid #f0f0f0;
487 | border-radius: 0 0 8px 8px;
488 | box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5), 0 -3px 8px rgba(0, 0, 0, .04);
489 | background: linear-gradient(#fafafa, #f5f5f5);
490 | }
491 |
492 | .nav-cart-list .nav-cart-total p {
493 | margin-bottom: 4px;
494 | line-height: 16px;
495 | font-size: 12px;
496 | color: #c1c1c1;
497 | }
498 |
499 | .nav-cart-list .nav-cart-total h5 {
500 | line-height: 20px;
501 | font-size: 14px;
502 | color: #6f6f6f;
503 | }
504 |
505 | .nav-cart-list .nav-cart-total h5 span {
506 | font-size: 18px;
507 | color: #de4037;
508 | display: inline-block;
509 | font-weight: 700;
510 | }
511 |
512 | .nav-cart-list .nav-cart-total h5 span:first-child {
513 | font-size: 12px;
514 | margin-right: 5px;
515 | }
516 |
517 | .nav-cart-list .nav-cart-total h5 span {
518 | font-size: 18px;
519 | color: #de4037;
520 | display: inline-block;
521 | font-weight: 700;
522 | }
523 |
524 | .nav-cart-list .nav-cart-total h6 {
525 | position: absolute;
526 | right: 20px;
527 | top: 20px;
528 | width: 108px;
529 | }
530 |
531 | .nav-aside .nav-cart-btn {
532 | display: block;
533 | height: 38px;
534 | background: #688fe8;
535 | background: linear-gradient(#688fe8, #5079e1);
536 | border: 1px solid #5c81e3;
537 | border-radius: 6px;
538 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 0, 0, .2);
539 | line-height: 38px;
540 | text-align: center;
541 | color: #FFF;
542 | text-shadow: 0 -1px 0 rgba(0, 0, 0, .15)
543 | }
544 |
545 |
546 | /*次导航*/
547 |
548 | .nav-sub {
549 | position: relative;
550 | z-index: 20;
551 | height: 90px;
552 | }
553 |
554 | .nav-sub-wrapper {
555 | padding: 31px 0;
556 | height: 28px;
557 | position: relative;
558 | }
559 |
560 | .nav-sub .nav-list {
561 | float: left;
562 | height: 28px;
563 | line-height: 28px;
564 | }
565 |
566 | .nav-sub .nav-list li {
567 | position: relative;
568 | float: left;
569 | padding-left: 2px;
570 | }
571 |
572 | .nav-sub .nav-list li:first-child {
573 | padding-left: 0;
574 | }
575 |
576 | .nav-sub .nav-list li:before {
577 | content: ' ';
578 | position: absolute;
579 | left: 0;
580 | top: 13px;
581 | width: 2px;
582 | height: 2px;
583 | background: #bdbdbd;
584 | }
585 |
586 | .nav-sub .nav-list li:first-child:before {
587 | display: none;
588 | }
589 |
590 | .nav-sub .nav-list li a {
591 | display: block;
592 | padding: 0 20px;
593 | color: #666;
594 | }
595 |
596 | .nav-sub .nav-list li:first-child a {
597 | padding-left: 10px;
598 | }
599 |
600 | .nav-sub .nav-list li.active a {
601 | font-weight: 700;
602 | }
603 |
604 | .nav-sub .nav-list li a:hover {
605 | color: #6b95ea;
606 | }
607 | .nav-global .addcart-mask{
608 | position: absolute;
609 | left: 0;
610 | top: -5px;
611 | padding: 0;
612 | width: 32px;
613 | height: 32px;
614 | pointer-events: none;
615 | z-index: 240;
616 | transform: translate3d(0,0,0);
617 | }
618 | .nav-global .addcart-mask .mask-item{
619 | pointer-events: none;
620 | width: 32px;
621 | height: 32px;
622 | box-sizing: border-box;
623 | overflow: hidden;
624 | border-radius: 50%;
625 | background: #fff;
626 | box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 3px 8px rgba(0,0,0,.1);
627 | background-size: contain;
628 | transform: translate3d(0,0,0);
629 | }
630 |
--------------------------------------------------------------------------------
/data.json:
--------------------------------------------------------------------------------
1 | {
2 | "goodsData" :[
3 | {
4 | "id": 1000271,
5 | "name": "坚果 Pro 软胶保护套",
6 | "name_title": "TPU 环保材质、耐磨、耐油、耐久性强",
7 | "price": 49,
8 | "sku_info": [
9 | {
10 | "sku_id": 100027101,
11 | "title": "坚果 Pro 软胶保护套",
12 | "sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
13 | "ali_image": "http://image.smartisanos.cn/resource/902befd5f32a8caf4ca79b55d39ee25a.jpg",
14 | "price": 49,
15 | "limit_num": 5,
16 | "spec_json": {
17 | "image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
18 | "show_name": "红色"
19 | }
20 | },
21 | {
22 | "sku_id": 100027102,
23 | "title": "坚果 Pro 软胶保护套",
24 | "sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
25 | "ali_image": "http://image.smartisanos.cn/resource/554da94d8e4f84f03e0015fd1c997f46.jpg",
26 | "price": 49,
27 | "limit_num": 5,
28 | "spec_json": {
29 | "image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
30 | "show_name": "黑色"
31 | }
32 | },
33 | {
34 | "sku_id": 100027103,
35 | "title": "坚果 Pro 软胶保护套",
36 | "sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
37 | "ali_image": "http://image.smartisanos.cn/resource/84b58718b8f8da3c08e0931e19fdc62e.png",
38 | "price": 49,
39 | "limit_num": 5,
40 | "spec_json": {
41 | "image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
42 | "show_name": "巧克力色"
43 | }
44 | },
45 | {
46 | "sku_id": 100027104,
47 | "title": "坚果 Pro 软胶保护套",
48 | "sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
49 | "ali_image": "http://image.smartisanos.cn/resource/b20055215ae3db0f2c8b7ba4db68866f.png",
50 | "price": 49,
51 | "limit_num": 5,
52 | "spec_json": {
53 | "image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
54 | "show_name": "浅金色"
55 | }
56 | }]
57 | },
58 | {
59 | "id": 1000299,
60 | "name": "Smartisan 快充移动电源 10000mAh",
61 | "name_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
62 | "price": 199,
63 | "sku_info": [{
64 | "sku_id": 100029901,
65 | "title": "Smartisan 快充移动电源 10000mAh",
66 | "sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
67 | "ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
68 | "price": 199,
69 | "limit_num": 1,
70 | "spec_json": {
71 | "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
72 | "show_name": "灰色"
73 | }
74 | }]
75 | },
76 | {
77 | "id": 1000299,
78 | "name": "Smartisan 快充移动电源 10000mAh",
79 | "name_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
80 | "price": 199,
81 | "sku_info": [{
82 | "sku_id": 100029901,
83 | "title": "Smartisan 快充移动电源 10000mAh",
84 | "sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
85 | "ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
86 | "price": 199,
87 | "limit_num": 1,
88 | "spec_json": {
89 | "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
90 | "show_name": "灰色"
91 | }
92 | }]
93 | },
94 | {
95 | "id": 1000299,
96 | "name": "Smartisan 快充移动电源 10000mAh",
97 | "name_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
98 | "price": 199,
99 | "sku_info": [{
100 | "sku_id": 100029901,
101 | "title": "Smartisan 快充移动电源 10000mAh",
102 | "sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
103 | "ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
104 | "price": 199,
105 | "limit_num": 1,
106 | "spec_json": {
107 | "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
108 | "show_name": "灰色"
109 | }
110 | }]
111 | },
112 | {
113 | "id": 1000299,
114 | "name": "Smartisan 快充移动电源 10000mAh",
115 | "name_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
116 | "price": 199,
117 | "sku_info": [{
118 | "sku_id": 100029901,
119 | "title": "Smartisan 快充移动电源 10000mAh",
120 | "sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
121 | "ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
122 | "price": 199,
123 | "limit_num": 1,
124 | "spec_json": {
125 | "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
126 | "show_name": "灰色"
127 | }
128 | }]
129 | }],
130 | "itemsData" : [
131 | {
132 | "sku_id": 100027101,
133 | "title": "坚果 Pro 软胶保护套",
134 | "sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
135 | "ali_image": "http://image.smartisanos.cn/resource/902befd5f32a8caf4ca79b55d39ee25a.jpg",
136 | "price": 49,
137 | "limit_num": 5,
138 | "spec_json": {
139 | "image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
140 | "show_name": "红色"
141 | },
142 | "ali_images": [
143 | "http://image.smartisanos.cn/resource/902befd5f32a8caf4ca79b55d39ee25a.jpg",
144 | "http://image.smartisanos.cn/resource/ca760e50409c796a4e770c54554f92bf.jpg",
145 | "http://image.smartisanos.cn/resource/493c65d42fe83ec3daaf058d79fc1a95.jpg",
146 | "http://image.smartisanos.cn/resource/0bf30081dd17431c4fdfbd237c53743f.jpg",
147 | "http://image.smartisanos.cn/resource/cba7b4cdb2fc41d7f29fb45d94972e41.jpg"
148 | ],
149 | "sku_list": [
150 | {
151 | "id": 100027101,
152 | "image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
153 | "limit_num": 5,
154 | "color": "红色"
155 | },
156 | {
157 | "id": 100027102,
158 | "image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
159 | "limit_num": 5,
160 | "color": "黑色"
161 | },
162 | {
163 | "id": 100027103,
164 | "image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
165 | "limit_num": 5,
166 | "color": "巧克力色"
167 | },
168 | {
169 | "id": 100027104,
170 | "image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
171 | "limit_num": 5,
172 | "color": "浅金色"
173 | }
174 | ]
175 | },
176 | {
177 | "sku_id": 100027102,
178 | "title": "坚果 Pro 软胶保护套",
179 | "sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
180 | "ali_image": "http://image.smartisanos.cn/resource/554da94d8e4f84f03e0015fd1c997f46.jpg",
181 | "price": 49,
182 | "limit_num": 5,
183 | "spec_json": {
184 | "image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
185 | "show_name": "黑色"
186 | },
187 | "ali_images": [
188 | "http://image.smartisanos.cn/resource/554da94d8e4f84f03e0015fd1c997f46.jpg",
189 | "http://image.smartisanos.cn/resource/01f25111e1a2c238a0f77e84aebd0796.jpg",
190 | "http://image.smartisanos.cn/resource/2841709c21ef07616f621fd863dcf2f3.jpg",
191 | "http://image.smartisanos.cn/resource/1b6fd01e415c380947cd98f62fa44817.jpg",
192 | "http://image.smartisanos.cn/resource/9e40a858dff00faa2f139587b7085249.jpg"
193 | ],
194 | "sku_list": [{
195 | "id": 100027101,
196 | "image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
197 | "limit_num": 5,
198 | "color": "红色"
199 | },{
200 | "id": 100027102,
201 | "image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
202 | "limit_num": 5,
203 | "color": "黑色"
204 | },{
205 | "id": 100027103,
206 | "image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
207 | "limit_num": 5,
208 | "color": "巧克力色"
209 | },{
210 | "id": 100027104,
211 | "image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
212 | "limit_num": 5,
213 | "color": "浅金色"
214 | }]
215 | },
216 | {
217 | "sku_id": 100027103,
218 | "title": "坚果 Pro 软胶保护套",
219 | "sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
220 | "ali_image": "http://image.smartisanos.cn/resource/84b58718b8f8da3c08e0931e19fdc62e.png",
221 | "price": 49,
222 | "limit_num": 5,
223 | "spec_json": {
224 | "image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
225 | "show_name": "巧克力色"
226 | },
227 | "ali_images": [
228 | "http://image.smartisanos.cn/resource/6d39130f5ad4bfe1241c0c17211472c2.jpg",
229 | "http://image.smartisanos.cn/resource/5694eb55ad2777a87096677d9d39cc58.jpg",
230 | "http://image.smartisanos.cn/resource/bffbb5411470d97a13f2f380006c96e4.jpg",
231 | "http://image.smartisanos.cn/resource/701052c09e45bd4069d3f8280d0d1435.jpg",
232 | "http://image.smartisanos.cn/resource/4fa7c5f81b02f71be4cae051ce547433.jpg"
233 | ],
234 | "sku_list": [{
235 | "id": 100027101,
236 | "image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
237 | "limit_num": 5,
238 | "color": "红色"
239 | },{
240 | "id": 100027102,
241 | "image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
242 | "limit_num": 5,
243 | "color": "黑色"
244 | },{
245 | "id": 100027103,
246 | "image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
247 | "limit_num": 5,
248 | "color": "巧克力色"
249 | },{
250 | "id": 100027104,
251 | "image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
252 | "limit_num": 5,
253 | "color": "浅金色"
254 | }]
255 | },
256 | {
257 | "sku_id": 100027104,
258 | "title": "坚果 Pro 软胶保护套",
259 | "sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
260 | "ali_image": "http://image.smartisanos.cn/resource/b20055215ae3db0f2c8b7ba4db68866f.png",
261 | "price": 49,
262 | "limit_num": 5,
263 | "spec_json": {
264 | "image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
265 | "show_name": "浅金色"
266 | },
267 | "ali_images": [
268 | "http://image.smartisanos.cn/resource/46d4b1cc072c7daa0c69756ac62ab46e.jpg",
269 | "http://image.smartisanos.cn/resource/e0d86a84c13b995fe87910324b3c7771.jpg",
270 | "http://image.smartisanos.cn/resource/1febef151c00c073d65eb37f68b75faf.jpg",
271 | "http://image.smartisanos.cn/resource/520666f8a84d92963320cf94bd74c05c.jpg",
272 | "http://image.smartisanos.cn/resource/7087d8239dec31662978c4c44c8501ba.jpg"
273 | ],
274 | "sku_list": [{
275 | "id": 100027101,
276 | "image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
277 | "limit_num": 5,
278 | "color": "红色"
279 | },{
280 | "id": 100027102,
281 | "image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
282 | "limit_num": 5,
283 | "color": "黑色"
284 | },{
285 | "id": 100027103,
286 | "image": "attr/v2/1000271/07BAF8C0EF046224A84B593DEEBC869E/",
287 | "limit_num": 5,
288 | "color": "巧克力色"
289 | },{
290 | "id": 100027104,
291 | "image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
292 | "limit_num": 5,
293 | "color": "浅金色"
294 | }]
295 | },
296 | {
297 | "sku_id": 100029901,
298 | "title": "Smartisan 快充移动电源 10000mAh",
299 | "sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
300 | "ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
301 | "price": 199,
302 | "limit_num": 1,
303 | "spec_json": {
304 | "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
305 | "show_name": "灰色"
306 | },
307 | "ali_images": [
308 | "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
309 | "http://image.smartisanos.cn/resource/0540778097a009364f2dcbb8c5286451.jpg",
310 | "http://image.smartisanos.cn/resource/ed7ea75824124d7385c99d532f1d4f1d.jpg",
311 | "http://image.smartisanos.cn/resource/40b8c1b1e5d175cc8fa9e7ff96cb6016.jpg",
312 | "http://image.smartisanos.cn/resource/fb24dc3db26c6f02542e0dea9b10151b.jpg"
313 | ],
314 | "sku_list": [{
315 | "id": 100029901,
316 | "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
317 | "limit_num": 1,
318 | "color": "灰色"
319 | }]
320 | }],
321 | "provinceList" : [
322 | {
323 | "area_id": 110000,
324 | "area_name": "北京市",
325 | "city_list": [
326 | {
327 | "area_name": "市辖区",
328 | "area_id": 110100,
329 | "county_list": [
330 | {
331 | "area_name": "东城区",
332 | "area_id": 110101
333 | },
334 | {
335 | "area_name": "海淀区",
336 | "area_id": 110106
337 | }
338 | ]
339 | },
340 | {
341 | "area_name": "县",
342 | "area_id": 110200,
343 | "county_list": [{
344 | "area_name": "密云县",
345 | "area_id": 110228
346 | },
347 | {
348 | "area_name": "延庆县",
349 | "area_id": 110229
350 | }
351 | ]
352 | }]
353 | },
354 | {
355 | "area_id": 440000,
356 | "area_name": "广东省",
357 | "city_list": [{
358 | "area_id": 440300,
359 | "area_name": "深圳市",
360 | "county_list": [{
361 | "area_name": "罗湖区",
362 | "area_id": 440303
363 | }, {
364 | "area_name": "福田区",
365 | "area_id": 440304
366 | }]
367 | }, {
368 | "area_id": 440100,
369 | "area_name": "广州市",
370 | "county_list": [{
371 | "area_name": "荔湾区",
372 | "area_id": 440103
373 | }, {
374 | "area_name": "越秀区",
375 | "area_id": 440104
376 | }]
377 | }]
378 | },
379 | {
380 | "area_id": 310000,
381 | "area_name": "上海市",
382 | "city_list": [{
383 | "area_id": 310100,
384 | "area_name": "市辖区",
385 | "county_list": [{
386 | "area_id": 310113,
387 | "area_name": "宝山区"
388 | }, {
389 | "area_id": 310105,
390 | "area_name": "长宁区"
391 | }]
392 | }, {
393 | "area_id": 310200,
394 | "area_name": "县",
395 | "county_list": [{
396 | "area_name": "崇明县",
397 | "area_id": 310230
398 | }]
399 | }]
400 | }
401 | ]
402 | }
403 |
--------------------------------------------------------------------------------
/src/components/address-pop.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
64 |
5 |
63 |
6 |
21 |
62 |
7 |
20 |
8 |
14 | -
9 |
-
10 |
11 |
12 |
15 |
19 | -
16 |
3 |
4 |
82 |
83 |
84 |
225 |
226 |
499 |
--------------------------------------------------------------------------------
/src/components/car.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
81 |
6 |
12 |
80 |
13 |
79 |
14 |
78 |
15 |
77 |
16 |
76 |
17 |
75 |
18 |
23 |
19 |
20 |
21 |
22 |
24 |
29 |
25 |
26 |
27 |
28 |
30 |
39 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
40 |
47 |
41 |
45 |
46 |
48 |
61 |
49 |
53 |
54 |
55 |
59 |
60 |
62 |
67 |
63 |
64 |
65 |
66 |
68 |
69 | 设为默认
70 |
71 |
72 | 保存
73 |
74 |
3 |
94 |
95 |
143 |
595 |
--------------------------------------------------------------------------------
/src/components/checkout.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
93 |
5 |
92 |
6 |
8 | 购物清单
7 |
9 |
60 |
10 | 现在选购
12 |
13 |
59 | 您的购物车中还没有商品
11 |
61 |
69 |
91 |
70 |
90 |
71 |
88 | 现在结算
89 |
72 |
79 | 73 | 已选择 {{checkCount}} 件商品 74 |
75 |76 | 共计 {{count}} 件商品 77 |
78 |
80 |
87 | 81 | 应付总额：￥{{checkPrice}} 82 |
83 |84 | 应付总额不含运费 85 |
86 |
3 |
108 |
109 |
203 |
204 |
684 |
--------------------------------------------------------------------------------
4 |
106 |
5 |
31 |
6 |
30 |
7 |
9 | 收货信息
8 |
10 |
29 |
11 |
28 | -
12 |
-
13 | 14 |18 |{{item.name}}15 |{{item.phone}}16 |{{item.province}}{{item.city}}{{item.county}}17 |
{{item.add}}19 | 修改 20 | 删除 21 |22 |
23 | -
24 |
使用新地址
25 |
26 |
32 |
60 |
33 |
35 | 发票信息
34 |
36 |
59 | 发票类型：电子发票
37 | 发票抬头：
38 |
56 |
39 |
43 |
47 |
48 |
49 |
54 |
55 | 发票内容：购买商品明细
57 |电子发票是税务局认可的有效收付款凭证，可作为售后服务凭据。电子发票打印后可以用于企业报销。
58 |
61 |
105 |
62 |
64 | 购物清单
63 |
65 |
92 |
66 | 商品名称
67 | 小计
68 | 数量
69 | 单价
70 |
71 |
72 |
90 |
91 |
73 |
89 |
74 |
88 |
75 | ![]()
76 |
77 |
82 |
83 |
85 | ￥ {{item.price*item.count}}.00
84 | {{item.count}}
86 | ¥{{item.price}}.00
87 |
93 |
99 |
94 |
98 | 商品总计： ¥{{totalPrice}}.00
95 |运费： +¥{{frident}}.00
96 | 97 |
100 |
104 |
101 | 提交订单 应付金额： ¥{{totalPrice+frident}}.00
102 |
103 |