商品详情页

src/api/product/info.js

@@ -16,6 +16,13 @@ export function getInfo(id) {
     method: 'get'
   })
 }
+// 查询商品信息详细
+export function getDetailInfo(id) {
+  return request({
+    url: '/product/info/detail/' + id,
+    method: 'get'
+  })
+}
 
 // 新增商品信息
 export function addInfo(data) {

src/components/Editor/index.vue

@@ -124,6 +124,9 @@ export default {
   methods: {
     init() {
       const editor = this.$refs.editor;
+      if (this.readOnly){
+        this.options.modules.toolbar = {};
+      }
       this.Quill = new Quill(editor, this.options);
       // 如果设置了上传地址则自定义图片上传事件
       if (this.type == 'url') {

src/layout-shop/index.vue

@@ -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>

src/router/index.js

@@ -2,6 +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 +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',
     component: Layout,

src/views/product/info/detail/index.vue

@@ -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>