购物车详情
DongZeLiang
parent
e39ae5c868
commit
24ea545cec
|
|
@ -17,6 +17,14 @@ export function getInfo(id) {
|
|||
})
|
||||
}
|
||||
|
||||
// 查询购物车详细
|
||||
export function getDetailInfo() {
|
||||
return request({
|
||||
url: '/shopCart/Info/detail',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增购物车
|
||||
export function addInfo(data) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -87,6 +87,19 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/cart',
|
||||
component: LayoutShop,
|
||||
redirect: 'cart-detail',
|
||||
children: [
|
||||
{
|
||||
path: '/cart/detail',
|
||||
component: () => import('@/views/shopCart/detail/index'),
|
||||
name: 'Demo',
|
||||
meta: {title: '我的购物车', icon: 'dashboard', affix: true}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
购物车商品集合: [
|
||||
{
|
||||
购物车ID: 1,
|
||||
商品SKU图片: "url",
|
||||
商品名称: "",
|
||||
商品规格SKU集合: [
|
||||
{
|
||||
规格名称："",
|
||||
规格属性：""
|
||||
}
|
||||
]，
|
||||
商品单价：125.36,
|
||||
商品购物车数量：1,
|
||||
商品小计：125.36,
|
||||
是否选中: Y/N
|
||||
}
|
||||
],
|
||||
// 购物车统计
|
||||
statisticsCart: {
|
||||
// 商品总数
|
||||
total: 0,
|
||||
// 选择总数
|
||||
selectTotal: 0,
|
||||
// 商品总价
|
||||
priceTotal: 0.00,
|
||||
// 实际总价
|
||||
actualTotal: 0.00
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,158 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-table ref="multipleTable" :data="cartProjectList" tooltip-effect="dark" style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55"> </el-table-column>
|
||||
<el-table-column label="商品信息">
|
||||
<template slot-scope="scope">
|
||||
<div style="height: 150px; width: 100%">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="8">
|
||||
<el-card class="box-card">
|
||||
<image-preview :src="scope.row.image" height="150px"/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-row>
|
||||
<span style="font-weight: bolder; font-size: 20px">{{scope.row.name}}</span>
|
||||
</el-row>
|
||||
<el-divider style="margin: 10px 0;"/>
|
||||
<el-row>
|
||||
<el-col :span="24" v-for="skuRule in scope.row.skuRuleList">{{skuRule.ruleName}}：{{skuRule.ruleValue}}</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="单价" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.price }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.num" controls-position="right" style="width: 110px"
|
||||
:min="1"
|
||||
:max="scope.row.stock"
|
||||
size="mini"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="小计" width="120">
|
||||
<template slot-scope="scope">{{ scope.row.subtotal }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="80">
|
||||
<template slot-scope="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="failureCartProjectList.length > 0" style="height: 50px; align-items: center; ">
|
||||
<span style="margin: 20px 0px; float: left; color: #787be8">已失效</span>
|
||||
</div>
|
||||
<el-table
|
||||
v-if="failureCartProjectList.length > 0"
|
||||
:show-header="false"
|
||||
ref="multipleTable"
|
||||
:data="failureCartProjectList"
|
||||
tooltip-effect="dark"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column width="55">
|
||||
<template slot-scope="scope">
|
||||
<el-checkbox disabled></el-checkbox>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="日期"
|
||||
>
|
||||
<template slot-scope="scope">{{ scope.row.date }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
label="地址"
|
||||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-card style="margin-top: 20px;">
|
||||
<div class="clearfix">
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<el-checkbox v-model="isAllCheck">全选</el-checkbox>
|
||||
<el-button type="text" style="margin-left: 10px">删除选中商品</el-button>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<div>
|
||||
<span>共 <span style="color: red">{{statisticsCart.total}}</span> 件商品，已选择 <span style="color:red;">{{statisticsCart.selectTotal}}</span> 件</span>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<span> 商品合计 : ¥{{statisticsCart.priceTotal}}</span>
|
||||
<el-divider direction="vertical"></el-divider>
|
||||
<span>应付总额：<span style="color:red; font-size: 24px;">¥{{statisticsCart.actualTotal}}</span></span>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-button style="float: right;" type="success">下单</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDetailInfo} from "@/api/shopCart/Info";
|
||||
|
||||
export default {
|
||||
name: "shopCartDetail",
|
||||
data() {
|
||||
return {
|
||||
// 生效商品
|
||||
cartProjectList: [],
|
||||
// 失效商品
|
||||
failureCartProjectList: [],
|
||||
multipleSelection: [],
|
||||
// 购物车统计
|
||||
statisticsCart: {
|
||||
// 商品总数
|
||||
total: 0,
|
||||
// 选择总数
|
||||
selectTotal: 0,
|
||||
// 商品总价
|
||||
priceTotal: 0.00,
|
||||
// 实际总价
|
||||
actualTotal: 0.00
|
||||
},
|
||||
// 时候全部选择
|
||||
isAllCheck: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
getDetailInfo().then(response => {
|
||||
console.log(response)
|
||||
this.statisticsCart = response.data.statisticsCart;
|
||||
this.cartProjectList = response.data.cartSkuList
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
toggleSelection(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
});
|
||||
} else {
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
}
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue