20261008
This commit is contained in:
@@ -0,0 +1,323 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<u-sticky offset-top="0" customNavHeight="0">
|
||||
<uititle title="购物车"></uititle>
|
||||
</u-sticky>
|
||||
<view class="cart-box">
|
||||
<view class="item flex" v-for="(item,index) in list" :key="index">
|
||||
<view class="check-box">
|
||||
<view class="check" :class="{ on: selectedList.includes(item._id) }"
|
||||
@click="changeCheck(item._id)"></view>
|
||||
</view>
|
||||
<view class="img">
|
||||
<image :src="item.goods.cover" mode=""></image>
|
||||
</view>
|
||||
<view class="info flex-1">
|
||||
<view class="name ellipsis">{{ item.goods.name }}</view>
|
||||
<view class="spc ellipsis">{{ item.sku.label }}</view>
|
||||
<view class="price ellipsis">{{ item.sku.values }}元</view>
|
||||
<view class="other">
|
||||
<view class="subtract" @click="sub(item,index)">-</view>
|
||||
<view class="num">{{ item.num }}</view>
|
||||
<view class="increase" @click="add(item,index)">+</view>
|
||||
</view>
|
||||
<view class="delete">
|
||||
<image src="/static/image/delete.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fixed flex justify-start items-center">
|
||||
<view class="p-20" v-if="selectedList.length > 0">
|
||||
<u-button type="primary" plain size="mini" @click="removeMulti">移出购物车</u-button>
|
||||
</view>
|
||||
<view class="total flex-1">合计：¥{{ amount }}</view>
|
||||
<view class="btn" @click="addFromCart">立即结算</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uititle from "@/components/common/title.vue";
|
||||
|
||||
export default {
|
||||
components: {uititle},
|
||||
data() {
|
||||
return {
|
||||
totalPrice: 0,
|
||||
list: [],
|
||||
selectedList: [],
|
||||
selectedAll: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selected(item, index) {
|
||||
if (item.check == 0) {
|
||||
this.cartList[index].check = 1
|
||||
this.selectedList.push(item)
|
||||
this.getTotalPrice()
|
||||
} else {
|
||||
this.cartList[index].check = 0
|
||||
this.selectedList = this.selectedList.filter(val => val.id != this.cartList[index].id)
|
||||
console.log(this.selectedList)
|
||||
this.getTotalPrice()
|
||||
}
|
||||
},
|
||||
// 减少数量(执行接口)
|
||||
sub(item, index) {
|
||||
if (this.list[index].num <= 1) {
|
||||
return;
|
||||
}
|
||||
this.list[index].num--;
|
||||
this.getTotalPrice()
|
||||
this.changeNum(index)
|
||||
},
|
||||
// 增加数量(执行接口)
|
||||
add(item, index) {
|
||||
this.list[index].num++;
|
||||
this.getTotalPrice()
|
||||
this.changeNum(index)
|
||||
},
|
||||
getTotalPrice() {
|
||||
this.totalPrice = 0
|
||||
if (this.selectedList.length > 0) {
|
||||
this.selectedList.forEach(val => {
|
||||
this.totalPrice += (Math.floor(val.num * 100) * Math.floor(val.price * 100)) / 10000
|
||||
})
|
||||
} else {
|
||||
this.totalPrice = 0
|
||||
}
|
||||
},
|
||||
async getList() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: "client/cart/kh/getList"
|
||||
})
|
||||
this.selectedAll = false
|
||||
this.list = rows.map(item => {
|
||||
item.checked = false
|
||||
return item
|
||||
})
|
||||
},
|
||||
doSelectAll() {
|
||||
this.selectedList = []
|
||||
this.list.forEach((item, index) => {
|
||||
this.list[index].checked = this.selectedAll
|
||||
if (this.selectedAll) this.selectedList.push(item._id)
|
||||
})
|
||||
},
|
||||
changeNum(index) {
|
||||
vk.callFunction({
|
||||
url: "client/cart/kh/changeNum",
|
||||
data: {
|
||||
id: this.list[index]._id,
|
||||
num: this.list[index].num
|
||||
}
|
||||
})
|
||||
},
|
||||
changeCheck(id) {
|
||||
const index = this.selectedList.indexOf(id)
|
||||
if (index === -1) this.selectedList.push(id)
|
||||
else this.selectedList.splice(index, 1)
|
||||
this.selectedAll = this.selectedList.length === this.list.length
|
||||
},
|
||||
remove(index) {
|
||||
vk.callFunction({
|
||||
url: "client/cart/kh/delete",
|
||||
data: {
|
||||
ids: [this.list[index]._id]
|
||||
}
|
||||
})
|
||||
this.list.splice(index, 1)
|
||||
},
|
||||
async removeMulti() {
|
||||
if (this.selectedList.length === 0) return
|
||||
await vk.callFunction({
|
||||
url: "client/cart/kh/delete",
|
||||
data: {
|
||||
ids: this.selectedList
|
||||
}
|
||||
})
|
||||
this.selectedList = []
|
||||
await this.getList()
|
||||
},
|
||||
async addFromCart() {
|
||||
const {data} = await vk.callFunction({
|
||||
url: "client/order/kh/addFromList",
|
||||
data: {
|
||||
type: 0,
|
||||
ids: this.selectedList
|
||||
}
|
||||
})
|
||||
this.selectedAll = false
|
||||
vk.navigateTo({
|
||||
url: `/pages/shop/pay?id=${data}`
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.getList()
|
||||
},
|
||||
computed: {
|
||||
amount() {
|
||||
let tmpAmount = 0
|
||||
this.list.forEach(item => {
|
||||
if (this.selectedList.includes(item._id)) tmpAmount += parseFloat(item.sku.values) * parseInt(item.num)
|
||||
})
|
||||
return tmpAmount
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
padding-bottom: 110rpx;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.btn {
|
||||
width: 300rpx;
|
||||
background-color: #fb080e;
|
||||
font-size: 30rpx;
|
||||
line-height: 100rpx;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.total {
|
||||
padding-left: 20rpx;
|
||||
font-size: 28rpx;
|
||||
color: #222;
|
||||
line-height: 100rpx;
|
||||
|
||||
text {
|
||||
color: #fb080e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 25rpx;
|
||||
padding: 10rpx 20rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.check-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.check {
|
||||
width: 45rpx;
|
||||
height: 45rpx;
|
||||
border: 1px solid #C0C0C0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.on {
|
||||
border-color: #04c2ae;
|
||||
background-color: #04c2ae;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
margin-left: 30rpx;
|
||||
margin-right: 30rpx;
|
||||
width: 166rpx;
|
||||
height: 166rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
position: relative;
|
||||
|
||||
.delete {
|
||||
position: absolute;
|
||||
bottom: 30rpx;
|
||||
right: 40rpx;
|
||||
z-index: 9;
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
|
||||
image {
|
||||
width: 34rpx;
|
||||
height: 34rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
//height: 46rpx;
|
||||
font-size: 28rpx;
|
||||
color: #000;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
|
||||
.spc {
|
||||
width: 100%;
|
||||
height: 32rpx;
|
||||
font-size: 24rpx;
|
||||
color: #555;
|
||||
line-height: 32rpx;
|
||||
}
|
||||
|
||||
.price {
|
||||
// margin-top: 10rpx;
|
||||
width: 100%;
|
||||
height: 50rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 50rpx;
|
||||
color: #e88a00;
|
||||
}
|
||||
|
||||
.other {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.increase, .subtract {
|
||||
width: 42rpx;
|
||||
height: 42rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
text-align: center;
|
||||
color: #FFFFFF;
|
||||
background-color: #04c2ae;
|
||||
}
|
||||
|
||||
.num {
|
||||
padding: 0 10rpx;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #04c2ae;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user