商品购物车
parent
c71306721c
commit
b47cbef72f
|
|
@ -51,3 +51,11 @@ export function delShop(id) {
|
|||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
export function checkState(state) {
|
||||
return request({
|
||||
url: '/shopCart/shop/checkState',
|
||||
method: 'post',
|
||||
data:state
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -135,11 +135,19 @@
|
|||
<script>
|
||||
import {getPro} from "@/api/product/info";
|
||||
import rule from "@/views/product/rule/index.vue";
|
||||
import {addShop} from "@/api/shopCart/shop";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
/*加入购物车*/
|
||||
joinShop:{
|
||||
projectId:0,
|
||||
projectSku:"",
|
||||
num:0,
|
||||
detailSku:[]
|
||||
},
|
||||
/*选择商品sku信息*/
|
||||
goodSkuDetail:{},
|
||||
id: 0,
|
||||
|
|
@ -233,17 +241,23 @@ export default {
|
|||
|
||||
/*加入购物车*/
|
||||
onSubmit() {
|
||||
console.log(this.form)
|
||||
let length = this.form.ruleList.length;
|
||||
let rule=[]
|
||||
for (let i = 0; i <length; i++) {
|
||||
console.log(`${this.form.ruleList[i].name}:${this.form[`rule${i}`]}`)
|
||||
rule.push(`${this.form.ruleList[i].name}:${this.form[`rule${i}`]}`)
|
||||
}
|
||||
console.log(this.good)
|
||||
|
||||
this.joinShop.detailSku= rule.join(", ");
|
||||
this.joinShop.projectId=this.good.id
|
||||
this.joinShop.projectSku=this.checkgood.goodname
|
||||
this.joinShop.num=this.form.num
|
||||
console.log(this.joinShop)
|
||||
addShop(this.joinShop).then(
|
||||
res=>{
|
||||
this.$message.success("添加成功")
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
|
||||
|
||||
details: function (id) {
|
||||
getPro(id).then(
|
||||
res => {
|
||||
|
|
|
|||
|
|
@ -6,25 +6,25 @@
|
|||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||
<el-breadcrumb-item :to="{ path: '/test/:id' }">商城</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
{{shop}}
|
||||
{{ shop }}
|
||||
|
||||
<el-card>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="shop"
|
||||
style="width: 100%"
|
||||
row-key="id"
|
||||
:default-checked-keys="defaultCheckedRows"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="100">
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="商品信息"
|
||||
width="300">
|
||||
<template slot-scope="scope">
|
||||
<div class="cell-content">
|
||||
<img :src="scope.row.projectSkuInfo.image" width="100px" height="100px" class="project-image">
|
||||
<img :src="scope.row.projectSkuInfo.image" width="100px" height="100px" class="project-image">
|
||||
<div class="project-info">
|
||||
<h3 class="project-name">{{ scope.row.projectInfo.name }}</h3>
|
||||
<p class="project-description">{{ scope.row.detailSku }}</p>
|
||||
|
|
@ -47,37 +47,101 @@
|
|||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.num"
|
||||
@change="handleNumChange(scope.$index,scope.row)"
|
||||
:min="1" label="描述文字"></el-input-number>
|
||||
:min="1" label="描述文字"></el-input-number>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column property="sum" label="小计" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.num *scope.row.price }}</span>
|
||||
<span style="margin-left: 10px">{{ scope.row.num * scope.row.price }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleEdit( scope.row)">移入收藏夹</el-button>
|
||||
@click="handleEdit( scope.row)">移入收藏夹
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete( scope.row)">删除</el-button>
|
||||
@click="handleDelete( scope.row)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-divider></el-divider>
|
||||
<el-card >
|
||||
<el-checkbox @selection-change="handleSelectionChange">全选</el-checkbox>
|
||||
删除选中商品 移入到收藏夹
|
||||
<h1 style="color: red">￥ {{totalPrice}}</h1>
|
||||
<span style="color: #97a8be">失效商品</span>
|
||||
<el-table
|
||||
:data="oldshop"
|
||||
ref="multipleTableOld"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChangeOld"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
width="300">
|
||||
<template slot-scope="scope">
|
||||
<div class="cell-content">
|
||||
<img :src="scope.row.projectSkuInfo.image" width="100px" height="100px" class="project-image">
|
||||
<div class="project-info">
|
||||
<h3 class="project-name">{{ scope.row.projectInfo.name }}</h3>
|
||||
<p class="project-description">{{ scope.row.detailSku }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="isselected"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="price"
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column property="num" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number disabled v-model="scope.row.num"
|
||||
@change="handleNumChange(scope.$index,scope.row)"
|
||||
:min="1" label="描述文字"></el-input-number>
|
||||
</template>
|
||||
|
||||
</el-table-column>
|
||||
<el-table-column property="sum" width="120">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.num * scope.row.price }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
@click="handleEdit( scope.row)">移入收藏夹
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete( scope.row)">删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-card>
|
||||
<el-checkbox v-model="selectAll" @change="handleSelectionChangeAll">全选</el-checkbox>
|
||||
删除选中商品 移入到收藏夹
|
||||
<h1 style="color: red">￥ {{ totalPrice +totalPriceOld}}</h1>
|
||||
<h1 style="color: red">Old￥ {{ totalPriceOld }}</h1>
|
||||
<h1 style="color: red">选中商品个数 {{num+numOld}}</h1>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
style="margin-left: 600px"
|
||||
>下单结算</el-button>
|
||||
>下单结算
|
||||
</el-button>
|
||||
</el-card>
|
||||
|
||||
</el-card>
|
||||
|
|
@ -86,78 +150,212 @@
|
|||
</template>
|
||||
<script>
|
||||
import {listShop} from "@/api/product/shop";
|
||||
import {testShop} from "@/api/shopCart/shop";
|
||||
import {checkState, testShop} from "@/api/shopCart/shop";
|
||||
import shop from "@/views/shopCart/shop/index.vue";
|
||||
import item from "@/layout/components/Sidebar/Item.vue";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
data() {
|
||||
return {
|
||||
/*选中的行*/
|
||||
multipleSelection:[],
|
||||
/**/
|
||||
selectAll:false,
|
||||
/*选中商品*/
|
||||
selectedProduct:[],
|
||||
selectedProduct: [],
|
||||
num:0,
|
||||
/*选中失效*/
|
||||
selectedProductOld:[],
|
||||
numOld:0,
|
||||
/*每次选中的*/
|
||||
selectedRows: [],
|
||||
/*总价钱*/
|
||||
totalPrice:0,
|
||||
/*图片*/
|
||||
src:"http://127.0.0.1:9300/statics/2024/03/25/v2-1d73a9fd4aa25ccccd7800eead8672d0_hd_20240325171828A038.gif",
|
||||
totalPrice: 0,
|
||||
/*失效总价*/
|
||||
totalPriceOld:0,
|
||||
/*购物车对象*/
|
||||
shop:[],
|
||||
shop: [],
|
||||
/*查询对象*/
|
||||
queryParams: {
|
||||
},
|
||||
queryParams: {},
|
||||
ids: [],
|
||||
/*购物车状态为选中*/
|
||||
checkEd: [],
|
||||
oldshop: [
|
||||
{
|
||||
"id": 3,
|
||||
"projectId": 62,
|
||||
"projectSku": "x红色钛合金",
|
||||
"isselected": 1,
|
||||
"detailSku": "尺码:x\n 颜色:红色 材质:钛合金",
|
||||
"projectInfo": {
|
||||
"id": 62,
|
||||
"name": "失效",
|
||||
"introduction": "失效",
|
||||
"mianType": "49",
|
||||
"parentType": "50",
|
||||
"type": "51",
|
||||
"image": "http://127.0.0.1:9300/statics/2024/03/25/屏幕截图 2024-03-15 201358_20240325165814A020.png",
|
||||
"carouselImages": "http://127.0.0.1:9300/statics/2024/03/25/v2-1d73a9fd4aa25ccccd7800eead8672d0_hd_20240325171828A038.gif",
|
||||
"status": "0",
|
||||
"ruleId": 8,
|
||||
"brandId": 1
|
||||
},
|
||||
"projectSkuInfo": {
|
||||
"id": 251,
|
||||
"projectId": 62,
|
||||
"sku": "x红色钛合金",
|
||||
"stock": 23,
|
||||
"price": 123,
|
||||
"image": "http://127.0.0.1:9300/statics/2024/03/25/v2-1d73a9fd4aa25ccccd7800eead8672d0_hd_20240325165822A022.gif"
|
||||
},
|
||||
"userId": 1,
|
||||
"num": 1,
|
||||
"price": 123,
|
||||
"sumPrice": null
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.shopList()
|
||||
},
|
||||
watch:{
|
||||
"scope.row.num":{
|
||||
handler(val){
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
defaultCheckedRows(){
|
||||
return this.shop
|
||||
.filter(row=>row.isselected==='Y')
|
||||
.map(row=>row.id);
|
||||
watch: {
|
||||
selectedRows: {
|
||||
handler(newVal, oldVal) {
|
||||
// 处理新选中的行
|
||||
newVal.forEach(row => {
|
||||
if (row.isselected === 1) {
|
||||
|
||||
} else if (row.isselected === 0) {
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
// 处理之前选中的但现在未选中的行
|
||||
oldVal.forEach(row => {
|
||||
if (!newVal.find(newRow => newRow.id === row.id)) {
|
||||
// 如果oldVal中的行不在newVal中，说明它被取消了选中
|
||||
if (row.isselected === 1) {
|
||||
// let state = {
|
||||
// ids: []
|
||||
// }
|
||||
// state.ids=row.id
|
||||
// state.flag = 0
|
||||
// checkState(state).then(
|
||||
// res => {
|
||||
// this.$message.success("成功")
|
||||
// this.shopList()
|
||||
// }
|
||||
// )
|
||||
}
|
||||
if (row.isselected === 0) {
|
||||
// let state = {
|
||||
// ids: []
|
||||
// }
|
||||
// state.ids=row.id
|
||||
// state.flag = 1
|
||||
// checkState(state).then(
|
||||
// res => {
|
||||
// this.$message.success("成功")
|
||||
// this.shopList()
|
||||
// }
|
||||
// )
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
deep: true // 深度监听selectedRow中的对象变化
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*多选框*/
|
||||
handleSelectionChange(val){
|
||||
this.multipleSelection=val
|
||||
this.selectedProduct=val.map(item=>({...item}));
|
||||
handleSelectionChange(val) {
|
||||
if (val.length === 0) {
|
||||
this.selectedRows = []
|
||||
} else {
|
||||
this.selectedRows = val.slice(0, 1);
|
||||
}
|
||||
this.selectedProduct = val.map(item => ({...item}));
|
||||
this.num=this.selectedProduct.length
|
||||
this.selectAll=val.length
|
||||
this.countTotalPrice()
|
||||
},
|
||||
/*失效商品*/
|
||||
handleSelectionChangeOld(val){
|
||||
this.selectedProductOld = val.map(item => ({...item}));
|
||||
this.numOld=this.selectedProductOld.length
|
||||
this.selectAll=val.length
|
||||
this.countTotalPriceOld()
|
||||
},
|
||||
/*全选*/
|
||||
handleSelectionChangeAll(){
|
||||
|
||||
if (this.selectAll) {
|
||||
this.$refs.multipleTable.toggleRowSelection(this.shop, true);
|
||||
this.$refs.multipleTableOld.toggleRowSelection(this.oldshop, true);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/*多选选中*/
|
||||
select() {
|
||||
this.shop.forEach((item, index) => {
|
||||
if (item.isselected === 1) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.multipleTable.toggleRowSelection(this.shop[index], true)
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
checkedd(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
this.$refs.multipleTable.toggleRowSelection(row,true);
|
||||
})
|
||||
} else {
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
}
|
||||
},
|
||||
|
||||
/*数量计数器*/
|
||||
handleNumChange(index,row){
|
||||
this.shop[index].num=row.num;
|
||||
handleNumChange(index, row) {
|
||||
this.shop[index].num = row.num;
|
||||
this.countTotalPrice()
|
||||
},
|
||||
|
||||
/*失效计数器*/
|
||||
/*计算总价 选中个数*/
|
||||
countTotalPrice(){
|
||||
this.totalPrice=this.selectedProduct.reduce((sum,shop)=>{
|
||||
if(shop.hasOwnProperty('num') && shop.hasOwnProperty('price')){
|
||||
return sum +shop.num *shop.price;
|
||||
}else{
|
||||
countTotalPrice() {
|
||||
this.totalPrice = this.selectedProduct.reduce((sum, shop) => {
|
||||
if (shop.hasOwnProperty('num') && shop.hasOwnProperty('price')) {
|
||||
return sum + shop.num * shop.price;
|
||||
} else {
|
||||
return sum;
|
||||
}
|
||||
},0);
|
||||
}, 0);
|
||||
},
|
||||
countTotalPriceOld(){
|
||||
this.totalPriceOld = this.selectedProductOld.reduce((sum, shop) => {
|
||||
if (shop.hasOwnProperty('num') && shop.hasOwnProperty('price')) {
|
||||
return sum + shop.num * shop.price;
|
||||
} else {
|
||||
return sum;
|
||||
}
|
||||
}, 0);
|
||||
},
|
||||
|
||||
/*购物车列表*/
|
||||
shopList(){
|
||||
testShop(this.queryParams).then(res=>{
|
||||
console.log(res)
|
||||
this.shop=res.data.rows
|
||||
})
|
||||
shopList() {
|
||||
testShop(this.queryParams).then(res => {
|
||||
this.shop = res.data.rows
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.checkedd(this.oldshop)
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
.cell-content {
|
||||
|
|
|
|||
Loading…
Reference in New Issue