• Vue实现购物车页面

    包括全选反选、数据的统计和本地持久化的处理。

    html

    1. DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <link rel="stylesheet" href="./css/inputnumber.css" />
    8.     <link rel="stylesheet" href="./css/index.css" />
    9.     <title>购物车title>
    10.   head>
    11.   <body>
    12.     <div class="app-container" id="app">
    13.       
    14.       <div class="banner-box"><img src="img/fruit.jpg" alt="" />div>
    15.       
    16.       <div class="breadcrumb">
    17.         <span>🏠span>
    18.         /
    19.         <span>购物车span>
    20.       div>
    21.       
    22.       <div class="main" v-if="fruitList.length>0">
    23.         <div class="table">
    24.           
    25.           <div class="thead">
    26.             <div class="tr">
    27.               <div class="th">选中div>
    28.               <div class="th th-pic">图片div>
    29.               <div class="th">单价div>
    30.               <div class="th num-th">个数div>
    31.               <div class="th">小计div>
    32.               <div class="th">操作div>
    33.             div>
    34.           div>
    35.           
    36.           <div class="tbody" v-for="(item,index) in fruitList" :key="item.id">
    37.             <div class="tr" :class="{active:item.isChecked}">
    38.               <div class="td"><input type="checkbox" v-model="item.isChecked" />div>
    39.               <div class="td"><img :src="item.icon" alt="" />div>
    40.               <div class="td">{{item.price}}div>
    41.               <div class="td">
    42.                 <div class="my-input-number">
    43.                   <button class="decrease" @click="item.num-=1" :disabled="item.num<=0"> - button>
    44.                   <span class="my-input__inner">{{item.num}}span>
    45.                   <button class="increase" @click="add(item.id)"> + button>
    46.                 div>
    47.               div>
    48.               <div class="td">{{item.num*item.price}}div>
    49.               <div class="td"><button @click="del(item.id)">删除button>div>
    50.             div>
    51.  
    52.           div>
    53.         div>
    54.         
    55.         <div class="bottom">
    56.           
    57.           <label class="check-all">
    58.             <input type="checkbox" v-model="isAll"/>
    59.             全选
    60.           label>
    61.           <div class="right-box">
    62.             
    63.             <span class="price-box">总价  :  ¥ <span class="price">{{allMoney}}span>span>
    64.             
    65.             <button class="pay">结算( {{allNum}} )button>
    66.           div>
    67.         div>
    68.       div>
    69.       
    70.       <div class="empty" v-else>🛒空空如也div>
    71.     div>
    72.     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
    73.     <script>
    74.       const defaultArr =  [
    75.             {
    76.               id: 1,
    77.               icon: "img/火龙果.png",
    78.               isChecked: true,
    79.               num: 2,
    80.               price: 6,
    81.             },
    82.             {
    83.               id: 2,
    84.               icon: 'img/荔枝.png',
    85.               isChecked: false,
    86.               num: 7,
    87.               price: 20,
    88.             },
    89.             {
    90.               id: 3,
    91.               icon: 'img/榴莲.png',
    92.               isChecked: false,
    93.               num: 3,
    94.               price: 40,
    95.             },
    96.             {
    97.               id: 4,
    98.               icon: 'img/鸭梨.png',
    99.               isChecked: true,
    100.               num: 10,
    101.               price: 3,
    102.             },
    103.             {
    104.               id: 5,
    105.               icon: 'img/樱桃.png',
    106.               isChecked: false,
    107.               num: 20,
    108.               price: 34,
    109.             },
    110.           ]
    111.       const app = new Vue({
    112.         el: '#app',
    113.         data: {
    114.           // 水果列表
    115.           fruitList:JSON.parse(localStorage.getItem('list'))||defaultArr
    116.         },
    117.  
    118.         methods: {
    119.         del (id){
    120.           this.fruitList = this.fruitList.filter(item =>item.id!=id)
    121.         },
    122.         add(id){
    123.           const fruit = this.fruitList.find(item => item.id == id)
    124.           fruit.num += 1
    125.         }
    126.       },
    127.  
    128.       computed:{
    129.         isAll:{
    130.           get(){
    131.             return this.fruitList.every(item => item.isChecked)
    132.           },
    133.           set(value){
    134.             this.fruitList.forEach(item => {
    135.               item.isChecked = value
    136.             });
    137.           }
    138.         },
    139.         allMoney(){
    140.             return this.fruitList.reduce((sum,item) => {
    141.               if(item.isChecked){
    142.                 return sum+item.num*item.price
    143.               }
    144.               else{
    145.                 return sum
    146.               }
    147.             },0)
    148.         },
    149.         allNum(){
    150.           return this.fruitList.reduce((sum,item) => {
    151.             if(item.isChecked){
    152.               return sum+item.num
    153.             }
    154.             else{
    155.               return sum
    156.             }
    157.           },0)
    158.         }       
    159.     },
    160.  
    161.     watch:{
    162.       fruitList:{
    163.         deep:true,
    164.         handler(newValue){
    165.           localStorage.setItem('list',JSON.stringify(newValue))
    166.         }
    167.       }
    168.     }
    169.   })
    170.     script>
    171.   body>
    172. html>

    css

            index

    1. .app-container {
    2.   padding-bottom: 300px;
    3.   width: 800px;
    4.   margin: 0 auto;
    5. }
    6. @media screen and (max-width: 800px) {
    7.   .app-container {
    8.     width: 600px;
    9.   }
    10. }
    11. .app-container .banner-box {
    12.   border-radius: 20px;
    13.   overflow: hidden;
    14.   margin-bottom: 10px;
    15. }
    16. .app-container .banner-box img {
    17.   width: 100%;
    18. }
    19. .app-container .nav-box {
    20.   background: #ddedec;
    21.   height: 60px;
    22.   border-radius: 10px;
    23.   padding-left: 20px;
    24.   display: flex;
    25.   align-items: center;
    26. }
    27. .app-container .nav-box .my-nav {
    28.   display: inline-block;
    29.   background: #5fca71;
    30.   border-radius: 5px;
    31.   width: 90px;
    32.   height: 35px;
    33.   color: white;
    34.   text-align: center;
    35.   line-height: 35px;
    36.   margin-right: 10px;
    37. }
    38.  
    39. .breadcrumb {
    40.   font-size: 16px;
    41.   color: gray;
    42. }
    43. .table {
    44.   width: 100%;
    45.   text-align: left;
    46.   border-radius: 2px 2px 0 0;
    47.   border-collapse: separate;
    48.   border-spacing: 0;
    49. }
    50. .th {
    51.   color: rgba(0, 0, 0, 0.85);
    52.   font-weight: 500;
    53.   text-align: left;
    54.   background: #fafafa;
    55.   border-bottom: 1px solid #f0f0f0;
    56.   transition: background 0.3s ease;
    57. }
    58. .th.num-th {
    59.   flex: 1.5;
    60. }
    61. .th {
    62.   text-align: center;
    63. }
    64. .th:nth-child(4),
    65. .th:nth-child(5),
    66. .th:nth-child(6),
    67. .th:nth-child(7) {
    68.   text-align: center;
    69. }
    70. .th.th-pic {
    71.   flex: 1.3;
    72. }
    73. .th:nth-child(6) {
    74.   flex: 1.3;
    75. }
    76.  
    77. .th,
    78. .td {
    79.   position: relative;
    80.   padding: 16px 16px;
    81.   overflow-wrap: break-word;
    82.   flex: 1;
    83. }
    84. .pick-td {
    85.   font-size: 14px;
    86. }
    87. .main,
    88. .empty {
    89.   border: 1px solid #f0f0f0;
    90.   margin-top: 10px;
    91. }
    92. .tr {
    93.   display: flex;
    94.   cursor: pointer;
    95.   border-bottom: 1px solid #ebeef5;
    96. }
    97. .tr.active {
    98.   background-color: #f5f7fa;
    99. }
    100. .td {
    101.   display: flex;
    102.   justify-content: center;
    103.   align-items: center;
    104. }
    105.  
    106. .table img {
    107.   width: 100px;
    108.   height: 100px;
    109. }
    110.  
    111. button {
    112.   outline: 0;
    113.   box-shadow: none;
    114.   color: #fff;
    115.   background: #d9363e;
    116.   border-color: #d9363e;
    117.   color: #fff;
    118.   background: #d9363e;
    119.   border-color: #d9363e;
    120.   line-height: 1.5715;
    121.   position: relative;
    122.   display: inline-block;
    123.   font-weight: 400;
    124.   white-space: nowrap;
    125.   text-align: center;
    126.   background-image: none;
    127.   border: 1px solid transparent;
    128.   box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
    129.   cursor: pointer;
    130.   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    131.   -webkit-user-select: none;
    132.   -moz-user-select: none;
    133.   -ms-user-select: none;
    134.   user-select: none;
    135.   touch-action: manipulation;
    136.   height: 32px;
    137.   padding: 4px 15px;
    138.   font-size: 14px;
    139.   border-radius: 2px;
    140. }
    141. button.pay {
    142.   background-color: #3f85ed;
    143.   margin-left: 20px;
    144. }
    145.  
    146. .bottom {
    147.   height: 60px;
    148.   display: flex;
    149.   align-items: center;
    150.   justify-content: space-between;
    151.   padding-right: 20px;
    152.   border: 1px solid #f0f0f0;
    153.   border-top: none;
    154.   padding-left: 20px;
    155. }
    156. .right-box {
    157.   display: flex;
    158.   align-items: center;
    159. }
    160. .check-all {
    161.   cursor: pointer;
    162. }
    163. .price {
    164.   color: hotpink;
    165.   font-size: 30px;
    166.   font-weight: 700;
    167. }
    168. .price-box {
    169.   display: flex;
    170.   align-items: center;
    171. }
    172. .empty {
    173.   padding: 20px;
    174.   text-align: center;
    175.   font-size: 30px;
    176.   color: #909399;
    177. }
    178. .my-input-number {
    179.   display: flex;
    180. }
    181. .my-input-number button {
    182.   height: 40px;
    183.   color: #333;
    184.   border: 1px solid #dcdfe6;
    185.   background-color: #f5f7fa;
    186. }
    187. .my-input-number button:disabled {
    188.   cursor: not-allowed!important;
    189. }
    190. .my-input-number .my-input__inner {
    191.   height: 40px;
    192.   width: 50px;
    193.   padding: 0;
    194.   border: none;
    195.   border-top: 1px solid #dcdfe6;
    196.   border-bottom: 1px solid #dcdfe6;
    197. }

            inputnumber

    1. .my-input-number {
    2.   position: relative;
    3.   display: inline-block;
    4.   width: 140px;
    5.   line-height: 38px;
    6. }
    7. .my-input-number span {
    8.   -moz-user-select: none;
    9.   -webkit-user-select: none;
    10.   -ms-user-select: none;
    11. }
    12. .my-input-number .my-input {
    13.   display: block;
    14.   position: relative;
    15.   font-size: 14px;
    16.   width: 100%;
    17. }
    18. .my-input-number .my-input__inner {
    19.   -webkit-appearance: none;
    20.   background-color: #fff;
    21.   background-image: none;
    22.   border-radius: 4px;
    23.   border: 1px solid #dcdfe6;
    24.   box-sizing: border-box;
    25.   color: #606266;
    26.   display: inline-block;
    27.   font-size: inherit;
    28.   height: 40px;
    29.   line-height: 40px;
    30.   outline: none;
    31.   padding: 0 15px;
    32.   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    33.   width: 100%;
    34.   padding-left: 50px;
    35.   padding-right: 50px;
    36.   text-align: center;
    37. }
    38. .my-input-number .my-input-number__decrease,
    39. .my-input-number .my-input-number__increase {
    40.   position: absolute;
    41.   z-index: 1;
    42.   top: 1px;
    43.   width: 40px;
    44.   height: auto;
    45.   text-align: center;
    46.   background: #f5f7fa;
    47.   color: #606266;
    48.   cursor: pointer;
    49.   font-size: 13px;
    50. }
    51. .my-input-number .my-input-number__decrease {
    52.   left: 1px;
    53.   border-radius: 4px 0 0 4px;
    54.   border-right: 1px solid #dcdfe6;
    55. }
    56. .my-input-number .my-input-number__increase {
    57.   right: 1px;
    58.   border-radius: 0 4px 4px 0;
    59.   border-left: 1px solid #dcdfe6;
    60. }
    61. .my-input-number .my-input-number__decrease.is-disabled,
    62. .my-input-number .my-input-number__increase.is-disabled {
    63.   color: #c0c4cc;
    64.   cursor: not-allowed;
    65. }

     图片

    效果图：

  • 相关阅读:
    App买量越来越难，三大增长机遇不容错过
    java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory 异常错误
    DB2查看索引是否生效
    雷达频带概述及其应用
    windows redis 自启动 Redis服务无法启动报错1067问题
    性能的极致,Rust的加持,Zed-Dev编辑器快速搭建Python3.10开发环境
    Win11鼠标动不了 键盘怎么代替鼠标操作
    【Rust日报】2023-09-07 Tauri 2.0 路线图
    高压放大器在复合视觉的深度测量技术中的应用
    如何防止订单重复支付
  • 原文地址：https://blog.csdn.net/qq_64628470/article/details/133922289