实现效果：

image.png

实现功能：

商品数量的增加与减少，多选与全选，商品删除，总价的计算，数量的计算

实现代码：

购物车暂无商品

去下单

尺码：{{item.size}}

￥{{item.price}}/件

-

{{item.num}}

+

全选

总计:￥ {{totalPrice}}

结算({{totalNum}})

import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"

import wybPopup from '@/components/wyb-popup/wyb-popup.vue'

import ypNumberBox from "@/components/yp-number-box/yp-number-box.vue"

export default{

components: { wybPopup,ypNumberBox,uniNumberBox},

data(){

return{

show:true,

allchecked:true,

checked:true,

size:[

{

size:"女款-XXL",

num:2,

flag:true,

price:149,

goodsImage:"https://img.alicdn.com/imgextra/i1/33174842/O1CN0141Hygt1ldgNvqvmeW_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",

},

{

size:"女款-XL",

num:1,

flag:true,

price:149,

goodsImage:"https://img.alicdn.com/imgextra/i1/33174842/O1CN0141Hygt1ldgNvqvmeW_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",

},],

}

},

methods:{

placeOrder(){

uni.navigateTo({

url:'../order/index'

})

},

delht(item,index){

// this.size.splice(index, 1)

uni.showModal({

content:'是否删除此商品',

success:(res)=>{

if(res.confirm) {

console.log('确定');

this.size.splice(index,1)

if(this.size.length ==0){

this.show = false

}

}else if(res.cancel){

console.log('取消')

}

}

})

},

change(e){

console.log(e)

},

selected(item){

item.flag = !item.flag

if (!item.flag) {

this.allchecked = false

} else {

const test =this.size.every(item => {

return item.flag === true

})

if (test) {

this.allchecked = true

} else {

this.allchecked = false

}

}

// this.checked=!this.checked

// this.totalNum()

},

selectedall(){

this.allchecked = !this.allchecked

if (this.allchecked) {

this.size.map(item => {

this.checked = true

item.flag = true

})

} else {

this.checked = false

this.size.map(item => {

item.flag = false

})

}

},

reduce(item){

let num =item.num

// item.num = num-1

// if(num <=0){

// return;

// }

if(num>0){

num-=1

}else{

num=0

return

}

item.num =num

},

add(item){

console.log(item.num)

let num =item.num

item.num=num+1

}

},

computed: {

//计算选中商品的总价

totalNum() {

let totalNum = 0;

this.size.map(item => {

item.flag ? totalNum += item.num : totalNum += 0

})

return totalNum

},

totalPrice() {

let totalPrice = 0;

this.size.map(item => {

item.flag ? totalPrice += item.num * item.price : totalPrice += 0

})

return totalPrice

}

},

}

.goods{

line-height: 80rpx;

background-color: #fff;

&-top{

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 30rpx;

border-bottom: 8rpx solid #F1F1F1;

.name{

color: #333;

font-size: 31rpx;

font-weight: bold;

}

}

&-detail{

display: flex;

padding: 30rpx 15rpx 30rpx 30rpx;

background-color: #fff;

justify-content: space-between;

border-bottom: 5rpx solid #F1F1F1;

align-items: center;

.detail-left{

display: flex;

.left{

display: flex;

align-items: center;

}

}

.size{

display: flex;

justify-content: space-around;

flex-direction: column;

margin-left: 30rpx;

.goods-price{

font-size: 25rpx;

color: #F44545;

}

}

.right{

text{

width: 50rpx;

line-height: 50rpx;

text-align: center;

display: inline-block;

background-color: #F7F7F7;

margin-right: 10rpx;

}

.add {

color: #FA4305;

border-radius: 10rpx 30rpx 30rpx 10rpx;

margin-right: 20rpx;

}

.subtract{

border-radius: 30rpx 10rpx 10rpx 30rpx;

}

}

}

}

.notGoods{

position: relative;

top: 220rpx;

text-align: center;

display: flex;

align-items: center;

flex-direction: column;

// line-height: 1334rpx;

&-text{

color: #808080;

margin-bottom: 50rpx;

}

&-button{

width: 260rpx;

height: 70rpx;

color:#F44545;

border: 1rpx solid #F44545;

text-align: center;

line-height: 70rpx;

border-radius: 48rpx;

}

}

.end{

width: 100%;

height: 90rpx;

background-color:#fff;

position: fixed;

bottom: 100rpx;

left: 0;

display: flex;

align-items: center;

&-left{

width: 70%;

display: flex;

justify-content: space-between;

padding: 0 30rpx;

.end-flex{

display: flex;

align-items: center;

}

}

&-right{

width: 30%;

line-height: 90rpx;

background-color: #F44545;

text-align: center;

color: #fff;

}

}