day_01
parent
9a23eaf620
commit
a0044d3d20
|
|
@ -4,20 +4,16 @@
|
||||||
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
<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-breadcrumb>
|
||||||
|
<el-row :gutter="20" style="margin-top: 20px">
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<div class="block" style="margin-top: 30px">
|
<el-carousel trigger="click" height="400px">
|
||||||
<el-carousel trigger="click" height="500px">
|
<el-carousel-item v-for="item in carouselImages" :key="item">
|
||||||
<el-carousel-item v-for="item in carouselImages" :key="item">
|
<el-image :src="item" style="height: 100%; width: 100%"/>
|
||||||
<el-image :src="item" style="width: 100%;height: 100%"/>
|
</el-carousel-item>
|
||||||
</el-carousel-item>
|
</el-carousel>
|
||||||
</el-carousel>
|
<div style="margin-top: 20px;">
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin-top: 30px">
|
|
||||||
<el-row :gutter="20">
|
<el-row :gutter="20">
|
||||||
<el-col :span="6">
|
<el-col :span="6">
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -40,12 +36,11 @@
|
||||||
<div>
|
<div>
|
||||||
<el-statistic
|
<el-statistic
|
||||||
group-separator=","
|
group-separator=","
|
||||||
:precision="2"
|
:precision="0"
|
||||||
decimal-separator="."
|
decimal-separator="."
|
||||||
:value="123"
|
:value="123"
|
||||||
title="收藏人气"
|
title="收藏人气"
|
||||||
>
|
>
|
||||||
|
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
|
|
@ -53,51 +48,37 @@
|
||||||
<div>
|
<div>
|
||||||
<el-statistic title="品牌信息">
|
<el-statistic title="品牌信息">
|
||||||
<template slot="formatter">
|
<template slot="formatter">
|
||||||
{{projectDetail.brandInfo.name}}
|
{{projectDetail.brandInfo.nam}}
|
||||||
</template>
|
</template>
|
||||||
</el-statistic>
|
</el-statistic>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12">
|
<el-col :span="12">
|
||||||
<h1 style="margin-left: 50px">商品名称</h1>
|
<h1>商品名称</h1>
|
||||||
<h1 style="margin-left: 400px;margin-top: -45px;color: orangered;">￥{{ checkSkuInfo.price }}</h1>
|
<h3>商品规格（{{checkSkuInfo.sku}}）</h3>
|
||||||
<h3 style="color: #99a9bf;margin-left: 75px">{{ checkSkuInfo.sku }}</h3>
|
<h2 style="color: red">￥{{checkSkuInfo.price}}</h2>
|
||||||
<h3 style="color: #99a9bf;margin-left: 400px;margin-top: -40px">秒杀价格</h3>
|
<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">
|
||||||
<div style="width: 100%; display: inline-block; background-color: orangered;">
|
<!-- <el-radio-group v-model="form['rule'+index]" @change="selectRuleSku">
|
||||||
<el-statistic :value="deadline2" time-indices title="商品秒杀 距离结束还有">
|
</el-radio-group>-->
|
||||||
</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"
|
<el-radio v-model="form['rule'+index]" @change="selectRuleSku"
|
||||||
v-for="value in ruleAttr.valueList"
|
v-for="value in ruleAttr.valueList"
|
||||||
:label="value" :key="value" :value="value" border>{{value}}</el-radio>
|
:label="value" :key="value" :value="value" border>{{value}}</el-radio>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<el-form-item label="数量">
|
<el-form-item label="数量">
|
||||||
<el-input-number v-model="form.num" :min="1" label="数量">
|
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
|
||||||
</el-input-number>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<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-button>立即购买</el-button>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
<el-row style="margin-top: 30px;">
|
||||||
<el-row style="margin-top: 30px">
|
|
||||||
<el-card class="box-card">
|
<el-card class="box-card">
|
||||||
<div slot="header" class="clearfix">
|
<div slot="header" class="clearfix">
|
||||||
<span>商品详情</span>
|
<span>商品详情</span>
|
||||||
|
|
@ -116,108 +97,85 @@
|
||||||
</editor>
|
</editor>
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-row>
|
</el-row>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import {getDetailInfo} from "@/api/product/info";
|
||||||
|
|
||||||
import {getDetailInfo} from '@/api/product/info'
|
export default {
|
||||||
import rule from '@/views/product/rule/index.vue'
|
name: "productDetail",
|
||||||
|
data() {
|
||||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
return {
|
||||||
//例如：import 《组件名称》 from '《组件路径》,
|
like: true,
|
||||||
export default {
|
value1: 415,
|
||||||
|
value2: 1314,
|
||||||
name: 'productDetail',
|
title: "销量人气",
|
||||||
//import引入的组件需要注入到对象中才能使用"
|
form: {
|
||||||
|
num: 1
|
||||||
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();
|
|
||||||
},
|
},
|
||||||
|
projectDetail: {
|
||||||
selectRuleSku(){
|
projectInfo: {
|
||||||
let ruleSize = this.projectDetail.ruleAttrModelList.length;
|
name: ""
|
||||||
let sku="";
|
},
|
||||||
for (let index = 0;;index++){
|
brandInfo: {
|
||||||
sku += this.form['rule'+index];
|
nam: ""
|
||||||
if (index+1 == ruleSize){
|
},
|
||||||
break
|
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)
|
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.checkSkuInfo = this.projectDetail.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
|
||||||
},
|
},
|
||||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
initProjectDetailInfo(detailId){
|
||||||
created() {
|
getDetailInfo(detailId).then(response => {
|
||||||
const detailId = this.$route.params && this.$route.params.detailId
|
this.projectDetail = response.data;
|
||||||
this.initProjectDetailInfo(detailId)
|
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>
|
</script>
|
||||||
<style scoped>
|
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
.el-carousel__item h3 {
|
.el-carousel__item h3 {
|
||||||
color: #475669;
|
color: #475669;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
@ -233,11 +191,7 @@ import rule from '@/views/product/rule/index.vue'
|
||||||
.el-carousel__item:nth-child(2n+1) {
|
.el-carousel__item:nth-child(2n+1) {
|
||||||
background-color: #d3dce6;
|
background-color: #d3dce6;
|
||||||
}
|
}
|
||||||
|
.ql-toolbar{
|
||||||
.like {
|
display: none;
|
||||||
cursor: pointer;
|
|
||||||
font-size: 25px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue