324 lines
8.5 KiB
Vue
324 lines
8.5 KiB
Vue
<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>
|