商品购物车 初步设定
parent
0fd6bb2b39
commit
b0cf5c58f5
|
|
@ -6,6 +6,7 @@ import 'nprogress/nprogress.css'
|
|||
import {getToken} from '@/utils/auth'
|
||||
import {isRelogin} from '@/utils/request'
|
||||
|
||||
|
||||
NProgress.configure({showSpinner: false})
|
||||
|
||||
const whiteList = ['/login', '/register']
|
||||
|
|
|
|||
|
|
@ -86,6 +86,18 @@ export const constantRoutes = [
|
|||
meta: {title: '商品详情', icon: 'dashboard', affix: true}
|
||||
}
|
||||
]
|
||||
},{
|
||||
path: '',
|
||||
component: Layout,
|
||||
redirect: 'shopindex',
|
||||
children: [
|
||||
{
|
||||
path: 'shopindex',
|
||||
component: () => import('@/views/shopCart/info/detail/index'),
|
||||
name: 'shopindex',
|
||||
meta: {title: '购物车', icon: 'dashboard', affix: true}
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/gb',
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
</div>
|
||||
</el-card>
|
||||
<el-form ref="form" :model="form" label-width="80" style="margin-top: 30px">
|
||||
<el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrAddModelList":label="ruleAttr.name">
|
||||
<el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrModelList":label="ruleAttr.name">
|
||||
<!-- <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">-->
|
||||
<!-- <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字" ></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" >加入购物车</el-button>
|
||||
<el-button type="primary" @click="addCart()">加入购物车</el-button>
|
||||
<el-button>立即购买</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
|
@ -121,16 +121,6 @@
|
|||
{{attributeMap[attributeInfo.id]}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
|
||||
title="其他属性" :column="1" >
|
||||
<el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
|
||||
:label="attributeInfo.name">
|
||||
{{attributeMap[attributeInfo.id]}}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
|
||||
<editor v-model="editorValue" :read-only="true"></editor>
|
||||
</div>
|
||||
</el-card>
|
||||
|
|
@ -200,6 +190,15 @@ export default {
|
|||
}
|
||||
},
|
||||
methods:{
|
||||
addCart(){
|
||||
addInfo(this.form).then(responser => {
|
||||
console.log(responser)
|
||||
})
|
||||
},
|
||||
// ShopingCardAdd(){
|
||||
// console.log("用户信息",this.receivedShop)
|
||||
// this.$router.push('shopCart/info/detail')
|
||||
// },
|
||||
updateNum() {
|
||||
this.num = this.price * this.form.num
|
||||
console.log("qqqqq",this.num)
|
||||
|
|
@ -221,7 +220,7 @@ export default {
|
|||
|
||||
},
|
||||
selectRuleSku(){
|
||||
let ruleSize =this.receivedShop.ruleAttrAddModelList.length
|
||||
let ruleSize =this.receivedShop.ruleAttrModelList.length
|
||||
let sku = "";
|
||||
for (let index = 0 ; ;index++){
|
||||
sku +=this.form['rule'+index]
|
||||
|
|
@ -230,6 +229,7 @@ export default {
|
|||
}
|
||||
sku += "-";
|
||||
}
|
||||
this.form.projectSku=sku;
|
||||
this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
|
||||
console.log("sdf",this.checkSkuInfo)
|
||||
console.log("ppp",this.checkSkuInfo.price)
|
||||
|
|
@ -246,13 +246,13 @@ export default {
|
|||
let key =productAttributeInfo.attributeId;
|
||||
this.attributeMap[key] = productAttributeInfo["value"]
|
||||
})
|
||||
|
||||
let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
|
||||
this.form.projectId= this.receivedShop.projectInfo.id
|
||||
let ruleAttrLength = this.receivedShop.ruleAttrModelList.length;
|
||||
console.log("hieng",ruleAttrLength)
|
||||
for (let index = 0 ;index < ruleAttrLength ;index++){
|
||||
this.form["rule"+index] = null
|
||||
}
|
||||
console.log("shjo",this.receivedShop.ruleAttrAddModelList)
|
||||
console.log("shjo",this.receivedShop.ruleAttrModelList)
|
||||
this.initSku()
|
||||
})
|
||||
},
|
||||
|
|
@ -270,12 +270,12 @@ export default {
|
|||
// this.attributeMap[key] = productAttributeInfo["value"]
|
||||
// })
|
||||
//
|
||||
// let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
|
||||
// let ruleAttrLength = this.receivedShop.ruleAttrModelList.length;
|
||||
// console.log("hieng",ruleAttrLength)
|
||||
// for (let index = 0 ;index < ruleAttrLength ;index++){
|
||||
// this.form["rule"+index] = null
|
||||
// }
|
||||
// console.log("shjo",this.receivedShop.ruleAttrAddModelList)
|
||||
// console.log("shjo",this.receivedShop.ruleAttrModelList)
|
||||
// this.initSku()
|
||||
// },
|
||||
},
|
||||
|
|
|
|||
|
|
@ -780,7 +780,6 @@ export default {
|
|||
handleUpdate(row) {
|
||||
this.reset();
|
||||
const id = row.id || this.ids
|
||||
|
||||
getInfo(id).then(response => {
|
||||
console.log("response",response)
|
||||
this.respData = response.data.asProductAttributeInfos
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-page-header @back="goBack" content="购物车">
|
||||
</el-page-header>
|
||||
<el-table
|
||||
:data="cartItems"
|
||||
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="display: flex; align-items: center;">
|
||||
<img :src="scope.row.image" style="width: 100px; height: 100px; margin-right: 10px;" alt="">
|
||||
<div>
|
||||
<span>{{ scope.row.name }}</span><br>
|
||||
<span>{{ scope.row.sku }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="数量">
|
||||
<template slot-scope="scope">
|
||||
<el-input-number v-model="scope.row.quantity" controls-position="right" @change="handleChange(scope.row)" :min="1" :max="10"></el-input-number>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="价格" width="180">
|
||||
<template slot-scope="scope">
|
||||
<span style="margin-left: 10px">{{ scope.row.price }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
size="mini"
|
||||
type="danger"
|
||||
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<span style="color: red">购物车中已选{{process}}件商品，总计金额为{{aggregate}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ShoppingCart",
|
||||
data() {
|
||||
return {
|
||||
cartItems: [
|
||||
{
|
||||
name: "商品1",
|
||||
image: "http://127.0.0.1:9300/statics/2024/03/26/0d73d0b8ac7fbcb12194a0835f1632a4_20240326200358A001.png",
|
||||
sku: "规格1",
|
||||
quantity: 1,
|
||||
price:188
|
||||
},
|
||||
{
|
||||
name: "商品2",
|
||||
image: "http://127.0.0.1:9300/statics/2024/03/26/0d73d0b8ac7fbcb12194a0835f1632a4_20240326200358A001.png",
|
||||
sku: "规格2",
|
||||
quantity: 1,
|
||||
price:155
|
||||
}
|
||||
],
|
||||
process: 0, //商品数量
|
||||
aggregate: 0, //总计
|
||||
selectedItems: [] // 选中的项
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleDelete(index, row) {
|
||||
console.log("index",index)
|
||||
console.log(index, row);
|
||||
},
|
||||
goBack() {
|
||||
console.log('go back');
|
||||
},
|
||||
handleChange(item) {
|
||||
const index = this.cartItems.findIndex(cartItem => cartItem === item);
|
||||
if (index !== -1) {
|
||||
this.cartItems[index].quantity = item.quantity;
|
||||
if (this.selectedItems.includes(this.cartItems[index])) {
|
||||
this.calculateTotal();
|
||||
}
|
||||
}
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.selectedItems = val; // 更新选中的项
|
||||
this.calculateTotal();
|
||||
},
|
||||
calculateTotal() {
|
||||
this.process = 0;
|
||||
this.aggregate = 0;
|
||||
for (let i = 0; i < this.selectedItems.length; i++) {
|
||||
this.process += this.selectedItems[i].quantity;
|
||||
this.aggregate += this.selectedItems[i].price * this.selectedItems[i].quantity;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Reference in New Issue