vue 购物车逻辑

最新推荐文章于 2023-05-14 19:30:30 发布

InfinitePossibility

最新推荐文章于 2023-05-14 19:30:30 发布

阅读量255

点赞数

文章标签： javascript html5 前端 vue.js css3

本文链接：https://blog.csdn.net/qq_45870982/article/details/119494137

版权

这是一个关于Vue.js实现的购物车组件代码示例。组件包括输入框、复选框、加减按钮以及总价和数量的计算。通过v-for遍历商品列表，实现了商品的选择、数量增减以及总价和总数量的实时更新。同时，提供了全选和全不选的功能。

摘要由CSDN通过智能技术生成

           </view>
           <text style="margin-left: 20rpx;">{{item.name}}</text>
           <view class="" style="margin-left: 20rpx;display: flex; align-items: center;">
               <button type="default" @click="KE(index)" :disabled="item.value <= 0">-</button>
               <text>{{item.value}}</text>
               <button @click="addNum(index)">+</button>
           </view>
           <view class="" style="margin-left: 20rpx ;">
               <text>{{item.prise | prisf(1) }}</text>
           </view>
           <view class="" style="margin-left: 20rpx ;">
               <text>{{item.value*item.prise | prisf(2) }}</text>
           </view>
       </view>
       <view class="" style="display: flex;">
           <view class="onc" style="margin-left: 40rpx;margin-top: 10rpx" @click="isPro(isSelectAll)"
               :class="{'check':isSelectAll}">

           </view>
           <text style="margin-left: 20rpx;">全选</text>
       </view>

       <view class="" style="margin-left:35rpx;margin-top: 10rpx">
           <text>总数量{{total}}件</text>
       </view>
       <view class="" style="margin-left:35rpx; margin-top: 10rpx">
           <text>总价格{{toprise | prisf(2)}}</text>
       </view>

<view class="" style="margin-left:35rpx; margin-top: 10rpx ;display: flex;">
           
           <text>选中的{{ sumc | prisf(2)}}</text>
           
           <text style="margin-left: 20px;">选中{{conut}}件商品</text>
       </view>

</view>
</template>

                   },
                   {
                       id: 2,
                       name: "粒子",
                       prise: 10.11,
                       value: 1,
                       sum: '',

                   },
                   {
                       id: 3,
                       name: "栗子",
                       prise: 15.09,
                       value: 1,
                       sum: '',

                   },
               ],
           }
       },

       // 过滤器
       filters: {
           // 局部
           prisf(data, n) {
               // 添加人民币符号以及2位小数点
               return '￥' + data.toFixed(n)
           }
       },

mounted() {

           // 初始化选中
           this.items.forEach((item) => {
               // 让每一个item都增加一个属性为select 并且为 true
               // $set item为设置的每一项 ,'select'为增加的属性，true为增加的值,
               this.$set(item, 'select', true)
           })

this.sum();
},

// vue计算属性
computed: {

           isSelectAll() {
               // 对items列表里面的select做判断，若全为真返回1，若有一项为假返回0
               return this.items.every(function(val) {
                   return val.select
               })
           },

           getTotal() {
               console.log(123);
               // 筛选被选中的商品
               var _product = this.items.filter(function(val) {
                       return
                       val.select
                   }),
                   totalPrice = 0,
                   totalNum = 0
               _product.forEach((item) => {
                   console.log(item);
                   totalNum += item.value
                   totalPrice += item.value * item.prise
               })
               return {
                   totalNum,
                   totalPrice
               }

           },
           // 计算总数量
           total() {
               // var n = 0;
               // this.items.forEach(function(item){
               //    n+=item.value
               // });
               // return n;

               // reduce 累加器
               // total 计算结束后的返回值，cur 为当前值，为初始化
               return this.items.reduce((total, cur) => total + cur.value, 0);
           },

           toprise() {
               // 总价格为数量乘以价格，cur.value*cur.prise
               return this.items.reduce((total, cur) => total + cur.value * cur.prise, 0);
           },

           search() {
               // 模糊查询
               // includes 判断里面指定的值是否为真，有返回为真，无返回0
               return this.items.filter(item => item.name.includes(this.input));
           },

checkIN() {

}

onLoad() {},

methods: {

           sum: function() {
               var sum = 0;
               var conut = 0;
               this.items.forEach((item, index) => { //3
                   // console.log(item);
                   if (item.select) {
                       conut += item.value;
                       sum += item.prise * item.value;
                   }
               })
               this.sumc = sum;
               this.conut = conut;
           },

           select: function(item, index) {
               item.select = !item.select;
               this.sum(index);
           },

           // 全选操作
           isPro(isSelectAll) {
               this.items.forEach((item) => {
                   item.select = !isSelectAll
               })
               this.sum();
           },

           KE(index) {
               this.items[index].value--;
               this.sum();
           },

           addNum(index) {
               this.items[index].value++;
               this.sum();
           },

}
}
</script>

   .check {
       background-color: #007AFF;
   }

   .inP {
       width: 90%;
       margin-left: 50%;
       transform: translateX(-50%);
       padding: 20rpx;
       display: flex;
       align-items: center;
   }
</style>