商品详情页
DongZeLiang
parent
4d69cfa12f
commit
9c60ed8699
|
|
@ -16,6 +16,13 @@ export function getInfo(id) {
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
// 查询商品信息详细
|
||||||
|
export function getDetailInfo(id) {
|
||||||
|
return request({
|
||||||
|
url: '/product/info/detail/' + id,
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
// 新增商品信息
|
// 新增商品信息
|
||||||
export function addInfo(data) {
|
export function addInfo(data) {
|
||||||
|
|
|
||||||
|
|
@ -124,6 +124,9 @@ export default {
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
init() {
|
||||||
const editor = this.$refs.editor;
|
const editor = this.$refs.editor;
|
||||||
|
if (this.readOnly){
|
||||||
|
this.options.modules.toolbar = {};
|
||||||
|
}
|
||||||
this.Quill = new Quill(editor, this.options);
|
this.Quill = new Quill(editor, this.options);
|
||||||
// 如果设置了上传地址则自定义图片上传事件
|
// 如果设置了上传地址则自定义图片上传事件
|
||||||
if (this.type == 'url') {
|
if (this.type == 'url') {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
<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>
|
||||||
|
export default {
|
||||||
|
name: "layoutShop",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.el-header, .el-footer {
|
||||||
|
background-color: #B3C0D1;
|
||||||
|
color: #333;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
|
.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>
|
||||||
|
|
@ -2,6 +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 +74,19 @@ export const constantRoutes = [
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '',
|
||||||
|
component: LayoutShop,
|
||||||
|
redirect: 'product-detail',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'product-detail',
|
||||||
|
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,186 @@
|
||||||
|
<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" style="margin-top: 20px">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-carousel trigger="click" height="400px">
|
||||||
|
<el-carousel-item v-for="item in 4" :key="item">
|
||||||
|
<h3 class="small">{{ item }}</h3>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
<div style="margin-top: 20px;">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="6">
|
||||||
|
<div>
|
||||||
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
:value="value2"
|
||||||
|
:title="title"
|
||||||
|
></el-statistic>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<div>
|
||||||
|
<el-statistic title="商品评价">
|
||||||
|
<template slot="formatter">
|
||||||
|
456/2
|
||||||
|
</template>
|
||||||
|
</el-statistic>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<div>
|
||||||
|
<el-statistic
|
||||||
|
group-separator=","
|
||||||
|
:precision="2"
|
||||||
|
decimal-separator="."
|
||||||
|
:value="value1"
|
||||||
|
title="收藏人气"
|
||||||
|
>
|
||||||
|
<template slot="prefix">
|
||||||
|
<i class="el-icon-s-flag" style="color: red"></i>
|
||||||
|
</template>
|
||||||
|
<template slot="suffix">
|
||||||
|
<i class="el-icon-s-flag" style="color: blue"></i>
|
||||||
|
</template>
|
||||||
|
</el-statistic>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<div>
|
||||||
|
<el-statistic :value="like ? 521 : 520" title="品牌信息">
|
||||||
|
<template slot="suffix">
|
||||||
|
<span @click="like = !like" class="like">
|
||||||
|
<i
|
||||||
|
class="el-icon-star-on"
|
||||||
|
style="color:red"
|
||||||
|
v-show="!!like"
|
||||||
|
></i>
|
||||||
|
<i class="el-icon-star-off" v-show="!like"></i>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-statistic>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<h1>商品名称</h1>
|
||||||
|
<h3>商品规格（内存-储存-颜色）</h3>
|
||||||
|
<h2 style="color: red">￥125</h2>
|
||||||
|
<el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
|
||||||
|
<el-form-item label="规格1">
|
||||||
|
<el-radio-group v-model="form.rule1">
|
||||||
|
<el-radio :label="3" border>备选项</el-radio>
|
||||||
|
<el-radio :label="6" border>备选项</el-radio>
|
||||||
|
<el-radio :label="9" border>备选项</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="规格2">
|
||||||
|
<el-radio-group v-model="form.rule2">
|
||||||
|
<el-radio :label="3" border>备选项</el-radio>
|
||||||
|
<el-radio :label="6" border>备选项</el-radio>
|
||||||
|
<el-radio :label="9" border>备选项</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="规格2">
|
||||||
|
<el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @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 title="分组1" :column="1">
|
||||||
|
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="备注">
|
||||||
|
<el-tag size="small">学校</el-tag>
|
||||||
|
</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<el-descriptions title="其他属性" :column="1">
|
||||||
|
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
|
||||||
|
<el-descriptions-item label="居住地">苏州市</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
|
||||||
|
<editor v-model="editorValue" :read-only="true" >
|
||||||
|
|
||||||
|
</editor>
|
||||||
|
</el-card>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {getDetailInfo} from "@/api/product/info";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "productDetail",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
breadcrumbList: [
|
||||||
|
"服装",
|
||||||
|
"外衣",
|
||||||
|
"女式超柔软拉毛运动开衫"
|
||||||
|
],
|
||||||
|
like: true,
|
||||||
|
value1: 4154.564,
|
||||||
|
value2: 1314,
|
||||||
|
title: "销量人气",
|
||||||
|
form: {
|
||||||
|
num: 1
|
||||||
|
},
|
||||||
|
editorValue: "awejfoiajovhahrfhaowiejfoawijfeoiawjefoawjjogihao",
|
||||||
|
projectDetail: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.initProjectDetailInfo();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initProjectDetailInfo(){
|
||||||
|
getDetailInfo(2).then(response => {
|
||||||
|
this.projectDetail = response.data;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
.ql-toolbar{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue