├── README.md ├── address.html ├── css ├── base.css ├── checkout.css ├── modal.css └── reset.css ├── data ├── address.json ├── cart.json └── cartData.json ├── img ├── goods-1.jpg ├── goods-2.jpg ├── part-1.jpg ├── part-2.jpg ├── test.jpg └── test1.jpg ├── index.html ├── js ├── address.js ├── cart.js ├── lib │ ├── vue-resource.js │ └── vue.min.js └── main.js ├── npm-debug.log ├── package.json └── 素材 ├── address.html ├── cart.html ├── css ├── base.css ├── checkout.css ├── modal.css └── reset.css ├── data ├── address.json ├── cart.json └── cartData.json ├── img ├── goods-1.jpg ├── goods-2.jpg ├── part-1.jpg ├── part-2.jpg ├── test.jpg └── test1.jpg ├── js ├── lib │ ├── vue-resource.js │ └── vue.min.js └── main.js └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # 用vue开发购物车 2 | 3 | > 功能：用vue简单实现购物车增删减少商品以及价格，地址的增加删除。 4 | 5 | > [项目体验链接](https://jgchenu.github.io/vue-shopcar/) 6 | 7 | > [该源码教程视频](http://www.imooc.com/learn/796) 8 | -------------------------------------------------------------------------------- /address.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cart 9 | 10 | 11 | 12 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | add2 26 | 27 | 28 | 29 | ok 30 | 31 | 32 | 33 | edit 34 | 35 | 36 | 37 | delete 38 | 39 | 40 | 41 | clock 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 |
    {{item.userName}}
    69 |
    {{item.streetName}}
    70 |
    {{item.tel}}
    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 | more 102 | 103 | 104 | 105 | 106 | 107 |
108 |
109 | 110 | 111 |
112 | 配送方式 113 |
114 |
115 |
116 |
    117 |
  • 118 |
    标准配送
    119 |
    Free
    120 |
    • 121 |
  • 122 |
    高级配送
    123 |
    180
    124 |
    • 125 |
