479 lines
17 KiB
Vue
479 lines
17 KiB
Vue
<template>
|
||
<div class="shop-cart">
|
||
<div class="cart-list">
|
||
<div v-show="!isDataNull">
|
||
<div class="cart-hd flex bg-white">
|
||
<div class="check-box">
|
||
<!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
|
||
<el-checkbox
|
||
v-model="isSelectedAll"
|
||
@change="onBoxClick($event, 3, '')"
|
||
>全选</el-checkbox
|
||
>
|
||
</div>
|
||
<div class="info flex row-center">商品信息</div>
|
||
<div class="price flex row-center">单价</div>
|
||
<div class="num flex row-center">数量</div>
|
||
<div class="money flex row-center">合计</div>
|
||
<div class="operate flex row-center">操作</div>
|
||
</div>
|
||
|
||
<div class="cart-con bg-white">
|
||
<div
|
||
class="m-b-10 bg-white"
|
||
v-for="(item, index) in shopCartList"
|
||
:key="index"
|
||
>
|
||
<div class="flex shop">
|
||
<!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
|
||
<el-checkbox
|
||
:value="item.is_selected == 1"
|
||
@change="onBoxClick($event, 1, index)"
|
||
>
|
||
</el-checkbox>
|
||
|
||
<div class="xs normal m-l-10">
|
||
{{ item.shop.shop_name }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="item flex"
|
||
v-for="(item2, index2) in item.cart"
|
||
:key="index2"
|
||
>
|
||
<div class="check-box">
|
||
<!-- 更改选中状态 type为1选中店铺/2选中商品/3全选 -->
|
||
<el-checkbox
|
||
:value="item2.selected == 1"
|
||
@change="
|
||
onBoxClick($event, 2, item2.cart_id)
|
||
"
|
||
>
|
||
</el-checkbox>
|
||
</div>
|
||
<nuxt-link
|
||
class="info flex"
|
||
:to="'/goods_details/' + item2.goods_id"
|
||
>
|
||
<div class="pictrue flexnone">
|
||
<img :src="item2.image" alt="" />
|
||
</div>
|
||
<div>
|
||
<div class="name line2">
|
||
{{ item2.goods_name }}
|
||
</div>
|
||
<div class="muted">
|
||
{{ item2.spec_value_str }}
|
||
</div>
|
||
</div>
|
||
</nuxt-link>
|
||
<div class="price flex row-center">
|
||
¥{{ item2.price }}
|
||
</div>
|
||
<div class="num flex row-center">
|
||
<number-box
|
||
:min="1"
|
||
v-model="item2.goods_num"
|
||
@change="
|
||
changeShopCartCount(
|
||
$event,
|
||
item2.cart_id
|
||
)
|
||
"
|
||
async-change
|
||
/>
|
||
</div>
|
||
<div class="money flex row-center">
|
||
¥{{ item2.sub_price }}
|
||
</div>
|
||
<el-popconfirm
|
||
title="确定删除该商品吗？"
|
||
confirm-button-text="确定"
|
||
cancel-button-text="取消"
|
||
icon="el-icon-info"
|
||
icon-color="red"
|
||
@confirm="goodsDelete(item2.cart_id)"
|
||
>
|
||
<div
|
||
class="operate flex row-center delete-btn"
|
||
slot="reference"
|
||
>
|
||
<img
|
||
src="~/static/images/icon_cart_del.png"
|
||
/>
|
||
</div>
|
||
</el-popconfirm>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cart-footer flex row-between bg-white">
|
||
<div class="lighter flex">
|
||
<div class="check-box">
|
||
<el-checkbox
|
||
v-model="isSelectedAll"
|
||
@change="onBoxClick($event, 3, '')"
|
||
>全选</el-checkbox
|
||
>
|
||
</div>
|
||
<div style="margin: 0 24px"></div>
|
||
<el-popconfirm
|
||
title="确定删除选中商品吗？"
|
||
confirm-button-text="确定"
|
||
cancel-button-text="取消"
|
||
icon="el-icon-info"
|
||
icon-color="red"
|
||
@confirm="deleteSelectedGoods"
|
||
>
|
||
<div
|
||
class="xs normal"
|
||
style="cursor: pointer"
|
||
slot="reference"
|
||
>
|
||
删除选中商品
|
||
</div>
|
||
</el-popconfirm>
|
||
<el-popconfirm
|
||
title="确定清空吗？"
|
||
confirm-button-text="确定"
|
||
cancel-button-text="取消"
|
||
icon="el-icon-info"
|
||
icon-color="red"
|
||
@confirm="deleteAlldGoods"
|
||
>
|
||
<div
|
||
class="m-l-14 xs muted"
|
||
style="cursor: pointer"
|
||
slot="reference"
|
||
>
|
||
清空购物车
|
||
</div>
|
||
</el-popconfirm>
|
||
</div>
|
||
<div class="total flex">
|
||
<div class="flex m-r-14">
|
||
<div class="xs">已选{{ selected }}件商品</div>
|
||
<div class="primary m-l-20" style="font-size: 22px">
|
||
¥{{ totalAmount }}
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="white lg btn flex row-center"
|
||
:style="{
|
||
background:
|
||
selected == 0 ? '#A4ADB3' : '#FF2C3C',
|
||
}"
|
||
@click="toOrderBuy"
|
||
>
|
||
去结算
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="column-center data-null" v-show="isDataNull">
|
||
<img
|
||
src="@/static/images/cart_null.png"
|
||
style="width: 150px; height: 150px"
|
||
/>
|
||
<div class="muted xs m-t-10">购物车是空的～</div>
|
||
<div class="m-t-30">
|
||
<el-button
|
||
round
|
||
type="primary"
|
||
size="medium"
|
||
@click="toIndex"
|
||
>去逛逛～</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapActions } from 'vuex'
|
||
export default {
|
||
head() {
|
||
return {
|
||
title: this.$store.getters.headTitle,
|
||
link: [
|
||
{
|
||
rel: 'icon',
|
||
type: 'image/x-icon',
|
||
href: this.$store.getters.favicon,
|
||
},
|
||
],
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
shopCartList: [],
|
||
totalAmount: 0,
|
||
totalNum: 0,
|
||
isDataNull: false,
|
||
}
|
||
},
|
||
mounted() {},
|
||
computed: {
|
||
// 是否全选
|
||
isSelectedAll: {
|
||
get() {
|
||
if (!this.shopCartList.length) return false
|
||
if (this.allInvalid()) return false
|
||
let index = this.shopCartList.findIndex(
|
||
(item) => item.is_selected == 0
|
||
)
|
||
return index == -1 ? true : false
|
||
},
|
||
set(val) {
|
||
return val
|
||
},
|
||
},
|
||
// 已经选择的数量
|
||
selected: {
|
||
get() {
|
||
return this.shopCartList.reduce((pre, item) => {
|
||
return pre.concat(item.cart.filter((i) => i.selected == 1))
|
||
}, []).length
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
...mapActions(['getPublicData']),
|
||
async getCartList() {
|
||
let res = await this.$get('cart/lists')
|
||
if (res.code == 1) {
|
||
this.shopCartList = Object.assign([], res.data.lists)
|
||
this.totalAmount = res.data.total_amount
|
||
this.totalNum = res.data.total_num
|
||
|
||
if (this.shopCartList.length > 0) {
|
||
this.isDataNull = false
|
||
} else {
|
||
this.isDataNull = true
|
||
}
|
||
}
|
||
},
|
||
|
||
// 更改选中状态 type为1选中店铺/2选中商品/3全选
|
||
onBoxClick(e, type, number) {
|
||
let cartId = []
|
||
switch (type) {
|
||
case 1:
|
||
cartId = this.shopCartList[number].cart.map(
|
||
(item) => item.cart_id
|
||
)
|
||
break
|
||
case 2:
|
||
cartId.push(number)
|
||
break
|
||
case 3:
|
||
cartId = this.shopCartList.reduce((pre, item) => {
|
||
return pre.concat(item.cart.map((i) => i.cart_id))
|
||
}, cartId)
|
||
break
|
||
}
|
||
this.changeSelected(cartId, e)
|
||
},
|
||
cartInvalid(item) {
|
||
return item.goods_status == 0 || item.goods_del != 0 ? true : false
|
||
},
|
||
shopInvalid(item) {
|
||
return item.cart.every((citem) => this.cartInvalid(citem))
|
||
},
|
||
allInvalid() {
|
||
return this.shopCartList.every((item) => this.shopInvalid(item))
|
||
},
|
||
|
||
// 选中/取消选中购物车
|
||
async changeSelected(id, selected) {
|
||
let res = await this.$post('cart/selected', {
|
||
cart_id: id,
|
||
selected: selected,
|
||
})
|
||
if (res.code == 1) {
|
||
this.getCartList()
|
||
}
|
||
},
|
||
|
||
// 修改购物车商品数量
|
||
async changeShopCartCount(number, cartId) {
|
||
let res = await this.$post('cart/change', {
|
||
cart_id: cartId,
|
||
goods_num: number,
|
||
})
|
||
if (res.code == 1) {
|
||
this.getCartList()
|
||
this.getPublicData()
|
||
}
|
||
},
|
||
// 删除购物车商品
|
||
async goodsDelete(cartId) {
|
||
let res = await this.$post('cart/del', {
|
||
cart_id: cartId,
|
||
})
|
||
if (res.code == 1) {
|
||
this.getPublicData()
|
||
this.getCartList()
|
||
this.$message({
|
||
message: '删除商品成功',
|
||
type: 'success',
|
||
})
|
||
}
|
||
},
|
||
// 删除选中购物车
|
||
deleteSelectedGoods() {
|
||
let selectedGoodsArr = this.shopCartList.reduce((pre, item) => {
|
||
return pre.concat(item.cart.filter((i) => i.selected == 1))
|
||
}, [])
|
||
if (selectedGoodsArr.length <= 0) {
|
||
this.$message({
|
||
message: '没有选择商品',
|
||
type: 'error',
|
||
})
|
||
return
|
||
}
|
||
let cartIdArr = selectedGoodsArr.map((item) => item.cart_id)
|
||
this.goodsDelete(cartIdArr)
|
||
},
|
||
// 清空购物车
|
||
deleteAlldGoods() {
|
||
let allGoodsArr = this.shopCartList.reduce((pre, item) => {
|
||
return pre.concat(item.cart.filter((i) => i.cart_id))
|
||
}, [])
|
||
if (allGoodsArr.length <= 0) {
|
||
this.$message({
|
||
message: '没有商品',
|
||
type: 'error',
|
||
})
|
||
return
|
||
}
|
||
let cartIdArr = allGoodsArr.map((item) => item.cart_id)
|
||
this.goodsDelete(cartIdArr)
|
||
},
|
||
getSelectCart() {
|
||
const { shopCartList } = this
|
||
return shopCartList.reduce((pre, item) => {
|
||
return pre.concat(
|
||
item.cart
|
||
.filter((i) => i.selected && !this.cartInvalid(i))
|
||
.map((i) => i.cart_id)
|
||
)
|
||
}, [])
|
||
},
|
||
// 去购买商品
|
||
toOrderBuy() {
|
||
let { shopCartList } = this
|
||
let goods = []
|
||
let carts = this.getSelectCart()
|
||
if (carts.length == 0) return this.$message.err('您还没有选择商品哦')
|
||
// 处理出商品数组数据
|
||
shopCartList.forEach((item) => {
|
||
if (item.cart.length != 0) {
|
||
item.cart.forEach((el, i) => {
|
||
// 选中的商品才能进入
|
||
if (el.selected == 1) {
|
||
goods.push({
|
||
item_id: el.item_id,
|
||
num: el.goods_num,
|
||
goods_id: el.goods_id,
|
||
shop_id: item.shop.shop_id,
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
const params = {
|
||
carts: carts,
|
||
goods: goods,
|
||
type: 'cart',
|
||
}
|
||
this.$router.push({
|
||
path: '/confirm_order',
|
||
query: {
|
||
data: encodeURIComponent(JSON.stringify(params)),
|
||
},
|
||
})
|
||
},
|
||
toIndex() {
|
||
this.$router.push('/')
|
||
},
|
||
},
|
||
|
||
created() {
|
||
this.getCartList()
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.shop-cart {
|
||
padding: 24px 0;
|
||
.cart-list {
|
||
min-height: 600px;
|
||
.cart-hd {
|
||
height: 50px;
|
||
color: #101010;
|
||
padding: 10px 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
.cart-con {
|
||
padding: 0 10px;
|
||
.shop {
|
||
padding: 20px 10px;
|
||
border-bottom: 1px solid #d7d7d7;
|
||
}
|
||
.item {
|
||
padding: 20px 10px;
|
||
border-bottom: 1px dashed #e5e5e5;
|
||
}
|
||
.item:last-child {
|
||
border-bottom: 0;
|
||
}
|
||
}
|
||
.check-box {
|
||
padding-left: 10px;
|
||
width: 40px;
|
||
}
|
||
.info {
|
||
width: 450px;
|
||
.pictrue {
|
||
margin-right: 10px;
|
||
img {
|
||
width: 72px;
|
||
height: 72px;
|
||
}
|
||
}
|
||
.name {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
.price {
|
||
width: 150px;
|
||
}
|
||
.num {
|
||
width: 250px;
|
||
}
|
||
.money {
|
||
width: 150px;
|
||
}
|
||
.delete-btn {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.cart-footer {
|
||
padding: 20px;
|
||
.total {
|
||
.btn {
|
||
width: 152px;
|
||
height: 50px;
|
||
cursor: pointer;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
}
|
||
.data-null {
|
||
text-align: center;
|
||
padding-top: 170px;
|
||
}
|
||
}
|
||
</style> |