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

商品规格选择

master
DongZeLiang 2024-03-26 11:24:25 +08:00
parent ffe6fc9333
commit aef740d9c7
2 changed files with 69 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Editor/index.vue
View File

@ -179,7 +179,7 @@ export default {
},
handleUploadSuccess(res, file) {
// 如果上传成功
if (res.data.code == 200) {
if (res.code == 200) {
// 获取富文本组件实例
let quill = this.Quill;
// 获取光标所在位置

117
src/views/product/info/detail/index.vue
View File

@ -9,8 +9,8 @@
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12">
<el-carousel trigger="click" height="400px">
<el-carousel-item v-for="item in 4" :key="item">
<h3 class="small">{{ item }}</h3>
<el-carousel-item v-for="item in carouselImages" :key="item">
<el-image :src="item" style="height: 100%; width: 100%"/>
</el-carousel-item>
</el-carousel>
<div style="margin-top: 20px;">
@ -18,9 +18,7 @@
<el-col :span="6">
<div>
<el-statistic
group-separator=","
:precision="2"
:value="value2"
:value="123"
:title="title"
></el-statistic>
</div>
@ -29,7 +27,7 @@
<div>
<el-statistic title="商品评价">
<template slot="formatter">
456/2
456
</template>
</el-statistic>
</div>
@ -38,32 +36,19 @@
<div>
<el-statistic
group-separator=","
:precision="2"
:precision="0"
decimal-separator="."
:value="value1"
:value="123"
title="收藏人气"
>
<template slot="prefix">
<i class="el-icon-s-flag" style="color: red"></i>
</template>
<template slot="suffix">
<i class="el-icon-s-flag" style="color: blue"></i>
</template>
</el-statistic>
</div>
</el-col>
<el-col :span="6">
<div>
<el-statistic :value="like ? 521 : 520" title="品牌信息">
<template slot="suffix">
<span @click="like = !like" class="like">
<i
class="el-icon-star-on"
style="color:red"
v-show="!!like"
></i>
<i class="el-icon-star-off" v-show="!like"></i>
</span>
<el-statistic title="品牌信息">
<template slot="formatter">
{{projectDetail.brandInfo.nam}}
</template>
</el-statistic>
</div>
@ -73,19 +58,21 @@
</el-col>
<el-col :span="12">
<h1>商品名称</h1>
<h3>商品规格（内存-储存-颜色）</h3>
<h2 style="color: red">￥125</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 :label="value" border>{{value}}</el-radio>
</el-radio-group>
<!-- <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">
</el-radio-group>-->
<el-radio v-model="form['rule'+index]" @change="selectRuleSku"
v-for="value in ruleAttr.valueList"
:label="value" :key="value" :value="value" border>{{value}}</el-radio>
</el-form-item>
<el-form-item label="规格2">
<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="onSubmit">加入购物车</el-button>
<el-button type="primary">加入购物车</el-button>
<el-button>立即购买</el-button>
</el-form-item>
</el-form>
@ -96,14 +83,9 @@
<div slot="header" class="clearfix">
<span>商品详情</span>
</div>
<el-descriptions title="分组1" :column="1">
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
<el-descriptions-item label="备注">
<el-tag size="small">学校</el-tag>
</el-descriptions-item>
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
<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>
</el-descriptions>
<el-descriptions title="其他属性" :column="1">
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
@ -111,7 +93,7 @@
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
</el-descriptions>
<editor v-model="editorValue" :read-only="true" >
<editor v-model="projectDetail.projectInfo.introduction" :read-only="true" >
</editor>
</el-card>
@ -126,29 +108,66 @@ export default {
name: "productDetail",
data() {
return {
breadcrumbList: [
"服装",
"外衣",
"女式超柔软拉毛运动开衫"
],
like: true,
value1: 4154.564,
value1: 415,
value2: 1314,
title: "销量人气",
form: {
num: 1
},
editorValue: "awejfoiajovhahrfhaowiejfoawijfeoiawjefoawjjogihao",
projectDetail: {}
projectDetail: {
projectInfo: {
name: ""
},
brandInfo: {
nam: ""
}
},
checkSkuInfo: {
price: 0.00
},
carouselImages: [],
attributeMap: {}
}
},
created() {
this.initProjectDetailInfo();
},
methods: {
initSku(){
let sku = this.projectDetail.projectSkuInfoList[0]["sku"];
let skuArr = sku.split("-");
skuArr.forEach((rule, index) => {
this.form['rule'+index] = rule;
})
this.selectRuleSku();
},
selectRuleSku(){
let ruleSize = this.projectDetail.ruleAttrModelList.length;
let sku = "";
for (let index = 0; ; index++) {
sku += this.form['rule'+index];
if (index + 1 === ruleSize){
break
}
sku += "-";
}
this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
},
initProjectDetailInfo(){
getDetailInfo(2).then(response => {
getDetailInfo(3).then(response => {
this.projectDetail = response.data;
this.projectDetail.productAttributeInfoList.map(productAttributeInfo => {
let key = productAttributeInfo.attributeId;
this.attributeMap[key] = productAttributeInfo["value"]
})
console.log(this.attributeMap)
let ruleAttrLength = this.projectDetail.ruleAttrModelList.length;
for (let index = 0; index < ruleAttrLength; index++) {
this.form["rule"+index] = null;
}
this.carouselImages = this.projectDetail.projectInfo.carouselImages.split(",")
this.initSku();
})
}
}