一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--购物车页面
advertisement

使用vue全家桶高仿小米商城--购物车页面

1、cart.vue代码如下:
  1. <template>  
  2.     <div class="cart">  
  3.         <order-header title="我的购物车">  
  4.             <template v-slot:tip>  
  5.                 <span>温馨提示:产品是否购买成功,以最终下单为准哦,请尽快结算</span>  
  6.             </template>  
  7.         </order-header>  
  8.         <div class="wrapper">  
  9.             <div class="container">  
  10.                 <div class="cart-box">  
  11.                     <ul class="cart-item-head">  
  12.                         <li class="col-1"><span class="checkbox" :class="{'checked':allChecked}" @click="toggleAll"></span>全选</li>  
  13.                         <li class="col-3">商品名称</li>  
  14.                         <li class="col-1">单价</li>  
  15.                         <li class="col-2">数量</li>  
  16.                         <li class="col-1">小计</li>  
  17.                         <li class="col-1">操作</li>  
  18.                     </ul>  
  19.                     <ul class="cart-item-list">  
  20.                         <li class="cart-item" v-for="(item,index) in list" :key="index">  
  21.                             <div class="item-check">  
  22.                                 <span class="checkbox" :class="{'checked':item.productSelected}" @click="updateCart(item)"></span>  
  23.                             </div>  
  24.                             <div class="item-name">  
  25.                                 <img v-lazy="item.productMainImage" alt="">  
  26.                                 <span>{{item.productName + ' , ' + item.productSubtitle}}</span>  
  27.                             </div>  
  28.                             <div class="item-price">{{item.productPrice}}</div>  
  29.                             <div class="item-num">  
  30.                                 <div class="num-box">  
  31.                                     <a href="javascript:;" @click="updateCart(item,'-')">-</a>  
  32.                                     <span>{{item.quantity}}</span>  
  33.                                     <a href="javascript:;" @click="updateCart(item,'+')">+</a>  
  34.                                 </div>  
  35.                             </div>  
  36.                             <div class="item-total">{{item.productTotalPrice}}</div>  
  37.                             <div class="item-del" @click="delProduct(item)"></div>  
  38.                         </li>  
  39.                     </ul>  
  40.                 </div>  
  41.                 <div class="order-wrap clearfix">  
  42.                     <div class="cart-tip fl">  
  43.                         <a href="/#/index">继续购物</a>  
  44.                         共<span>{{list.length}}</span>件商品,已选择<span>{{checkedNum}}</span>件  
  45.                     </div>  
  46.                     <div class="total fr">  
  47.                         合计:<span>{{cartTotalPrice}}</span>元  
  48.                         <a href="javascript:;" class="btn" @click="order">去结算</a>  
  49.                     </div>  
  50.                 </div>  
  51.             </div>  
  52.         </div>  
  53.         <service-bar></service-bar>  
  54.         <nav-footer></nav-footer>  
  55.     </div>  
  56. </template>  
  57. <script>  
  58.     import OrderHeader from './../components/OrderHeader'  
  59.     import ServiceBar from './../components/ServiceBar'  
  60.     import NavFooter from './../components/NavFooter'  
  61.     export default {  
  62.         name: 'index',  
  63.         components: {  
  64.             OrderHeader,  
  65.             ServiceBar,  
  66.             NavFooter  
  67.         },  
  68.         data() {  
  69.             return {  
  70.                 list: [], //商品列表  
  71.                 allChecked: false//是否全选  
  72.                 cartTotalPrice: 0//商品总金额  
  73.                 checkedNum: 0 //选中商品数量  
  74.             }  
  75.         },  
  76.         mounted() {  
  77.             this.getCartList();  
  78.         },  
  79.         methods: {  
  80.             // 获取购物车列表  
  81.             getCartList() {  
  82.                 this.axios.get('/carts').then((res) => {  
  83.                     // this.list = res.cartProductVoList || [];  
  84.                     // this.allChecked = res.selectedAll;  
  85.                     // this.cartTotalPrice = res.cartTotalPrice;  
  86.                     // this.checkedNum = this.list.filter(item=>item.productSelected).length  
  87.                     this.renderData(res);  
  88.                 })  
  89.             },  
  90.             // 更新购物车数量和购物车单选状态  
  91.             updateCart(item, type) {  
  92.                 let quantity = item.quantity,  
  93.                     selected = item.productSelected;  
  94.                 if (type == '-') {  
  95.                     if (quantity == 1) {  
  96.                         alert('商品至少保留一件')  
  97.                         // this.$message.warning('商品至少保留一件');  
  98.                         return;  
  99.                     }  
  100.                     --quantity;  
  101.                 } else if (type == '+') {  
  102.                     if (quantity > item.productStock) {  
  103.                         alert('购买数量不能超过库存数量')  
  104.                         //this.$message.warning('购买数量不能超过库存数量');  
  105.                         return;  
  106.                     }  
  107.                     ++quantity;  
  108.                 } else {  
  109.                     selected = !item.productSelected;  
  110.                 }  
  111.                 this.axios.put(`/carts/${item.productId}`, {  
  112.                     quantity,  
  113.                     selected  
  114.                 }).then((res) => {  
  115.                     this.renderData(res);  
  116.                 })  
  117.             },  
  118.             // 删除购物车商品  
  119.             delProduct(item) {  
  120.                 this.axios.delete(`/carts/${item.productId}`).then((res) => {  
  121.                     // this.$message.success('删除成功');  
  122.                     alert('删除成功')  
  123.                     this.renderData(res);  
  124.                 });  
  125.             },  
  126.             // 控制全选功能  
  127.             toggleAll() {  
  128.                 let url = this.allChecked ? '/carts/unSelectAll' : '/carts/selectAll';  
  129.                 this.axios.put(url).then((res) => {  
  130.                     // this.list = res.cartProductVoList || [];  
  131.                     // this.allChecked = res.selectedAll;  
  132.                     // this.cartTotalPrice = res.cartTotalPrice;  
  133.                     // this.checkedNum = this.list.filter(item=>item.productSelected).length  
  134.                     this.renderData(res);  
  135.                 })  
  136.             },  
  137.             // 公共赋值  
  138.             renderData(res) {  
  139.                 this.list = res.cartProductVoList || [];  
  140.                 this.allChecked = res.selectedAll;  
  141.                 this.cartTotalPrice = res.cartTotalPrice;  
  142.                 this.checkedNum = this.list.filter(item => item.productSelected).length;  
  143.             },  
  144.             // 购物车下单  
  145.             order() {  
  146.                 let isCheck = this.list.every(item => !item.productSelected);  
  147.                 if (isCheck) {  
  148.                     alert('请选择一件商品')  
  149.                     // this.$message.warning('请选择一件商品');  
  150.                 } else {  
  151.                     this.$router.push('/order/confirm');  
  152.                 }  
  153.             }  
  154.         }  
  155.     }  
  156. </script>  
  157. <style lang="scss">  
  158.     .cart {  
  159.         .wrapper {  
  160.             background-color: #F5F5F5;  
  161.             padding-top: 30px;  
  162.             padding-bottom: 114px;  
  163.   
  164.             .cart-box {  
  165.                 background-color: #fff;  
  166.                 font-size: 14px;  
  167.                 color: #999999;  
  168.                 text-align: center;  
  169.   
  170.                 .checkbox {  
  171.                     display: inline-block;  
  172.                     width: 22px;  
  173.                     height: 22px;  
  174.                     border: 1px solid #E5E5E5;  
  175.                     vertical-align: middle;  
  176.                     margin-right: 17px;  
  177.                     cursor: pointer;  
  178.   
  179.                     &.checked {  
  180.                         background: url('./../../public/images/icon-gou.png') #FF6600 no-repeat center;  
  181.                         background-size: 16px 12px;  
  182.                         border: none;  
  183.                     }  
  184.                 }  
  185.   
  186.                 .cart-item-head {  
  187.                     display: flex;  
  188.                     height: 79px;  
  189.                     line-height: 79px;  
  190.   
  191.                     .col-1 {  
  192.                         flex: 1;  
  193.                     }  
  194.   
  195.                     .col-2 {  
  196.                         flex: 2;  
  197.                     }  
  198.   
  199.                     .col-3 {  
  200.                         flex: 3;  
  201.                     }  
  202.                 }  
  203.   
  204.                 .cart-item-list {  
  205.                     .cart-item {  
  206.                         display: flex;  
  207.                         align-items: center;  
  208.                         height: 125px;  
  209.                         border-top: 1px solid #E5E5E5;  
  210.                         font-size: 16px;  
  211.   
  212.                         .item-check {  
  213.                             flex: 1;  
  214.                         }  
  215.   
  216.                         .item-name {  
  217.                             flex: 3;  
  218.                             font-size: 18px;  
  219.                             color: #333333;  
  220.                             display: flex;  
  221.                             align-items: center;  
  222.   
  223.                             img {  
  224.                                 width: 80px;  
  225.                                 height: 80px;  
  226.                                 vertical-align: middle;  
  227.                             }  
  228.   
  229.                             span {  
  230.                                 margin-left: 30px;  
  231.                             }  
  232.                         }  
  233.   
  234.                         .item-price {  
  235.                             flex: 1;  
  236.                             color: #333333;  
  237.                         }  
  238.   
  239.                         .item-num {  
  240.                             flex: 2;  
  241.   
  242.                             .num-box {  
  243.                                 display: inline-block;  
  244.                                 width: 150px;  
  245.                                 height: 40px;  
  246.                                 line-height: 40px;  
  247.                                 border: 1px solid #E5E5E5;  
  248.                                 font-size: 14px;  
  249.   
  250.                                 a {  
  251.                                     display: inline-block;  
  252.                                     width: 50px;  
  253.                                     color: #333333;  
  254.                                 }  
  255.   
  256.                                 span {  
  257.                                     display: inline-block;  
  258.                                     width: 50px;  
  259.                                     color: #333333;  
  260.                                 }  
  261.                             }  
  262.                         }  
  263.   
  264.                         .item-total {  
  265.                             flex: 1;  
  266.                             color: #FF6600;  
  267.                         }  
  268.   
  269.                         .item-del {  
  270.                             flex: 1;  
  271.                             width: 14px;  
  272.                             height: 12px;  
  273.                             background: url('./../../public/images/icon-close.png') no-repeat center;  
  274.                             background-size: contain;  
  275.                             cursor: pointer;  
  276.                         }  
  277.                     }  
  278.                 }  
  279.             }  
  280.             .order-wrap {  
  281.                 font-size: 14px;  
  282.                 color: #666666;  
  283.                 margin-top: 20px;  
  284.                 height: 50px;  
  285.                 line-height: 50px;  
  286.   
  287.                 .cart-tip {  
  288.                     margin-left: 29px;  
  289.   
  290.                     a {  
  291.                         color: #666666;  
  292.                         margin-right: 37px;  
  293.                     }  
  294.   
  295.                     span {  
  296.                         color: #FF6600;  
  297.                         margin: 0 5px;  
  298.                     }  
  299.                 }  
  300.   
  301.                 .total {  
  302.                     font-size: 14px;  
  303.                     color: #FF6600;  
  304.   
  305.                     span {  
  306.                         font-size: 24px;  
  307.                     }  
  308.   
  309.                     a {  
  310.                         width: 202px;  
  311.                         height: 50px;  
  312.                         line-height: 50px;  
  313.                         font-size: 18px;  
  314.                         margin-left: 37px;  
  315.                     }  
  316.                 }  
  317.             }  
  318.         }  
  319.     }  
  320. </style>  
