wxl
/
2108a-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加购物车

dev
Wang XinLong 2024-04-05 16:46:49 +08:00
parent 03f684641d
commit 2c6b790351
1 changed files with 46 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/views/product/detail/index.vue
View File

@ -2,9 +2,10 @@
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{categoryInfo.name}}</el-breadcrumb-item>
<el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{ categoryInfo.name }}
</el-breadcrumb-item>
<el-breadcrumb-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
<el-breadcrumb-item>{{ projectDetail.projectInfo.name }}</el-breadcrumb-item>
</el-breadcrumb>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
@ -43,7 +44,7 @@
<div>
<el-statistic title="品牌信息">
<template slot="formatter">
{{projectDetail.brandInfo.name}}
{{ projectDetail.brandInfo.name }}
</template>
</el-statistic>
</div>
@ -53,23 +54,24 @@
</el-col>
<el-col :span="12">
<h1>商品名称</h1>
<h3>商品规格（{{checkSkuInfo.sku}}）</h3>
<h2 style="color: red">￥{{checkSkuInfo.price}}</h2>
<h3>商品规格（{{ checkSkuInfo.sku }}）</h3>
<h2 style="color: red">￥{{ checkSkuInfo.price }}</h2>
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
<el-form-item v-for="(ruleAttr, index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
<!-- <el-radio-group v-for="value in ruleAttr.valueList" v-model="form['rule'+index]">-->
<!-- </el-radio-group>-->
<el-radio v-model="form['rule'+index]" @change="selectRuleSku"
v-for="value in ruleAttr.valueList"
:label="value" border>{{value}}</el-radio>
</el-form-item>
<el-form-item label="数量">
<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>立即购买</el-button>
</el-form-item>
<el-form-item v-for="(ruleAttr, index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
<!-- <el-radio-group v-for="value in ruleAttr.valueList" v-model="form['rule'+index]">-->
<!-- </el-radio-group>-->
<el-radio v-model="form['rule'+index]" @change="selectRuleSku"
v-for="value in ruleAttr.valueList"
:label="value" border>{{ value }}
</el-radio>
</el-form-item>
<el-form-item label="数量">
<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" @click="addCart">加入购物车</el-button>
<!-- <el-button>立即购买</el-button>-->
</el-form-item>
</el-form>
</el-col>
</el-row>
@ -78,13 +80,16 @@
<div slot="header" class="clearfix">
<span>商品详情</span>
</div>
<el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName" :column="1">
<el-descriptions v-for="attributeGroup in projectDetail.attributeGroupList" :title="attributeGroup.groupName"
:column="1">
<el-descriptions-item v-for="attribute in attributeGroup.attributeList"
:label="attribute.name">{{ attributeMap[attribute.id] }}</el-descriptions-item>
:label="attribute.name">{{ attributeMap[attribute.id] }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions v-if="projectDetail.attributeInfoList.length !== 0" title="其他属性" :column="1">
<el-descriptions-item v-for="attributeInfo in projectDetail.attributeInfoList"
:label="attributeInfo.name">{{ attributeMap[attributeInfo.id] }}</el-descriptions-item>
:label="attributeInfo.name">{{ attributeMap[attributeInfo.id] }}
</el-descriptions-item>
</el-descriptions>
<editor v-model="projectDetail.projectInfo.introduction" :read-only="true">
@ -97,6 +102,7 @@
<script>
import {getDetailInfo} from "@/api/product/info";
import {addInfo} from "@/api/shopCart/Info";
export default {
name: "productDetail",
@ -127,37 +133,45 @@ export default {
this.initProjectDetailInfo(detailId);
},
methods: {
initSku(){
// 新增购物车
addCart() {
addInfo(this.form).then(res => {
console.log(res)
})
},
initSku() {
let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
let skuAttr = sku.split("-");
skuAttr.forEach((rule, index) => {
this.form['rule'+index] = rule.toString();
this.form['rule' + index] = rule.toString();
})
this.selectRuleSku();
},
selectRuleSku(){
selectRuleSku() {
let ruleSize = this.projectDetail.ruleAttrModelList.length;
let sku = "";
for (let index = 0; ; index++) {
sku += this.form['rule'+index];
if(index + 1 === ruleSize){
sku += this.form['rule' + index];
if (index + 1 === ruleSize) {
break
}
sku += "-";
}
this.form.projectSku = sku;
this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku);
},
initProjectDetailInfo(detailId){
initProjectDetailInfo(detailId) {
getDetailInfo(detailId).then(response => {
this.projectDetail = response.data;
this.projectDetail.productAttributeInfoList.map(productAttributeInfo => {
let key = productAttributeInfo.attributeId;
this.attributeMap[key] = productAttributeInfo["value"]
})
this.form.projectId = this.projectDetail.projectInfo.id;
console.log(this.attributeMap)
let ruleAttrLength = this.projectDetail.ruleAttrModelList.length;
for (let index = 0; index <ruleAttrLength; index++) {
this.form['rule'+index] = null
for (let index = 0; index < ruleAttrLength; index++) {
this.form['rule' + index] = null
}
this.carouselImages = this.projectDetail.projectInfo.carouselImages.split(",");
this.initSku();
@ -183,7 +197,8 @@ export default {
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.ql-toolbar{
.ql-toolbar {
display: none;
}
</style>