哭哭哭
parent
ffe6fc9333
commit
28d23e6ca6
|
|
@ -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="img in carouseImages" :key="img">
|
||||
<el-image :src="img" style="width: 100%; height: 100%;"></el-image>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<div style="margin-top: 20px;">
|
||||
|
|
@ -54,8 +54,9 @@
|
|||
</el-col>
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
<el-statistic :value="like ? 521 : 520" title="品牌信息">
|
||||
<el-statistic title="品牌信息">
|
||||
<template slot="suffix">
|
||||
{{projectDetail.brandInfo.nam}}
|
||||
<span @click="like = !like" class="like">
|
||||
<i
|
||||
class="el-icon-star-on"
|
||||
|
|
@ -64,7 +65,9 @@
|
|||
></i>
|
||||
<i class="el-icon-star-off" v-show="!like"></i>
|
||||
</span>
|
||||
|
||||
</template>
|
||||
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -72,17 +75,17 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<h1>商品名称</h1>
|
||||
<h3>商品规格（内存-储存-颜色）</h3>
|
||||
<h2 style="color: red">￥125</h2>
|
||||
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
|
||||
<h1>{{projectDetail.projectInfo.name}}</h1>
|
||||
<h3>商品规格:{{abc}}</h3>
|
||||
<h2 style="color: red">{{formm.price}}</h2>
|
||||
<el-form ref="form" :model="formm" 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 v-for="value in ruleAttr.valueList" v-model="formm['rule'+index]" @change="changeSku">
|
||||
<el-radio :label="value" border>{{value}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="规格2">
|
||||
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
|
||||
<el-input-number v-model="formm.num" :min="1" :max="10" label="描述文字"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">加入购物车</el-button>
|
||||
|
|
@ -96,19 +99,16 @@
|
|||
<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 :title="attrGroup.groupName" v-for="attrGroup in projectDetail.attributeGroupList" :column="1">
|
||||
<el-descriptions-item v-for="attr in attrGroup.attributeList"
|
||||
:label="attr.name">{{attrMap[attr.id]}}</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>
|
||||
<el-descriptions title="其他属性" :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 v-for="ott in otherAttr" :label="ott.name">{{ott.value}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
|
||||
<editor v-model="editorValue" :read-only="true" >
|
||||
|
|
@ -135,11 +135,17 @@ export default {
|
|||
value1: 4154.564,
|
||||
value2: 1314,
|
||||
title: "销量人气",
|
||||
form: {
|
||||
num: 1
|
||||
formm:{
|
||||
num: 1,
|
||||
price: 0
|
||||
},
|
||||
form: [],
|
||||
editorValue: "awejfoiajovhahrfhaowiejfoawijfeoiawjefoawjjogihao",
|
||||
projectDetail: {}
|
||||
projectDetail: {},
|
||||
abc: "",
|
||||
attrMap: {},
|
||||
otherAttr: [],
|
||||
carouseImages: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -147,9 +153,44 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
initProjectDetailInfo(){
|
||||
getDetailInfo(2).then(response => {
|
||||
getDetailInfo(10).then(response => {
|
||||
console.log("Response",response)
|
||||
this.projectDetail = response.data;
|
||||
for (let i = 0; i < this.projectDetail.productAttributeInfoList.length; i++) {
|
||||
this.attrMap[this.projectDetail.productAttributeInfoList[i].attributeId] = this.projectDetail.productAttributeInfoList[i].value
|
||||
this.projectDetail.attributeGroupList.forEach(attrGroup => {
|
||||
let map = attrGroup.attributeList.map(attrs => attrs.id);
|
||||
if (!map.includes(this.projectDetail.productAttributeInfoList[i].attributeId)){
|
||||
this.otherAttr.push(this.projectDetail.productAttributeInfoList[i])
|
||||
}
|
||||
})
|
||||
}
|
||||
console.log("otherAttr",this.otherAttr)
|
||||
this.initSku()
|
||||
this.carouseImages = this.projectDetail.projectInfo.carouselImages.split(",")
|
||||
|
||||
})
|
||||
},
|
||||
changeSku() {
|
||||
this.abc=""
|
||||
for (let i = 0; i < this.projectDetail.ruleAttrModelList.length; i++) {
|
||||
this.abc+=this.formm["rule"+i]+"-"
|
||||
}
|
||||
this.abc = this.abc.substring(0, this.abc.length - 1);
|
||||
this.projectDetail.projectSkuInfoList.forEach(projectSku => {
|
||||
if (projectSku.sku == this.abc){
|
||||
this.formm.price = projectSku.price
|
||||
}
|
||||
})
|
||||
},
|
||||
initSku(){
|
||||
for (let i = 0; i < this.projectDetail.ruleAttrModelList.length; i++) {
|
||||
this.formm["rule"+i] = this.projectDetail.ruleAttrModelList[i].valueList[0]
|
||||
}
|
||||
this.changeSku()
|
||||
},
|
||||
onSubmit() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ module.exports = {
|
|||
proxy: {
|
||||
// detail: https://cli.vuejs.org/config/#devserver-proxy
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: `http://10.1.123.97:8080`,
|
||||
target: `http://localhost:8080`,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
|
|
|
|||
Loading…
Reference in New Issue