From 9a23eaf6201c9d8cfeedd7244e56f6234fbea4d7 Mon Sep 17 00:00:00 2001
From: yuanjunzhe <1374457292@qq.com>
Date: Thu, 28 Mar 2024 14:28:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Layout-shop/index.vue               |  89 +++++++++
 src/api/product/info.js                 |  10 +
 src/router/index.js                     |  15 +-
 src/views/product/info/detail/index.vue | 243 ++++++++++++++++++++++++
 src/views/product/info/index.vue        |  15 +-
 5 files changed, 367 insertions(+), 5 deletions(-)
 create mode 100644 src/Layout-shop/index.vue
 create mode 100644 src/views/product/info/detail/index.vue

diff --git a/src/Layout-shop/index.vue b/src/Layout-shop/index.vue
new file mode 100644
index 0000000..8ba6e89
--- /dev/null
+++ b/src/Layout-shop/index.vue
@@ -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>
diff --git a/src/api/product/info.js b/src/api/product/info.js
index 80b02c2..4db015d 100644
--- a/src/api/product/info.js
+++ b/src/api/product/info.js
@@ -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({
diff --git a/src/router/index.js b/src/router/index.js
index 2afac71..3cce363 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -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,
diff --git a/src/views/product/info/detail/index.vue b/src/views/product/info/detail/index.vue
new file mode 100644
index 0000000..a6cde30
--- /dev/null
+++ b/src/views/product/info/detail/index.vue
@@ -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>
diff --git a/src/views/product/info/index.vue b/src/views/product/info/index.vue
index 4cef2ae..668f2b9 100644
--- a/src/views/product/info/index.vue
+++ b/src/views/product/info/index.vue
@@ -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