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) {
|
export function addInfo(data) {
|
||||||
return request({
|
return request({
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import Vue from 'vue'
|
||||||
import Router from 'vue-router'
|
import Router from 'vue-router'
|
||||||
/* Layout */
|
/* Layout */
|
||||||
import Layout from '@/layout'
|
import Layout from '@/layout'
|
||||||
|
import LayoutShop from '@/Layout-shop'
|
||||||
Vue.use(Router)
|
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',
|
path: '/user',
|
||||||
component: Layout,
|
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" prop="remark" />
|
||||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
<el-button class="link-type" @click="toProjectDetail(scope.row.id)">
|
||||||
|
商品详情
|
||||||
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
size="mini"
|
size="mini"
|
||||||
type="text"
|
type="text"
|
||||||
|
|
@ -211,7 +214,7 @@
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="stepNumber === 1">
|
<div v-show="stepNumber === 1">
|
||||||
<el-form-item label="品类" prop="ruleId">
|
<el-form-item label="品类" prop="type">
|
||||||
<el-cascader
|
<el-cascader
|
||||||
style="width: 100%"
|
style="width: 100%"
|
||||||
v-model="categoryOptionValue"
|
v-model="categoryOptionValue"
|
||||||
|
|
@ -291,7 +294,7 @@
|
||||||
<span>属性值填写</span>
|
<span>属性值填写</span>
|
||||||
</div>
|
</div>
|
||||||
<el-row style="overflow-x: auto; height: 300px;">
|
<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-col :span="6" v-for="attribute in attributeCheckedList">
|
||||||
<el-form-item :label="attribute.name">
|
<el-form-item :label="attribute.name">
|
||||||
<el-input v-model="attribute.value"></el-input>
|
<el-input v-model="attribute.value"></el-input>
|
||||||
|
|
@ -349,7 +352,7 @@
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
<div v-show="stepNumber === 3">
|
<div v-show="stepNumber === 3">
|
||||||
<el-form-item label="商品描述">
|
<el-form-item label="商品描述" prop="introduction">
|
||||||
<editor v-model="form.introduction" :min-height="192"/>
|
<editor v-model="form.introduction" :min-height="192"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -370,7 +373,7 @@ import {listBrand} from "@/api/product/brand";
|
||||||
import {getTemplateAttribute, listCategory} from "@/api/product/category";
|
import {getTemplateAttribute, listCategory} from "@/api/product/category";
|
||||||
import {listRule} from "@/api/product/rule";
|
import {listRule} from "@/api/product/rule";
|
||||||
import {addAttribute} from "@/api/product/attribute";
|
import {addAttribute} from "@/api/product/attribute";
|
||||||
import attribute from '@/views/product/attribute/index.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Info",
|
name: "Info",
|
||||||
|
|
@ -515,6 +518,10 @@ export default {
|
||||||
this.getList();
|
this.getList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
toProjectDetail(detailId){
|
||||||
|
let url = `${window.location.origin}/product-detail/${detailId}`;
|
||||||
|
window.open(url)
|
||||||
|
},
|
||||||
oneSetting(){
|
oneSetting(){
|
||||||
this.skuList.forEach(skuInfo =>{
|
this.skuList.forEach(skuInfo =>{
|
||||||
skuInfo.image = this.oneSettingForm.image
|
skuInfo.image = this.oneSettingForm.image
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue