day_01
parent
289035bd3c
commit
9a23eaf620
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header><el-menu
|
||||
default-active="1"
|
||||
class="el-menu-demo"
|
||||
mode="horizontal"
|
||||
background-color="#545c64"
|
||||
text-color="#fff"
|
||||
active-text-color="#ffd04b">
|
||||
<el-menu-item index="1">处理中心</el-menu-item>
|
||||
<el-submenu index="2">
|
||||
<template slot="title">我的工作台</template>
|
||||
<el-menu-item index="2-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-3">选项3</el-menu-item>
|
||||
<el-submenu index="2-4">
|
||||
<template slot="title">选项4</template>
|
||||
<el-menu-item index="2-4-1">选项1</el-menu-item>
|
||||
<el-menu-item index="2-4-2">选项2</el-menu-item>
|
||||
<el-menu-item index="2-4-3">选项3</el-menu-item>
|
||||
</el-submenu>
|
||||
</el-submenu>
|
||||
<el-menu-item index="3" disabled>消息中心</el-menu-item>
|
||||
<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
|
||||
</el-menu>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12" :offset="6">
|
||||
<router-view/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
|
||||
//例如：import 《组件名称》 from '《组件路径》,
|
||||
export default {
|
||||
name:"LayoutShop",
|
||||
|
||||
data() {
|
||||
//这里存放数据"
|
||||
|
||||
return {};
|
||||
},
|
||||
//计算属性 类似于data概念",
|
||||
|
||||
methods: {},
|
||||
//生命周期 - 创建完成（可以访问当前this实例）",
|
||||
created() {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.el-header, .el-footer {
|
||||
background-color: #B3C0D1;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.el-aside {
|
||||
background-color: #D3DCE6;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
}
|
||||
|
||||
.el-main {
|
||||
background-color: #E9EEF3;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
body > .el-container {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(5) .el-aside,
|
||||
.el-container:nth-child(6) .el-aside {
|
||||
line-height: 260px;
|
||||
}
|
||||
|
||||
.el-container:nth-child(7) .el-aside {
|
||||
line-height: 320px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -17,6 +17,16 @@ export function getInfo(id) {
|
|||
})
|
||||
}
|
||||
|
||||
|
||||
// 查询商品信息详细
|
||||
export function getDetailInfo(id) {
|
||||
return request({
|
||||
url: '/product/info/detail/' + id,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 新增商品信息
|
||||
export function addInfo(data) {
|
||||
return request({
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Vue from 'vue'
|
|||
import Router from 'vue-router'
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
|
||||
import LayoutShop from '@/Layout-shop'
|
||||
Vue.use(Router)
|
||||
|
||||
/**
|
||||
|
|
@ -73,6 +73,19 @@ export const constantRoutes = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: LayoutShop,
|
||||
redirect: 'product-detail',
|
||||
children: [
|
||||
{
|
||||
path: 'product-detail/:detailId(\\d+)',
|
||||
component: () => import('@/views/product/info/detail/index'),
|
||||
name: 'Demo',
|
||||
meta: {title: '商品详情', icon: 'dashboard', affix: true}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/user',
|
||||
component: Layout,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,243 @@
|
|||
<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>
|
||||
|
|
@ -115,6 +115,9 @@
|
|||
<el-table-column label="备注" align="center" prop="remark" />
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||
<template slot-scope="scope">
|
||||
<el-button class="link-type" @click="toProjectDetail(scope.row.id)">
|
||||
商品详情
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
|
|
@ -211,7 +214,7 @@
|
|||
</el-row>
|
||||
</div>
|
||||
<div v-show="stepNumber === 1">
|
||||
<el-form-item label="品类" prop="ruleId">
|
||||
<el-form-item label="品类" prop="type">
|
||||
<el-cascader
|
||||
style="width: 100%"
|
||||
v-model="categoryOptionValue"
|
||||
|
|
@ -291,7 +294,7 @@
|
|||
<span>属性值填写</span>
|
||||
</div>
|
||||
<el-row style="overflow-x: auto; height: 300px;">
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form ref="attributeForm" :model="form" label-width="80px">
|
||||
<el-col :span="6" v-for="attribute in attributeCheckedList">
|
||||
<el-form-item :label="attribute.name">
|
||||
<el-input v-model="attribute.value"></el-input>
|
||||
|
|
@ -349,7 +352,7 @@
|
|||
</el-table>
|
||||
</div>
|
||||
<div v-show="stepNumber === 3">
|
||||
<el-form-item label="商品描述">
|
||||
<el-form-item label="商品描述" prop="introduction">
|
||||
<editor v-model="form.introduction" :min-height="192"/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
|
@ -370,7 +373,7 @@ import {listBrand} from "@/api/product/brand";
|
|||
import {getTemplateAttribute, listCategory} from "@/api/product/category";
|
||||
import {listRule} from "@/api/product/rule";
|
||||
import {addAttribute} from "@/api/product/attribute";
|
||||
import attribute from '@/views/product/attribute/index.vue'
|
||||
|
||||
|
||||
export default {
|
||||
name: "Info",
|
||||
|
|
@ -515,6 +518,10 @@ export default {
|
|||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
toProjectDetail(detailId){
|
||||
let url = `${window.location.origin}/product-detail/${detailId}`;
|
||||
window.open(url)
|
||||
},
|
||||
oneSetting(){
|
||||
this.skuList.forEach(skuInfo =>{
|
||||
skuInfo.image = this.oneSettingForm.image
|
||||
|
|
|
|||
Loading…
Reference in New Issue