126 |
127 |
128 |
129 | 下一步 130 |
131 | 147 | 192 | 194 |
195 |
196 |
197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /css/base.css: -------------------------------------------------------------------------------- 1 | /* base */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; } 6 | 7 | html, 8 | body { 9 | overflow-x: hidden; } 10 | 11 | html { 12 | font-family: sans-serif; 13 | font-size: 100%; 14 | -ms-text-size-adjust: 100%; 15 | -webkit-text-size-adjust: 100%; } 16 | 17 | body { 18 | margin: 0; 19 | padding: 0; } 20 | 21 | ul, ol { 22 | list-style: none; 23 | margin: 0; 24 | padding: 0; } 25 | 26 | div, p, dl, dt, dd { 27 | margin: 0; 28 | padding: 0; } 29 | 30 | li, 31 | dl, 32 | dt, 33 | dd, 34 | h1, 35 | h2, 36 | h3, 37 | h4, 38 | h5, 39 | h6, 40 | hgroup, 41 | p, 42 | blockquote, 43 | figure, 44 | form, 45 | fieldset, 46 | input, 47 | legend, 48 | pre, 49 | abbr, 50 | button { 51 | margin: 0; 52 | padding: 0; } 53 | 54 | h1, 55 | h2, 56 | h3, 57 | h4, 58 | h5, 59 | h6 { 60 | font-weight: normal; } 61 | 62 | pre, 63 | code, 64 | address, 65 | caption, 66 | th, 67 | figcaption { 68 | font-size: 1em; 69 | font-weight: normal; 70 | font-style: normal; } 71 | 72 | fieldset, 73 | iframe, 74 | img { 75 | border: 0; } 76 | 77 | caption, 78 | th { 79 | text-align: left; } 80 | 81 | table { 82 | border-collapse: collapse; 83 | border-spacing: 0; } 84 | 85 | article, 86 | aside, 87 | footer, 88 | header, 89 | nav, 90 | main, 91 | section, 92 | summary, 93 | details, 94 | figure, 95 | figcaption { 96 | display: block; } 97 | 98 | audio, 99 | canvas, 100 | video, 101 | progress { 102 | display: inline-block; 103 | vertical-align: baseline; } 104 | 105 | button { 106 | background: none; 107 | border: 0; 108 | box-sizing: border-box; 109 | color: inherit; 110 | cursor: pointer; 111 | font: inherit; 112 | line-height: inherit; 113 | overflow: visible; 114 | vertical-align: inherit; } 115 | 116 | button:disabled { 117 | cursor: default; } 118 | 119 | a { 120 | color: inherit; 121 | text-decoration: none; } 122 | 123 | a:active, 124 | a:hover { 125 | outline: 0; } 126 | 127 | h1 { 128 | font-size: 2em; } 129 | 130 | img { 131 | border: 0; } 132 | 133 | [hidden] { 134 | display: none; } 135 | 136 | .nobr { 137 | white-space: nowrap; } 138 | 139 | i, 140 | em, 141 | code { 142 | font-style: normal; } 143 | 144 | b, 145 | strong { 146 | font-weight: bold; } 147 | 148 | sub, 149 | sup { 150 | font-size: 75%; 151 | line-height: 0; 152 | position: relative; 153 | vertical-align: baseline; } 154 | 155 | sup { 156 | top: -0.5em; } 157 | 158 | button, 159 | input, 160 | select, 161 | textarea { 162 | font-family: inherit; 163 | /* 1 */ 164 | font-size: 100%; 165 | /* 2 */ 166 | margin: 0; 167 | /* 3 */ } 168 | 169 | input:focus, 170 | select:focus, 171 | textarea:focus, 172 | button:focus, button:active { 173 | outline: none; } 174 | 175 | table { 176 | border-collapse: collapse; 177 | border-spacing: 0; } 178 | 179 | .clearfix:after { 180 | visibility: hidden; 181 | display: block; 182 | content: " "; 183 | clear: both; } 184 | 185 | .clearfix { 186 | zoom: 1; } 187 | 188 | @media print { 189 | body, 190 | #main, 191 | #content { 192 | color: #000; } 193 | a, 194 | a:link, 195 | a:visited { 196 | color: #000; 197 | text-decoration: none; } } 198 | 199 | 200 | html { 201 | font-size: 10px; } 202 | 203 | body { 204 | font-size: 1.4rem; 205 | font-family: sans-serif; 206 | color: #333; 207 | font-family: "akkurat", sans-serif; } 208 | 209 | .container { 210 | max-width: 1280px; 211 | margin: 0 auto; } 212 | 213 | @media only screen and (max-width: 1280px) { 214 | .container { 215 | width: 100%; } } 216 | 217 | .btn { 218 | display: inline-block; 219 | height: 54px; 220 | line-height: 54px; 221 | padding: 0 1.2em; 222 | text-align: center; 223 | font-size: 18px; 224 | font-family: "moderat", sans-serif; 225 | transition: all .3s ease-out; } 226 | .btn:hover { 227 | background-color: #fff; 228 | color: #e02614; 229 | transition: all .3s ease-out; } 230 | 231 | .btn--orange { 232 | background-color: #EE7A23; 233 | border: 1px #EE7A23 solid; 234 | color: #fff; } 235 | .btn--orange:hover { 236 | background-color: #fff; 237 | color: #EE7A23; } 238 | 239 | .btn--white { 240 | background-color: #fff; 241 | border: 1px #d1434a solid; 242 | color: #d1434a; } 243 | .btn--white:hover { 244 | background-color: #d1434a; 245 | color: #fff; } 246 | 247 | .btn--red { 248 | background-color: #d1434a; 249 | border: 1px #d1434a solid; 250 | color: #fff; } 251 | .btn--red:hover { 252 | background-color: #fff; 253 | color: #d1434a; } 254 | 255 | .btn--gray-white { 256 | background-color: none; 257 | border: 1px #605F5F solid; 258 | color: #605F5F; } 259 | .btn--gray-white:hover { 260 | background-color: #605F5F; 261 | color: #fff; } 262 | 263 | .btn--dis { 264 | background-color: #ccc; 265 | border: 1px #ccc solid; 266 | color: #fff; 267 | cursor: disabled; } 268 | .btn--dis:hover { 269 | background-color: #ccc; 270 | color: #fff; } 271 | 272 | input[type="text"], textarea { 273 | padding: .5em 20px; 274 | border: 1px solid #bbb; 275 | background: #white; } 276 | 277 | .up-down-btn { 278 | color: #EE7A23; } 279 | 280 | .i-up-down { 281 | position: relative; 282 | display: inline-block; 283 | width: 14px; 284 | height: 6px; 285 | vertical-align: middle; 286 | z-index: 2; 287 | -ms-transform: translateY(2px); 288 | transform: translateY(2px); 289 | transition: transform .3s ease-out; } 290 | .i-up-down i { 291 | position: absolute; 292 | top: 0; 293 | width: 8px; 294 | height: 1px; 295 | background: #EE7A23; } 296 | .i-up-down .i-up-down-l { 297 | left: 0; 298 | -ms-transform: rotate(40deg); 299 | transform: rotate(40deg); 300 | transition: transform .3s ease-out; } 301 | .i-up-down .i-up-down-r { 302 | right: 0; 303 | -ms-transform: rotate(-40deg); 304 | transform: rotate(-40deg); 305 | transition: all .3s ease-out; } 306 | 307 | .select-self { 308 | position: relative; 309 | display: inline-block; 310 | cursor: pointer; } 311 | 312 | .select-self-area { 313 | width: auto; 314 | background: #f0f0f0; 315 | border-radius: 3px; 316 | min-width: 50px; 317 | max-width: 240px; 318 | height: 30px; 319 | line-height: 30px; } 320 | .select-self-area .select-ipt { 321 | display: block; 322 | height: 100%; 323 | padding: 0 2em 0 1em; 324 | border: 0; 325 | color: #605F5F; 326 | overflow: hidden; } 327 | .select-self-area .select-btn { 328 | position: absolute; 329 | right: 0; 330 | top: 0; 331 | width: 1.286em; 332 | height: 100%; 333 | background: #fff; 334 | border: 1px solid #ccc; 335 | border-radius: 3px; 336 | text-align: center; } 337 | .select-self-area .select-btn .i-up-down { 338 | width: 8px; 339 | top: 0; 340 | left: 0; } 341 | .select-self-area .select-btn .i-up-down i { 342 | width: 5px; 343 | height: 2px; 344 | background-color: #605F5F; } 345 | 346 | .select-self-white .select-self-area { 347 | background: #fff; 348 | border: 1px solid #ccc; 349 | border-radius: 0; } 350 | 351 | .select-self-white .select-btn { 352 | border: none; 353 | background: none; } 354 | 355 | .select-options { 356 | display: none; 357 | position: absolute; 358 | top: 30px; 359 | left: 0; 360 | width: 100%; 361 | max-height: 210px; 362 | background: #f0f0f0; 363 | border-radius: 0 0 3px 3px; 364 | overflow-y: auto; 365 | z-index: 1; } 366 | .select-options li { 367 | padding: .5em 15px; 368 | border-top: 1px solid #e9e9e9; 369 | text-align: left; } 370 | .select-options li:hover { 371 | color: #EE7A23; } 372 | 373 | .select-self-open { 374 | border-radius: 3px 3px 0 0; } 375 | .select-self-open .select-options { 376 | display: block; } 377 | .select-self-open .i-up-down .i-up-down-l { 378 | left: 0; 379 | -ms-transform: rotate(-40deg); 380 | transform: rotate(-40deg); 381 | transition: transform .3s ease-out; } 382 | .select-self-open .i-up-down .i-up-down-r { 383 | right: 0; 384 | -ms-transform: rotate(40deg); 385 | transform: rotate(40deg); 386 | transition: all .3s ease-out; } 387 | .select-self-open .select-options { 388 | z-index: 102; } 389 | 390 | .select-self:hover, .up-down-btn:hover, .up-down-btn.open { 391 | transition: all .3s ease-out; } 392 | .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l { 393 | -ms-transform: rotate(-40deg); 394 | transform: rotate(-40deg); 395 | transition: all .3s ease-out; } 396 | .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r { 397 | -ms-transform: rotate(40deg); 398 | transform: rotate(40deg); 399 | transition: all .3s ease-out; } 400 | -------------------------------------------------------------------------------- /css/checkout.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .check-step { 3 | padding: 5px 0; } 4 | .check-step ul { 5 | display: -ms-flexbox; 6 | display: flex; 7 | margin: 25px 0 50px 0; } 8 | .check-step ul:after { 9 | visibility: hidden; 10 | display: block; 11 | content: " "; 12 | clear: both; } 13 | .check-step li { 14 | position: relative; 15 | float: left; 16 | -ms-flex: 1; 17 | flex: 1; 18 | width: 25%; 19 | line-height: 1.5em; 20 | padding: 0 1em 1em 1em; 21 | border-bottom: 2px solid #ccc; 22 | color: #999; 23 | font-size: 16px; 24 | text-align: center; } 25 | .check-step li:after { 26 | position: absolute; 27 | bottom: -7px; 28 | left: 50%; 29 | margin-left: -7px; 30 | content: ""; 31 | width: 14px; 32 | height: 14px; 33 | border-radius: 50%; 34 | background: #ccc; } 35 | .check-step li.cur { 36 | border-color: #EE7A23; 37 | color: #EE7A23; } 38 | .check-step li.cur:after { 39 | background: #EE7A23; } 40 | 41 | @media only screen and (max-width: 767px) { 42 | .check-step ul { 43 | margin: 10px 0 25px 0; } 44 | .check-step li { 45 | font-size: 12px; } } 46 | 47 | .addr-list ul:after { 48 | visibility: hidden; 49 | display: block; 50 | content: " "; 51 | clear: both; } 52 | 53 | .addr-list li { 54 | position: relative; 55 | float: left; 56 | width: 23.5%; 57 | height: 162px; 58 | margin: 10px 2% 10px 0; 59 | padding: 20px 20px 40px 20px; 60 | background: #fff; 61 | border: 2px solid #e9e9e9; 62 | overflow: hidden; 63 | cursor: pointer; } 64 | .addr-list li dt { 65 | margin-bottom: 10px; 66 | font-size: 18px; } 67 | .addr-list li dd { 68 | margin-bottom: 6px; 69 | line-height: 20px; } 70 | .addr-list li .address { 71 | height: 40px; 72 | overflow: hidden; } 73 | .addr-list li .tel { 74 | color: #605F5F; } 75 | .addr-list li .addr-opration { 76 | position: absolute; } 77 | .addr-list li .addr-opration .icon { 78 | width: 100%; 79 | height: 100%; } 80 | .addr-list li .addr-opration:hover .icon { 81 | fill: #EE7A23; } 82 | .addr-list li .addr-edit { 83 | display: none; 84 | top: 20px; 85 | right: 20px; 86 | width: 20px; 87 | height: 20px; } 88 | .addr-list li .addr-del { 89 | display: none; 90 | bottom: 20px; 91 | right: 20px; 92 | width: 20px; 93 | height: 20px; } 94 | .addr-list li .addr-set-default, .addr-list li .addr-default { 95 | bottom: 15px; 96 | left: 20px; 97 | color: #EE7A23; } 98 | .addr-list li .addr-set-default { 99 | display: none; 100 | } 101 | .addr-list li:nth-child(4n) { 102 | margin-right: 0; } 103 | .addr-list li:hover { 104 | border-color: #EE7A23; } 105 | .addr-list li.addr-new { 106 | color: #333; 107 | text-align: center; } 108 | .addr-list li.addr-new .add-new-inner { 109 | padding-top: 20px; } 110 | .addr-list li.addr-new .add-new-inner .icon-add { 111 | display: inline-block; 112 | width: 50px; 113 | height: 50px; } 114 | .addr-list li.addr-new .add-new-inner .icon-add .icon-add { 115 | width: 50px; 116 | height: 50px; 117 | fill: #605F5F; } 118 | .addr-list li.addr-new .add-new-inner p { 119 | margin-top: 10px; } 120 | .addr-list li.check { 121 | border-color: #EE7A23; 122 | border-width: 2px; } 123 | .addr-list li.check .addr-opration { 124 | display: block; } 125 | 126 | .shipping-addr-more { 127 | margin-top: 10px; 128 | text-align: center; } 129 | 130 | @media only screen and (max-width: 991px) { 131 | .addr-list { 132 | padding: 0 10px; } 133 | .addr-list li { 134 | width: 49%; 135 | margin-right: 2%; } 136 | .addr-list li:nth-child(4n) { 137 | margin-right: 2%; } 138 | .addr-list li:nth-child(2n) { 139 | margin-right: 0; } } 140 | 141 | @media only screen and (max-width: 767px) { 142 | .addr-list { 143 | padding: 0 10px; } 144 | .addr-list li { 145 | width: 100%; 146 | margin: 5px 0; } } 147 | 148 | .cart-item { 149 | display: table; 150 | width: 100%; } 151 | 152 | .cart-item-head { 153 | display: table-header-group; 154 | width: 100%; } 155 | .cart-item-head ul { 156 | display: table-row; 157 | width: 100%; } 158 | .cart-item-head li { 159 | display: table-cell; 160 | height: 54px; 161 | line-height: 54px; 162 | background: #605F5F; 163 | color: #fff; 164 | font-size: 18px; 165 | text-align: center; } 166 | .cart-item-head li:nth-child(2), .cart-item-head li:nth-child(3), .cart-item-head li:nth-child(4), .cart-item-head li:nth-child(5) { 167 | width: 12%; 168 | padding: 0 10px; } 169 | 170 | .cart-item-list { 171 | display: table-row-group; } 172 | .cart-item-list > li { 173 | position: relative; 174 | display: table-row; 175 | padding: 36px 0; } 176 | .cart-item-list > li > div { 177 | position: relative; 178 | display: table-cell; 179 | text-align: center; 180 | vertical-align: top; 181 | border-bottom: 1px solid #e9e9e9; } 182 | .cart-item-list > li.disabled > div:after { 183 | position: absolute; 184 | top: 0; 185 | left: 0; 186 | content: ""; 187 | width: 100%; 188 | height: 100%; 189 | background: rgba(96, 95, 95, 0.3); 190 | z-index: 5; } 191 | .cart-item-list .cart-tab-1 { 192 | min-height: 72px; 193 | padding: 36px 0; 194 | text-align: left; 195 | border-left: 1px solid #e9e9e9; } 196 | .cart-item-list .cart-tab-2 { 197 | padding-top: 64px; } 198 | .cart-item-list .cart-tab-3 { 199 | padding-top: 48px; } 200 | .cart-item-list .cart-tab-4 { 201 | padding-top: 64px; } 202 | .cart-item-list .cart-tab-5 { 203 | padding-top: 62px; 204 | border-right: 1px solid #e9e9e9; } 205 | .cart-item-list .cart-item-check { 206 | float: left; 207 | padding: 28px 0 28px 22px; } 208 | .cart-item-list .cart-item-pic { 209 | float: left; 210 | width: 80px; 211 | height: 72px; 212 | margin-left: 22px; 213 | border: 1px solid #e9e9e9;} 214 | .cart-item-list .cart-item-pic img { 215 | width: 100%; 216 | height: 100%; 217 | cursor:pointer;} 218 | .cart-item-list .cart-item-title { 219 | min-height: 58px; 220 | padding: 0 20px 0 160px; } 221 | .cart-item-list .cart-item-title .item-name { 222 | margin: 2px 0 10px; 223 | line-height: 16px; 224 | color: #000; } 225 | .cart-item-list .cart-item-title .item-count-down .icon-clock { 226 | width: 14px; 227 | height: 14px; 228 | fill: #605F5F; 229 | vertical-align: middle; } 230 | .cart-item-list .cart-item-title .item-count-down .item-count-down-time { 231 | display: inline-block; 232 | height: 14px; 233 | line-height: 14px; 234 | padding: 0 5px; 235 | background: #f0f0f0; 236 | font-size: 12px; 237 | color: #605F5F; } 238 | .cart-item-list .item-include { 239 | position: relative; 240 | padding-left: 160px; } 241 | .cart-item-list .item-include dl { 242 | padding-right: 60px; } 243 | .cart-item-list .item-include dl dt { 244 | float: left; 245 | width: 65px; } 246 | .cart-item-list .item-include dl dd { 247 | margin-bottom: 13px; 248 | padding-left: 65px; 249 | color: #999; } 250 | .cart-item-list .item-include dl:after { 251 | visibility: hidden; 252 | display: block; 253 | content: " "; 254 | clear: both; } 255 | .cart-item-list .item-include .item-include-more { 256 | position: absolute; 257 | right: 10px; 258 | top: 0; } 259 | .cart-item-list .item-stock { 260 | margin-top: 5px; 261 | font-size: 12px; 262 | color: #999; } 263 | .cart-item-list .item-stock-no { 264 | color: #d1434a; } 265 | .cart-item-list .item-price-total { 266 | color: #d1434a; } 267 | 268 | .item-check-btn { 269 | display: inline-block; 270 | width: 16px; 271 | height: 16px; 272 | border: 1px solid #ccc; 273 | border-radius: 50%; 274 | text-align: center; 275 | vertical-align: middle; 276 | cursor: pointer; } 277 | .item-check-btn .icon-ok { 278 | display: none; 279 | width: 100%; 280 | height: 100%; 281 | fill: #fff; 282 | -ms-transform: scale(0.8); 283 | transform: scale(0.8); } 284 | .item-check-btn.check { 285 | background: #EE7A23; 286 | border-color: #EE7A23; } 287 | .item-check-btn.check .icon-ok { 288 | display: inline-block; } 289 | 290 | .item-edit-btn { 291 | display: inline-block; 292 | width: 16px; 293 | height: 20px; } 294 | .item-edit-btn .icon-del { 295 | width: 100%; 296 | height: 100%; 297 | fill: #999; } 298 | 299 | .order-item .cart-item-list .cart-item-title, .order-item .cart-item-list .item-include { 300 | padding-left: 122px; } 301 | 302 | .order-item .select-self-area .select-ipt { 303 | padding: 0; 304 | text-align: center; } 305 | 306 | @media only screen and (max-width: 991px) { 307 | .cart-item { 308 | display: block; 309 | background: #f0f0f0; } 310 | .cart-item-head { 311 | display: none; } 312 | .cart-item-list { 313 | display: block; } 314 | .cart-item-list > li { 315 | position: relative; 316 | display: block; 317 | margin-bottom: 10px; 318 | padding: 0; 319 | background: #fff; 320 | border-top: 1px solid #e9e9e9; 321 | border-bottom: 1px solid #e9e9e9; } 322 | .cart-item-list > li > div { 323 | position: static; 324 | display: block; 325 | border: none; } 326 | .cart-item-list > li.disabled:after { 327 | position: absolute; 328 | top: 0; 329 | left: 0; 330 | content: ""; 331 | width: 100%; 332 | height: 100%; 333 | background: rgba(96, 95, 95, 0.3); 334 | z-index: 5; } 335 | .cart-item-list > li.disabled > div:after { 336 | display: none; } 337 | .cart-item-list .cart-tab-1 { 338 | padding: 18px 0 0 0; 339 | border: none; } 340 | .cart-item-list .cart-tab-2 { 341 | display: none; } 342 | .cart-item-list .cart-tab-3 { 343 | float: left; 344 | width: 50%; 345 | padding: 8px 0 8px 10px; 346 | text-align: left; } 347 | .cart-item-list .cart-tab-4 { 348 | float: right; 349 | width: 50%; 350 | padding: 15px 10px 14px 0; 351 | text-align: right; } 352 | .cart-item-list .cart-tab-5 { 353 | clear: both; 354 | padding: 0; } 355 | .cart-item-list .cart-item-check { 356 | padding-left: 10px; } 357 | .cart-item-list .cart-item-pic { 358 | margin-left: 10px; } 359 | .cart-item-list .cart-item-title { 360 | height: 72px; 361 | padding: 0 10px 0 126px; } 362 | .cart-item-list .item-include { 363 | clear: both; 364 | margin-top: 10px; 365 | padding: 0 10px 0 36px; 366 | border-bottom: 1px solid #e9e9e9; } 367 | .cart-item-list .item-quantity > div { 368 | display: inline-block; 369 | margin-right: 3px; 370 | vertical-align: middle; } 371 | .cart-item-list .item-stock { 372 | margin-top: 0; } 373 | .cart-item-list .cart-item-opration { 374 | position: absolute; 375 | top: 60px; 376 | right: 10px; } 377 | .order-item .cart-item-list .cart-item-title { 378 | padding-left: 100px; } 379 | .order-item .cart-item-list .item-include { 380 | padding-left: 10px; } } 381 | 382 | .shipping-method { 383 | text-align: center; } 384 | .shipping-method li { 385 | display: inline-block; 386 | width: 300px; 387 | margin: 5px; 388 | padding: 10px; 389 | background: #fff; 390 | border: 2px solid #e9e9e9; 391 | font-size: 18px; 392 | line-height: 26px; 393 | text-align: center; 394 | color: #999; 395 | font-family: "Moderat"; 396 | cursor: pointer; } 397 | .shipping-method li .price { 398 | font-weight: bold; } 399 | .shipping-method li.check { 400 | border-color: #EE7A23; 401 | color: #333; } 402 | .shipping-method li:hover { 403 | border-color: #EE7A23; } 404 | 405 | @media only screen and (max-width: 767px) { 406 | .shipping-method { 407 | padding: 10px; } 408 | .shipping-method li { 409 | width: 100%; 410 | margin: 5px 0; } } 411 | 412 | .apply-promotion { 413 | font-size: 0; 414 | text-align: center; 415 | background: #fff; } 416 | .apply-promotion li { 417 | display: inline-block; 418 | font-size: 14px; 419 | width: 25%; 420 | min-height: 114px; 421 | vertical-align: top; } 422 | .apply-promotion li p { 423 | margin-top: 12px; 424 | font-size: 18px; } 425 | .apply-promotion .type i { 426 | display: inline-block; 427 | width: 60px; 428 | height: 60px; 429 | background: url(../../img/icon_sprite@2x.png) no-repeat 0 0; 430 | background-size: 128px 122px; } 431 | .apply-promotion .type.type-cash i { 432 | background-position: -68px 0; } 433 | .apply-promotion .type.type-sale i { 434 | width: 66px; } 435 | .apply-promotion .type.type-off i { 436 | background-position: 0 -62px; } 437 | 438 | @media only screen and (max-width: 767px) { 439 | .apply-promotion li { 440 | border-right: 1px solid #e9e9e9; } 441 | .apply-promotion li:last-child, .apply-promotion li:nth-child(4n) { 442 | border-right: none; } 443 | .apply-promotion li .type { 444 | -ms-transform: scale(0.66); 445 | transform: scale(0.66); } } 446 | 447 | .price-count ul { 448 | display: table; 449 | width: 100%; } 450 | 451 | .price-count li { 452 | display: table-row; 453 | font-size: 18px; } 454 | .price-count li span { 455 | display: table-cell; 456 | height: 36px; 457 | padding-right: 10px; 458 | vertical-align: top; 459 | text-align: right; } 460 | .price-count li span:first-child { 461 | color: #999; } 462 | .price-count li span:last-child { 463 | width: 110px; } 464 | 465 | .price-count .order-total-price span:last-child { 466 | color: #d1434a; } 467 | 468 | .tips_pop { 469 | position: relative; } 470 | .tips_pop .i_info { 471 | display: inline-block; 472 | width: 12px; 473 | height: 12px; 474 | background: url(../../img/info.png) no-repeat 0 0; 475 | background-size: 100% auto; 476 | border-radius: 50%; } 477 | .tips_pop .tips_pop_box { 478 | position: absolute; 479 | bottom: 28px; 480 | left: -250px; 481 | display: none; 482 | width: 274px; 483 | padding: 20px 10px; 484 | background: #fff; 485 | border: 1px solid #e9e9e9; 486 | border-radius: 5px; } 487 | .tips_pop .i_down { 488 | position: absolute; 489 | bottom: -6px; 490 | left: 250px; 491 | display: inline-block; 492 | width: 10px; 493 | height: 10px; 494 | border-right: 1px solid #e9e9e9; 495 | border-bottom: 1px solid #e9e9e9; 496 | background: #fff; 497 | -ms-transform: rotate(45deg); 498 | transform: rotate(45deg); } 499 | .tips_pop:hover .tips_pop_box { 500 | display: block; } 501 | 502 | .tee_tips_pop { 503 | display: inline-block; 504 | margin-right: 44px; 505 | font-size: 14px; 506 | text-align: left; } 507 | .tee_tips_pop dt { 508 | margin-bottom: 10px; 509 | color: #333; } 510 | .tee_tips_pop .tee_pop_box em { 511 | display: inline-block; 512 | width: 190px; 513 | vertical-align: top; } 514 | .tee_tips_pop .tee_pop_box .price { 515 | width: 50px; 516 | text-align: right; } 517 | .tee_tips_pop .tee_pop_box .tee_total { 518 | margin-top: 13px; 519 | padding-top: 13px; 520 | border-top: 1px solid #f0f0f0; } 521 | .tee_tips_pop .tee_pop_box .tee_total em { 522 | color: #333; } 523 | .tee_tips_pop .tee_pop_box .price { 524 | color: #d1434a; } 525 | 526 | @media only screen and (max-width: 991px) { 527 | .price-count li { 528 | font-size: 16px; } 529 | .price-count li span { 530 | height: 29px; } } 531 | 532 | /* 订单成功 */ 533 | .order-create { 534 | padding: 30px 0 40px 0; 535 | background: #fff; 536 | text-align: center; } 537 | 538 | .order-create-pic { 539 | width: 288px; 540 | margin: 0 auto; 541 | margin-bottom: 18px; } 542 | .order-create-pic img { 543 | width: 100%; } 544 | 545 | .order-create-main h3 { 546 | margin-bottom: 18px; 547 | font-size: 32px; 548 | line-height: 1.5em; } 549 | 550 | .order-create-main p { 551 | margin-bottom: 86px; 552 | font-size: 16px; 553 | line-height: 1.5em; 554 | color: #666; } 555 | 556 | .order-create-main .order-create-btn-wrap { 557 | max-width: 460px; 558 | margin: 0 auto; 559 | padding: 0 5px; } 560 | .order-create-main .order-create-btn-wrap > div { 561 | float: left; 562 | width: 50%; 563 | padding: 0 10px; } 564 | .order-create-main .order-create-btn-wrap .btn { 565 | width: 100%; 566 | min-width: auto; } 567 | .order-create-main .order-create-btn-wrap:after { 568 | visibility: hidden; 569 | display: block; 570 | content: " "; 571 | clear: both; } 572 | 573 | .order-create-main .get-lecode { 574 | margin-bottom: 40px; 575 | padding: 0 10px; } 576 | .order-create-main .get-lecode .lecode-main { 577 | max-width: 767px; 578 | margin: 0 auto 10px auto; 579 | padding: 37px 0; 580 | border: 1px dashed #EE7A23; } 581 | .order-create-main .get-lecode .lecode-main .lecode-num { 582 | margin-bottom: 20px; 583 | color: #EE7A23; 584 | font-size: 20px; } 585 | .order-create-main .get-lecode .get-lecode-tips { 586 | color: #999; 587 | line-height: 16px; 588 | line-height: 18px; } 589 | 590 | @media only screen and (max-width: 767px) { 591 | .order-create-pic img { 592 | width: 55.55%; } 593 | .order-create-main h3 { 594 | margin-bottom: 10px; 595 | font-size: 20px; } 596 | .order-create-main p { 597 | margin-bottom: 40px; } 598 | .order-create-main p span { 599 | display: block; } 600 | .order-create-main .order-create-btn-wrap > div { 601 | padding: 0 5px; } 602 | .order-create-main .order-create-btn-wrap .btn { 603 | font-size: 16px; } 604 | .order-create-main .get-lecode .lecode-main { 605 | width: 100%; } } 606 | 607 | .checkout .btn { 608 | min-width: 220px; } 609 | 610 | .checkout-title { 611 | position: relative; 612 | margin-bottom: 41px; 613 | text-align: center; } 614 | .checkout-title span { 615 | position: relative; 616 | padding: 0 1em; 617 | background-color: #fff; 618 | font-family: "moderat", sans-serif; 619 | font-weight: bold; 620 | font-size: 20px; 621 | color: #605F5F; 622 | z-index: 1; } 623 | .checkout-title:before { 624 | position: absolute; 625 | top: 50%; 626 | left: 0; 627 | content: ""; 628 | width: 100%; 629 | height: 1px; 630 | background: #ccc; 631 | z-index: 0; } 632 | 633 | /** 确认地址 **/ 634 | .addr-list-wrap { 635 | min-height: 300px; 636 | padding-bottom: 40px; } 637 | 638 | .shipping-method-wrap { 639 | padding-bottom: 65px; } 640 | 641 | .checkout-addr .next-btn-wrap { 642 | padding: 62px 0; 643 | border-top: 1px solid #e9e9e9; 644 | text-align: center; } 645 | 646 | /** cart **/ 647 | .cart { 648 | padding: 69px 0 54px 0; } 649 | 650 | .cart-foot-wrap { 651 | height: 54px; 652 | line-height: 54px; 653 | margin-top: 18px; } 654 | .cart-foot-wrap .cart-foot-l { 655 | float: left; 656 | font-size: 16px; 657 | padding: 0 22px; } 658 | .cart-foot-wrap .item-all-check { 659 | float: left; 660 | color: #EE7A23; } 661 | .cart-foot-wrap .item-all-check .item-check-btn { 662 | margin-right: 18px; } 663 | .cart-foot-wrap .item-all-check span { 664 | vertical-align: middle; } 665 | .cart-foot-wrap .item-all-del { 666 | float: left; 667 | margin-top: 2px; 668 | } 669 | .cart-foot-wrap .cart-foot-r { 670 | float: right; } 671 | .cart-foot-wrap .item-total { 672 | float: left; 673 | margin-right: 31px; 674 | color: #605F5F; 675 | font-size: 18px; } 676 | .cart-foot-wrap .item-total .total-price { 677 | margin-left: 16px; 678 | color: #d1434a; 679 | font-family: "moderat", sans-serif; } 680 | .cart-foot-wrap .next-btn-wrap { 681 | float: right; } 682 | .cart-foot-wrap:after { 683 | visibility: hidden; 684 | display: block; 685 | content: " "; 686 | clear: both; } 687 | 688 | /** order confirm **/ 689 | .checkout-order { 690 | padding: 69px 0 54px 0; } 691 | 692 | .confirm-item-list-wrap { 693 | margin-bottom: 124px; } 694 | 695 | .redeem-coupon-wrap { 696 | margin-bottom: 123px; 697 | text-align: center; } 698 | .redeem-coupon-wrap .text-redeem { 699 | width: 380px; 700 | height: 54px; 701 | line-height: 54px; 702 | margin-right: 16px; 703 | vertical-align: top; } 704 | 705 | .apply-promotion-wrap { 706 | margin-bottom: 124px; } 707 | 708 | .price-count-wrap { 709 | margin-bottom: 26px; 710 | padding-top: 62px; 711 | border-top: 1px solid #e9e9e9; } 712 | 713 | .order-foot-wrap .prev-btn-wrap { 714 | float: left; } 715 | 716 | .order-foot-wrap .next-btn-wrap { 717 | float: right; } 718 | 719 | .order-foot-wrap:after { 720 | visibility: hidden; 721 | display: block; 722 | content: " "; 723 | clear: both; } 724 | 725 | @media only screen and (max-width: 1280px) { 726 | .container { 727 | width: 100%; } } 728 | 729 | @media only screen and (max-width: 991px) { 730 | .cart { 731 | padding-top: 40px; } 732 | .cart-foot-wrap .cart-foot-l { 733 | padding: 0 10px; } } 734 | 735 | @media only screen and (max-width: 767px) { 736 | .checkout { 737 | background: #f0f0f0; } 738 | .checkout-title { 739 | margin: 0 10px 13px 10px; } 740 | .checkout-title span { 741 | font-size: 14px; 742 | background: #f0f0f0 !important; } 743 | .next-btn-wrap { 744 | position: fixed; 745 | bottom: 0; 746 | left: 0; 747 | width: 100%; 748 | z-index: 101; } 749 | .next-btn-wrap .btn { 750 | display: block; 751 | width: 100%; } 752 | .checkout-addr .next-btn-wrap { 753 | padding: 0; 754 | border: none; } 755 | .cart, .checkout-order { 756 | padding-top: 13px; } 757 | .cart-foot-wrap { 758 | height: 42px; 759 | line-height: 42px; 760 | margin: 0; } 761 | .cart-foot-wrap .cart-foot-l { 762 | display: none; } 763 | .cart-foot-wrap .item-total { 764 | float: none; 765 | margin-right: 10px; 766 | font-size: 16px; } 767 | .confirm-item-list-wrap, .redeem-coupon-wrap, .apply-promotion-wrap { 768 | margin-bottom: 23px; } 769 | .redeem-coupon-wrap .redeem-coupon { 770 | margin: 0 10px; } 771 | .redeem-coupon-wrap .text-redeem { 772 | width: 100%; 773 | margin-bottom: 8px; } 774 | .redeem-coupon-wrap .btn { 775 | width: 100%; } 776 | .price-count-wrap { 777 | margin: 0; 778 | padding-top: 0; 779 | border: none; } 780 | .tee_tips_pop { 781 | display: none; } 782 | .order-foot-wrap .prev-btn-wrap { 783 | display: none; } 784 | .addr-list-wrap { 785 | padding-bottom: 23px; } } 786 | 787 | /** 订单详情 **/ 788 | -------------------------------------------------------------------------------- /css/modal.css: -------------------------------------------------------------------------------- 1 | .md-modal { 2 | position: fixed; 3 | top: 50%; 4 | left: 50%; 5 | width: 535px; 6 | height: auto; 7 | -webkit-transform: translate(-50%,-50%); 8 | -ms-transform: translate(-50%,-50%); 9 | transform: translate(-50%,-50%); 10 | visibility: hidden; 11 | z-index: 201; 12 | } 13 | .md-modal-transition.md-show .md-modal-inner { 14 | -webkit-transform: translateY(0); 15 | -ms-transform: translateY(0); 16 | transform: translateY(0); 17 | opacity: 1; 18 | -webkit-transition: all .5s ease-out; 19 | transition: all .5s ease-out; 20 | } 21 | .md-modal-transition .md-modal-inner { 22 | background: #fff; 23 | -webkit-transform: translateY(20%); 24 | -ms-transform: translateY(20%); 25 | transform: translateY(20%); 26 | opacity: 0; 27 | -webkit-transition: all .3s ease-out; 28 | transition: all .3s ease-out; 29 | } 30 | .md-modal .md-modal-inner { 31 | padding: 60px 50px; 32 | } 33 | .md-modal .confirm-tips { 34 | min-height: 5.65em; 35 | } 36 | .md-modal .confirm-tips, .md-modal .alert-tips { 37 | font-size: 14px; 38 | font-weight: 200; 39 | text-align: center; 40 | } 41 | .md-modal .btn-wrap { 42 | margin-top: 20px; 43 | text-align: center; 44 | font-size: 0; 45 | } 46 | .md-modal .btn-wrap .btn { 47 | width: 45%; 48 | min-width: 80px; 49 | margin: 0 2.5%; 50 | } 51 | .md-modal .md-close { 52 | position: absolute; 53 | top: 7px; 54 | right: 7px; 55 | width: 34px; 56 | height: 34px; 57 | -webkit-transform: scale(0.5); 58 | -ms-transform: scale(0.5); 59 | transform: scale(0.5); 60 | text-indent: -8000px; 61 | } 62 | .md-modal .md-close:hover:before { 63 | -webkit-transform: rotate(-135deg); 64 | -ms-transform: rotate(-135deg); 65 | transform: rotate(-135deg); 66 | } 67 | .md-modal .md-close:hover:before, .md-modal .md-close:hover:after { 68 | -webkit-transition: -webkit-transform .3s ease-out; 69 | transition: -webkit-transform .3s ease-out; 70 | transition: transform .3s ease-out; 71 | transition: transform .3s ease-out,-webkit-transform .3s ease-out; 72 | } 73 | .md-modal .md-close:before { 74 | -webkit-transform: rotate(-45deg); 75 | -ms-transform: rotate(-45deg); 76 | transform: rotate(-45deg); 77 | } 78 | .md-modal .md-close:before, .md-modal .md-close:after { 79 | position: absolute; 80 | top: 16px; 81 | left: -4px; 82 | content: ""; 83 | width: 44px; 84 | height: 3px; 85 | background: #605f5f; 86 | -webkit-transition: -webkit-transform .5s ease-out; 87 | transition: -webkit-transform .5s ease-out; 88 | transition: transform .5s ease-out; 89 | transition: transform .5s ease-out,-webkit-transform .5s ease-out; 90 | } 91 | .md-modal .md-close:hover:after { 92 | -webkit-transform: rotate(-45deg); 93 | -ms-transform: rotate(-45deg); 94 | transform: rotate(-45deg); 95 | } 96 | .md-modal .md-close:after { 97 | -webkit-transform: rotate(45deg); 98 | -ms-transform: rotate(45deg); 99 | transform: rotate(45deg); 100 | } 101 | .md-show { 102 | visibility: visible; 103 | } 104 | 105 | .md-overlay { 106 | position: fixed; 107 | top: 0; 108 | left: 0; 109 | width: 100%; 110 | height: 100%; 111 | background: rgba(0,0,0,0.5); 112 | z-index: 200; 113 | } 114 | 115 | .btn { 116 | display: inline-block; 117 | height: 54px; 118 | line-height: 54px; 119 | padding: 0 1.2em; 120 | text-align: center; 121 | font-size: 14px; 122 | font-family: "moderat",sans-serif; 123 | -webkit-transition: all .3s ease-out; 124 | transition: all .3s ease-out; 125 | border: 1px solid #d1434a; 126 | color: #d1434a; 127 | text-transform: uppercase; 128 | letter-spacing: .25em; 129 | white-space: nowrap; 130 | } 131 | .btn--m { 132 | height: 45px; 133 | line-height: 45px; 134 | } 135 | .btn--s{ 136 | 137 | height:30px; 138 | line-height:30px; 139 | } 140 | input, select, button { 141 | vertical-align: middle; 142 | } 143 | 144 | .btn--m { 145 | height: 45px; 146 | line-height: 45px; 147 | } 148 | .btn--red { 149 | background-color: #d1434a; 150 | border-color: #d1434a; 151 | color: #fff; 152 | } 153 | .btn:hover, .btn[href]:hover { 154 | background-color: #d1434a; 155 | color: #fff; 156 | -webkit-transition: all .3s ease-out; 157 | transition: all .3s ease-out; 158 | } 159 | .btn--red:hover { 160 | background-color: #fff; 161 | color: #d1434a; 162 | } 163 | button { 164 | background: 0; 165 | border: 0; 166 | -webkit-box-sizing: border-box; 167 | box-sizing: border-box; 168 | color: inherit; 169 | cursor: pointer; 170 | font: inherit; 171 | line-height: inherit; 172 | overflow: visible; 173 | vertical-align: inherit; 174 | } 175 | .md-form-item{ 176 | margin:10px; 177 | } 178 | .md-form-item__label { 179 | text-align: right; 180 | vertical-align: middle; 181 | float: left; 182 | font-size: 14px; 183 | color: #48576a; 184 | line-height: 1; 185 | padding: 11px 12px 11px 0; 186 | box-sizing: border-box; 187 | } 188 | .md-form-item__content { 189 | line-height: 36px; 190 | position: relative; 191 | font-size: 14px; 192 | } 193 | .md-input__inner { 194 | -webkit-appearance: none; 195 | -moz-appearance: none; 196 | appearance: none; 197 | background-color: #fff; 198 | background-image: none; 199 | border-radius: 4px; 200 | border: 1px solid #333; 201 | box-sizing: border-box; 202 | color: #1f2d3d; 203 | display: block; 204 | font-size: inherit; 205 | height: 36px; 206 | line-height: 1; 207 | outline: 0; 208 | padding: 3px 10px; 209 | transition: border-color .2s cubic-bezier(.645,.045,.355,1); 210 | width: 100%; 211 | } 212 | .md-input__inner:focus{border-color:#20a0ff} -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | body, 6 | dl, 7 | dd { 8 | margin: 0; 9 | } 10 | th, 11 | td { 12 | padding: 0; 13 | } 14 | span, 15 | i { 16 | display: inline-block; 17 | } 18 | input[type='submit'] { 19 | border: none; 20 | background-color: #6190ef; 21 | margin: 10px; 22 | padding: 10px 15px; 23 | } 24 | #container { 25 | font-family: Arial; 26 | min-width: 720px; 27 | max-width: 1280px; 28 | overflow: hidden; 29 | margin: 0 auto; 30 | } 31 | -------------------------------------------------------------------------------- /data/address.json: -------------------------------------------------------------------------------- 1 | { 2 | "status":0, 3 | "message":"", 4 | "result":[ 5 | { 6 | "addressId":"100001", 7 | "userName":"JackBean", 8 | "streetName":"北京市朝阳区朝阳公园1", 9 | "postCode":"100001", 10 | "tel":"12345678901", 11 | "isDefault":true 12 | }, 13 | { 14 | "addressId":"100002", 15 | "userName":"JackBean", 16 | "streetName":"北京市朝阳区朝阳公园2", 17 | "postCode":"100001", 18 | "tel":"12345678901", 19 | "isDefault":false 20 | }, 21 | { 22 | "addressId":"100003", 23 | "userName":"JackBean", 24 | "streetName":"北京市朝阳区朝阳公园3", 25 | "postCode":"100001", 26 | "tel":"12345678901", 27 | "isDefault":false 28 | }, 29 | { 30 | "addressId":"100004", 31 | "userName":"JackBean", 32 | "streetName":"北京市朝阳区朝阳公园4", 33 | "postCode":"100001", 34 | "tel":"12345678901", 35 | "isDefault":false 36 | }, 37 | { 38 | "addressId":"100005", 39 | "userName":"JackBean", 40 | "streetName":"北京市朝阳区朝阳公园5", 41 | "postCode":"100001", 42 | "tel":"12345678901", 43 | "isDefault":false 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /data/cart.json: -------------------------------------------------------------------------------- 1 | { 2 | "status": 0, 3 | "message": "success", 4 | "result": { 5 | "totalHoney":59, 6 | "list":[ 7 | { 8 | "name": "面具1", 9 | "price": 19, 10 | "count": 1, 11 | "amount": 19, 12 | "imgPic": "static/img/test.jpg", 13 | "gifts": [ 14 | { 15 | "partId":"10001", 16 | "partName":"打火机" 17 | }, 18 | { 19 | "partId":"10002", 20 | "partName":"火柴" 21 | } 22 | ] 23 | }, 24 | { 25 | "name": "面具2", 26 | "price": 20, 27 | "count": 1, 28 | "amount": 20, 29 | "imgPic": "static/img/test1.jpg", 30 | "gifts": [ 31 | { 32 | "partId":"10001", 33 | "partName":"打火机" 34 | }, 35 | { 36 | "partId":"10002", 37 | "partName":"火柴盒" 38 | } 39 | ] 40 | }, 41 | { 42 | "name": "面具3", 43 | 44 | "price": 20, 45 | "count": 1, 46 | "amount": 20, 47 | "imgPic": "static/img/test1.jpg", 48 | "gifts": [ 49 | { 50 | "partId":"10001", 51 | "partName":"打火机" 52 | }, 53 | { 54 | "partId":"10002", 55 | "partName":"火柴盒" 56 | } 57 | ] 58 | } 59 | ] 60 | } 61 | 62 | } 63 | -------------------------------------------------------------------------------- /data/cartData.json: -------------------------------------------------------------------------------- 1 | { 2 | "status":1, 3 | "result":{ 4 | "totalMoney":109, 5 | "list":[ 6 | { 7 | "productId":"600100002115", 8 | "productName":"黄鹤楼香烟", 9 | "productPrice":19, 10 | "productQuantity":1, 11 | "productImage":"img/goods-1.jpg", 12 | "parts":[ 13 | { 14 | "partsId":"10001", 15 | "partsName":"打火机", 16 | "imgSrc":"img/part-1.jpg" 17 | } 18 | ] 19 | }, 20 | { 21 | "productId":"600100002120", 22 | "productName":"加多宝", 23 | "productPrice":8, 24 | "productQuantity":5, 25 | "productImage":"img/goods-2.jpg", 26 | "parts":[ 27 | { 28 | "partsId":"20001", 29 | "partsName":"吸管", 30 | "imgSrc":"img/part-2.jpg" 31 | } 32 | ] 33 | }, 34 | { 35 | "productId":"600100002117", 36 | "productName":"金装黄鹤楼", 37 | "productPrice":25, 38 | "productQuantity":2, 39 | "productImage":"img/goods-1.jpg", 40 | "parts":[ 41 | { 42 | "partsId":"10001", 43 | "partsName":"打火机-1", 44 | "imgSrc":"img/part-1.jpg" 45 | }, 46 | { 47 | "partsId":"10002", 48 | "partsName":"打火机-2", 49 | "imgSrc":"img/part-1.jpg" 50 | } 51 | ] 52 | } 53 | ] 54 | }, 55 | "message":"" 56 | } 57 | -------------------------------------------------------------------------------- /img/goods-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/img/goods-1.jpg -------------------------------------------------------------------------------- /img/goods-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/img/goods-2.jpg -------------------------------------------------------------------------------- /img/part-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/img/part-1.jpg -------------------------------------------------------------------------------- /img/part-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/img/part-2.jpg -------------------------------------------------------------------------------- /img/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/img/test.jpg -------------------------------------------------------------------------------- /img/test1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/img/test1.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cart 9 | 10 | 11 | 12 | 19 | 20 | 21 |
22 |
23 | 24 | 25 | 26 | add2 27 | 28 | 29 | 30 | ok 31 | 32 | 33 | 34 | edit 35 | 36 | 37 | 38 | delete 39 | 40 | 41 | 42 | clock 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 |
    {{item.productName}}
    78 |
    79 |
    80 |
    81 |
    赠送:
    82 |
    打火机
    83 |
    84 |
    85 |
    86 |
    87 |
    {{item.productPrice | fomatMoney}}
    88 |
    89 |
    90 |
    91 |
    92 |
    93 | - 94 | 95 | + 96 |
    97 |
    98 |
    有货
    99 |
    100 |
    101 |
    102 |
    {{item.productPrice*item.productQuantity | money('元')}}
    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 | Item total: {{totalMoney}} 136 |
137 |
138 | 结账 139 |
140 |
141 |
142 |
143 |
144 | 145 | 161 |
162 |
163 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | -------------------------------------------------------------------------------- /js/address.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el:'.container', 3 | data:{ 4 | addressList:[], 5 | limitNumber:3, 6 | currentIndex:0, 7 | shoppingMethod:1, 8 | pindex:0 9 | }, 10 | mounted:function(){ 11 | this.$nextTick(function(){ 12 | this.getAddressList(); 13 | }); 14 | }, 15 | computed:{ 16 | filterAddress:function(){ 17 | return this.addressList.slice(0,this.limitNumber); 18 | } 19 | }, 20 | methods:{ 21 | getAddressList:function(){ 22 | var _this=this; 23 | this.$http.get("data/address.json").then(function(response){ 24 | var res = response.data; 25 | if(res.status=="0"){ 26 | _this.addressList=res.result; 27 | } 28 | }); 29 | }, 30 | setDefault:function(addressId){ 31 | this.addressList.forEach(function(address,index){ 32 | if(address.addressId==addressId){ 33 | address.isDefault=true; 34 | }else{ 35 | address.isDefault=false; 36 | } 37 | }); 38 | }, 39 | delProduct:function(){ 40 | this.addressList.splice(this.pindex,1); 41 | }, 42 | addProduct:function(){ 43 | this.addressList.unshift({ 44 | "addressId":"100006", 45 | "userName":"陈杰", 46 | "streetName":"深圳市南山区", 47 | "postCode":"100001", 48 | "tel":"123355678901", 49 | "isDefault":false 50 | }); 51 | this.limitNumber=this.addressList.length; 52 | }, 53 | showOrHide:function(limitNumber){ 54 | if(this.limitNumber==3){ 55 | this.limitNumber=this.addressList.length; 56 | }else{ 57 | this.limitNumber=3; 58 | } 59 | } 60 | } 61 | }); -------------------------------------------------------------------------------- /js/cart.js: -------------------------------------------------------------------------------- 1 | var vm=new Vue({ 2 | el:"#app", 3 | data:{ 4 | totalMoney:0, 5 | productList:[], 6 | checkALlFlag:false, 7 | delFlag:false, 8 | curProduct:'' 9 | }, 10 | filters:{ 11 | fomatMoney:function(value){ 12 | return "￥"+value.toFixed(2); 13 | } 14 | }, 15 | mounted:function(){ 16 | this.$nextTick(function(){ 17 | vm.cartView(); 18 | }) 19 | }, 20 | methods:{ 21 | cartView:function(){ 22 | var _this = this; 23 | 24 | this.$http.get("data/cartData.json",{"id":123}).then(function(res){ 25 | _this.productList = res.data.result.list; 26 | 27 | }); 28 | }, 29 | changeMoney:function(product,way){ 30 | if(way>0){ 31 | product.productQuantity++; 32 | }else{ 33 | if(product.productQuantity>1){ 34 | product.productQuantity--; 35 | } 36 | } 37 | this.calcTotalPrice(); 38 | }, 39 | selectedProduct:function(item){ 40 | if(typeof item.checked=='undefined'){ 41 | Vue.set(item,'checked',true); 42 | }else{ 43 | item.checked = !item.checked; 44 | } 45 | this.calcTotalPrice(); 46 | }, 47 | checkAll:function(flag){ 48 | this.checkAllFlag = flag; 49 | var _this=this; 50 | console.log(this); 51 | 52 | this.productList.forEach(function(item,index){ 53 | if(typeof item.checked == 'undefined'){ 54 | _this.$set(item,"checked",_this.checkAllFlag); 55 | console.log(this); 56 | }else{ 57 | item.checked = _this.checkAllFlag; 58 | } 59 | }); 60 | _this.calcTotalPrice(); 61 | }, 62 | calcTotalPrice:function(){ 63 | var _this=this; 64 | this.totalMoney=0; 65 | this.productList.forEach(function(item,index){ 66 | if(item.checked){ 67 | _this.totalMoney+=item.productPrice*item.productQuantity; 68 | } 69 | }); 70 | }, 71 | delProduct:function(){ 72 | this.productList.splice(this.pindex,1); 73 | this.delFlag=false; 74 | } 75 | } 76 | }); 77 | Vue.filter("money",function(value,type){ 78 | return "￥"+value.toFixed(2)+type; 79 | }) -------------------------------------------------------------------------------- /js/lib/vue-resource.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-resource v0.7.0 3 | * https://github.com/vuejs/vue-resource 4 | * Released under the MIT License. 5 | */ 6 | 7 | (function webpackUniversalModuleDefinition(root, factory) { 8 | if(typeof exports === 'object' && typeof module === 'object') 9 | module.exports = factory(); 10 | else if(typeof define === 'function' && define.amd) 11 | define([], factory); 12 | else if(typeof exports === 'object') 13 | exports["VueResource"] = factory(); 14 | else 15 | root["VueResource"] = factory(); 16 | })(this, function() { 17 | return /******/ (function(modules) { // webpackBootstrap 18 | /******/ // The module cache 19 | /******/ var installedModules = {}; 20 | 21 | /******/ // The require function 22 | /******/ function __webpack_require__(moduleId) { 23 | 24 | /******/ // Check if module is in cache 25 | /******/ if(installedModules[moduleId]) 26 | /******/ return installedModules[moduleId].exports; 27 | 28 | /******/ // Create a new module (and put it into the cache) 29 | /******/ var module = installedModules[moduleId] = { 30 | /******/ exports: {}, 31 | /******/ id: moduleId, 32 | /******/ loaded: false 33 | /******/ }; 34 | 35 | /******/ // Execute the module function 36 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 37 | 38 | /******/ // Flag the module as loaded 39 | /******/ module.loaded = true; 40 | 41 | /******/ // Return the exports of the module 42 | /******/ return module.exports; 43 | /******/ } 44 | 45 | 46 | /******/ // expose the modules object (__webpack_modules__) 47 | /******/ __webpack_require__.m = modules; 48 | 49 | /******/ // expose the module cache 50 | /******/ __webpack_require__.c = installedModules; 51 | 52 | /******/ // __webpack_public_path__ 53 | /******/ __webpack_require__.p = ""; 54 | 55 | /******/ // Load entry module and return exports 56 | /******/ return __webpack_require__(0); 57 | /******/ }) 58 | /************************************************************************/ 59 | /******/ ([ 60 | /* 0 */ 61 | /***/ function(module, exports, __webpack_require__) { 62 | 63 | /** 64 | * Install plugin. 65 | */ 66 | 67 | function install(Vue) { 68 | 69 | var _ = __webpack_require__(1); 70 | 71 | _.config = Vue.config; 72 | _.warning = Vue.util.warn; 73 | _.nextTick = Vue.util.nextTick; 74 | 75 | Vue.url = __webpack_require__(2); 76 | Vue.http = __webpack_require__(8); 77 | Vue.resource = __webpack_require__(23); 78 | Vue.Promise = __webpack_require__(10); 79 | 80 | Object.defineProperties(Vue.prototype, { 81 | 82 | $url: { 83 | get: function () { 84 | return _.options(Vue.url, this, this.$options.url); 85 | } 86 | }, 87 | 88 | $http: { 89 | get: function () { 90 | return _.options(Vue.http, this, this.$options.http); 91 | } 92 | }, 93 | 94 | $resource: { 95 | get: function () { 96 | return Vue.resource.bind(this); 97 | } 98 | }, 99 | 100 | $promise: { 101 | get: function () { 102 | return function (executor) { 103 | return new Vue.Promise(executor, this); 104 | }.bind(this); 105 | } 106 | } 107 | 108 | }); 109 | } 110 | 111 | if (window.Vue) { 112 | Vue.use(install); 113 | } 114 | 115 | module.exports = install; 116 | 117 | 118 | /***/ }, 119 | /* 1 */ 120 | /***/ function(module, exports) { 121 | 122 | /** 123 | * Utility functions. 124 | */ 125 | 126 | var _ = exports, array = [], console = window.console; 127 | 128 | _.warn = function (msg) { 129 | if (console && _.warning && (!_.config.silent || _.config.debug)) { 130 | console.warn('[VueResource warn]: ' + msg); 131 | } 132 | }; 133 | 134 | _.error = function (msg) { 135 | if (console) { 136 | console.error(msg); 137 | } 138 | }; 139 | 140 | _.trim = function (str) { 141 | return str.replace(/^\s*|\s*$/g, ''); 142 | }; 143 | 144 | _.toLower = function (str) { 145 | return str ? str.toLowerCase() : ''; 146 | }; 147 | 148 | _.isArray = Array.isArray; 149 | 150 | _.isString = function (val) { 151 | return typeof val === 'string'; 152 | }; 153 | 154 | _.isFunction = function (val) { 155 | return typeof val === 'function'; 156 | }; 157 | 158 | _.isObject = function (obj) { 159 | return obj !== null && typeof obj === 'object'; 160 | }; 161 | 162 | _.isPlainObject = function (obj) { 163 | return _.isObject(obj) && Object.getPrototypeOf(obj) == Object.prototype; 164 | }; 165 | 166 | _.options = function (fn, obj, options) { 167 | 168 | options = options || {}; 169 | 170 | if (_.isFunction(options)) { 171 | options = options.call(obj); 172 | } 173 | 174 | return _.merge(fn.bind({$vm: obj, $options: options}), fn, {$options: options}); 175 | }; 176 | 177 | _.each = function (obj, iterator) { 178 | 179 | var i, key; 180 | 181 | if (typeof obj.length == 'number') { 182 | for (i = 0; i < obj.length; i++) { 183 | iterator.call(obj[i], obj[i], i); 184 | } 185 | } else if (_.isObject(obj)) { 186 | for (key in obj) { 187 | if (obj.hasOwnProperty(key)) { 188 | iterator.call(obj[key], obj[key], key); 189 | } 190 | } 191 | } 192 | 193 | return obj; 194 | }; 195 | 196 | _.defaults = function (target, source) { 197 | 198 | for (var key in source) { 199 | if (target[key] === undefined) { 200 | target[key] = source[key]; 201 | } 202 | } 203 | 204 | return target; 205 | }; 206 | 207 | _.extend = function (target) { 208 | 209 | var args = array.slice.call(arguments, 1); 210 | 211 | args.forEach(function (arg) { 212 | merge(target, arg); 213 | }); 214 | 215 | return target; 216 | }; 217 | 218 | _.merge = function (target) { 219 | 220 | var args = array.slice.call(arguments, 1); 221 | 222 | args.forEach(function (arg) { 223 | merge(target, arg, true); 224 | }); 225 | 226 | return target; 227 | }; 228 | 229 | function merge(target, source, deep) { 230 | for (var key in source) { 231 | if (deep && (_.isPlainObject(source[key]) || _.isArray(source[key]))) { 232 | if (_.isPlainObject(source[key]) && !_.isPlainObject(target[key])) { 233 | target[key] = {}; 234 | } 235 | if (_.isArray(source[key]) && !_.isArray(target[key])) { 236 | target[key] = []; 237 | } 238 | merge(target[key], source[key], deep); 239 | } else if (source[key] !== undefined) { 240 | target[key] = source[key]; 241 | } 242 | } 243 | } 244 | 245 | 246 | /***/ }, 247 | /* 2 */ 248 | /***/ function(module, exports, __webpack_require__) { 249 | 250 | /** 251 | * Service for URL templating. 252 | */ 253 | 254 | var _ = __webpack_require__(1); 255 | var ie = document.documentMode; 256 | var el = document.createElement('a'); 257 | 258 | function Url(url, params) { 259 | 260 | var options = url, transform; 261 | 262 | if (_.isString(url)) { 263 | options = {url: url, params: params}; 264 | } 265 | 266 | options = _.merge({}, Url.options, this.$options, options); 267 | 268 | Url.transforms.forEach(function (handler) { 269 | transform = factory(handler, transform, this.$vm); 270 | }, this); 271 | 272 | return transform(options); 273 | }; 274 | 275 | /** 276 | * Url options. 277 | */ 278 | 279 | Url.options = { 280 | url: '', 281 | root: null, 282 | params: {} 283 | }; 284 | 285 | /** 286 | * Url transforms. 287 | */ 288 | 289 | Url.transforms = [ 290 | __webpack_require__(3), 291 | __webpack_require__(5), 292 | __webpack_require__(6), 293 | __webpack_require__(7) 294 | ]; 295 | 296 | /** 297 | * Encodes a Url parameter string. 298 | * 299 | * @param {Object} obj 300 | */ 301 | 302 | Url.params = function (obj) { 303 | 304 | var params = [], escape = encodeURIComponent; 305 | 306 | params.add = function (key, value) { 307 | 308 | if (_.isFunction(value)) { 309 | value = value(); 310 | } 311 | 312 | if (value === null) { 313 | value = ''; 314 | } 315 | 316 | this.push(escape(key) + '=' + escape(value)); 317 | }; 318 | 319 | serialize(params, obj); 320 | 321 | return params.join('&').replace(/%20/g, '+'); 322 | }; 323 | 324 | /** 325 | * Parse a URL and return its components. 326 | * 327 | * @param {String} url 328 | */ 329 | 330 | Url.parse = function (url) { 331 | 332 | if (ie) { 333 | el.href = url; 334 | url = el.href; 335 | } 336 | 337 | el.href = url; 338 | 339 | return { 340 | href: el.href, 341 | protocol: el.protocol ? el.protocol.replace(/:$/, '') : '', 342 | port: el.port, 343 | host: el.host, 344 | hostname: el.hostname, 345 | pathname: el.pathname.charAt(0) === '/' ? el.pathname : '/' + el.pathname, 346 | search: el.search ? el.search.replace(/^\?/, '') : '', 347 | hash: el.hash ? el.hash.replace(/^#/, '') : '' 348 | }; 349 | }; 350 | 351 | function factory(handler, next, vm) { 352 | return function (options) { 353 | return handler.call(vm, options, next); 354 | }; 355 | } 356 | 357 | function serialize(params, obj, scope) { 358 | 359 | var array = _.isArray(obj), plain = _.isPlainObject(obj), hash; 360 | 361 | _.each(obj, function (value, key) { 362 | 363 | hash = _.isObject(value) || _.isArray(value); 364 | 365 | if (scope) { 366 | key = scope + '[' + (plain || hash ? key : '') + ']'; 367 | } 368 | 369 | if (!scope && array) { 370 | params.add(value.name, value.value); 371 | } else if (hash) { 372 | serialize(params, value, key); 373 | } else { 374 | params.add(key, value); 375 | } 376 | }); 377 | } 378 | 379 | module.exports = _.url = Url; 380 | 381 | 382 | /***/ }, 383 | /* 3 */ 384 | /***/ function(module, exports, __webpack_require__) { 385 | 386 | /** 387 | * URL Template (RFC 6570) Transform. 388 | */ 389 | 390 | var UrlTemplate = __webpack_require__(4); 391 | 392 | module.exports = function (options) { 393 | 394 | var variables = [], url = UrlTemplate.expand(options.url, options.params, variables); 395 | 396 | variables.forEach(function (key) { 397 | delete options.params[key]; 398 | }); 399 | 400 | return url; 401 | }; 402 | 403 | 404 | /***/ }, 405 | /* 4 */ 406 | /***/ function(module, exports) { 407 | 408 | /** 409 | * URL Template v2.0.6 (https://github.com/bramstein/url-template) 410 | */ 411 | 412 | exports.expand = function (url, params, variables) { 413 | 414 | var tmpl = this.parse(url), expanded = tmpl.expand(params); 415 | 416 | if (variables) { 417 | variables.push.apply(variables, tmpl.vars); 418 | } 419 | 420 | return expanded; 421 | }; 422 | 423 | exports.parse = function (template) { 424 | 425 | var operators = ['+', '#', '.', '/', ';', '?', '&'], variables = []; 426 | 427 | return { 428 | vars: variables, 429 | expand: function (context) { 430 | return template.replace(/\{([^\{\}]+)\}|([^\{\}]+)/g, function (_, expression, literal) { 431 | if (expression) { 432 | 433 | var operator = null, values = []; 434 | 435 | if (operators.indexOf(expression.charAt(0)) !== -1) { 436 | operator = expression.charAt(0); 437 | expression = expression.substr(1); 438 | } 439 | 440 | expression.split(/,/g).forEach(function (variable) { 441 | var tmp = /([^:\*]*)(?::(\d+)|(\*))?/.exec(variable); 442 | values.push.apply(values, exports.getValues(context, operator, tmp[1], tmp[2] || tmp[3])); 443 | variables.push(tmp[1]); 444 | }); 445 | 446 | if (operator && operator !== '+') { 447 | 448 | var separator = ','; 449 | 450 | if (operator === '?') { 451 | separator = '&'; 452 | } else if (operator !== '#') { 453 | separator = operator; 454 | } 455 | 456 | return (values.length !== 0 ? operator : '') + values.join(separator); 457 | } else { 458 | return values.join(','); 459 | } 460 | 461 | } else { 462 | return exports.encodeReserved(literal); 463 | } 464 | }); 465 | } 466 | }; 467 | }; 468 | 469 | exports.getValues = function (context, operator, key, modifier) { 470 | 471 | var value = context[key], result = []; 472 | 473 | if (this.isDefined(value) && value !== '') { 474 | if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') { 475 | value = value.toString(); 476 | 477 | if (modifier && modifier !== '*') { 478 | value = value.substring(0, parseInt(modifier, 10)); 479 | } 480 | 481 | result.push(this.encodeValue(operator, value, this.isKeyOperator(operator) ? key : null)); 482 | } else { 483 | if (modifier === '*') { 484 | if (Array.isArray(value)) { 485 | value.filter(this.isDefined).forEach(function (value) { 486 | result.push(this.encodeValue(operator, value, this.isKeyOperator(operator) ? key : null)); 487 | }, this); 488 | } else { 489 | Object.keys(value).forEach(function (k) { 490 | if (this.isDefined(value[k])) { 491 | result.push(this.encodeValue(operator, value[k], k)); 492 | } 493 | }, this); 494 | } 495 | } else { 496 | var tmp = []; 497 | 498 | if (Array.isArray(value)) { 499 | value.filter(this.isDefined).forEach(function (value) { 500 | tmp.push(this.encodeValue(operator, value)); 501 | }, this); 502 | } else { 503 | Object.keys(value).forEach(function (k) { 504 | if (this.isDefined(value[k])) { 505 | tmp.push(encodeURIComponent(k)); 506 | tmp.push(this.encodeValue(operator, value[k].toString())); 507 | } 508 | }, this); 509 | } 510 | 511 | if (this.isKeyOperator(operator)) { 512 | result.push(encodeURIComponent(key) + '=' + tmp.join(',')); 513 | } else if (tmp.length !== 0) { 514 | result.push(tmp.join(',')); 515 | } 516 | } 517 | } 518 | } else { 519 | if (operator === ';') { 520 | result.push(encodeURIComponent(key)); 521 | } else if (value === '' && (operator === '&' || operator === '?')) { 522 | result.push(encodeURIComponent(key) + '='); 523 | } else if (value === '') { 524 | result.push(''); 525 | } 526 | } 527 | 528 | return result; 529 | }; 530 | 531 | exports.isDefined = function (value) { 532 | return value !== undefined && value !== null; 533 | }; 534 | 535 | exports.isKeyOperator = function (operator) { 536 | return operator === ';' || operator === '&' || operator === '?'; 537 | }; 538 | 539 | exports.encodeValue = function (operator, value, key) { 540 | 541 | value = (operator === '+' || operator === '#') ? this.encodeReserved(value) : encodeURIComponent(value); 542 | 543 | if (key) { 544 | return encodeURIComponent(key) + '=' + value; 545 | } else { 546 | return value; 547 | } 548 | }; 549 | 550 | exports.encodeReserved = function (str) { 551 | return str.split(/(%[0-9A-Fa-f]{2})/g).map(function (part) { 552 | if (!/%[0-9A-Fa-f]/.test(part)) { 553 | part = encodeURI(part); 554 | } 555 | return part; 556 | }).join(''); 557 | }; 558 | 559 | 560 | /***/ }, 561 | /* 5 */ 562 | /***/ function(module, exports, __webpack_require__) { 563 | 564 | /** 565 | * Legacy Transform. 566 | */ 567 | 568 | var _ = __webpack_require__(1); 569 | 570 | module.exports = function (options, next) { 571 | 572 | var variables = [], url = next(options); 573 | 574 | url = url.replace(/(\/?):([a-z]\w*)/gi, function (match, slash, name) { 575 | 576 | _.warn('The `:' + name + '` parameter syntax has been deprecated. Use the `{' + name + '}` syntax instead.'); 577 | 578 | if (options.params[name]) { 579 | variables.push(name); 580 | return slash + encodeUriSegment(options.params[name]); 581 | } 582 | 583 | return ''; 584 | }); 585 | 586 | variables.forEach(function (key) { 587 | delete options.params[key]; 588 | }); 589 | 590 | return url; 591 | }; 592 | 593 | function encodeUriSegment(value) { 594 | 595 | return encodeUriQuery(value, true). 596 | replace(/%26/gi, '&'). 597 | replace(/%3D/gi, '='). 598 | replace(/%2B/gi, '+'); 599 | } 600 | 601 | function encodeUriQuery(value, spaces) { 602 | 603 | return encodeURIComponent(value). 604 | replace(/%40/gi, '@'). 605 | replace(/%3A/gi, ':'). 606 | replace(/%24/g, '$'). 607 | replace(/%2C/gi, ','). 608 | replace(/%20/g, (spaces ? '%20' : '+')); 609 | } 610 | 611 | 612 | /***/ }, 613 | /* 6 */ 614 | /***/ function(module, exports, __webpack_require__) { 615 | 616 | /** 617 | * Query Parameter Transform. 618 | */ 619 | 620 | var _ = __webpack_require__(1); 621 | 622 | module.exports = function (options, next) { 623 | 624 | var urlParams = Object.keys(_.url.options.params), query = {}, url = next(options); 625 | 626 | _.each(options.params, function (value, key) { 627 | if (urlParams.indexOf(key) === -1) { 628 | query[key] = value; 629 | } 630 | }); 631 | 632 | query = _.url.params(query); 633 | 634 | if (query) { 635 | url += (url.indexOf('?') == -1 ? '?' : '&') + query; 636 | } 637 | 638 | return url; 639 | }; 640 | 641 | 642 | /***/ }, 643 | /* 7 */ 644 | /***/ function(module, exports, __webpack_require__) { 645 | 646 | /** 647 | * Root Prefix Transform. 648 | */ 649 | 650 | var _ = __webpack_require__(1); 651 | 652 | module.exports = function (options, next) { 653 | 654 | var url = next(options); 655 | 656 | if (_.isString(options.root) && !url.match(/^(https?:)?\//)) { 657 | url = options.root + '/' + url; 658 | } 659 | 660 | return url; 661 | }; 662 | 663 | 664 | /***/ }, 665 | /* 8 */ 666 | /***/ function(module, exports, __webpack_require__) { 667 | 668 | /** 669 | * Service for sending network requests. 670 | */ 671 | 672 | var _ = __webpack_require__(1); 673 | var Client = __webpack_require__(9); 674 | var Promise = __webpack_require__(10); 675 | var interceptor = __webpack_require__(13); 676 | var jsonType = {'Content-Type': 'application/json'}; 677 | 678 | function Http(url, options) { 679 | 680 | var client = Client, request, promise; 681 | 682 | Http.interceptors.forEach(function (handler) { 683 | client = interceptor(handler, this.$vm)(client); 684 | }, this); 685 | 686 | options = _.isObject(url) ? url : _.extend({url: url}, options); 687 | request = _.merge({}, Http.options, this.$options, options); 688 | promise = client(request).bind(this.$vm).then(function (response) { 689 | 690 | return response.ok ? response : Promise.reject(response); 691 | 692 | }, function (response) { 693 | 694 | if (response instanceof Error) { 695 | _.error(response); 696 | } 697 | 698 | return Promise.reject(response); 699 | }); 700 | 701 | if (request.success) { 702 | promise.success(request.success); 703 | } 704 | 705 | if (request.error) { 706 | promise.error(request.error); 707 | } 708 | 709 | return promise; 710 | } 711 | 712 | Http.options = { 713 | method: 'get', 714 | data: '', 715 | params: {}, 716 | headers: {}, 717 | xhr: null, 718 | upload: null, 719 | jsonp: 'callback', 720 | beforeSend: null, 721 | crossOrigin: null, 722 | emulateHTTP: false, 723 | emulateJSON: false, 724 | timeout: 0 725 | }; 726 | 727 | Http.interceptors = [ 728 | __webpack_require__(14), 729 | __webpack_require__(15), 730 | __webpack_require__(16), 731 | __webpack_require__(18), 732 | __webpack_require__(19), 733 | __webpack_require__(20), 734 | __webpack_require__(21) 735 | ]; 736 | 737 | Http.headers = { 738 | put: jsonType, 739 | post: jsonType, 740 | patch: jsonType, 741 | delete: jsonType, 742 | common: {'Accept': 'application/json, text/plain, */*'}, 743 | custom: {'X-Requested-With': 'XMLHttpRequest'} 744 | }; 745 | 746 | ['get', 'put', 'post', 'patch', 'delete', 'jsonp'].forEach(function (method) { 747 | 748 | Http[method] = function (url, data, success, options) { 749 | 750 | if (_.isFunction(data)) { 751 | options = success; 752 | success = data; 753 | data = undefined; 754 | } 755 | 756 | if (_.isObject(success)) { 757 | options = success; 758 | success = undefined; 759 | } 760 | 761 | return this(url, _.extend({method: method, data: data, success: success}, options)); 762 | }; 763 | }); 764 | 765 | module.exports = _.http = Http; 766 | 767 | 768 | /***/ }, 769 | /* 9 */ 770 | /***/ function(module, exports, __webpack_require__) { 771 | 772 | /** 773 | * Base client. 774 | */ 775 | 776 | var _ = __webpack_require__(1); 777 | var Promise = __webpack_require__(10); 778 | var xhrClient = __webpack_require__(12); 779 | 780 | module.exports = function (request) { 781 | 782 | var response = (request.client || xhrClient)(request); 783 | 784 | return Promise.resolve(response).then(function (response) { 785 | 786 | if (response.headers) { 787 | 788 | var headers = parseHeaders(response.headers); 789 | 790 | response.headers = function (name) { 791 | 792 | if (name) { 793 | return headers[_.toLower(name)]; 794 | } 795 | 796 | return headers; 797 | }; 798 | 799 | } 800 | 801 | response.ok = response.status >= 200 && response.status < 300; 802 | 803 | return response; 804 | }); 805 | 806 | }; 807 | 808 | function parseHeaders(str) { 809 | 810 | var headers = {}, value, name, i; 811 | 812 | if (_.isString(str)) { 813 | _.each(str.split('\n'), function (row) { 814 | 815 | i = row.indexOf(':'); 816 | name = _.trim(_.toLower(row.slice(0, i))); 817 | value = _.trim(row.slice(i + 1)); 818 | 819 | if (headers[name]) { 820 | 821 | if (_.isArray(headers[name])) { 822 | headers[name].push(value); 823 | } else { 824 | headers[name] = [headers[name], value]; 825 | } 826 | 827 | } else { 828 | 829 | headers[name] = value; 830 | } 831 | 832 | }); 833 | } 834 | 835 | return headers; 836 | } 837 | 838 | 839 | /***/ }, 840 | /* 10 */ 841 | /***/ function(module, exports, __webpack_require__) { 842 | 843 | /** 844 | * Promise adapter. 845 | */ 846 | 847 | var _ = __webpack_require__(1); 848 | var PromiseObj = window.Promise || __webpack_require__(11); 849 | 850 | function Promise(executor, context) { 851 | 852 | if (executor instanceof PromiseObj) { 853 | this.promise = executor; 854 | } else { 855 | this.promise = new PromiseObj(executor.bind(context)); 856 | } 857 | 858 | this.context = context; 859 | } 860 | 861 | Promise.all = function (iterable, context) { 862 | return new Promise(PromiseObj.all(iterable), context); 863 | }; 864 | 865 | Promise.resolve = function (value, context) { 866 | return new Promise(PromiseObj.resolve(value), context); 867 | }; 868 | 869 | Promise.reject = function (reason, context) { 870 | return new Promise(PromiseObj.reject(reason), context); 871 | }; 872 | 873 | Promise.race = function (iterable, context) { 874 | return new Promise(PromiseObj.race(iterable), context); 875 | }; 876 | 877 | var p = Promise.prototype; 878 | 879 | p.bind = function (context) { 880 | this.context = context; 881 | return this; 882 | }; 883 | 884 | p.then = function (fulfilled, rejected) { 885 | 886 | if (fulfilled && fulfilled.bind && this.context) { 887 | fulfilled = fulfilled.bind(this.context); 888 | } 889 | 890 | if (rejected && rejected.bind && this.context) { 891 | rejected = rejected.bind(this.context); 892 | } 893 | 894 | this.promise = this.promise.then(fulfilled, rejected); 895 | 896 | return this; 897 | }; 898 | 899 | p.catch = function (rejected) { 900 | 901 | if (rejected && rejected.bind && this.context) { 902 | rejected = rejected.bind(this.context); 903 | } 904 | 905 | this.promise = this.promise.catch(rejected); 906 | 907 | return this; 908 | }; 909 | 910 | p.finally = function (callback) { 911 | 912 | return this.then(function (value) { 913 | callback.call(this); 914 | return value; 915 | }, function (reason) { 916 | callback.call(this); 917 | return PromiseObj.reject(reason); 918 | } 919 | ); 920 | }; 921 | 922 | p.success = function (callback) { 923 | 924 | _.warn('The `success` method has been deprecated. Use the `then` method instead.'); 925 | 926 | return this.then(function (response) { 927 | return callback.call(this, response.data, response.status, response) || response; 928 | }); 929 | }; 930 | 931 | p.error = function (callback) { 932 | 933 | _.warn('The `error` method has been deprecated. Use the `catch` method instead.'); 934 | 935 | return this.catch(function (response) { 936 | return callback.call(this, response.data, response.status, response) || response; 937 | }); 938 | }; 939 | 940 | p.always = function (callback) { 941 | 942 | _.warn('The `always` method has been deprecated. Use the `finally` method instead.'); 943 | 944 | var cb = function (response) { 945 | return callback.call(this, response.data, response.status, response) || response; 946 | }; 947 | 948 | return this.then(cb, cb); 949 | }; 950 | 951 | module.exports = Promise; 952 | 953 | 954 | /***/ }, 955 | /* 11 */ 956 | /***/ function(module, exports, __webpack_require__) { 957 | 958 | /** 959 | * Promises/A+ polyfill v1.1.4 (https://github.com/bramstein/promis) 960 | */ 961 | 962 | var _ = __webpack_require__(1); 963 | 964 | var RESOLVED = 0; 965 | var REJECTED = 1; 966 | var PENDING = 2; 967 | 968 | function Promise(executor) { 969 | 970 | this.state = PENDING; 971 | this.value = undefined; 972 | this.deferred = []; 973 | 974 | var promise = this; 975 | 976 | try { 977 | executor(function (x) { 978 | promise.resolve(x); 979 | }, function (r) { 980 | promise.reject(r); 981 | }); 982 | } catch (e) { 983 | promise.reject(e); 984 | } 985 | } 986 | 987 | Promise.reject = function (r) { 988 | return new Promise(function (resolve, reject) { 989 | reject(r); 990 | }); 991 | }; 992 | 993 | Promise.resolve = function (x) { 994 | return new Promise(function (resolve, reject) { 995 | resolve(x); 996 | }); 997 | }; 998 | 999 | Promise.all = function all(iterable) { 1000 | return new Promise(function (resolve, reject) { 1001 | var count = 0, result = []; 1002 | 1003 | if (iterable.length === 0) { 1004 | resolve(result); 1005 | } 1006 | 1007 | function resolver(i) { 1008 | return function (x) { 1009 | result[i] = x; 1010 | count += 1; 1011 | 1012 | if (count === iterable.length) { 1013 | resolve(result); 1014 | } 1015 | }; 1016 | } 1017 | 1018 | for (var i = 0; i < iterable.length; i += 1) { 1019 | Promise.resolve(iterable[i]).then(resolver(i), reject); 1020 | } 1021 | }); 1022 | }; 1023 | 1024 | Promise.race = function race(iterable) { 1025 | return new Promise(function (resolve, reject) { 1026 | for (var i = 0; i < iterable.length; i += 1) { 1027 | Promise.resolve(iterable[i]).then(resolve, reject); 1028 | } 1029 | }); 1030 | }; 1031 | 1032 | var p = Promise.prototype; 1033 | 1034 | p.resolve = function resolve(x) { 1035 | var promise = this; 1036 | 1037 | if (promise.state === PENDING) { 1038 | if (x === promise) { 1039 | throw new TypeError('Promise settled with itself.'); 1040 | } 1041 | 1042 | var called = false; 1043 | 1044 | try { 1045 | var then = x && x['then']; 1046 | 1047 | if (x !== null && typeof x === 'object' && typeof then === 'function') { 1048 | then.call(x, function (x) { 1049 | if (!called) { 1050 | promise.resolve(x); 1051 | } 1052 | called = true; 1053 | 1054 | }, function (r) { 1055 | if (!called) { 1056 | promise.reject(r); 1057 | } 1058 | called = true; 1059 | }); 1060 | return; 1061 | } 1062 | } catch (e) { 1063 | if (!called) { 1064 | promise.reject(e); 1065 | } 1066 | return; 1067 | } 1068 | 1069 | promise.state = RESOLVED; 1070 | promise.value = x; 1071 | promise.notify(); 1072 | } 1073 | }; 1074 | 1075 | p.reject = function reject(reason) { 1076 | var promise = this; 1077 | 1078 | if (promise.state === PENDING) { 1079 | if (reason === promise) { 1080 | throw new TypeError('Promise settled with itself.'); 1081 | } 1082 | 1083 | promise.state = REJECTED; 1084 | promise.value = reason; 1085 | promise.notify(); 1086 | } 1087 | }; 1088 | 1089 | p.notify = function notify() { 1090 | var promise = this; 1091 | 1092 | _.nextTick(function () { 1093 | if (promise.state !== PENDING) { 1094 | while (promise.deferred.length) { 1095 | var deferred = promise.deferred.shift(), 1096 | onResolved = deferred[0], 1097 | onRejected = deferred[1], 1098 | resolve = deferred[2], 1099 | reject = deferred[3]; 1100 | 1101 | try { 1102 | if (promise.state === RESOLVED) { 1103 | if (typeof onResolved === 'function') { 1104 | resolve(onResolved.call(undefined, promise.value)); 1105 | } else { 1106 | resolve(promise.value); 1107 | } 1108 | } else if (promise.state === REJECTED) { 1109 | if (typeof onRejected === 'function') { 1110 | resolve(onRejected.call(undefined, promise.value)); 1111 | } else { 1112 | reject(promise.value); 1113 | } 1114 | } 1115 | } catch (e) { 1116 | reject(e); 1117 | } 1118 | } 1119 | } 1120 | }); 1121 | }; 1122 | 1123 | p.then = function then(onResolved, onRejected) { 1124 | var promise = this; 1125 | 1126 | return new Promise(function (resolve, reject) { 1127 | promise.deferred.push([onResolved, onRejected, resolve, reject]); 1128 | promise.notify(); 1129 | }); 1130 | }; 1131 | 1132 | p.catch = function (onRejected) { 1133 | return this.then(undefined, onRejected); 1134 | }; 1135 | 1136 | module.exports = Promise; 1137 | 1138 | 1139 | /***/ }, 1140 | /* 12 */ 1141 | /***/ function(module, exports, __webpack_require__) { 1142 | 1143 | /** 1144 | * XMLHttp client. 1145 | */ 1146 | 1147 | var _ = __webpack_require__(1); 1148 | var Promise = __webpack_require__(10); 1149 | 1150 | module.exports = function (request) { 1151 | return new Promise(function (resolve) { 1152 | 1153 | var xhr = new XMLHttpRequest(), response = {request: request}, handler; 1154 | 1155 | request.cancel = function () { 1156 | xhr.abort(); 1157 | }; 1158 | 1159 | xhr.open(request.method, _.url(request), true); 1160 | 1161 | handler = function (event) { 1162 | 1163 | response.data = xhr.responseText; 1164 | response.status = xhr.status; 1165 | response.statusText = xhr.statusText; 1166 | response.headers = xhr.getAllResponseHeaders(); 1167 | 1168 | resolve(response); 1169 | }; 1170 | 1171 | xhr.timeout = 0; 1172 | xhr.onload = handler; 1173 | xhr.onabort = handler; 1174 | xhr.onerror = handler; 1175 | xhr.ontimeout = function () {}; 1176 | xhr.onprogress = function () {}; 1177 | 1178 | if (_.isPlainObject(request.xhr)) { 1179 | _.extend(xhr, request.xhr); 1180 | } 1181 | 1182 | if (_.isPlainObject(request.upload)) { 1183 | _.extend(xhr.upload, request.upload); 1184 | } 1185 | 1186 | _.each(request.headers || {}, function (value, header) { 1187 | xhr.setRequestHeader(header, value); 1188 | }); 1189 | 1190 | xhr.send(request.data); 1191 | }); 1192 | }; 1193 | 1194 | 1195 | /***/ }, 1196 | /* 13 */ 1197 | /***/ function(module, exports, __webpack_require__) { 1198 | 1199 | /** 1200 | * Interceptor factory. 1201 | */ 1202 | 1203 | var _ = __webpack_require__(1); 1204 | var Promise = __webpack_require__(10); 1205 | 1206 | module.exports = function (handler, vm) { 1207 | 1208 | return function (client) { 1209 | 1210 | if (_.isFunction(handler)) { 1211 | handler = handler.call(vm, Promise); 1212 | } 1213 | 1214 | return function (request) { 1215 | 1216 | if (_.isFunction(handler.request)) { 1217 | request = handler.request.call(vm, request); 1218 | } 1219 | 1220 | return when(request, function (request) { 1221 | return when(client(request), function (response) { 1222 | 1223 | if (_.isFunction(handler.response)) { 1224 | response = handler.response.call(vm, response); 1225 | } 1226 | 1227 | return response; 1228 | }); 1229 | }); 1230 | }; 1231 | }; 1232 | }; 1233 | 1234 | function when(value, fulfilled, rejected) { 1235 | 1236 | var promise = Promise.resolve(value); 1237 | 1238 | if (arguments.length < 2) { 1239 | return promise; 1240 | } 1241 | 1242 | return promise.then(fulfilled, rejected); 1243 | } 1244 | 1245 | 1246 | /***/ }, 1247 | /* 14 */ 1248 | /***/ function(module, exports, __webpack_require__) { 1249 | 1250 | /** 1251 | * Before Interceptor. 1252 | */ 1253 | 1254 | var _ = __webpack_require__(1); 1255 | 1256 | module.exports = { 1257 | 1258 | request: function (request) { 1259 | 1260 | if (_.isFunction(request.beforeSend)) { 1261 | request.beforeSend.call(this, request); 1262 | } 1263 | 1264 | return request; 1265 | } 1266 | 1267 | }; 1268 | 1269 | 1270 | /***/ }, 1271 | /* 15 */ 1272 | /***/ function(module, exports) { 1273 | 1274 | /** 1275 | * Timeout Interceptor. 1276 | */ 1277 | 1278 | module.exports = function () { 1279 | 1280 | var timeout; 1281 | 1282 | return { 1283 | 1284 | request: function (request) { 1285 | 1286 | if (request.timeout) { 1287 | timeout = setTimeout(function () { 1288 | request.cancel(); 1289 | }, request.timeout); 1290 | } 1291 | 1292 | return request; 1293 | }, 1294 | 1295 | response: function (response) { 1296 | 1297 | clearTimeout(timeout); 1298 | 1299 | return response; 1300 | } 1301 | 1302 | }; 1303 | }; 1304 | 1305 | 1306 | /***/ }, 1307 | /* 16 */ 1308 | /***/ function(module, exports, __webpack_require__) { 1309 | 1310 | /** 1311 | * JSONP Interceptor. 1312 | */ 1313 | 1314 | var jsonpClient = __webpack_require__(17); 1315 | 1316 | module.exports = { 1317 | 1318 | request: function (request) { 1319 | 1320 | if (request.method == 'JSONP') { 1321 | request.client = jsonpClient; 1322 | } 1323 | 1324 | return request; 1325 | } 1326 | 1327 | }; 1328 | 1329 | 1330 | /***/ }, 1331 | /* 17 */ 1332 | /***/ function(module, exports, __webpack_require__) { 1333 | 1334 | /** 1335 | * JSONP client. 1336 | */ 1337 | 1338 | var _ = __webpack_require__(1); 1339 | var Promise = __webpack_require__(10); 1340 | 1341 | module.exports = function (request) { 1342 | return new Promise(function (resolve) { 1343 | 1344 | var callback = '_jsonp' + Math.random().toString(36).substr(2), response = {request: request, data: null}, handler, script; 1345 | 1346 | request.params[request.jsonp] = callback; 1347 | request.cancel = function () { 1348 | handler({type: 'cancel'}); 1349 | }; 1350 | 1351 | script = document.createElement('script'); 1352 | script.src = _.url(request); 1353 | script.type = 'text/javascript'; 1354 | script.async = true; 1355 | 1356 | window[callback] = function (data) { 1357 | response.data = data; 1358 | }; 1359 | 1360 | handler = function (event) { 1361 | 1362 | if (event.type === 'load' && response.data !== null) { 1363 | response.status = 200; 1364 | } else if (event.type === 'error') { 1365 | response.status = 404; 1366 | } else { 1367 | response.status = 0; 1368 | } 1369 | 1370 | resolve(response); 1371 | 1372 | delete window[callback]; 1373 | document.body.removeChild(script); 1374 | }; 1375 | 1376 | script.onload = handler; 1377 | script.onerror = handler; 1378 | 1379 | document.body.appendChild(script); 1380 | }); 1381 | }; 1382 | 1383 | 1384 | /***/ }, 1385 | /* 18 */ 1386 | /***/ function(module, exports) { 1387 | 1388 | /** 1389 | * HTTP method override Interceptor. 1390 | */ 1391 | 1392 | module.exports = { 1393 | 1394 | request: function (request) { 1395 | 1396 | if (request.emulateHTTP && /^(PUT|PATCH|DELETE)$/i.test(request.method)) { 1397 | request.headers['X-HTTP-Method-Override'] = request.method; 1398 | request.method = 'POST'; 1399 | } 1400 | 1401 | return request; 1402 | } 1403 | 1404 | }; 1405 | 1406 | 1407 | /***/ }, 1408 | /* 19 */ 1409 | /***/ function(module, exports, __webpack_require__) { 1410 | 1411 | /** 1412 | * Mime Interceptor. 1413 | */ 1414 | 1415 | var _ = __webpack_require__(1); 1416 | 1417 | module.exports = { 1418 | 1419 | request: function (request) { 1420 | 1421 | if (request.emulateJSON && _.isPlainObject(request.data)) { 1422 | request.headers['Content-Type'] = 'application/x-www-form-urlencoded'; 1423 | request.data = _.url.params(request.data); 1424 | } 1425 | 1426 | if (_.isObject(request.data) && /FormData/i.test(request.data.toString())) { 1427 | delete request.headers['Content-Type']; 1428 | } 1429 | 1430 | if (_.isPlainObject(request.data)) { 1431 | request.data = JSON.stringify(request.data); 1432 | } 1433 | 1434 | return request; 1435 | }, 1436 | 1437 | response: function (response) { 1438 | 1439 | try { 1440 | response.data = JSON.parse(response.data); 1441 | } catch (e) {} 1442 | 1443 | return response; 1444 | } 1445 | 1446 | }; 1447 | 1448 | 1449 | /***/ }, 1450 | /* 20 */ 1451 | /***/ function(module, exports, __webpack_require__) { 1452 | 1453 | /** 1454 | * Header Interceptor. 1455 | */ 1456 | 1457 | var _ = __webpack_require__(1); 1458 | 1459 | module.exports = { 1460 | 1461 | request: function (request) { 1462 | 1463 | request.method = request.method.toUpperCase(); 1464 | request.headers = _.extend({}, _.http.headers.common, 1465 | !request.crossOrigin ? _.http.headers.custom : {}, 1466 | _.http.headers[request.method.toLowerCase()], 1467 | request.headers 1468 | ); 1469 | 1470 | if (_.isPlainObject(request.data) && /^(GET|JSONP)$/i.test(request.method)) { 1471 | _.extend(request.params, request.data); 1472 | delete request.data; 1473 | } 1474 | 1475 | return request; 1476 | } 1477 | 1478 | }; 1479 | 1480 | 1481 | /***/ }, 1482 | /* 21 */ 1483 | /***/ function(module, exports, __webpack_require__) { 1484 | 1485 | /** 1486 | * CORS Interceptor. 1487 | */ 1488 | 1489 | var _ = __webpack_require__(1); 1490 | var xdrClient = __webpack_require__(22); 1491 | var xhrCors = 'withCredentials' in new XMLHttpRequest(); 1492 | var originUrl = _.url.parse(location.href); 1493 | 1494 | module.exports = { 1495 | 1496 | request: function (request) { 1497 | 1498 | if (request.crossOrigin === null) { 1499 | request.crossOrigin = crossOrigin(request); 1500 | } 1501 | 1502 | if (request.crossOrigin) { 1503 | 1504 | if (!xhrCors) { 1505 | request.client = xdrClient; 1506 | } 1507 | 1508 | request.emulateHTTP = false; 1509 | } 1510 | 1511 | return request; 1512 | } 1513 | 1514 | }; 1515 | 1516 | function crossOrigin(request) { 1517 | 1518 | var requestUrl = _.url.parse(_.url(request)); 1519 | 1520 | return (requestUrl.protocol !== originUrl.protocol || requestUrl.host !== originUrl.host); 1521 | } 1522 | 1523 | 1524 | /***/ }, 1525 | /* 22 */ 1526 | /***/ function(module, exports, __webpack_require__) { 1527 | 1528 | /** 1529 | * XDomain client (Internet Explorer). 1530 | */ 1531 | 1532 | var _ = __webpack_require__(1); 1533 | var Promise = __webpack_require__(10); 1534 | 1535 | module.exports = function (request) { 1536 | return new Promise(function (resolve) { 1537 | 1538 | var xdr = new XDomainRequest(), response = {request: request}, handler; 1539 | 1540 | request.cancel = function () { 1541 | xdr.abort(); 1542 | }; 1543 | 1544 | xdr.open(request.method, _.url(request), true); 1545 | 1546 | handler = function (event) { 1547 | 1548 | response.data = xdr.responseText; 1549 | response.status = xdr.status; 1550 | response.statusText = xdr.statusText; 1551 | 1552 | resolve(response); 1553 | }; 1554 | 1555 | xdr.timeout = 0; 1556 | xdr.onload = handler; 1557 | xdr.onabort = handler; 1558 | xdr.onerror = handler; 1559 | xdr.ontimeout = function () {}; 1560 | xdr.onprogress = function () {}; 1561 | 1562 | xdr.send(request.data); 1563 | }); 1564 | }; 1565 | 1566 | 1567 | /***/ }, 1568 | /* 23 */ 1569 | /***/ function(module, exports, __webpack_require__) { 1570 | 1571 | /** 1572 | * Service for interacting with RESTful services. 1573 | */ 1574 | 1575 | var _ = __webpack_require__(1); 1576 | 1577 | function Resource(url, params, actions, options) { 1578 | 1579 | var self = this, resource = {}; 1580 | 1581 | actions = _.extend({}, 1582 | Resource.actions, 1583 | actions 1584 | ); 1585 | 1586 | _.each(actions, function (action, name) { 1587 | 1588 | action = _.merge({url: url, params: params || {}}, options, action); 1589 | 1590 | resource[name] = function () { 1591 | return (self.$http || _.http)(opts(action, arguments)); 1592 | }; 1593 | }); 1594 | 1595 | return resource; 1596 | } 1597 | 1598 | function opts(action, args) { 1599 | 1600 | var options = _.extend({}, action), params = {}, data, success, error; 1601 | 1602 | switch (args.length) { 1603 | 1604 | case 4: 1605 | 1606 | error = args[3]; 1607 | success = args[2]; 1608 | 1609 | case 3: 1610 | case 2: 1611 | 1612 | if (_.isFunction(args[1])) { 1613 | 1614 | if (_.isFunction(args[0])) { 1615 | 1616 | success = args[0]; 1617 | error = args[1]; 1618 | 1619 | break; 1620 | } 1621 | 1622 | success = args[1]; 1623 | error = args[2]; 1624 | 1625 | } else { 1626 | 1627 | params = args[0]; 1628 | data = args[1]; 1629 | success = args[2]; 1630 | 1631 | break; 1632 | } 1633 | 1634 | case 1: 1635 | 1636 | if (_.isFunction(args[0])) { 1637 | success = args[0]; 1638 | } else if (/^(POST|PUT|PATCH)$/i.test(options.method)) { 1639 | data = args[0]; 1640 | } else { 1641 | params = args[0]; 1642 | } 1643 | 1644 | break; 1645 | 1646 | case 0: 1647 | 1648 | break; 1649 | 1650 | default: 1651 | 1652 | throw 'Expected up to 4 arguments [params, data, success, error], got ' + args.length + ' arguments'; 1653 | } 1654 | 1655 | options.data = data; 1656 | options.params = _.extend({}, options.params, params); 1657 | 1658 | if (success) { 1659 | options.success = success; 1660 | } 1661 | 1662 | if (error) { 1663 | options.error = error; 1664 | } 1665 | 1666 | return options; 1667 | } 1668 | 1669 | Resource.actions = { 1670 | 1671 | get: {method: 'GET'}, 1672 | save: {method: 'POST'}, 1673 | query: {method: 'GET'}, 1674 | update: {method: 'PUT'}, 1675 | remove: {method: 'DELETE'}, 1676 | delete: {method: 'DELETE'} 1677 | 1678 | }; 1679 | 1680 | module.exports = _.resource = Resource; 1681 | 1682 | 1683 | /***/ } 1684 | /******/ ]) 1685 | }); 1686 | ; -------------------------------------------------------------------------------- /js/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | template: '', 14 | components: { App } 15 | }) 16 | -------------------------------------------------------------------------------- /npm-debug.log: -------------------------------------------------------------------------------- 1 | 0 info it worked if it ends with ok 2 | 1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe', 3 | 1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js', 4 | 1 verbose cli 'run', 5 | 1 verbose cli 'dev' ] 6 | 2 info using npm@4.0.5 7 | 3 info using node@v7.4.0 8 | 4 verbose stack Error: missing script: dev 9 | 4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:151:19) 10 | 4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:61:5 11 | 4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:356:5 12 | 4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:320:45) 13 | 4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:354:3) 14 | 4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:124:5) 15 | 4 verbose stack at ReadFileContext. (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:295:20) 16 | 4 verbose stack at ReadFileContext.callback (C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16) 17 | 4 verbose stack at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:336:13) 18 | 5 verbose cwd D:\vueapp\checkout-vue2 19 | 6 error Windows_NT 10.0.10586 20 | 7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev" 21 | 8 error node v7.4.0 22 | 9 error npm v4.0.5 23 | 10 error missing script: dev 24 | 11 error If you need help, you may report this error at: 25 | 11 error 26 | 12 verbose exit [ 1, true ] 27 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "checkout-vue2", 3 | "version": "1.0.0", 4 | "description": "开发购物车功能", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "vue" 11 | ], 12 | "author": "guang", 13 | "license": "ISC", 14 | "dependencies": { 15 | "vue": "^2.3.4", 16 | "vue-resource": "^1.3.4" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /素材/address.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cart 9 | 10 | 11 | 12 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | add2 26 | 27 | 28 | 29 | ok 30 | 31 | 32 | 33 | edit 34 | 35 | 36 | 37 | delete 38 | 39 | 40 | 41 | clock 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 |
    JackBean
    69 |
    北京朝阳区朝阳公园
    70 |
    13356576785
    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 | more 102 | 103 | 104 | 105 | 106 | 107 |
