uni-app购物车功能
2021-01-16 本文已影响0人
吃肉肉不吃肉肉
实现效果：
image.png
实现功能：
商品数量的增加与减少，多选与全选，商品删除，总价的计算，数量的计算
实现代码：
<template>
<view class="">
<view class="notGoods" v-if="show == false">
<image src="../../static/not.png" mode="widthFix" style="width: 400rpx;"></image>
<view class="notGoods-text">
购物车暂无商品
</view>
<view class="notGoods-button" @click="placeOrder">
去下单
</view>
</view>
<view v-if="show == true">
<!-- <view class="goods" v-for="(item,index) in goods" :key="index"> -->
<!-- <view class="goods-top">
<view class="name">
{{item.name}}
</view>
<image src="../../static/del.png" mode="widthFix" style="width: 30rpx;" @click="delht"></image>
</view> -->
<view class="goods-detail" v-for="(item,index) in size" :key="index">
<view class="detail-left">
<view class="left">
<checkbox-group @change="selected(item)">
<checkbox class="xuanzhong" color="#E36452" :checked="checked" />
</checkbox-group>
<image :src="item.goodsImage" mode="widthFix" style="width: 150rpx;"></image>
</view>
<view class="size">
<text style="font-size: 25rpx;">尺码：{{item.size}}</text>
<text class="goods-price">￥{{item.price}}/件</text>
</view>
</view>
<view class="right">
<!-- <ypNumberBox :min="0" :max="9"@change="change" :value="size.num" style="width: 160rpx;height:50rpx;"></ypNumberBox> -->
<text class="subtract" @click="reduce(item)">-</text>
<text class="num">{{item.num}}</text>
<text @click="add(item)" class="add">+</text>
<image src="../../static/del.png" mode="widthFix" style="width: 35rpx;" @click="delht(item,index)"></image>
</view>
</view>
<!-- </view> -->
</view>
<view class="end">
<view class="end-left">
<checkbox-group @change="selectedall()">
<checkbox class="" :checked="allchecked" />全选
</checkbox-group>
<view>总计:<text style="color: #f00;font-weight: bold;">￥ {{totalPrice}}</text></view>
</view>
<view class="end-right">
结算({{totalNum}})
</view>
</view>
</view>
</template>
<script>
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
}
},
}
</script>
<style lang="scss">
.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;
}
}
</style>
