244 lines
7.4 KiB
Vue
244 lines
7.4 KiB
Vue
<template>
|
||
<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>{{ projectDetail.projectInfo.name }}</el-breadcrumb-item>
|
||
</el-breadcrumb>
|
||
|
||
<el-row :gutter="20">
|
||
<el-col :span="12">
|
||
<div class="block" style="margin-top: 30px">
|
||
<el-carousel trigger="click" height="500px">
|
||
<el-carousel-item v-for="item in carouselImages" :key="item">
|
||
<el-image :src="item" style="width: 100%;height: 100%"/>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
|
||
<div style="margin-top: 30px">
|
||
<el-row :gutter="20">
|
||
<el-col :span="6">
|
||
<div>
|
||
<el-statistic
|
||
:value="123"
|
||
:title="title"
|
||
></el-statistic>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div>
|
||
<el-statistic title="商品评价">
|
||
<template slot="formatter">
|
||
456
|
||
</template>
|
||
</el-statistic>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div>
|
||
<el-statistic
|
||
group-separator=","
|
||
:precision="2"
|
||
decimal-separator="."
|
||
:value="123"
|
||
title="收藏人气"
|
||
>
|
||
|
||
</el-statistic>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<div>
|
||
<el-statistic title="品牌信息">
|
||
<template slot="formatter">
|
||
{{projectDetail.brandInfo.name}}
|
||
</template>
|
||
</el-statistic>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<h1 style="margin-left: 50px">商品名称</h1>
|
||
<h1 style="margin-left: 400px;margin-top: -45px;color: orangered;">￥{{ checkSkuInfo.price }}</h1>
|
||
<h3 style="color: #99a9bf;margin-left: 75px">{{ checkSkuInfo.sku }}</h3>
|
||
<h3 style="color: #99a9bf;margin-left: 400px;margin-top: -40px">秒杀价格</h3>
|
||
|
||
<div style="width: 100%; display: inline-block; background-color: orangered;">
|
||
<el-statistic :value="deadline2" time-indices title="商品秒杀 距离结束还有">
|
||
</el-statistic>
|
||
</div>
|
||
|
||
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 30px">
|
||
<el-form-item v-for="(ruleAttr,index) in projectDetail.ruleAttrModelList" :label="ruleAttr.name">
|
||
<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="数量">
|
||
<el-input-number v-model="form.num" :min="1" label="数量">
|
||
</el-input-number>
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="warning" @click="onSubmit">加入购物车</el-button>
|
||
<el-button>立即购买</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row style="margin-top: 30px">
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix">
|
||
<span>商品详情</span>
|
||
</div>
|
||
<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 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>
|
||
</el-descriptions>
|
||
|
||
<editor v-model="projectDetail.projectInfo.introduction" :read-only="true" >
|
||
|
||
</editor>
|
||
</el-card>
|
||
</el-row>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import {getDetailInfo} from '@/api/product/info'
|
||
import rule from '@/views/product/rule/index.vue'
|
||
|
||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||
//例如：import 《组件名称》 from '《组件路径》,
|
||
export default {
|
||
|
||
name: 'productDetail',
|
||
//import引入的组件需要注入到对象中才能使用"
|
||
|
||
data() {
|
||
//这里存放数据"
|
||
|
||
return {
|
||
breadcrumbList:[
|
||
"服装",
|
||
"外衣",
|
||
"女士超柔软拉毛运动开衫",
|
||
],
|
||
like: true,
|
||
value1: 4154,
|
||
value2: 1314,
|
||
title: "销售人气",
|
||
deadline2: Date.now() + 1000 * 60 * 60 * 8,
|
||
form:{
|
||
num:1
|
||
},
|
||
projectDetail:{
|
||
projectInfo:{
|
||
name:"",
|
||
},
|
||
brandInfo:{
|
||
name:""
|
||
},
|
||
attributeInfoList:[]
|
||
},
|
||
checkSkuInfo:{
|
||
price:0.00
|
||
},
|
||
carouselImages:[],
|
||
attributeMap:{}
|
||
};
|
||
},
|
||
|
||
//方法集合",
|
||
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
|
||
}
|
||
}
|
||
this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo =>skuInfo.sku ===sku)
|
||
},
|
||
initProjectDetailInfo(detailId){
|
||
getDetailInfo(detailId).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()
|
||
})
|
||
},
|
||
onSubmit(){
|
||
|
||
}
|
||
},
|
||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||
created() {
|
||
const detailId = this.$route.params && this.$route.params.detailId
|
||
this.initProjectDetailInfo(detailId)
|
||
},
|
||
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
|
||
.el-carousel__item h3 {
|
||
color: #475669;
|
||
font-size: 14px;
|
||
opacity: 0.75;
|
||
line-height: 150px;
|
||
margin: 0;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n) {
|
||
background-color: #99a9bf;
|
||
}
|
||
|
||
.el-carousel__item:nth-child(2n+1) {
|
||
background-color: #d3dce6;
|
||
}
|
||
|
||
.like {
|
||
cursor: pointer;
|
||
font-size: 25px;
|
||
display: inline-block;
|
||
}
|
||
|
||
</style>
|