166 lines
6.4 KiB
Vue
166 lines
6.4 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<common-header></common-header>
|
|
<category-bar></category-bar>
|
|
<view class="w-1200 m-a">
|
|
<view class="mt-20 bg-white rounded p-20">
|
|
<view class="flex justify-between pb-20 border-bottom">
|
|
<text class="font-bold text-40">
|
|
购物车(全部{{ list.length }})
|
|
</text>
|
|
<view class="flex justify-end items-center">
|
|
<text>已选商品(不含运费)</text>
|
|
<text class="text-main text-40 font-bold mx-20">￥{{ amount }}</text>
|
|
<el-button type="primary" round>结算</el-button>
|
|
</view>
|
|
</view>
|
|
<view class="py-20">
|
|
<el-row :gutter="10">
|
|
<el-col :span="3">
|
|
<el-checkbox v-model="selectedAll" @change="doSelectAll">
|
|
<view class="text-35 font-bold">全选</view>
|
|
</el-checkbox>
|
|
</el-col>
|
|
<el-col :span="9">
|
|
<text class="text-35 font-bold w-">商品信息</text>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<text class="text-35 font-bold flex-1">单价</text>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<text class="text-35 font-bold flex-1">数量</text>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<text class="text-35 font-bold flex-1">金额</text>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<text class="text-35 font-bold flex-1">操作</text>
|
|
</el-col>
|
|
</el-row>
|
|
</view>
|
|
<view class="p-20 mb-20" v-for="(item, index) in list" :key="index"
|
|
:class="[item.checked ? 'active' :'']">
|
|
<el-row :gutter="10">
|
|
<el-col :span="12">
|
|
<view class="flex justify-start items-start">
|
|
<el-checkbox v-model="list[index].checked" @change="changeCheck($event, item._id)">
|
|
</el-checkbox>
|
|
<el-image :src="item.goods.cover" class="cover ml-20" fit="fit"/>
|
|
<view class="flex flex-col justify-start items-start ml-20">
|
|
{{ item.goods.name }}
|
|
</view>
|
|
</view>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<text class="text-35 font-bold flex-1">￥{{ item.goods.amount }}</text>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<text class="text-35 font-bold flex-1">
|
|
<el-input-number v-model="list[index].num" @change="changeNum" :min="1" size="small"/>
|
|
</text>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<text class="text-35 font-bold flex-1 text-main">￥{{
|
|
parseFloat(item.goods.amount) * item.num
|
|
}}
|
|
</text>
|
|
</el-col>
|
|
<el-col :span="3">
|
|
<el-button type="info" @click.native="remove(index)">移出购物车</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</view>
|
|
<view class="mt-20 flex justify-between items-center">
|
|
<el-button type="text">移出购物车</el-button>
|
|
<view class="flex justify-end items-center">
|
|
<view>
|
|
<text>已选商品</text>
|
|
<text class="mx-15 font-bold text-35 text-main">{{ selectedList.length }}</text>
|
|
<text>件</text>
|
|
</view>
|
|
<text class="ml-35">合计(不含运费):</text>
|
|
<text class="mx-15 font-bold text-40 text-main">￥{{ amount }}</text>
|
|
<el-button type="primary" round :disabled="selectedList.length === 0">结算</el-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<gap height="50"/>
|
|
<common-footer></common-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "cart",
|
|
data() {
|
|
return {
|
|
list: [],
|
|
selectedList: [],
|
|
selectedAll: false,
|
|
}
|
|
},
|
|
methods: {
|
|
async getList() {
|
|
const {rows} = await vk.callFunction({
|
|
url: "client/cart/kh/getList"
|
|
})
|
|
this.list = rows.map(item => {
|
|
item.checked = false
|
|
return item
|
|
})
|
|
},
|
|
doSelectAll() {
|
|
this.list.forEach((item, index) => {
|
|
this.list[index].checked = this.selectedAll
|
|
})
|
|
},
|
|
changeNum(e) {
|
|
console.log(e)
|
|
},
|
|
changeCheck(e, 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) {
|
|
this.list.splice(index, 1)
|
|
vk.callFunction({
|
|
url: "client/cart/kh/delete",
|
|
data: {
|
|
ids: [this.list[index]._id]
|
|
}
|
|
})
|
|
}
|
|
|
|
},
|
|
onShow() {
|
|
this.getList()
|
|
},
|
|
computed: {
|
|
amount() {
|
|
let tmpAmount = 0
|
|
this.list.forEach(item => {
|
|
console.log(item.checked)
|
|
if (item.checked) tmpAmount += parseFloat(item.goods.amount) * parseInt(item.num)
|
|
})
|
|
return tmpAmount
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.cover {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.active {
|
|
border: 1px solid #C23436;
|
|
border-radius: 10px;
|
|
background-color: #FFF9F6;
|
|
}
|
|
</style> |