108 |
109 | 110 | 111 |
112 | 配送方式 113 |
114 |
115 |
116 |
    117 |
  • 118 |
    标准配送
    119 |
    Free
    120 |
    • 121 |
  • 122 |
    高级配送
    123 |
    180
    124 |
    • 125 |
126 |
127 |
128 |
129 | 下一步 130 |
131 | 147 | 192 | 194 |
195 |
196 |
197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | -------------------------------------------------------------------------------- /素材/cart.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Cart 9 | 10 | 11 | 12 | 19 | 20 | 21 |
22 |
23 | 24 | 25 | 26 | add2 27 | 28 | 29 | 30 | ok 31 | 32 | 33 | 34 | edit 35 | 36 | 37 | 38 | delete 39 | 40 | 41 | 42 | clock 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 |
    0.00
    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 | Item total: 136 |
137 |
138 | 结账 139 |
140 |
141 |
142 |
143 |
144 | 145 | 161 |
162 |
163 | 164 | 165 | 166 | 167 | 168 | 169 | -------------------------------------------------------------------------------- /素材/css/base.css: -------------------------------------------------------------------------------- 1 | /* base */ 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; } 6 | 7 | html, 8 | body { 9 | overflow-x: hidden; } 10 | 11 | html { 12 | font-family: sans-serif; 13 | font-size: 100%; 14 | -ms-text-size-adjust: 100%; 15 | -webkit-text-size-adjust: 100%; } 16 | 17 | body { 18 | margin: 0; 19 | padding: 0; } 20 | 21 | ul, ol { 22 | list-style: none; 23 | margin: 0; 24 | padding: 0; } 25 | 26 | div, p, dl, dt, dd { 27 | margin: 0; 28 | padding: 0; } 29 | 30 | li, 31 | dl, 32 | dt, 33 | dd, 34 | h1, 35 | h2, 36 | h3, 37 | h4, 38 | h5, 39 | h6, 40 | hgroup, 41 | p, 42 | blockquote, 43 | figure, 44 | form, 45 | fieldset, 46 | input, 47 | legend, 48 | pre, 49 | abbr, 50 | button { 51 | margin: 0; 52 | padding: 0; } 53 | 54 | h1, 55 | h2, 56 | h3, 57 | h4, 58 | h5, 59 | h6 { 60 | font-weight: normal; } 61 | 62 | pre, 63 | code, 64 | address, 65 | caption, 66 | th, 67 | figcaption { 68 | font-size: 1em; 69 | font-weight: normal; 70 | font-style: normal; } 71 | 72 | fieldset, 73 | iframe, 74 | img { 75 | border: 0; } 76 | 77 | caption, 78 | th { 79 | text-align: left; } 80 | 81 | table { 82 | border-collapse: collapse; 83 | border-spacing: 0; } 84 | 85 | article, 86 | aside, 87 | footer, 88 | header, 89 | nav, 90 | main, 91 | section, 92 | summary, 93 | details, 94 | figure, 95 | figcaption { 96 | display: block; } 97 | 98 | audio, 99 | canvas, 100 | video, 101 | progress { 102 | display: inline-block; 103 | vertical-align: baseline; } 104 | 105 | button { 106 | background: none; 107 | border: 0; 108 | box-sizing: border-box; 109 | color: inherit; 110 | cursor: pointer; 111 | font: inherit; 112 | line-height: inherit; 113 | overflow: visible; 114 | vertical-align: inherit; } 115 | 116 | button:disabled { 117 | cursor: default; } 118 | 119 | a { 120 | color: inherit; 121 | text-decoration: none; } 122 | 123 | a:active, 124 | a:hover { 125 | outline: 0; } 126 | 127 | h1 { 128 | font-size: 2em; } 129 | 130 | img { 131 | border: 0; } 132 | 133 | [hidden] { 134 | display: none; } 135 | 136 | .nobr { 137 | white-space: nowrap; } 138 | 139 | i, 140 | em, 141 | code { 142 | font-style: normal; } 143 | 144 | b, 145 | strong { 146 | font-weight: bold; } 147 | 148 | sub, 149 | sup { 150 | font-size: 75%; 151 | line-height: 0; 152 | position: relative; 153 | vertical-align: baseline; } 154 | 155 | sup { 156 | top: -0.5em; } 157 | 158 | button, 159 | input, 160 | select, 161 | textarea { 162 | font-family: inherit; 163 | /* 1 */ 164 | font-size: 100%; 165 | /* 2 */ 166 | margin: 0; 167 | /* 3 */ } 168 | 169 | input:focus, 170 | select:focus, 171 | textarea:focus, 172 | button:focus, button:active { 173 | outline: none; } 174 | 175 | table { 176 | border-collapse: collapse; 177 | border-spacing: 0; } 178 | 179 | .clearfix:after { 180 | visibility: hidden; 181 | display: block; 182 | content: " "; 183 | clear: both; } 184 | 185 | .clearfix { 186 | zoom: 1; } 187 | 188 | @media print { 189 | body, 190 | #main, 191 | #content { 192 | color: #000; } 193 | a, 194 | a:link, 195 | a:visited { 196 | color: #000; 197 | text-decoration: none; } } 198 | 199 | 200 | html { 201 | font-size: 10px; } 202 | 203 | body { 204 | font-size: 1.4rem; 205 | font-family: sans-serif; 206 | color: #333; 207 | font-family: "akkurat", sans-serif; } 208 | 209 | .container { 210 | max-width: 1280px; 211 | margin: 0 auto; } 212 | 213 | @media only screen and (max-width: 1280px) { 214 | .container { 215 | width: 100%; } } 216 | 217 | .btn { 218 | display: inline-block; 219 | height: 54px; 220 | line-height: 54px; 221 | padding: 0 1.2em; 222 | text-align: center; 223 | font-size: 18px; 224 | font-family: "moderat", sans-serif; 225 | transition: all .3s ease-out; } 226 | .btn:hover { 227 | background-color: #fff; 228 | color: #e02614; 229 | transition: all .3s ease-out; } 230 | 231 | .btn--orange { 232 | background-color: #EE7A23; 233 | border: 1px #EE7A23 solid; 234 | color: #fff; } 235 | .btn--orange:hover { 236 | background-color: #fff; 237 | color: #EE7A23; } 238 | 239 | .btn--white { 240 | background-color: #fff; 241 | border: 1px #d1434a solid; 242 | color: #d1434a; } 243 | .btn--white:hover { 244 | background-color: #d1434a; 245 | color: #fff; } 246 | 247 | .btn--red { 248 | background-color: #d1434a; 249 | border: 1px #d1434a solid; 250 | color: #fff; } 251 | .btn--red:hover { 252 | background-color: #fff; 253 | color: #d1434a; } 254 | 255 | .btn--gray-white { 256 | background-color: none; 257 | border: 1px #605F5F solid; 258 | color: #605F5F; } 259 | .btn--gray-white:hover { 260 | background-color: #605F5F; 261 | color: #fff; } 262 | 263 | .btn--dis { 264 | background-color: #ccc; 265 | border: 1px #ccc solid; 266 | color: #fff; 267 | cursor: disabled; } 268 | .btn--dis:hover { 269 | background-color: #ccc; 270 | color: #fff; } 271 | 272 | input[type="text"], textarea { 273 | padding: .5em 20px; 274 | border: 1px solid #bbb; 275 | background: #white; } 276 | 277 | .up-down-btn { 278 | color: #EE7A23; } 279 | 280 | .i-up-down { 281 | position: relative; 282 | display: inline-block; 283 | width: 14px; 284 | height: 6px; 285 | vertical-align: middle; 286 | z-index: 2; 287 | -ms-transform: translateY(2px); 288 | transform: translateY(2px); 289 | transition: transform .3s ease-out; } 290 | .i-up-down i { 291 | position: absolute; 292 | top: 0; 293 | width: 8px; 294 | height: 1px; 295 | background: #EE7A23; } 296 | .i-up-down .i-up-down-l { 297 | left: 0; 298 | -ms-transform: rotate(40deg); 299 | transform: rotate(40deg); 300 | transition: transform .3s ease-out; } 301 | .i-up-down .i-up-down-r { 302 | right: 0; 303 | -ms-transform: rotate(-40deg); 304 | transform: rotate(-40deg); 305 | transition: all .3s ease-out; } 306 | 307 | .select-self { 308 | position: relative; 309 | display: inline-block; 310 | cursor: pointer; } 311 | 312 | .select-self-area { 313 | width: auto; 314 | background: #f0f0f0; 315 | border-radius: 3px; 316 | min-width: 50px; 317 | max-width: 240px; 318 | height: 30px; 319 | line-height: 30px; } 320 | .select-self-area .select-ipt { 321 | display: block; 322 | height: 100%; 323 | padding: 0 2em 0 1em; 324 | border: 0; 325 | color: #605F5F; 326 | overflow: hidden; } 327 | .select-self-area .select-btn { 328 | position: absolute; 329 | right: 0; 330 | top: 0; 331 | width: 1.286em; 332 | height: 100%; 333 | background: #fff; 334 | border: 1px solid #ccc; 335 | border-radius: 3px; 336 | text-align: center; } 337 | .select-self-area .select-btn .i-up-down { 338 | width: 8px; 339 | top: 0; 340 | left: 0; } 341 | .select-self-area .select-btn .i-up-down i { 342 | width: 5px; 343 | height: 2px; 344 | background-color: #605F5F; } 345 | 346 | .select-self-white .select-self-area { 347 | background: #fff; 348 | border: 1px solid #ccc; 349 | border-radius: 0; } 350 | 351 | .select-self-white .select-btn { 352 | border: none; 353 | background: none; } 354 | 355 | .select-options { 356 | display: none; 357 | position: absolute; 358 | top: 30px; 359 | left: 0; 360 | width: 100%; 361 | max-height: 210px; 362 | background: #f0f0f0; 363 | border-radius: 0 0 3px 3px; 364 | overflow-y: auto; 365 | z-index: 1; } 366 | .select-options li { 367 | padding: .5em 15px; 368 | border-top: 1px solid #e9e9e9; 369 | text-align: left; } 370 | .select-options li:hover { 371 | color: #EE7A23; } 372 | 373 | .select-self-open { 374 | border-radius: 3px 3px 0 0; } 375 | .select-self-open .select-options { 376 | display: block; } 377 | .select-self-open .i-up-down .i-up-down-l { 378 | left: 0; 379 | -ms-transform: rotate(-40deg); 380 | transform: rotate(-40deg); 381 | transition: transform .3s ease-out; } 382 | .select-self-open .i-up-down .i-up-down-r { 383 | right: 0; 384 | -ms-transform: rotate(40deg); 385 | transform: rotate(40deg); 386 | transition: all .3s ease-out; } 387 | .select-self-open .select-options { 388 | z-index: 102; } 389 | 390 | .select-self:hover, .up-down-btn:hover, .up-down-btn.open { 391 | transition: all .3s ease-out; } 392 | .select-self:hover .i-up-down-l, .up-down-btn:hover .i-up-down-l, .up-down-btn.open .i-up-down-l { 393 | -ms-transform: rotate(-40deg); 394 | transform: rotate(-40deg); 395 | transition: all .3s ease-out; } 396 | .select-self:hover .i-up-down-r, .up-down-btn:hover .i-up-down-r, .up-down-btn.open .i-up-down-r { 397 | -ms-transform: rotate(40deg); 398 | transform: rotate(40deg); 399 | transition: all .3s ease-out; } 400 | -------------------------------------------------------------------------------- /素材/css/checkout.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | .check-step { 3 | padding: 5px 0; } 4 | .check-step ul { 5 | display: -ms-flexbox; 6 | display: flex; 7 | margin: 25px 0 50px 0; } 8 | .check-step ul:after { 9 | visibility: hidden; 10 | display: block; 11 | content: " "; 12 | clear: both; } 13 | .check-step li { 14 | position: relative; 15 | float: left; 16 | -ms-flex: 1; 17 | flex: 1; 18 | width: 25%; 19 | line-height: 1.5em; 20 | padding: 0 1em 1em 1em; 21 | border-bottom: 2px solid #ccc; 22 | color: #999; 23 | font-size: 16px; 24 | text-align: center; } 25 | .check-step li:after { 26 | position: absolute; 27 | bottom: -7px; 28 | left: 50%; 29 | margin-left: -7px; 30 | content: ""; 31 | width: 14px; 32 | height: 14px; 33 | border-radius: 50%; 34 | background: #ccc; } 35 | .check-step li.cur { 36 | border-color: #EE7A23; 37 | color: #EE7A23; } 38 | .check-step li.cur:after { 39 | background: #EE7A23; } 40 | 41 | @media only screen and (max-width: 767px) { 42 | .check-step ul { 43 | margin: 10px 0 25px 0; } 44 | .check-step li { 45 | font-size: 12px; } } 46 | 47 | .addr-list ul:after { 48 | visibility: hidden; 49 | display: block; 50 | content: " "; 51 | clear: both; } 52 | 53 | .addr-list li { 54 | position: relative; 55 | float: left; 56 | width: 23.5%; 57 | height: 162px; 58 | margin: 10px 2% 10px 0; 59 | padding: 20px 20px 40px 20px; 60 | background: #fff; 61 | border: 2px solid #e9e9e9; 62 | overflow: hidden; 63 | cursor: pointer; } 64 | .addr-list li dt { 65 | margin-bottom: 10px; 66 | font-size: 18px; } 67 | .addr-list li dd { 68 | margin-bottom: 6px; 69 | line-height: 20px; } 70 | .addr-list li .address { 71 | height: 40px; 72 | overflow: hidden; } 73 | .addr-list li .tel { 74 | color: #605F5F; } 75 | .addr-list li .addr-opration { 76 | position: absolute; } 77 | .addr-list li .addr-opration .icon { 78 | width: 100%; 79 | height: 100%; } 80 | .addr-list li .addr-opration:hover .icon { 81 | fill: #EE7A23; } 82 | .addr-list li .addr-edit { 83 | display: none; 84 | top: 20px; 85 | right: 20px; 86 | width: 20px; 87 | height: 20px; } 88 | .addr-list li .addr-del { 89 | display: none; 90 | bottom: 20px; 91 | right: 20px; 92 | width: 20px; 93 | height: 20px; } 94 | .addr-list li .addr-set-default, .addr-list li .addr-default { 95 | bottom: 15px; 96 | left: 20px; 97 | color: #EE7A23; } 98 | .addr-list li .addr-set-default { 99 | display: none; 100 | } 101 | .addr-list li:nth-child(4n) { 102 | margin-right: 0; } 103 | .addr-list li:hover { 104 | border-color: #EE7A23; } 105 | .addr-list li.addr-new { 106 | color: #333; 107 | text-align: center; } 108 | .addr-list li.addr-new .add-new-inner { 109 | padding-top: 20px; } 110 | .addr-list li.addr-new .add-new-inner .icon-add { 111 | display: inline-block; 112 | width: 50px; 113 | height: 50px; } 114 | .addr-list li.addr-new .add-new-inner .icon-add .icon-add { 115 | width: 50px; 116 | height: 50px; 117 | fill: #605F5F; } 118 | .addr-list li.addr-new .add-new-inner p { 119 | margin-top: 10px; } 120 | .addr-list li.check { 121 | border-color: #EE7A23; 122 | border-width: 2px; } 123 | .addr-list li.check .addr-opration { 124 | display: block; } 125 | 126 | .shipping-addr-more { 127 | margin-top: 10px; 128 | text-align: center; } 129 | 130 | @media only screen and (max-width: 991px) { 131 | .addr-list { 132 | padding: 0 10px; } 133 | .addr-list li { 134 | width: 49%; 135 | margin-right: 2%; } 136 | .addr-list li:nth-child(4n) { 137 | margin-right: 2%; } 138 | .addr-list li:nth-child(2n) { 139 | margin-right: 0; } } 140 | 141 | @media only screen and (max-width: 767px) { 142 | .addr-list { 143 | padding: 0 10px; } 144 | .addr-list li { 145 | width: 100%; 146 | margin: 5px 0; } } 147 | 148 | .cart-item { 149 | display: table; 150 | width: 100%; } 151 | 152 | .cart-item-head { 153 | display: table-header-group; 154 | width: 100%; } 155 | .cart-item-head ul { 156 | display: table-row; 157 | width: 100%; } 158 | .cart-item-head li { 159 | display: table-cell; 160 | height: 54px; 161 | line-height: 54px; 162 | background: #605F5F; 163 | color: #fff; 164 | font-size: 18px; 165 | text-align: center; } 166 | .cart-item-head li:nth-child(2), .cart-item-head li:nth-child(3), .cart-item-head li:nth-child(4), .cart-item-head li:nth-child(5) { 167 | width: 12%; 168 | padding: 0 10px; } 169 | 170 | .cart-item-list { 171 | display: table-row-group; } 172 | .cart-item-list > li { 173 | position: relative; 174 | display: table-row; 175 | padding: 36px 0; } 176 | .cart-item-list > li > div { 177 | position: relative; 178 | display: table-cell; 179 | text-align: center; 180 | vertical-align: top; 181 | border-bottom: 1px solid #e9e9e9; } 182 | .cart-item-list > li.disabled > div:after { 183 | position: absolute; 184 | top: 0; 185 | left: 0; 186 | content: ""; 187 | width: 100%; 188 | height: 100%; 189 | background: rgba(96, 95, 95, 0.3); 190 | z-index: 5; } 191 | .cart-item-list .cart-tab-1 { 192 | min-height: 72px; 193 | padding: 36px 0; 194 | text-align: left; 195 | border-left: 1px solid #e9e9e9; } 196 | .cart-item-list .cart-tab-2 { 197 | padding-top: 64px; } 198 | .cart-item-list .cart-tab-3 { 199 | padding-top: 48px; } 200 | .cart-item-list .cart-tab-4 { 201 | padding-top: 64px; } 202 | .cart-item-list .cart-tab-5 { 203 | padding-top: 62px; 204 | border-right: 1px solid #e9e9e9; } 205 | .cart-item-list .cart-item-check { 206 | float: left; 207 | padding: 28px 0 28px 22px; } 208 | .cart-item-list .cart-item-pic { 209 | float: left; 210 | width: 80px; 211 | height: 72px; 212 | margin-left: 22px; 213 | border: 1px solid #e9e9e9;} 214 | .cart-item-list .cart-item-pic img { 215 | width: 100%; 216 | height: 100%; 217 | cursor:pointer;} 218 | .cart-item-list .cart-item-title { 219 | min-height: 58px; 220 | padding: 0 20px 0 160px; } 221 | .cart-item-list .cart-item-title .item-name { 222 | margin: 2px 0 10px; 223 | line-height: 16px; 224 | color: #000; } 225 | .cart-item-list .cart-item-title .item-count-down .icon-clock { 226 | width: 14px; 227 | height: 14px; 228 | fill: #605F5F; 229 | vertical-align: middle; } 230 | .cart-item-list .cart-item-title .item-count-down .item-count-down-time { 231 | display: inline-block; 232 | height: 14px; 233 | line-height: 14px; 234 | padding: 0 5px; 235 | background: #f0f0f0; 236 | font-size: 12px; 237 | color: #605F5F; } 238 | .cart-item-list .item-include { 239 | position: relative; 240 | padding-left: 160px; } 241 | .cart-item-list .item-include dl { 242 | padding-right: 60px; } 243 | .cart-item-list .item-include dl dt { 244 | float: left; 245 | width: 65px; } 246 | .cart-item-list .item-include dl dd { 247 | margin-bottom: 13px; 248 | padding-left: 65px; 249 | color: #999; } 250 | .cart-item-list .item-include dl:after { 251 | visibility: hidden; 252 | display: block; 253 | content: " "; 254 | clear: both; } 255 | .cart-item-list .item-include .item-include-more { 256 | position: absolute; 257 | right: 10px; 258 | top: 0; } 259 | .cart-item-list .item-stock { 260 | margin-top: 5px; 261 | font-size: 12px; 262 | color: #999; } 263 | .cart-item-list .item-stock-no { 264 | color: #d1434a; } 265 | .cart-item-list .item-price-total { 266 | color: #d1434a; } 267 | 268 | .item-check-btn { 269 | display: inline-block; 270 | width: 16px; 271 | height: 16px; 272 | border: 1px solid #ccc; 273 | border-radius: 50%; 274 | text-align: center; 275 | vertical-align: middle; 276 | cursor: pointer; } 277 | .item-check-btn .icon-ok { 278 | display: none; 279 | width: 100%; 280 | height: 100%; 281 | fill: #fff; 282 | -ms-transform: scale(0.8); 283 | transform: scale(0.8); } 284 | .item-check-btn.check { 285 | background: #EE7A23; 286 | border-color: #EE7A23; } 287 | .item-check-btn.check .icon-ok { 288 | display: inline-block; } 289 | 290 | .item-edit-btn { 291 | display: inline-block; 292 | width: 16px; 293 | height: 20px; } 294 | .item-edit-btn .icon-del { 295 | width: 100%; 296 | height: 100%; 297 | fill: #999; } 298 | 299 | .order-item .cart-item-list .cart-item-title, .order-item .cart-item-list .item-include { 300 | padding-left: 122px; } 301 | 302 | .order-item .select-self-area .select-ipt { 303 | padding: 0; 304 | text-align: center; } 305 | 306 | @media only screen and (max-width: 991px) { 307 | .cart-item { 308 | display: block; 309 | background: #f0f0f0; } 310 | .cart-item-head { 311 | display: none; } 312 | .cart-item-list { 313 | display: block; } 314 | .cart-item-list > li { 315 | position: relative; 316 | display: block; 317 | margin-bottom: 10px; 318 | padding: 0; 319 | background: #fff; 320 | border-top: 1px solid #e9e9e9; 321 | border-bottom: 1px solid #e9e9e9; } 322 | .cart-item-list > li > div { 323 | position: static; 324 | display: block; 325 | border: none; } 326 | .cart-item-list > li.disabled:after { 327 | position: absolute; 328 | top: 0; 329 | left: 0; 330 | content: ""; 331 | width: 100%; 332 | height: 100%; 333 | background: rgba(96, 95, 95, 0.3); 334 | z-index: 5; } 335 | .cart-item-list > li.disabled > div:after { 336 | display: none; } 337 | .cart-item-list .cart-tab-1 { 338 | padding: 18px 0 0 0; 339 | border: none; } 340 | .cart-item-list .cart-tab-2 { 341 | display: none; } 342 | .cart-item-list .cart-tab-3 { 343 | float: left; 344 | width: 50%; 345 | padding: 8px 0 8px 10px; 346 | text-align: left; } 347 | .cart-item-list .cart-tab-4 { 348 | float: right; 349 | width: 50%; 350 | padding: 15px 10px 14px 0; 351 | text-align: right; } 352 | .cart-item-list .cart-tab-5 { 353 | clear: both; 354 | padding: 0; } 355 | .cart-item-list .cart-item-check { 356 | padding-left: 10px; } 357 | .cart-item-list .cart-item-pic { 358 | margin-left: 10px; } 359 | .cart-item-list .cart-item-title { 360 | height: 72px; 361 | padding: 0 10px 0 126px; } 362 | .cart-item-list .item-include { 363 | clear: both; 364 | margin-top: 10px; 365 | padding: 0 10px 0 36px; 366 | border-bottom: 1px solid #e9e9e9; } 367 | .cart-item-list .item-quantity > div { 368 | display: inline-block; 369 | margin-right: 3px; 370 | vertical-align: middle; } 371 | .cart-item-list .item-stock { 372 | margin-top: 0; } 373 | .cart-item-list .cart-item-opration { 374 | position: absolute; 375 | top: 60px; 376 | right: 10px; } 377 | .order-item .cart-item-list .cart-item-title { 378 | padding-left: 100px; } 379 | .order-item .cart-item-list .item-include { 380 | padding-left: 10px; } } 381 | 382 | .shipping-method { 383 | text-align: center; } 384 | .shipping-method li { 385 | display: inline-block; 386 | width: 300px; 387 | margin: 5px; 388 | padding: 10px; 389 | background: #fff; 390 | border: 2px solid #e9e9e9; 391 | font-size: 18px; 392 | line-height: 26px; 393 | text-align: center; 394 | color: #999; 395 | font-family: "Moderat"; 396 | cursor: pointer; } 397 | .shipping-method li .price { 398 | font-weight: bold; } 399 | .shipping-method li.check { 400 | border-color: #EE7A23; 401 | color: #333; } 402 | .shipping-method li:hover { 403 | border-color: #EE7A23; } 404 | 405 | @media only screen and (max-width: 767px) { 406 | .shipping-method { 407 | padding: 10px; } 408 | .shipping-method li { 409 | width: 100%; 410 | margin: 5px 0; } } 411 | 412 | .apply-promotion { 413 | font-size: 0; 414 | text-align: center; 415 | background: #fff; } 416 | .apply-promotion li { 417 | display: inline-block; 418 | font-size: 14px; 419 | width: 25%; 420 | min-height: 114px; 421 | vertical-align: top; } 422 | .apply-promotion li p { 423 | margin-top: 12px; 424 | font-size: 18px; } 425 | .apply-promotion .type i { 426 | display: inline-block; 427 | width: 60px; 428 | height: 60px; 429 | background: url(../../img/icon_sprite@2x.png) no-repeat 0 0; 430 | background-size: 128px 122px; } 431 | .apply-promotion .type.type-cash i { 432 | background-position: -68px 0; } 433 | .apply-promotion .type.type-sale i { 434 | width: 66px; } 435 | .apply-promotion .type.type-off i { 436 | background-position: 0 -62px; } 437 | 438 | @media only screen and (max-width: 767px) { 439 | .apply-promotion li { 440 | border-right: 1px solid #e9e9e9; } 441 | .apply-promotion li:last-child, .apply-promotion li:nth-child(4n) { 442 | border-right: none; } 443 | .apply-promotion li .type { 444 | -ms-transform: scale(0.66); 445 | transform: scale(0.66); } } 446 | 447 | .price-count ul { 448 | display: table; 449 | width: 100%; } 450 | 451 | .price-count li { 452 | display: table-row; 453 | font-size: 18px; } 454 | .price-count li span { 455 | display: table-cell; 456 | height: 36px; 457 | padding-right: 10px; 458 | vertical-align: top; 459 | text-align: right; } 460 | .price-count li span:first-child { 461 | color: #999; } 462 | .price-count li span:last-child { 463 | width: 110px; } 464 | 465 | .price-count .order-total-price span:last-child { 466 | color: #d1434a; } 467 | 468 | .tips_pop { 469 | position: relative; } 470 | .tips_pop .i_info { 471 | display: inline-block; 472 | width: 12px; 473 | height: 12px; 474 | background: url(../../img/info.png) no-repeat 0 0; 475 | background-size: 100% auto; 476 | border-radius: 50%; } 477 | .tips_pop .tips_pop_box { 478 | position: absolute; 479 | bottom: 28px; 480 | left: -250px; 481 | display: none; 482 | width: 274px; 483 | padding: 20px 10px; 484 | background: #fff; 485 | border: 1px solid #e9e9e9; 486 | border-radius: 5px; } 487 | .tips_pop .i_down { 488 | position: absolute; 489 | bottom: -6px; 490 | left: 250px; 491 | display: inline-block; 492 | width: 10px; 493 | height: 10px; 494 | border-right: 1px solid #e9e9e9; 495 | border-bottom: 1px solid #e9e9e9; 496 | background: #fff; 497 | -ms-transform: rotate(45deg); 498 | transform: rotate(45deg); } 499 | .tips_pop:hover .tips_pop_box { 500 | display: block; } 501 | 502 | .tee_tips_pop { 503 | display: inline-block; 504 | margin-right: 44px; 505 | font-size: 14px; 506 | text-align: left; } 507 | .tee_tips_pop dt { 508 | margin-bottom: 10px; 509 | color: #333; } 510 | .tee_tips_pop .tee_pop_box em { 511 | display: inline-block; 512 | width: 190px; 513 | vertical-align: top; } 514 | .tee_tips_pop .tee_pop_box .price { 515 | width: 50px; 516 | text-align: right; } 517 | .tee_tips_pop .tee_pop_box .tee_total { 518 | margin-top: 13px; 519 | padding-top: 13px; 520 | border-top: 1px solid #f0f0f0; } 521 | .tee_tips_pop .tee_pop_box .tee_total em { 522 | color: #333; } 523 | .tee_tips_pop .tee_pop_box .price { 524 | color: #d1434a; } 525 | 526 | @media only screen and (max-width: 991px) { 527 | .price-count li { 528 | font-size: 16px; } 529 | .price-count li span { 530 | height: 29px; } } 531 | 532 | /* 订单成功 */ 533 | .order-create { 534 | padding: 30px 0 40px 0; 535 | background: #fff; 536 | text-align: center; } 537 | 538 | .order-create-pic { 539 | width: 288px; 540 | margin: 0 auto; 541 | margin-bottom: 18px; } 542 | .order-create-pic img { 543 | width: 100%; } 544 | 545 | .order-create-main h3 { 546 | margin-bottom: 18px; 547 | font-size: 32px; 548 | line-height: 1.5em; } 549 | 550 | .order-create-main p { 551 | margin-bottom: 86px; 552 | font-size: 16px; 553 | line-height: 1.5em; 554 | color: #666; } 555 | 556 | .order-create-main .order-create-btn-wrap { 557 | max-width: 460px; 558 | margin: 0 auto; 559 | padding: 0 5px; } 560 | .order-create-main .order-create-btn-wrap > div { 561 | float: left; 562 | width: 50%; 563 | padding: 0 10px; } 564 | .order-create-main .order-create-btn-wrap .btn { 565 | width: 100%; 566 | min-width: auto; } 567 | .order-create-main .order-create-btn-wrap:after { 568 | visibility: hidden; 569 | display: block; 570 | content: " "; 571 | clear: both; } 572 | 573 | .order-create-main .get-lecode { 574 | margin-bottom: 40px; 575 | padding: 0 10px; } 576 | .order-create-main .get-lecode .lecode-main { 577 | max-width: 767px; 578 | margin: 0 auto 10px auto; 579 | padding: 37px 0; 580 | border: 1px dashed #EE7A23; } 581 | .order-create-main .get-lecode .lecode-main .lecode-num { 582 | margin-bottom: 20px; 583 | color: #EE7A23; 584 | font-size: 20px; } 585 | .order-create-main .get-lecode .get-lecode-tips { 586 | color: #999; 587 | line-height: 16px; 588 | line-height: 18px; } 589 | 590 | @media only screen and (max-width: 767px) { 591 | .order-create-pic img { 592 | width: 55.55%; } 593 | .order-create-main h3 { 594 | margin-bottom: 10px; 595 | font-size: 20px; } 596 | .order-create-main p { 597 | margin-bottom: 40px; } 598 | .order-create-main p span { 599 | display: block; } 600 | .order-create-main .order-create-btn-wrap > div { 601 | padding: 0 5px; } 602 | .order-create-main .order-create-btn-wrap .btn { 603 | font-size: 16px; } 604 | .order-create-main .get-lecode .lecode-main { 605 | width: 100%; } } 606 | 607 | .checkout .btn { 608 | min-width: 220px; } 609 | 610 | .checkout-title { 611 | position: relative; 612 | margin-bottom: 41px; 613 | text-align: center; } 614 | .checkout-title span { 615 | position: relative; 616 | padding: 0 1em; 617 | background-color: #fff; 618 | font-family: "moderat", sans-serif; 619 | font-weight: bold; 620 | font-size: 20px; 621 | color: #605F5F; 622 | z-index: 1; } 623 | .checkout-title:before { 624 | position: absolute; 625 | top: 50%; 626 | left: 0; 627 | content: ""; 628 | width: 100%; 629 | height: 1px; 630 | background: #ccc; 631 | z-index: 0; } 632 | 633 | /** 确认地址 **/ 634 | .addr-list-wrap { 635 | min-height: 300px; 636 | padding-bottom: 40px; } 637 | 638 | .shipping-method-wrap { 639 | padding-bottom: 65px; } 640 | 641 | .checkout-addr .next-btn-wrap { 642 | padding: 62px 0; 643 | border-top: 1px solid #e9e9e9; 644 | text-align: center; } 645 | 646 | /** cart **/ 647 | .cart { 648 | padding: 69px 0 54px 0; } 649 | 650 | .cart-foot-wrap { 651 | height: 54px; 652 | line-height: 54px; 653 | margin-top: 18px; } 654 | .cart-foot-wrap .cart-foot-l { 655 | float: left; 656 | font-size: 16px; 657 | padding: 0 22px; } 658 | .cart-foot-wrap .item-all-check { 659 | float: left; 660 | color: #EE7A23; } 661 | .cart-foot-wrap .item-all-check .item-check-btn { 662 | margin-right: 18px; } 663 | .cart-foot-wrap .item-all-check span { 664 | vertical-align: middle; } 665 | .cart-foot-wrap .item-all-del { 666 | float: left; 667 | margin-top: 2px; 668 | } 669 | .cart-foot-wrap .cart-foot-r { 670 | float: right; } 671 | .cart-foot-wrap .item-total { 672 | float: left; 673 | margin-right: 31px; 674 | color: #605F5F; 675 | font-size: 18px; } 676 | .cart-foot-wrap .item-total .total-price { 677 | margin-left: 16px; 678 | color: #d1434a; 679 | font-family: "moderat", sans-serif; } 680 | .cart-foot-wrap .next-btn-wrap { 681 | float: right; } 682 | .cart-foot-wrap:after { 683 | visibility: hidden; 684 | display: block; 685 | content: " "; 686 | clear: both; } 687 | 688 | /** order confirm **/ 689 | .checkout-order { 690 | padding: 69px 0 54px 0; } 691 | 692 | .confirm-item-list-wrap { 693 | margin-bottom: 124px; } 694 | 695 | .redeem-coupon-wrap { 696 | margin-bottom: 123px; 697 | text-align: center; } 698 | .redeem-coupon-wrap .text-redeem { 699 | width: 380px; 700 | height: 54px; 701 | line-height: 54px; 702 | margin-right: 16px; 703 | vertical-align: top; } 704 | 705 | .apply-promotion-wrap { 706 | margin-bottom: 124px; } 707 | 708 | .price-count-wrap { 709 | margin-bottom: 26px; 710 | padding-top: 62px; 711 | border-top: 1px solid #e9e9e9; } 712 | 713 | .order-foot-wrap .prev-btn-wrap { 714 | float: left; } 715 | 716 | .order-foot-wrap .next-btn-wrap { 717 | float: right; } 718 | 719 | .order-foot-wrap:after { 720 | visibility: hidden; 721 | display: block; 722 | content: " "; 723 | clear: both; } 724 | 725 | @media only screen and (max-width: 1280px) { 726 | .container { 727 | width: 100%; } } 728 | 729 | @media only screen and (max-width: 991px) { 730 | .cart { 731 | padding-top: 40px; } 732 | .cart-foot-wrap .cart-foot-l { 733 | padding: 0 10px; } } 734 | 735 | @media only screen and (max-width: 767px) { 736 | .checkout { 737 | background: #f0f0f0; } 738 | .checkout-title { 739 | margin: 0 10px 13px 10px; } 740 | .checkout-title span { 741 | font-size: 14px; 742 | background: #f0f0f0 !important; } 743 | .next-btn-wrap { 744 | position: fixed; 745 | bottom: 0; 746 | left: 0; 747 | width: 100%; 748 | z-index: 101; } 749 | .next-btn-wrap .btn { 750 | display: block; 751 | width: 100%; } 752 | .checkout-addr .next-btn-wrap { 753 | padding: 0; 754 | border: none; } 755 | .cart, .checkout-order { 756 | padding-top: 13px; } 757 | .cart-foot-wrap { 758 | height: 42px; 759 | line-height: 42px; 760 | margin: 0; } 761 | .cart-foot-wrap .cart-foot-l { 762 | display: none; } 763 | .cart-foot-wrap .item-total { 764 | float: none; 765 | margin-right: 10px; 766 | font-size: 16px; } 767 | .confirm-item-list-wrap, .redeem-coupon-wrap, .apply-promotion-wrap { 768 | margin-bottom: 23px; } 769 | .redeem-coupon-wrap .redeem-coupon { 770 | margin: 0 10px; } 771 | .redeem-coupon-wrap .text-redeem { 772 | width: 100%; 773 | margin-bottom: 8px; } 774 | .redeem-coupon-wrap .btn { 775 | width: 100%; } 776 | .price-count-wrap { 777 | margin: 0; 778 | padding-top: 0; 779 | border: none; } 780 | .tee_tips_pop { 781 | display: none; } 782 | .order-foot-wrap .prev-btn-wrap { 783 | display: none; } 784 | .addr-list-wrap { 785 | padding-bottom: 23px; } } 786 | 787 | /** 订单详情 **/ 788 | -------------------------------------------------------------------------------- /素材/css/modal.css: -------------------------------------------------------------------------------- 1 | .md-modal { 2 | position: fixed; 3 | top: 50%; 4 | left: 50%; 5 | width: 535px; 6 | height: auto; 7 | -webkit-transform: translate(-50%,-50%); 8 | -ms-transform: translate(-50%,-50%); 9 | transform: translate(-50%,-50%); 10 | visibility: hidden; 11 | z-index: 201; 12 | } 13 | .md-modal-transition.md-show .md-modal-inner { 14 | -webkit-transform: translateY(0); 15 | -ms-transform: translateY(0); 16 | transform: translateY(0); 17 | opacity: 1; 18 | -webkit-transition: all .5s ease-out; 19 | transition: all .5s ease-out; 20 | } 21 | .md-modal-transition .md-modal-inner { 22 | background: #fff; 23 | -webkit-transform: translateY(20%); 24 | -ms-transform: translateY(20%); 25 | transform: translateY(20%); 26 | opacity: 0; 27 | -webkit-transition: all .3s ease-out; 28 | transition: all .3s ease-out; 29 | } 30 | .md-modal .md-modal-inner { 31 | padding: 60px 50px; 32 | } 33 | .md-modal .confirm-tips { 34 | min-height: 5.65em; 35 | } 36 | .md-modal .confirm-tips, .md-modal .alert-tips { 37 | font-size: 14px; 38 | font-weight: 200; 39 | text-align: center; 40 | } 41 | .md-modal .btn-wrap { 42 | margin-top: 20px; 43 | text-align: center; 44 | font-size: 0; 45 | } 46 | .md-modal .btn-wrap .btn { 47 | width: 45%; 48 | min-width: 80px; 49 | margin: 0 2.5%; 50 | } 51 | .md-modal .md-close { 52 | position: absolute; 53 | top: 7px; 54 | right: 7px; 55 | width: 34px; 56 | height: 34px; 57 | -webkit-transform: scale(0.5); 58 | -ms-transform: scale(0.5); 59 | transform: scale(0.5); 60 | text-indent: -8000px; 61 | } 62 | .md-modal .md-close:hover:before { 63 | -webkit-transform: rotate(-135deg); 64 | -ms-transform: rotate(-135deg); 65 | transform: rotate(-135deg); 66 | } 67 | .md-modal .md-close:hover:before, .md-modal .md-close:hover:after { 68 | -webkit-transition: -webkit-transform .3s ease-out; 69 | transition: -webkit-transform .3s ease-out; 70 | transition: transform .3s ease-out; 71 | transition: transform .3s ease-out,-webkit-transform .3s ease-out; 72 | } 73 | .md-modal .md-close:before { 74 | -webkit-transform: rotate(-45deg); 75 | -ms-transform: rotate(-45deg); 76 | transform: rotate(-45deg); 77 | } 78 | .md-modal .md-close:before, .md-modal .md-close:after { 79 | position: absolute; 80 | top: 16px; 81 | left: -4px; 82 | content: ""; 83 | width: 44px; 84 | height: 3px; 85 | background: #605f5f; 86 | -webkit-transition: -webkit-transform .5s ease-out; 87 | transition: -webkit-transform .5s ease-out; 88 | transition: transform .5s ease-out; 89 | transition: transform .5s ease-out,-webkit-transform .5s ease-out; 90 | } 91 | .md-modal .md-close:hover:after { 92 | -webkit-transform: rotate(-45deg); 93 | -ms-transform: rotate(-45deg); 94 | transform: rotate(-45deg); 95 | } 96 | .md-modal .md-close:after { 97 | -webkit-transform: rotate(45deg); 98 | -ms-transform: rotate(45deg); 99 | transform: rotate(45deg); 100 | } 101 | .md-show { 102 | visibility: visible; 103 | } 104 | 105 | .md-overlay { 106 | position: fixed; 107 | top: 0; 108 | left: 0; 109 | width: 100%; 110 | height: 100%; 111 | background: rgba(0,0,0,0.5); 112 | z-index: 200; 113 | } 114 | 115 | .btn { 116 | display: inline-block; 117 | height: 54px; 118 | line-height: 54px; 119 | padding: 0 1.2em; 120 | text-align: center; 121 | font-size: 14px; 122 | font-family: "moderat",sans-serif; 123 | -webkit-transition: all .3s ease-out; 124 | transition: all .3s ease-out; 125 | border: 1px solid #d1434a; 126 | color: #d1434a; 127 | text-transform: uppercase; 128 | letter-spacing: .25em; 129 | white-space: nowrap; 130 | } 131 | .btn--m { 132 | height: 45px; 133 | line-height: 45px; 134 | } 135 | .btn--s{ 136 | 137 | height:30px; 138 | line-height:30px; 139 | } 140 | input, select, button { 141 | vertical-align: middle; 142 | } 143 | 144 | .btn--m { 145 | height: 45px; 146 | line-height: 45px; 147 | } 148 | .btn--red { 149 | background-color: #d1434a; 150 | border-color: #d1434a; 151 | color: #fff; 152 | } 153 | .btn:hover, .btn[href]:hover { 154 | background-color: #d1434a; 155 | color: #fff; 156 | -webkit-transition: all .3s ease-out; 157 | transition: all .3s ease-out; 158 | } 159 | .btn--red:hover { 160 | background-color: #fff; 161 | color: #d1434a; 162 | } 163 | button { 164 | background: 0; 165 | border: 0; 166 | -webkit-box-sizing: border-box; 167 | box-sizing: border-box; 168 | color: inherit; 169 | cursor: pointer; 170 | font: inherit; 171 | line-height: inherit; 172 | overflow: visible; 173 | vertical-align: inherit; 174 | } 175 | .md-form-item{ 176 | margin:10px; 177 | } 178 | .md-form-item__label { 179 | text-align: right; 180 | vertical-align: middle; 181 | float: left; 182 | font-size: 14px; 183 | color: #48576a; 184 | line-height: 1; 185 | padding: 11px 12px 11px 0; 186 | box-sizing: border-box; 187 | } 188 | .md-form-item__content { 189 | line-height: 36px; 190 | position: relative; 191 | font-size: 14px; 192 | } 193 | .md-input__inner { 194 | -webkit-appearance: none; 195 | -moz-appearance: none; 196 | appearance: none; 197 | background-color: #fff; 198 | background-image: none; 199 | border-radius: 4px; 200 | border: 1px solid #333; 201 | box-sizing: border-box; 202 | color: #1f2d3d; 203 | display: block; 204 | font-size: inherit; 205 | height: 36px; 206 | line-height: 1; 207 | outline: 0; 208 | padding: 3px 10px; 209 | transition: border-color .2s cubic-bezier(.645,.045,.355,1); 210 | width: 100%; 211 | } 212 | .md-input__inner:focus{border-color:#20a0ff} -------------------------------------------------------------------------------- /素材/css/reset.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | body, 6 | dl, 7 | dd { 8 | margin: 0; 9 | } 10 | th, 11 | td { 12 | padding: 0; 13 | } 14 | span, 15 | i { 16 | display: inline-block; 17 | } 18 | input[type='submit'] { 19 | border: none; 20 | background-color: #6190ef; 21 | margin: 10px; 22 | padding: 10px 15px; 23 | } 24 | #container { 25 | font-family: Arial; 26 | min-width: 720px; 27 | max-width: 1280px; 28 | overflow: hidden; 29 | margin: 0 auto; 30 | } 31 | -------------------------------------------------------------------------------- /素材/data/address.json: -------------------------------------------------------------------------------- 1 | { 2 | "status":0, 3 | "message":"", 4 | "result":[ 5 | { 6 | "addressId":"100001", 7 | "userName":"JackBean", 8 | "streetName":"北京市朝阳区朝阳公园1", 9 | "postCode":"100001", 10 | "tel":"12345678901", 11 | "isDefault":true 12 | }, 13 | { 14 | "addressId":"100002", 15 | "userName":"JackBean", 16 | "streetName":"北京市朝阳区朝阳公园2", 17 | "postCode":"100001", 18 | "tel":"12345678901", 19 | "isDefault":false 20 | }, 21 | { 22 | "addressId":"100003", 23 | "userName":"JackBean", 24 | "streetName":"北京市朝阳区朝阳公园3", 25 | "postCode":"100001", 26 | "tel":"12345678901", 27 | "isDefault":false 28 | }, 29 | { 30 | "addressId":"100004", 31 | "userName":"JackBean", 32 | "streetName":"北京市朝阳区朝阳公园4", 33 | "postCode":"100001", 34 | "tel":"12345678901", 35 | "isDefault":false 36 | }, 37 | { 38 | "addressId":"100005", 39 | "userName":"JackBean", 40 | "streetName":"北京市朝阳区朝阳公园5", 41 | "postCode":"100001", 42 | "tel":"12345678901", 43 | "isDefault":false 44 | } 45 | ] 46 | } -------------------------------------------------------------------------------- /素材/data/cart.json: -------------------------------------------------------------------------------- 1 | { 2 | "status": 0, 3 | "message": "success", 4 | "result": { 5 | "totalHoney":59, 6 | "list":[ 7 | { 8 | "name": "面具1", 9 | "price": 19, 10 | "count": 1, 11 | "amount": 19, 12 | "imgPic": "static/img/test.jpg", 13 | "gifts": [ 14 | { 15 | "partId":"10001", 16 | "partName":"打火机" 17 | }, 18 | { 19 | "partId":"10002", 20 | "partName":"火柴" 21 | } 22 | ] 23 | }, 24 | { 25 | "name": "面具2", 26 | "price": 20, 27 | "count": 1, 28 | "amount": 20, 29 | "imgPic": "static/img/test1.jpg", 30 | "gifts": [ 31 | { 32 | "partId":"10001", 33 | "partName":"打火机" 34 | }, 35 | { 36 | "partId":"10002", 37 | "partName":"火柴盒" 38 | } 39 | ] 40 | }, 41 | { 42 | "name": "面具3", 43 | 44 | "price": 20, 45 | "count": 1, 46 | "amount": 20, 47 | "imgPic": "static/img/test1.jpg", 48 | "gifts": [ 49 | { 50 | "partId":"10001", 51 | "partName":"打火机" 52 | }, 53 | { 54 | "partId":"10002", 55 | "partName":"火柴盒" 56 | } 57 | ] 58 | } 59 | ] 60 | } 61 | 62 | } 63 | -------------------------------------------------------------------------------- /素材/data/cartData.json: -------------------------------------------------------------------------------- 1 | { 2 | "status":1, 3 | "result":{ 4 | "totalMoney":109, 5 | "list":[ 6 | { 7 | "productId":"600100002115", 8 | "productName":"黄鹤楼香烟", 9 | "productPrice":19, 10 | "productQuantity":1, 11 | "productImage":"static/img/goods-1.jpg", 12 | "parts":[ 13 | { 14 | "partsId":"10001", 15 | "partsName":"打火机", 16 | "imgSrc":"static/img/part-1.jpg" 17 | } 18 | ] 19 | }, 20 | { 21 | "productId":"600100002120", 22 | "productName":"加多宝", 23 | "productPrice":8, 24 | "productQuantity":5, 25 | "productImage":"static/img/goods-2.jpg", 26 | "parts":[ 27 | { 28 | "partsId":"20001", 29 | "partsName":"吸管", 30 | "imgSrc":"static/img/part-2.jpg" 31 | } 32 | ] 33 | }, 34 | { 35 | "productId":"600100002117", 36 | "productName":"金装黄鹤楼", 37 | "productPrice":25, 38 | "productQuantity":2, 39 | "productImage":"static/img/goods-1.jpg", 40 | "parts":[ 41 | { 42 | "partsId":"10001", 43 | "partsName":"打火机-1", 44 | "imgSrc":"static/img/part-1.jpg" 45 | }, 46 | { 47 | "partsId":"10002", 48 | "partsName":"打火机-2", 49 | "imgSrc":"static/img/part-1.jpg" 50 | } 51 | ] 52 | } 53 | ] 54 | }, 55 | "message":"" 56 | } 57 | -------------------------------------------------------------------------------- /素材/img/goods-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/素材/img/goods-1.jpg -------------------------------------------------------------------------------- /素材/img/goods-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/素材/img/goods-2.jpg -------------------------------------------------------------------------------- /素材/img/part-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/素材/img/part-1.jpg -------------------------------------------------------------------------------- /素材/img/part-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/素材/img/part-2.jpg -------------------------------------------------------------------------------- /素材/img/test.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/素材/img/test.jpg -------------------------------------------------------------------------------- /素材/img/test1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jgchenu/vue-shopcar/7553929efc19767527fb003b126dbf96db563190/素材/img/test1.jpg -------------------------------------------------------------------------------- /素材/js/lib/vue-resource.js: -------------------------------------------------------------------------------- 1 | /** 2 | * vue-resource v0.7.0 3 | * https://github.com/vuejs/vue-resource 4 | * Released under the MIT License. 5 | */ 6 | 7 | (function webpackUniversalModuleDefinition(root, factory) { 8 | if(typeof exports === 'object' && typeof module === 'object') 9 | module.exports = factory(); 10 | else if(typeof define === 'function' && define.amd) 11 | define([], factory); 12 | else if(typeof exports === 'object') 13 | exports["VueResource"] = factory(); 14 | else 15 | root["VueResource"] = factory(); 16 | })(this, function() { 17 | return /******/ (function(modules) { // webpackBootstrap 18 | /******/ // The module cache 19 | /******/ var installedModules = {}; 20 | 21 | /******/ // The require function 22 | /******/ function __webpack_require__(moduleId) { 23 | 24 | /******/ // Check if module is in cache 25 | /******/ if(installedModules[moduleId]) 26 | /******/ return installedModules[moduleId].exports; 27 | 28 | /******/ // Create a new module (and put it into the cache) 29 | /******/ var module = installedModules[moduleId] = { 30 | /******/ exports: {}, 31 | /******/ id: moduleId, 32 | /******/ loaded: false 33 | /******/ }; 34 | 35 | /******/ // Execute the module function 36 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 37 | 38 | /******/ // Flag the module as loaded 39 | /******/ module.loaded = true; 40 | 41 | /******/ // Return the exports of the module 42 | /******/ return module.exports; 43 | /******/ } 44 | 45 | 46 | /******/ // expose the modules object (__webpack_modules__) 47 | /******/ __webpack_require__.m = modules; 48 | 49 | /******/ // expose the module cache 50 | /******/ __webpack_require__.c = installedModules; 51 | 52 | /******/ // __webpack_public_path__ 53 | /******/ __webpack_require__.p = ""; 54 | 55 | /******/ // Load entry module and return exports 56 | /******/ return __webpack_require__(0); 57 | /******/ }) 58 | /************************************************************************/ 59 | /******/ ([ 60 | /* 0 */ 61 | /***/ function(module, exports, __webpack_require__) { 62 | 63 | /** 64 | * Install plugin. 65 | */ 66 | 67 | function install(Vue) { 68 | 69 | var _ = __webpack_require__(1); 70 | 71 | _.config = Vue.config; 72 | _.warning = Vue.util.warn; 73 | _.nextTick = Vue.util.nextTick; 74 | 75 | Vue.url = __webpack_require__(2); 76 | Vue.http = __webpack_require__(8); 77 | Vue.resource = __webpack_require__(23); 78 | Vue.Promise = __webpack_require__(10); 79 | 80 | Object.defineProperties(Vue.prototype, { 81 | 82 | $url: { 83 | get: function () { 84 | return _.options(Vue.url, this, this.$options.url); 85 | } 86 | }, 87 | 88 | $http: { 89 | get: function () { 90 | return _.options(Vue.http, this, this.$options.http); 91 | } 92 | }, 93 | 94 | $resource: { 95 | get: function () { 96 | return Vue.resource.bind(this); 97 | } 98 | }, 99 | 100 | $promise: { 101 | get: function () { 102 | return function (executor) { 103 | return new Vue.Promise(executor, this); 104 | }.bind(this); 105 | } 106 | } 107 | 108 | }); 109 | } 110 | 111 | if (window.Vue) { 112 | Vue.use(install); 113 | } 114 | 115 | module.exports = install; 116 | 117 | 118 | /***/ }, 119 | /* 1 */ 120 | /***/ function(module, exports) { 121 | 122 | /** 123 | * Utility functions. 124 | */ 125 | 126 | var _ = exports, array = [], console = window.console; 127 | 128 | _.warn = function (msg) { 129 | if (console && _.warning && (!_.config.silent || _.config.debug)) { 130 | console.warn('[VueResource warn]: ' + msg); 131 | } 132 | }; 133 | 134 | _.error = function (msg) { 135 | if (console) { 136 | console.error(msg); 137 | } 138 | }; 139 | 140 | _.trim = function (str) { 141 | return str.replace(/^\s*|\s*$/g, ''); 142 | }; 143 | 144 | _.toLower = function (str) { 145 | return str ? str.toLowerCase() : ''; 146 | }; 147 | 148 | _.isArray = Array.isArray; 149 | 150 | _.isString = function (val) { 151 | return typeof val === 'string'; 152 | }; 153 | 154 | _.isFunction = function (val) { 155 | return typeof val === 'function'; 156 | }; 157 | 158 | _.isObject = function (obj) { 159 | return obj !== null && typeof obj === 'object'; 160 | }; 161 | 162 | _.isPlainObject = function (obj) { 163 | return _.isObject(obj) && Object.getPrototypeOf(obj) == Object.prototype; 164 | }; 165 | 166 | _.options = function (fn, obj, options) { 167 | 168 | options = options || {}; 169 | 170 | if (_.isFunction(options)) { 171 | options = options.call(obj); 172 | } 173 | 174 | return _.merge(fn.bind({$vm: obj, $options: options}), fn, {$options: options}); 175 | }; 176 | 177 | _.each = function (obj, iterator) { 178 | 179 | var i, key; 180 | 181 | if (typeof obj.length == 'number') { 182 | for (i = 0; i < obj.length; i++) { 183 | iterator.call(obj[i], obj[i], i); 184 | } 185 | } else if (_.isObject(obj)) { 186 | for (key in obj) { 187 | if (obj.hasOwnProperty(key)) { 188 | iterator.call(obj[key], obj[key], key); 189 | } 190 | } 191 | } 192 | 193 | return obj; 194 | }; 195 | 196 | _.defaults = function (target, source) { 197 | 198 | for (var key in source) { 199 | if (target[key] === undefined) { 200 | target[key] = source[key]; 201 | } 202 | } 203 | 204 | return target; 205 | }; 206 | 207 | _.extend = function (target) { 208 | 209 | var args = array.slice.call(arguments, 1); 210 | 211 | args.forEach(function (arg) { 212 | merge(target, arg); 213 | }); 214 | 215 | return target; 216 | }; 217 | 218 | _.merge = function (target) { 219 | 220 | var args = array.slice.call(arguments, 1); 221 | 222 | args.forEach(function (arg) { 223 | merge(target, arg, true); 224 | }); 225 | 226 | return target; 227 | }; 228 | 229 | function merge(target, source, deep) { 230 | for (var key in source) { 231 | if (deep && (_.isPlainObject(source[key]) || _.isArray(source[key]))) { 232 | if (_.isPlainObject(source[key]) && !_.isPlainObject(target[key])) { 233 | target[key] = {}; 234 | } 235 | if (_.isArray(source[key]) && !_.isArray(target[key])) { 236 | target[key] = []; 237 | } 238 | merge(target[key], source[key], deep); 239 | } else if (source[key] !== undefined) { 240 | target[key] = source[key]; 241 | } 242 | } 243 | } 244 | 245 | 246 | /***/ }, 247 | /* 2 */ 248 | /***/ function(module, exports, __webpack_require__) { 249 | 250 | /** 251 | * Service for URL templating. 252 | */ 253 | 254 | var _ = __webpack_require__(1); 255 | var ie = document.documentMode; 256 | var el = document.createElement('a'); 257 | 258 | function Url(url, params) { 259 | 260 | var options = url, transform; 261 | 262 | if (_.isString(url)) { 263 | options = {url: url, params: params}; 264 | } 265 | 266 | options = _.merge({}, Url.options, this.$options, options); 267 | 268 | Url.transforms.forEach(function (handler) { 269 | transform = factory(handler, transform, this.$vm); 270 | }, this); 271 | 272 | return transform(options); 273 | }; 274 | 275 | /** 276 | * Url options. 277 | */ 278 | 279 | Url.options = { 280 | url: '', 281 | root: null, 282 | params: {} 283 | }; 284 | 285 | /** 286 | * Url transforms. 287 | */ 288 | 289 | Url.transforms = [ 290 | __webpack_require__(3), 291 | __webpack_require__(5), 292 | __webpack_require__(6), 293 | __webpack_require__(7) 294 | ]; 295 | 296 | /** 297 | * Encodes a Url parameter string. 298 | * 299 | * @param {Object} obj 300 | */ 301 | 302 | Url.params = function (obj) { 303 | 304 | var params = [], escape = encodeURIComponent; 305 | 306 | params.add = function (key, value) { 307 | 308 | if (_.isFunction(value)) { 309 | value = value(); 310 | } 311 | 312 | if (value === null) { 313 | value = ''; 314 | } 315 | 316 | this.push(escape(key) + '=' + escape(value)); 317 | }; 318 | 319 | serialize(params, obj); 320 | 321 | return params.join('&').replace(/%20/g, '+'); 322 | }; 323 | 324 | /** 325 | * Parse a URL and return its components. 326 | * 327 | * @param {String} url 328 | */ 329 | 330 | Url.parse = function (url) { 331 | 332 | if (ie) { 333 | el.href = url; 334 | url = el.href; 335 | } 336 | 337 | el.href = url; 338 | 339 | return { 340 | href: el.href, 341 | protocol: el.protocol ? el.protocol.replace(/:$/, '') : '', 342 | port: el.port, 343 | host: el.host, 344 | hostname: el.hostname, 345 | pathname: el.pathname.charAt(0) === '/' ? el.pathname : '/' + el.pathname, 346 | search: el.search ? el.search.replace(/^\?/, '') : '', 347 | hash: el.hash ? el.hash.replace(/^#/, '') : '' 348 | }; 349 | }; 350 | 351 | function factory(handler, next, vm) { 352 | return function (options) { 353 | return handler.call(vm, options, next); 354 | }; 355 | } 356 | 357 | function serialize(params, obj, scope) { 358 | 359 | var array = _.isArray(obj), plain = _.isPlainObject(obj), hash; 360 | 361 | _.each(obj, function (value, key) { 362 | 363 | hash = _.isObject(value) || _.isArray(value); 364 | 365 | if (scope) { 366 | key = scope + '[' + (plain || hash ? key : '') + ']'; 367 | } 368 | 369 | if (!scope && array) { 370 | params.add(value.name, value.value); 371 | } else if (hash) { 372 | serialize(params, value, key); 373 | } else { 374 | params.add(key, value); 375 | } 376 | }); 377 | } 378 | 379 | module.exports = _.url = Url; 380 | 381 | 382 | /***/ }, 383 | /* 3 */ 384 | /***/ function(module, exports, __webpack_require__) { 385 | 386 | /** 387 | * URL Template (RFC 6570) Transform. 388 | */ 389 | 390 | var UrlTemplate = __webpack_require__(4); 391 | 392 | module.exports = function (options) { 393 | 394 | var variables = [], url = UrlTemplate.expand(options.url, options.params, variables); 395 | 396 | variables.forEach(function (key) { 397 | delete options.params[key]; 398 | }); 399 | 400 | return url; 401 | }; 402 | 403 | 404 | /***/ }, 405 | /* 4 */ 406 | /***/ function(module, exports) { 407 | 408 | /** 409 | * URL Template v2.0.6 (https://github.com/bramstein/url-template) 410 | */ 411 | 412 | exports.expand = function (url, params, variables) { 413 | 414 | var tmpl = this.parse(url), expanded = tmpl.expand(params); 415 | 416 | if (variables) { 417 | variables.push.apply(variables, tmpl.vars); 418 | } 419 | 420 | return expanded; 421 | }; 422 | 423 | exports.parse = function (template) { 424 | 425 | var operators = ['+', '#', '.', '/', ';', '?', '&'], variables = []; 426 | 427 | return { 428 | vars: variables, 429 | expand: function (context) { 430 | return template.replace(/\{([^\{\}]+)\}|([^\{\}]+)/g, function (_, expression, literal) { 431 | if (expression) { 432 | 433 | var operator = null, values = []; 434 | 435 | if (operators.indexOf(expression.charAt(0)) !== -1) { 436 | operator = expression.charAt(0); 437 | expression = expression.substr(1); 438 | } 439 | 440 | expression.split(/,/g).forEach(function (variable) { 441 | var tmp = /([^:\*]*)(?::(\d+)|(\*))?/.exec(variable); 442 | values.push.apply(values, exports.getValues(context, operator, tmp[1], tmp[2] || tmp[3])); 443 | variables.push(tmp[1]); 444 | }); 445 | 446 | if (operator && operator !== '+') { 447 | 448 | var separator = ','; 449 | 450 | if (operator === '?') { 451 | separator = '&'; 452 | } else if (operator !== '#') { 453 | separator = operator; 454 | } 455 | 456 | return (values.length !== 0 ? operator : '') + values.join(separator); 457 | } else { 458 | return values.join(','); 459 | } 460 | 461 | } else { 462 | return exports.encodeReserved(literal); 463 | } 464 | }); 465 | } 466 | }; 467 | }; 468 | 469 | exports.getValues = function (context, operator, key, modifier) { 470 | 471 | var value = context[key], result = []; 472 | 473 | if (this.isDefined(value) && value !== '') { 474 | if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') { 475 | value = value.toString(); 476 | 477 | if (modifier && modifier !== '*') { 478 | value = value.substring(0, parseInt(modifier, 10)); 479 | } 480 | 481 | result.push(this.encodeValue(operator, value, this.isKeyOperator(operator) ? key : null)); 482 | } else { 483 | if (modifier === '*') { 484 | if (Array.isArray(value)) { 485 | value.filter(this.isDefined).forEach(function (value) { 486 | result.push(this.encodeValue(operator, value, this.isKeyOperator(operator) ? key : null)); 487 | }, this); 488 | } else { 489 | Object.keys(value).forEach(function (k) { 490 | if (this.isDefined(value[k])) { 491 | result.push(this.encodeValue(operator, value[k], k)); 492 | } 493 | }, this); 494 | } 495 | } else { 496 | var tmp = []; 497 | 498 | if (Array.isArray(value)) { 499 | value.filter(this.isDefined).forEach(function (value) { 500 | tmp.push(this.encodeValue(operator, value)); 501 | }, this); 502 | } else { 503 | Object.keys(value).forEach(function (k) { 504 | if (this.isDefined(value[k])) { 505 | tmp.push(encodeURIComponent(k)); 506 | tmp.push(this.encodeValue(operator, value[k].toString())); 507 | } 508 | }, this); 509 | } 510 | 511 | if (this.isKeyOperator(operator)) { 512 | result.push(encodeURIComponent(key) + '=' + tmp.join(',')); 513 | } else if (tmp.length !== 0) { 514 | result.push(tmp.join(',')); 515 | } 516 | } 517 | } 518 | } else { 519 | if (operator === ';') { 520 | result.push(encodeURIComponent(key)); 521 | } else if (value === '' && (operator === '&' || operator === '?')) { 522 | result.push(encodeURIComponent(key) + '='); 523 | } else if (value === '') { 524 | result.push(''); 525 | } 526 | } 527 | 528 | return result; 529 | }; 530 | 531 | exports.isDefined = function (value) { 532 | return value !== undefined && value !== null; 533 | }; 534 | 535 | exports.isKeyOperator = function (operator) { 536 | return operator === ';' || operator === '&' || operator === '?'; 537 | }; 538 | 539 | exports.encodeValue = function (operator, value, key) { 540 | 541 | value = (operator === '+' || operator === '#') ? this.encodeReserved(value) : encodeURIComponent(value); 542 | 543 | if (key) { 544 | return encodeURIComponent(key) + '=' + value; 545 | } else { 546 | return value; 547 | } 548 | }; 549 | 550 | exports.encodeReserved = function (str) { 551 | return str.split(/(%[0-9A-Fa-f]{2})/g).map(function (part) { 552 | if (!/%[0-9A-Fa-f]/.test(part)) { 553 | part = encodeURI(part); 554 | } 555 | return part; 556 | }).join(''); 557 | }; 558 | 559 | 560 | /***/ }, 561 | /* 5 */ 562 | /***/ function(module, exports, __webpack_require__) { 563 | 564 | /** 565 | * Legacy Transform. 566 | */ 567 | 568 | var _ = __webpack_require__(1); 569 | 570 | module.exports = function (options, next) { 571 | 572 | var variables = [], url = next(options); 573 | 574 | url = url.replace(/(\/?):([a-z]\w*)/gi, function (match, slash, name) { 575 | 576 | _.warn('The `:' + name + '` parameter syntax has been deprecated. Use the `{' + name + '}` syntax instead.'); 577 | 578 | if (options.params[name]) { 579 | variables.push(name); 580 | return slash + encodeUriSegment(options.params[name]); 581 | } 582 | 583 | return ''; 584 | }); 585 | 586 | variables.forEach(function (key) { 587 | delete options.params[key]; 588 | }); 589 | 590 | return url; 591 | }; 592 | 593 | function encodeUriSegment(value) { 594 | 595 | return encodeUriQuery(value, true). 596 | replace(/%26/gi, '&'). 597 | replace(/%3D/gi, '='). 598 | replace(/%2B/gi, '+'); 599 | } 600 | 601 | function encodeUriQuery(value, spaces) { 602 | 603 | return encodeURIComponent(value). 604 | replace(/%40/gi, '@'). 605 | replace(/%3A/gi, ':'). 606 | replace(/%24/g, '$'). 607 | replace(/%2C/gi, ','). 608 | replace(/%20/g, (spaces ? '%20' : '+')); 609 | } 610 | 611 | 612 | /***/ }, 613 | /* 6 */ 614 | /***/ function(module, exports, __webpack_require__) { 615 | 616 | /** 617 | * Query Parameter Transform. 618 | */ 619 | 620 | var _ = __webpack_require__(1); 621 | 622 | module.exports = function (options, next) { 623 | 624 | var urlParams = Object.keys(_.url.options.params), query = {}, url = next(options); 625 | 626 | _.each(options.params, function (value, key) { 627 | if (urlParams.indexOf(key) === -1) { 628 | query[key] = value; 629 | } 630 | }); 631 | 632 | query = _.url.params(query); 633 | 634 | if (query) { 635 | url += (url.indexOf('?') == -1 ? '?' : '&') + query; 636 | } 637 | 638 | return url; 639 | }; 640 | 641 | 642 | /***/ }, 643 | /* 7 */ 644 | /***/ function(module, exports, __webpack_require__) { 645 | 646 | /** 647 | * Root Prefix Transform. 648 | */ 649 | 650 | var _ = __webpack_require__(1); 651 | 652 | module.exports = function (options, next) { 653 | 654 | var url = next(options); 655 | 656 | if (_.isString(options.root) && !url.match(/^(https?:)?\//)) { 657 | url = options.root + '/' + url; 658 | } 659 | 660 | return url; 661 | }; 662 | 663 | 664 | /***/ }, 665 | /* 8 */ 666 | /***/ function(module, exports, __webpack_require__) { 667 | 668 | /** 669 | * Service for sending network requests. 670 | */ 671 | 672 | var _ = __webpack_require__(1); 673 | var Client = __webpack_require__(9); 674 | var Promise = __webpack_require__(10); 675 | var interceptor = __webpack_require__(13); 676 | var jsonType = {'Content-Type': 'application/json'}; 677 | 678 | function Http(url, options) { 679 | 680 | var client = Client, request, promise; 681 | 682 | Http.interceptors.forEach(function (handler) { 683 | client = interceptor(handler, this.$vm)(client); 684 | }, this); 685 | 686 | options = _.isObject(url) ? url : _.extend({url: url}, options); 687 | request = _.merge({}, Http.options, this.$options, options); 688 | promise = client(request).bind(this.$vm).then(function (response) { 689 | 690 | return response.ok ? response : Promise.reject(response); 691 | 692 | }, function (response) { 693 | 694 | if (response instanceof Error) { 695 | _.error(response); 696 | } 697 | 698 | return Promise.reject(response); 699 | }); 700 | 701 | if (request.success) { 702 | promise.success(request.success); 703 | } 704 | 705 | if (request.error) { 706 | promise.error(request.error); 707 | } 708 | 709 | return promise; 710 | } 711 | 712 | Http.options = { 713 | method: 'get', 714 | data: '', 715 | params: {}, 716 | headers: {}, 717 | xhr: null, 718 | upload: null, 719 | jsonp: 'callback', 720 | beforeSend: null, 721 | crossOrigin: null, 722 | emulateHTTP: false, 723 | emulateJSON: false, 724 | timeout: 0 725 | }; 726 | 727 | Http.interceptors = [ 728 | __webpack_require__(14), 729 | __webpack_require__(15), 730 | __webpack_require__(16), 731 | __webpack_require__(18), 732 | __webpack_require__(19), 733 | __webpack_require__(20), 734 | __webpack_require__(21) 735 | ]; 736 | 737 | Http.headers = { 738 | put: jsonType, 739 | post: jsonType, 740 | patch: jsonType, 741 | delete: jsonType, 742 | common: {'Accept': 'application/json, text/plain, */*'}, 743 | custom: {'X-Requested-With': 'XMLHttpRequest'} 744 | }; 745 | 746 | ['get', 'put', 'post', 'patch', 'delete', 'jsonp'].forEach(function (method) { 747 | 748 | Http[method] = function (url, data, success, options) { 749 | 750 | if (_.isFunction(data)) { 751 | options = success; 752 | success = data; 753 | data = undefined; 754 | } 755 | 756 | if (_.isObject(success)) { 757 | options = success; 758 | success = undefined; 759 | } 760 | 761 | return this(url, _.extend({method: method, data: data, success: success}, options)); 762 | }; 763 | }); 764 | 765 | module.exports = _.http = Http; 766 | 767 | 768 | /***/ }, 769 | /* 9 */ 770 | /***/ function(module, exports, __webpack_require__) { 771 | 772 | /** 773 | * Base client. 774 | */ 775 | 776 | var _ = __webpack_require__(1); 777 | var Promise = __webpack_require__(10); 778 | var xhrClient = __webpack_require__(12); 779 | 780 | module.exports = function (request) { 781 | 782 | var response = (request.client || xhrClient)(request); 783 | 784 | return Promise.resolve(response).then(function (response) { 785 | 786 | if (response.headers) { 787 | 788 | var headers = parseHeaders(response.headers); 789 | 790 | response.headers = function (name) { 791 | 792 | if (name) { 793 | return headers[_.toLower(name)]; 794 | } 795 | 796 | return headers; 797 | }; 798 | 799 | } 800 | 801 | response.ok = response.status >= 200 && response.status < 300; 802 | 803 | return response; 804 | }); 805 | 806 | }; 807 | 808 | function parseHeaders(str) { 809 | 810 | var headers = {}, value, name, i; 811 | 812 | if (_.isString(str)) { 813 | _.each(str.split('\n'), function (row) { 814 | 815 | i = row.indexOf(':'); 816 | name = _.trim(_.toLower(row.slice(0, i))); 817 | value = _.trim(row.slice(i + 1)); 818 | 819 | if (headers[name]) { 820 | 821 | if (_.isArray(headers[name])) { 822 | headers[name].push(value); 823 | } else { 824 | headers[name] = [headers[name], value]; 825 | } 826 | 827 | } else { 828 | 829 | headers[name] = value; 830 | } 831 | 832 | }); 833 | } 834 | 835 | return headers; 836 | } 837 | 838 | 839 | /***/ }, 840 | /* 10 */ 841 | /***/ function(module, exports, __webpack_require__) { 842 | 843 | /** 844 | * Promise adapter. 845 | */ 846 | 847 | var _ = __webpack_require__(1); 848 | var PromiseObj = window.Promise || __webpack_require__(11); 849 | 850 | function Promise(executor, context) { 851 | 852 | if (executor instanceof PromiseObj) { 853 | this.promise = executor; 854 | } else { 855 | this.promise = new PromiseObj(executor.bind(context)); 856 | } 857 | 858 | this.context = context; 859 | } 860 | 861 | Promise.all = function (iterable, context) { 862 | return new Promise(PromiseObj.all(iterable), context); 863 | }; 864 | 865 | Promise.resolve = function (value, context) { 866 | return new Promise(PromiseObj.resolve(value), context); 867 | }; 868 | 869 | Promise.reject = function (reason, context) { 870 | return new Promise(PromiseObj.reject(reason), context); 871 | }; 872 | 873 | Promise.race = function (iterable, context) { 874 | return new Promise(PromiseObj.race(iterable), context); 875 | }; 876 | 877 | var p = Promise.prototype; 878 | 879 | p.bind = function (context) { 880 | this.context = context; 881 | return this; 882 | }; 883 | 884 | p.then = function (fulfilled, rejected) { 885 | 886 | if (fulfilled && fulfilled.bind && this.context) { 887 | fulfilled = fulfilled.bind(this.context); 888 | } 889 | 890 | if (rejected && rejected.bind && this.context) { 891 | rejected = rejected.bind(this.context); 892 | } 893 | 894 | this.promise = this.promise.then(fulfilled, rejected); 895 | 896 | return this; 897 | }; 898 | 899 | p.catch = function (rejected) { 900 | 901 | if (rejected && rejected.bind && this.context) { 902 | rejected = rejected.bind(this.context); 903 | } 904 | 905 | this.promise = this.promise.catch(rejected); 906 | 907 | return this; 908 | }; 909 | 910 | p.finally = function (callback) { 911 | 912 | return this.then(function (value) { 913 | callback.call(this); 914 | return value; 915 | }, function (reason) { 916 | callback.call(this); 917 | return PromiseObj.reject(reason); 918 | } 919 | ); 920 | }; 921 | 922 | p.success = function (callback) { 923 | 924 | _.warn('The `success` method has been deprecated. Use the `then` method instead.'); 925 | 926 | return this.then(function (response) { 927 | return callback.call(this, response.data, response.status, response) || response; 928 | }); 929 | }; 930 | 931 | p.error = function (callback) { 932 | 933 | _.warn('The `error` method has been deprecated. Use the `catch` method instead.'); 934 | 935 | return this.catch(function (response) { 936 | return callback.call(this, response.data, response.status, response) || response; 937 | }); 938 | }; 939 | 940 | p.always = function (callback) { 941 | 942 | _.warn('The `always` method has been deprecated. Use the `finally` method instead.'); 943 | 944 | var cb = function (response) { 945 | return callback.call(this, response.data, response.status, response) || response; 946 | }; 947 | 948 | return this.then(cb, cb); 949 | }; 950 | 951 | module.exports = Promise; 952 | 953 | 954 | /***/ }, 955 | /* 11 */ 956 | /***/ function(module, exports, __webpack_require__) { 957 | 958 | /** 959 | * Promises/A+ polyfill v1.1.4 (https://github.com/bramstein/promis) 960 | */ 961 | 962 | var _ = __webpack_require__(1); 963 | 964 | var RESOLVED = 0; 965 | var REJECTED = 1; 966 | var PENDING = 2; 967 | 968 | function Promise(executor) { 969 | 970 | this.state = PENDING; 971 | this.value = undefined; 972 | this.deferred = []; 973 | 974 | var promise = this; 975 | 976 | try { 977 | executor(function (x) { 978 | promise.resolve(x); 979 | }, function (r) { 980 | promise.reject(r); 981 | }); 982 | } catch (e) { 983 | promise.reject(e); 984 | } 985 | } 986 | 987 | Promise.reject = function (r) { 988 | return new Promise(function (resolve, reject) { 989 | reject(r); 990 | }); 991 | }; 992 | 993 | Promise.resolve = function (x) { 994 | return new Promise(function (resolve, reject) { 995 | resolve(x); 996 | }); 997 | }; 998 | 999 | Promise.all = function all(iterable) { 1000 | return new Promise(function (resolve, reject) { 1001 | var count = 0, result = []; 1002 | 1003 | if (iterable.length === 0) { 1004 | resolve(result); 1005 | } 1006 | 1007 | function resolver(i) { 1008 | return function (x) { 1009 | result[i] = x; 1010 | count += 1; 1011 | 1012 | if (count === iterable.length) { 1013 | resolve(result); 1014 | } 1015 | }; 1016 | } 1017 | 1018 | for (var i = 0; i < iterable.length; i += 1) { 1019 | Promise.resolve(iterable[i]).then(resolver(i), reject); 1020 | } 1021 | }); 1022 | }; 1023 | 1024 | Promise.race = function race(iterable) { 1025 | return new Promise(function (resolve, reject) { 1026 | for (var i = 0; i < iterable.length; i += 1) { 1027 | Promise.resolve(iterable[i]).then(resolve, reject); 1028 | } 1029 | }); 1030 | }; 1031 | 1032 | var p = Promise.prototype; 1033 | 1034 | p.resolve = function resolve(x) { 1035 | var promise = this; 1036 | 1037 | if (promise.state === PENDING) { 1038 | if (x === promise) { 1039 | throw new TypeError('Promise settled with itself.'); 1040 | } 1041 | 1042 | var called = false; 1043 | 1044 | try { 1045 | var then = x && x['then']; 1046 | 1047 | if (x !== null && typeof x === 'object' && typeof then === 'function') { 1048 | then.call(x, function (x) { 1049 | if (!called) { 1050 | promise.resolve(x); 1051 | } 1052 | called = true; 1053 | 1054 | }, function (r) { 1055 | if (!called) { 1056 | promise.reject(r); 1057 | } 1058 | called = true; 1059 | }); 1060 | return; 1061 | } 1062 | } catch (e) { 1063 | if (!called) { 1064 | promise.reject(e); 1065 | } 1066 | return; 1067 | } 1068 | 1069 | promise.state = RESOLVED; 1070 | promise.value = x; 1071 | promise.notify(); 1072 | } 1073 | }; 1074 | 1075 | p.reject = function reject(reason) { 1076 | var promise = this; 1077 | 1078 | if (promise.state === PENDING) { 1079 | if (reason === promise) { 1080 | throw new TypeError('Promise settled with itself.'); 1081 | } 1082 | 1083 | promise.state = REJECTED; 1084 | promise.value = reason; 1085 | promise.notify(); 1086 | } 1087 | }; 1088 | 1089 | p.notify = function notify() { 1090 | var promise = this; 1091 | 1092 | _.nextTick(function () { 1093 | if (promise.state !== PENDING) { 1094 | while (promise.deferred.length) { 1095 | var deferred = promise.deferred.shift(), 1096 | onResolved = deferred[0], 1097 | onRejected = deferred[1], 1098 | resolve = deferred[2], 1099 | reject = deferred[3]; 1100 | 1101 | try { 1102 | if (promise.state === RESOLVED) { 1103 | if (typeof onResolved === 'function') { 1104 | resolve(onResolved.call(undefined, promise.value)); 1105 | } else { 1106 | resolve(promise.value); 1107 | } 1108 | } else if (promise.state === REJECTED) { 1109 | if (typeof onRejected === 'function') { 1110 | resolve(onRejected.call(undefined, promise.value)); 1111 | } else { 1112 | reject(promise.value); 1113 | } 1114 | } 1115 | } catch (e) { 1116 | reject(e); 1117 | } 1118 | } 1119 | } 1120 | }); 1121 | }; 1122 | 1123 | p.then = function then(onResolved, onRejected) { 1124 | var promise = this; 1125 | 1126 | return new Promise(function (resolve, reject) { 1127 | promise.deferred.push([onResolved, onRejected, resolve, reject]); 1128 | promise.notify(); 1129 | }); 1130 | }; 1131 | 1132 | p.catch = function (onRejected) { 1133 | return this.then(undefined, onRejected); 1134 | }; 1135 | 1136 | module.exports = Promise; 1137 | 1138 | 1139 | /***/ }, 1140 | /* 12 */ 1141 | /***/ function(module, exports, __webpack_require__) { 1142 | 1143 | /** 1144 | * XMLHttp client. 1145 | */ 1146 | 1147 | var _ = __webpack_require__(1); 1148 | var Promise = __webpack_require__(10); 1149 | 1150 | module.exports = function (request) { 1151 | return new Promise(function (resolve) { 1152 | 1153 | var xhr = new XMLHttpRequest(), response = {request: request}, handler; 1154 | 1155 | request.cancel = function () { 1156 | xhr.abort(); 1157 | }; 1158 | 1159 | xhr.open(request.method, _.url(request), true); 1160 | 1161 | handler = function (event) { 1162 | 1163 | response.data = xhr.responseText; 1164 | response.status = xhr.status; 1165 | response.statusText = xhr.statusText; 1166 | response.headers = xhr.getAllResponseHeaders(); 1167 | 1168 | resolve(response); 1169 | }; 1170 | 1171 | xhr.timeout = 0; 1172 | xhr.onload = handler; 1173 | xhr.onabort = handler; 1174 | xhr.onerror = handler; 1175 | xhr.ontimeout = function () {}; 1176 | xhr.onprogress = function () {}; 1177 | 1178 | if (_.isPlainObject(request.xhr)) { 1179 | _.extend(xhr, request.xhr); 1180 | } 1181 | 1182 | if (_.isPlainObject(request.upload)) { 1183 | _.extend(xhr.upload, request.upload); 1184 | } 1185 | 1186 | _.each(request.headers || {}, function (value, header) { 1187 | xhr.setRequestHeader(header, value); 1188 | }); 1189 | 1190 | xhr.send(request.data); 1191 | }); 1192 | }; 1193 | 1194 | 1195 | /***/ }, 1196 | /* 13 */ 1197 | /***/ function(module, exports, __webpack_require__) { 1198 | 1199 | /** 1200 | * Interceptor factory. 1201 | */ 1202 | 1203 | var _ = __webpack_require__(1); 1204 | var Promise = __webpack_require__(10); 1205 | 1206 | module.exports = function (handler, vm) { 1207 | 1208 | return function (client) { 1209 | 1210 | if (_.isFunction(handler)) { 1211 | handler = handler.call(vm, Promise); 1212 | } 1213 | 1214 | return function (request) { 1215 | 1216 | if (_.isFunction(handler.request)) { 1217 | request = handler.request.call(vm, request); 1218 | } 1219 | 1220 | return when(request, function (request) { 1221 | return when(client(request), function (response) { 1222 | 1223 | if (_.isFunction(handler.response)) { 1224 | response = handler.response.call(vm, response); 1225 | } 1226 | 1227 | return response; 1228 | }); 1229 | }); 1230 | }; 1231 | }; 1232 | }; 1233 | 1234 | function when(value, fulfilled, rejected) { 1235 | 1236 | var promise = Promise.resolve(value); 1237 | 1238 | if (arguments.length < 2) { 1239 | return promise; 1240 | } 1241 | 1242 | return promise.then(fulfilled, rejected); 1243 | } 1244 | 1245 | 1246 | /***/ }, 1247 | /* 14 */ 1248 | /***/ function(module, exports, __webpack_require__) { 1249 | 1250 | /** 1251 | * Before Interceptor. 1252 | */ 1253 | 1254 | var _ = __webpack_require__(1); 1255 | 1256 | module.exports = { 1257 | 1258 | request: function (request) { 1259 | 1260 | if (_.isFunction(request.beforeSend)) { 1261 | request.beforeSend.call(this, request); 1262 | } 1263 | 1264 | return request; 1265 | } 1266 | 1267 | }; 1268 | 1269 | 1270 | /***/ }, 1271 | /* 15 */ 1272 | /***/ function(module, exports) { 1273 | 1274 | /** 1275 | * Timeout Interceptor. 1276 | */ 1277 | 1278 | module.exports = function () { 1279 | 1280 | var timeout; 1281 | 1282 | return { 1283 | 1284 | request: function (request) { 1285 | 1286 | if (request.timeout) { 1287 | timeout = setTimeout(function () { 1288 | request.cancel(); 1289 | }, request.timeout); 1290 | } 1291 | 1292 | return request; 1293 | }, 1294 | 1295 | response: function (response) { 1296 | 1297 | clearTimeout(timeout); 1298 | 1299 | return response; 1300 | } 1301 | 1302 | }; 1303 | }; 1304 | 1305 | 1306 | /***/ }, 1307 | /* 16 */ 1308 | /***/ function(module, exports, __webpack_require__) { 1309 | 1310 | /** 1311 | * JSONP Interceptor. 1312 | */ 1313 | 1314 | var jsonpClient = __webpack_require__(17); 1315 | 1316 | module.exports = { 1317 | 1318 | request: function (request) { 1319 | 1320 | if (request.method == 'JSONP') { 1321 | request.client = jsonpClient; 1322 | } 1323 | 1324 | return request; 1325 | } 1326 | 1327 | }; 1328 | 1329 | 1330 | /***/ }, 1331 | /* 17 */ 1332 | /***/ function(module, exports, __webpack_require__) { 1333 | 1334 | /** 1335 | * JSONP client. 1336 | */ 1337 | 1338 | var _ = __webpack_require__(1); 1339 | var Promise = __webpack_require__(10); 1340 | 1341 | module.exports = function (request) { 1342 | return new Promise(function (resolve) { 1343 | 1344 | var callback = '_jsonp' + Math.random().toString(36).substr(2), response = {request: request, data: null}, handler, script; 1345 | 1346 | request.params[request.jsonp] = callback; 1347 | request.cancel = function () { 1348 | handler({type: 'cancel'}); 1349 | }; 1350 | 1351 | script = document.createElement('script'); 1352 | script.src = _.url(request); 1353 | script.type = 'text/javascript'; 1354 | script.async = true; 1355 | 1356 | window[callback] = function (data) { 1357 | response.data = data; 1358 | }; 1359 | 1360 | handler = function (event) { 1361 | 1362 | if (event.type === 'load' && response.data !== null) { 1363 | response.status = 200; 1364 | } else if (event.type === 'error') { 1365 | response.status = 404; 1366 | } else { 1367 | response.status = 0; 1368 | } 1369 | 1370 | resolve(response); 1371 | 1372 | delete window[callback]; 1373 | document.body.removeChild(script); 1374 | }; 1375 | 1376 | script.onload = handler; 1377 | script.onerror = handler; 1378 | 1379 | document.body.appendChild(script); 1380 | }); 1381 | }; 1382 | 1383 | 1384 | /***/ }, 1385 | /* 18 */ 1386 | /***/ function(module, exports) { 1387 | 1388 | /** 1389 | * HTTP method override Interceptor. 1390 | */ 1391 | 1392 | module.exports = { 1393 | 1394 | request: function (request) { 1395 | 1396 | if (request.emulateHTTP && /^(PUT|PATCH|DELETE)$/i.test(request.method)) { 1397 | request.headers['X-HTTP-Method-Override'] = request.method; 1398 | request.method = 'POST'; 1399 | } 1400 | 1401 | return request; 1402 | } 1403 | 1404 | }; 1405 | 1406 | 1407 | /***/ }, 1408 | /* 19 */ 1409 | /***/ function(module, exports, __webpack_require__) { 1410 | 1411 | /** 1412 | * Mime Interceptor. 1413 | */ 1414 | 1415 | var _ = __webpack_require__(1); 1416 | 1417 | module.exports = { 1418 | 1419 | request: function (request) { 1420 | 1421 | if (request.emulateJSON && _.isPlainObject(request.data)) { 1422 | request.headers['Content-Type'] = 'application/x-www-form-urlencoded'; 1423 | request.data = _.url.params(request.data); 1424 | } 1425 | 1426 | if (_.isObject(request.data) && /FormData/i.test(request.data.toString())) { 1427 | delete request.headers['Content-Type']; 1428 | } 1429 | 1430 | if (_.isPlainObject(request.data)) { 1431 | request.data = JSON.stringify(request.data); 1432 | } 1433 | 1434 | return request; 1435 | }, 1436 | 1437 | response: function (response) { 1438 | 1439 | try { 1440 | response.data = JSON.parse(response.data); 1441 | } catch (e) {} 1442 | 1443 | return response; 1444 | } 1445 | 1446 | }; 1447 | 1448 | 1449 | /***/ }, 1450 | /* 20 */ 1451 | /***/ function(module, exports, __webpack_require__) { 1452 | 1453 | /** 1454 | * Header Interceptor. 1455 | */ 1456 | 1457 | var _ = __webpack_require__(1); 1458 | 1459 | module.exports = { 1460 | 1461 | request: function (request) { 1462 | 1463 | request.method = request.method.toUpperCase(); 1464 | request.headers = _.extend({}, _.http.headers.common, 1465 | !request.crossOrigin ? _.http.headers.custom : {}, 1466 | _.http.headers[request.method.toLowerCase()], 1467 | request.headers 1468 | ); 1469 | 1470 | if (_.isPlainObject(request.data) && /^(GET|JSONP)$/i.test(request.method)) { 1471 | _.extend(request.params, request.data); 1472 | delete request.data; 1473 | } 1474 | 1475 | return request; 1476 | } 1477 | 1478 | }; 1479 | 1480 | 1481 | /***/ }, 1482 | /* 21 */ 1483 | /***/ function(module, exports, __webpack_require__) { 1484 | 1485 | /** 1486 | * CORS Interceptor. 1487 | */ 1488 | 1489 | var _ = __webpack_require__(1); 1490 | var xdrClient = __webpack_require__(22); 1491 | var xhrCors = 'withCredentials' in new XMLHttpRequest(); 1492 | var originUrl = _.url.parse(location.href); 1493 | 1494 | module.exports = { 1495 | 1496 | request: function (request) { 1497 | 1498 | if (request.crossOrigin === null) { 1499 | request.crossOrigin = crossOrigin(request); 1500 | } 1501 | 1502 | if (request.crossOrigin) { 1503 | 1504 | if (!xhrCors) { 1505 | request.client = xdrClient; 1506 | } 1507 | 1508 | request.emulateHTTP = false; 1509 | } 1510 | 1511 | return request; 1512 | } 1513 | 1514 | }; 1515 | 1516 | function crossOrigin(request) { 1517 | 1518 | var requestUrl = _.url.parse(_.url(request)); 1519 | 1520 | return (requestUrl.protocol !== originUrl.protocol || requestUrl.host !== originUrl.host); 1521 | } 1522 | 1523 | 1524 | /***/ }, 1525 | /* 22 */ 1526 | /***/ function(module, exports, __webpack_require__) { 1527 | 1528 | /** 1529 | * XDomain client (Internet Explorer). 1530 | */ 1531 | 1532 | var _ = __webpack_require__(1); 1533 | var Promise = __webpack_require__(10); 1534 | 1535 | module.exports = function (request) { 1536 | return new Promise(function (resolve) { 1537 | 1538 | var xdr = new XDomainRequest(), response = {request: request}, handler; 1539 | 1540 | request.cancel = function () { 1541 | xdr.abort(); 1542 | }; 1543 | 1544 | xdr.open(request.method, _.url(request), true); 1545 | 1546 | handler = function (event) { 1547 | 1548 | response.data = xdr.responseText; 1549 | response.status = xdr.status; 1550 | response.statusText = xdr.statusText; 1551 | 1552 | resolve(response); 1553 | }; 1554 | 1555 | xdr.timeout = 0; 1556 | xdr.onload = handler; 1557 | xdr.onabort = handler; 1558 | xdr.onerror = handler; 1559 | xdr.ontimeout = function () {}; 1560 | xdr.onprogress = function () {}; 1561 | 1562 | xdr.send(request.data); 1563 | }); 1564 | }; 1565 | 1566 | 1567 | /***/ }, 1568 | /* 23 */ 1569 | /***/ function(module, exports, __webpack_require__) { 1570 | 1571 | /** 1572 | * Service for interacting with RESTful services. 1573 | */ 1574 | 1575 | var _ = __webpack_require__(1); 1576 | 1577 | function Resource(url, params, actions, options) { 1578 | 1579 | var self = this, resource = {}; 1580 | 1581 | actions = _.extend({}, 1582 | Resource.actions, 1583 | actions 1584 | ); 1585 | 1586 | _.each(actions, function (action, name) { 1587 | 1588 | action = _.merge({url: url, params: params || {}}, options, action); 1589 | 1590 | resource[name] = function () { 1591 | return (self.$http || _.http)(opts(action, arguments)); 1592 | }; 1593 | }); 1594 | 1595 | return resource; 1596 | } 1597 | 1598 | function opts(action, args) { 1599 | 1600 | var options = _.extend({}, action), params = {}, data, success, error; 1601 | 1602 | switch (args.length) { 1603 | 1604 | case 4: 1605 | 1606 | error = args[3]; 1607 | success = args[2]; 1608 | 1609 | case 3: 1610 | case 2: 1611 | 1612 | if (_.isFunction(args[1])) { 1613 | 1614 | if (_.isFunction(args[0])) { 1615 | 1616 | success = args[0]; 1617 | error = args[1]; 1618 | 1619 | break; 1620 | } 1621 | 1622 | success = args[1]; 1623 | error = args[2]; 1624 | 1625 | } else { 1626 | 1627 | params = args[0]; 1628 | data = args[1]; 1629 | success = args[2]; 1630 | 1631 | break; 1632 | } 1633 | 1634 | case 1: 1635 | 1636 | if (_.isFunction(args[0])) { 1637 | success = args[0]; 1638 | } else if (/^(POST|PUT|PATCH)$/i.test(options.method)) { 1639 | data = args[0]; 1640 | } else { 1641 | params = args[0]; 1642 | } 1643 | 1644 | break; 1645 | 1646 | case 0: 1647 | 1648 | break; 1649 | 1650 | default: 1651 | 1652 | throw 'Expected up to 4 arguments [params, data, success, error], got ' + args.length + ' arguments'; 1653 | } 1654 | 1655 | options.data = data; 1656 | options.params = _.extend({}, options.params, params); 1657 | 1658 | if (success) { 1659 | options.success = success; 1660 | } 1661 | 1662 | if (error) { 1663 | options.error = error; 1664 | } 1665 | 1666 | return options; 1667 | } 1668 | 1669 | Resource.actions = { 1670 | 1671 | get: {method: 'GET'}, 1672 | save: {method: 'POST'}, 1673 | query: {method: 'GET'}, 1674 | update: {method: 'PUT'}, 1675 | remove: {method: 'DELETE'}, 1676 | delete: {method: 'DELETE'} 1677 | 1678 | }; 1679 | 1680 | module.exports = _.resource = Resource; 1681 | 1682 | 1683 | /***/ } 1684 | /******/ ]) 1685 | }); 1686 | ; -------------------------------------------------------------------------------- /素材/js/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue' 4 | import App from './App' 5 | import router from './router' 6 | 7 | Vue.config.productionTip = false 8 | 9 | /* eslint-disable no-new */ 10 | new Vue({ 11 | el: '#app', 12 | router, 13 | template: '', 14 | components: { App } 15 | }) 16 | -------------------------------------------------------------------------------- /素材/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue", 3 | "version": "1.0.0", 4 | "description": "开发购物车功能", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "vue" 11 | ], 12 | "author": "Yfling", 13 | "license": "ISC" 14 | } 15 | --------------------------------------------------------------------------------