2、OrderHeader.vue代码如下:
  1. <template>  
  2.     <div class="order-header">  
  3.         <div class="container clearfix">  
  4.             <div class="header-logo">  
  5.                 <a href="/#/index"></a>  
  6.             </div>  
  7.             <div class="title">  
  8.                 <h2>{{title}}<slot name="tip"></slot></h2>  
  9.             </div>  
  10.             <div class="username">  
  11.                 <a href="##">{{username}}</a>  
  12.             </div>  
  13.         </div>  
  14.     </div>  
  15. </template>  
  16.   
  17. <script>  
  18.     import {mapState} from 'vuex'  
  19.     export default{  
  20.         name:'order-header',  
  21.         props:{  
  22.             title:String  
  23.         },  
  24.         computed:{  
  25.             ...mapState(['username'])  
  26.         }  
  27.     }  
  28. </script>  
  29. <style lang="scss">  
  30.     .order-header{  
  31.         box-sizing: border-box;  
  32.         height: 112px;  
  33.         padding: 30px 0;  
  34.         .header-logo{  
  35.             float: left;  
  36.         }  
  37.         .container{  
  38.             .title, .username{  
  39.                 display: inline-block;  
  40.                 height: 55px;  
  41.                 line-height: 55px;  
  42.                 color: #333333;  
  43.             }  
  44.             .title{  
  45.                 float: left;  
  46.                 margin-left: 54px;  
  47.                 h2{  
  48.                     font-size: 28px;  
  49.                 }  
  50.                 span{  
  51.                     font-size: 14px;  
  52.                     margin-left: 17px;  
  53.                     font-weight: 700;  
  54.                     color: #999999;  
  55.                 }  
  56.             }  
  57.             .username{  
  58.                 float: right;  
  59.                 a{  
  60.                     color: #666666;  
  61.                     font-size: 16px;  
  62.                 }  
  63.             }  
  64.         }  
  65.     }  
  66. </style> 
3、因为头部小logo在多个地方公用了但是header部分又不一样,所以我们就把logo部分单独拎出来放到公共样式里面去,只需要将logo部分的代码放置base.scss里面去既可,如下图所示:


附加:总页面截图如下所示:


页面效果图如下:


zhangren.online
上一篇:使用vue全家桶高仿小米商城--产品详情交互实现
下一篇:使用vue全家桶高仿小米商城--处理安装ElementUI依赖报错

您可能喜欢

回到顶部