day_01
parent
9a23eaf620
commit
a0044d3d20
|
|
@ -4,20 +4,16 @@
|
|||
<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-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-row :gutter="20" style="margin-top: 20px">
|
||||
<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-carousel trigger="click" height="400px">
|
||||
<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;">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div>
|
||||
|
|
@ -40,12 +36,11 @@
|
|||
<div>
|
||||
<el-statistic
|
||||
group-separator=","
|
||||
:precision="2"
|
||||
:precision="0"
|
||||
decimal-separator="."
|
||||
:value="123"
|
||||
title="收藏人气"
|
||||
>
|
||||
|
||||
</el-statistic>
|
||||
</div>
|
||||
</el-col>
|
||||
|
|
@ -53,51 +48,37 @@
|
|||
<div>
|
||||
<el-statistic title="品牌信息">
|
||||
<template slot="formatter">
|
||||
{{projectDetail.brandInfo.name}}
|
||||
{{projectDetail.brandInfo.nam}}
|
||||
</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">
|
||||
<h1>商品名称</h1>
|
||||
<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-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="数量">
|
||||
<el-input-number v-model="form.num" :min="1" label="数量">
|
||||
</el-input-number>
|
||||
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="warning" @click="onSubmit">加入购物车</el-button>
|
||||
<el-button type="primary">加入购物车</el-button>
|
||||
<el-button>立即购买</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 30px">
|
||||
<el-row style="margin-top: 30px;">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>商品详情</span>
|
||||
|
|
@ -116,108 +97,85 @@
|
|||
</editor>
|
||||
</el-card>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getDetailInfo} from "@/api/product/info";
|
||||
|
||||
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();
|
||||
export default {
|
||||
name: "productDetail",
|
||||
data() {
|
||||
return {
|
||||
like: true,
|
||||
value1: 415,
|
||||
value2: 1314,
|
||||
title: "销量人气",
|
||||
form: {
|
||||
num: 1
|
||||
},
|
||||
|
||||
selectRuleSku(){
|
||||
let ruleSize = this.projectDetail.ruleAttrModelList.length;
|
||||
let sku="";
|
||||
for (let index = 0;;index++){
|
||||
sku += this.form['rule'+index];
|
||||
if (index+1 == ruleSize){
|
||||
break
|
||||
}
|
||||
projectDetail: {
|
||||
projectInfo: {
|
||||
name: ""
|
||||
},
|
||||
brandInfo: {
|
||||
nam: ""
|
||||
},
|
||||
attributeInfoList: []
|
||||
},
|
||||
checkSkuInfo: {
|
||||
price: 0.00
|
||||
},
|
||||
carouselImages: [],
|
||||
attributeMap: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const detailId = this.$route.params && this.$route.params.detailId;
|
||||
this.initProjectDetailInfo(detailId);
|
||||
},
|
||||
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(){
|
||||
|
||||
sku += "-";
|
||||
}
|
||||
this.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
|
||||
},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
const detailId = this.$route.params && this.$route.params.detailId
|
||||
this.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"]
|
||||
})
|
||||
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();
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
<style scoped>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
font-size: 14px;
|
||||
|
|
@ -233,11 +191,7 @@ import rule from '@/views/product/rule/index.vue'
|
|||
.el-carousel__item:nth-child(2n+1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
|
||||
.like {
|
||||
cursor: pointer;
|
||||
font-size: 25px;
|
||||
display: inline-block;
|
||||
.ql-toolbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue