From bac059eaf43c9216e5348ddf5b9d8fd107be337f Mon Sep 17 00:00:00 2001
From: Jiang Peng <2622360564@qq.com>
Date: Tue, 26 Mar 2024 20:34:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/product/info.js                      |   9 +-
 src/components/CheckAttribute/index.vue      |  15 +-
 src/components/CheckAttributeGroup/index.vue |  35 ++-
 src/components/CheckBrand/index.vue          |  43 ++-
 src/components/Editor/index.vue              |   3 +
 src/layout-shop/index.vue                    |  70 +++++
 src/main.js                                  |   7 +-
 src/router/index.js                          |  20 +-
 src/views/product/info/detail/index.vue      | 304 +++++++++++++++++++
 src/views/product/info/index.vue             | 146 ++++++++-
 src/views/product/shop/index.vue             | 229 ++++++++++++++
 11 files changed, 837 insertions(+), 44 deletions(-)
 create mode 100644 src/layout-shop/index.vue
 create mode 100644 src/views/product/info/detail/index.vue
 create mode 100644 src/views/product/shop/index.vue

diff --git a/src/api/product/info.js b/src/api/product/info.js
index 80b02c2..5288172 100644
--- a/src/api/product/info.js
+++ b/src/api/product/info.js
@@ -9,6 +9,13 @@ export function listInfo(query) {
   })
 }
 
+// 查询商品信息详细
+export function getDetailInfo(id) {
+  return request({
+    url: '/product/info/detail/' + id,
+    method: 'get'
+  })
+}
 // 查询商品信息详细
 export function getInfo(id) {
   return request({
@@ -29,7 +36,7 @@ export function addInfo(data) {
 // 修改商品信息
 export function updateInfo(data) {
   return request({
-    url: '/product/info/'+data.id,
+    url: '/product/info/'+data.projectAddModel.id,
     method: 'put',
     data: data
   })
diff --git a/src/components/CheckAttribute/index.vue b/src/components/CheckAttribute/index.vue
index 81fb799..5b20ab3 100644
--- a/src/components/CheckAttribute/index.vue
+++ b/src/components/CheckAttribute/index.vue
@@ -70,16 +70,29 @@ export default {
     value: {
       type: Array,
       default: []
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   watch: {
     value: {
       handler(val) {
         if (val.toString() !== this.attributeIdList.toString()){
-          this.attributeIdList = val
+          this.attributeIdList = val;
           this.checkedAttributeList = []
         }
       },
+      immediate: true,
+    },
+    checkedList: {
+      handler(val){
+        if (val !== undefined && val.length > 0){
+          this.checkedAttributeList = val;
+          this.attributeIdList = this.checkedAttributeList.map(checked => checked.id);
+        }
+      },
       immediate: true
     }
   },
diff --git a/src/components/CheckAttributeGroup/index.vue b/src/components/CheckAttributeGroup/index.vue
index a047454..d857d81 100644
--- a/src/components/CheckAttributeGroup/index.vue
+++ b/src/components/CheckAttributeGroup/index.vue
@@ -67,17 +67,10 @@ export default {
     value: {
       type: Array,
       default: []
-    }
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val.toString() !== this.attributeGroupIdList.toString()){
-          this.attributeGroupIdList = val
-          this.checkedAttributeGroupList = []
-        }
-      },
-      immediate: true
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   data() {
@@ -93,6 +86,26 @@ export default {
       attributeGroupList: []
     }
   },
+  watch: {
+    value: {
+      handler(val) {
+        if (val.toString() !== this.attributeGroupIdList.toString()){
+          this.attributeGroupIdList = val;
+          this.checkedAttributeGroupList = []
+        }
+      },
+      immediate: true,
+    },
+    checkedList: {
+      handler(val){
+        if (val !== undefined && val.length > 0){
+          this.checkedAttributeGroupList = val;
+          this.attributeGroupIdList = this.checkedAttributeGroupList.map(checked => checked.id);
+        }
+      },
+      immediate: true
+    }
+  },
   created() {
     this.queryAttributeGroup();
   },
diff --git a/src/components/CheckBrand/index.vue b/src/components/CheckBrand/index.vue
index 9f680b0..f0bfaa2 100644
--- a/src/components/CheckBrand/index.vue
+++ b/src/components/CheckBrand/index.vue
@@ -12,9 +12,9 @@
           <el-col :span="2" v-for="(brand, index) in checkedBrandList">
             <el-tag
               style="margin: 5px 10px"
-              :key="brand.name"
+              :key="brand.nam"
               closable @close="removeChecked(index)">
-              {{ brand.name }}
+              {{ brand.nam }}
             </el-tag>
           </el-col>
         </el-row>
@@ -27,7 +27,7 @@
         <el-row>
           <el-form :inline="true" :model="brandQuery" class="demo-form-inline">
             <el-form-item label="品牌名称">
-              <el-input v-model="brandQuery.name" placeholder="品牌名称"></el-input>
+              <el-input v-model="brandQuery.nam" placeholder="品牌名称"></el-input>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" @click="queryBrand">查询</el-button>
@@ -42,7 +42,7 @@
               :value="brand.id"
               :label="brand.id"
               @change="checkedBrand(brand)"
-              border>{{ brand.name }}
+              border>{{ brand.nam }}
             </el-checkbox>
           </el-col>
         </el-row>
@@ -67,17 +67,10 @@ export default {
     value: {
       type: Array,
       default: []
-    }
-  },
-  watch: {
-    vlue: {
-      handler(val) {
-        if (val.toString() !== this.brandIdList.toString()){
-          this.brandIdList = val
-          this.checkedBrandList = []
-        }
-      },
-      immediate: true
+    },
+    checkedList: {
+      type: Array,
+      default: null
     }
   },
   data() {
@@ -93,6 +86,26 @@ export default {
       brandList: []
     }
   },
+  watch: {
+    value: {
+      handler(val) {
+        if (val.toString() !== this.brandIdList.toString()){
+          this.brandIdList = val;
+          this.checkedBrandList = []
+        }
+      },
+      immediate: true,
+    },
+    checkedList: {
+      handler(val){
+        if (val !== undefined && val.length > 0){
+          this.checkedBrandList = val;
+          this.brandIdList = this.checkedBrandList.map(checked => checked.id);
+        }
+      },
+      immediate: true
+    }
+  },
   created() {
     this.queryBrand();
   },
diff --git a/src/components/Editor/index.vue b/src/components/Editor/index.vue
index 4d10bd8..7eb6e9f 100644
--- a/src/components/Editor/index.vue
+++ b/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') {
diff --git a/src/layout-shop/index.vue b/src/layout-shop/index.vue
new file mode 100644
index 0000000..91adb0f
--- /dev/null
+++ b/src/layout-shop/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "layoutShop"
+}
+</script>
+
+<style scoped>
+.el-header, el-footer {
+  background-color: #E9EEF3;
+  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: 260;
+}
+
+.el-container:nth-child(7).el.el-aside{
+  line-height: 320px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index ec9f715..8513d52 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,9 @@
-import Vue from 'vue'
+
+import Vue from 'vue';
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
 
 import Cookies from 'js-cookie'
 
diff --git a/src/router/index.js b/src/router/index.js
index 2afac71..a35c89a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,7 +2,8 @@ import Vue from 'vue'
 import Router from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
-
+import LayoutShop from "@/layout-shop/index.vue";
+import detail from "@/views/product/info/detail/index.vue";
 Vue.use(Router)
 
 /**
@@ -73,6 +74,23 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '',
+    component: LayoutShop,
+    redirect: 'product-detail',
+    children: [
+      {
+        path: 'product-detail/:detailId(\\d+)',
+        component: () => import('@/views/product/info/detail/index'),
+        name: 'ShopProduct',
+        meta: {title: '商品详情', icon: 'dashboard', affix: true}
+      }
+    ]
+  },
+  // {
+  //   path: '/gb',
+  //   component: detail
+  // },
   {
     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..4bae317
--- /dev/null
+++ b/src/views/product/info/detail/index.vue
@@ -0,0 +1,304 @@
+<template>
+  <div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="breadcrumb in receivedShop.categoryInfoList">{{breadcrumb.name}}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row :gutter="20" style="margin-top: 20px">
+      <el-col :span="12">
+        <el-carousel trigger="click" height="300px">
+          <el-carousel-item v-for="item in Products" :key="item">
+            <img :src="item" alt="坏了" width="100%" height="100%">
+          </el-carousel-item>
+        </el-carousel>
+        <div style="margin-top: 10px ">
+          <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="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="Feedback">
+                  <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">
+        {{receivedShop.projectInfo.name}}
+        商品规格 {{checkSkuInfo.sku}}
+        <h2 style="color: red">{{ checkSkuInfo.price }}</h2>
+        <el-card shadow="hover" style="width: 100%;">
+          <div style="width: 100%; display: inline-block; ">
+            <el-statistic :value="deadline2" time-indices title="🎉商品降价🎉">
+              <template slot="suffix">
+                抢购即将开始
+              </template>
+            </el-statistic>
+          </div>
+        </el-card>
+        <el-form ref="form" :model="form" label-width="80" style="margin-top: 30px">
+          <el-form-item v-for="(ruleAttr,index) in receivedShop.ruleAttrAddModelList":label="ruleAttr.name">
+            <!--             <el-radio-group  v-model="form['rule'+index]" @change="selectRuleSku">-->
+            <!--               <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>-->
+            <!--             </el-radio-group>-->
+            <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" :max="10" label="描述文字" ></el-input-number>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" >加入购物车</el-button>
+            <el-button>立即购买</el-button>
+          </el-form-item>
+        </el-form>
+        总价格{{num}}
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 50px">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span style="">商品详情</span>
+
+          <el-descriptions v-for="item in receivedShop.attributeGroupList" :title="attributeGroup.groupName" :column="1" >
+            <el-descriptions-item v-for="attribute in item.attributeList" :label="attribute.name">
+              {{attributeMap[attribute.id]}}
+            </el-descriptions-item>
+          </el-descriptions>
+
+
+          <el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
+                           title="其他属性" :column="1" >
+            <el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
+                                  :label="attributeInfo.name">
+              {{attributeMap[attributeInfo.id]}}
+            </el-descriptions-item>
+          </el-descriptions>
+
+          <el-descriptions v-if=" receivedShop.attributeInfoList.length !==0"
+                           title="其他属性" :column="1" >
+            <el-descriptions-item v-for="attributeInfo in receivedShop.attributeInfoList"
+                                  :label="attributeInfo.name">
+              {{attributeMap[attributeInfo.id]}}
+            </el-descriptions-item>
+          </el-descriptions>
+
+
+          <editor v-model="editorValue" :read-only="true"></editor>
+        </div>
+      </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,
+        price: 0
+      },
+      shopData: {},
+      receivedShop: {
+        projectInfo: {
+          name: ""
+        },
+        brandInfo: {
+          nam: ""
+        },
+        attributeInfoList: []
+      },
+      num: 1,
+      editorValue: "阿萨德刚",
+      attributeMap: [],
+      // 商品轮播图
+      Products: [],
+      checkSkuInfo: {
+        price : 0.00
+      },
+      price: 0.00,
+      attributeGroup: [],
+      deadline2 : Date.now() +  1 * 10000 // 10小时 * 60分钟/小时 * 60秒/分钟 * 1000毫秒/秒
+    }
+
+  },
+  created() {
+    const detailId=this.$route.params && this.$route.params.detailId
+    this.initProjectDetailInfo(detailId)
+    // this.parseShopFromRoute();
+    // 设置定时器
+    const timerId = setTimeout(() => {
+      // 时间到了，调用 hilarity 函数
+      this.hilarity();
+      clearTimeout(timerId);
+    }, this.deadline2 - Date.now());
+  },
+  watch: {
+    'form.num':{
+      handler:"updateNum",
+      immediate:true
+    }
+  },
+  methods:{
+    updateNum() {
+      this.num =  this.price * this.form.num
+      console.log("qqqqq",this.num)
+    },
+    hilarity() {
+      this.$notify({
+        title: "提示",
+        message: "时间已到",
+        duration: 0,
+      });
+    },
+    initSku(){
+      let sku =this.receivedShop.projectSkuInfoList[0]['sku'];
+      let skuArr =sku.split("-");
+      skuArr.forEach((rule,index) => {
+        this.form['rule'+index] = rule
+      })
+      this.selectRuleSku()
+
+    },
+    selectRuleSku(){
+      let ruleSize =this.receivedShop.ruleAttrAddModelList.length
+      let sku = "";
+      for (let index = 0 ; ;index++){
+        sku +=this.form['rule'+index]
+        if (index+1 === ruleSize){
+          break
+        }
+        sku += "-";
+      }
+      this.checkSkuInfo= this.receivedShop.projectSkuInfoList.find(skuInfo => skuInfo.sku === sku)
+      console.log("sdf",this.checkSkuInfo)
+      console.log("ppp",this.checkSkuInfo.price)
+      this.price = this.checkSkuInfo.price
+      this.updateNum()
+    },
+    initProjectDetailInfo(detailId){
+      getDetailInfo(detailId).then(response => {
+        this.receivedShop = response.data
+        console.log("商品",this.receivedShop)
+        let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
+        this.Products.push(...ccc)
+        this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
+          let key =productAttributeInfo.attributeId;
+          this.attributeMap[key] = productAttributeInfo["value"]
+        })
+
+        let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
+        console.log("hieng",ruleAttrLength)
+        for (let index = 0 ;index < ruleAttrLength ;index++){
+          this.form["rule"+index] = null
+        }
+        console.log("shjo",this.receivedShop.ruleAttrAddModelList)
+        this.initSku()
+      })
+    },
+    //商品列表
+    // parseShopFromRoute() {
+    //   // 尝试解析shop查询参
+    //     this.receivedShop = this.$route.query.shop;
+    //     // 确保receivedShop和data属性都存在，并且data下有name属性
+    //     console.log("hhhh ",this.receivedShop); // 打印店铺名称
+    //   // 图片轮播图
+    //   let ccc = this.receivedShop.projectInfo.carouselImages.split(',')
+    //   this.Products.push(...ccc)
+    //   this.receivedShop.productAttributeInfoList.map(productAttributeInfo => {
+    //      let key =productAttributeInfo.attributeId;
+    //      this.attributeMap[key] = productAttributeInfo["value"]
+    //   })
+    //
+    //  let ruleAttrLength = this.receivedShop.ruleAttrAddModelList.length;
+    //   console.log("hieng",ruleAttrLength)
+    //  for (let index = 0 ;index < ruleAttrLength ;index++){
+    //    this.form["rule"+index] = null
+    //  }
+    //  console.log("shjo",this.receivedShop.ruleAttrAddModelList)
+    //  this.initSku()
+    // },
+  },
+  beforeDestroy() {
+  }
+}
+</script>
+
+<style scoped>
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.75;
+  line-height: 200px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
+</style>
+
diff --git a/src/views/product/info/index.vue b/src/views/product/info/index.vue
index 57b5940..59d13f9 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"
@@ -183,11 +186,11 @@
                   <el-option
                     v-for="brand in brandList"
                     :key="brand.id"
-                    :label="brand.name"
+                    :label="brand.nam"
                     :value="brand.id">
                     <el-row>
                       <image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
-                      <div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.name}}</div>
+                      <div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
                     </el-row>
                   </el-option>
                 </el-select>
@@ -332,9 +335,11 @@
               <el-button type="primary" @click="oneSetting">一键设置</el-button>
             </el-form-item>
           </el-form>
+          {{skuList}}
           <el-table
             :data="skuList"
             border
+            max-height="500"
             style="width: 100%">
             <el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
               <template slot-scope="scope">
@@ -410,7 +415,15 @@ export default {
         brandId: null,
       },
       // 表单参数
-      form: {},
+      form: {
+        mianType: '',
+        parentType: '',
+        type:'',
+        image: '',
+        price: '',
+        stock: ''
+      },
+      fufObj: [],
       // 表单校验
       rules: {
         name: [
@@ -476,7 +489,9 @@ export default {
         "image": null,
         "stock": null,
         "price": null
-      }
+      },
+      respData:[],
+      fifObj: []
     };
   },
   watch: {
@@ -495,17 +510,56 @@ export default {
     },
     "form.type": {
       handler(value) {
-        console.log(value)
         if (value != null){
           getTemplateAttribute(value).then(response => {
+            console.log("res",response)
             const {data} = response;
             const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
             this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
             this.categoryCommonElement.templateAttributeList = templateAttributeList;
             this.categoryCommonElement.attributeList = attributeList;
-          })
-        }
 
+            console.log("resData",this.respData);
+            if (this.respData != null && this.respData.length !== 0){
+              this.categoryCommonElement.templateAttributeGroupList.forEach(template => {
+                template.attributeList.forEach(te => {
+                  this.respData.forEach(asPro => {
+                    if (te.id == asPro.attributeId){
+                      console.log("value",asPro.value)
+                      te.value = asPro.value;
+                      this.fufObj.push(asPro);
+                    }
+                  });
+                });
+              });
+
+              this.categoryCommonElement.templateAttributeList.forEach(tem => {
+                this.respData.forEach(asPro => {
+                  console.log(asPro)
+                  if (tem.id === asPro.attributeId){
+                    tem.value = asPro.value;
+                    this.fufObj.push(asPro);
+                  }
+                });
+              });
+
+              this.respData.forEach(asPro => {
+                if (!this.fufObj.includes(asPro)){
+                  this.attributeCheckedList.push(asPro);
+                }
+              });
+
+              this.categoryCommonElement.attributeList.forEach(attr => {
+                this.attributeCheckedList.forEach(attri => {
+                  if (attr.id == attri.attributeId){
+                    attri.name = attr.name;
+                    this.attributeIdCheckedList.push(Number(attr.id));
+                  }
+                });
+              });
+            }
+          });
+        }
       }
     }
   },
@@ -513,8 +567,13 @@ export default {
     this.getList();
   },
   methods: {
+    toProjectDetail(detailId){
+      let url = `${window.location.origin}/product-detail/${detailId}`;
+      window.open(url)
+    },
     oneSetting(){
       this.skuList.forEach(skuInfo => {
+        console.log(skuInfo)
         skuInfo.image = this.oneSettingForm.image;
         skuInfo.stock = this.oneSettingForm.stock;
         skuInfo.price = this.oneSettingForm.price;
@@ -523,7 +582,11 @@ export default {
     changeRule(ruleId){
       this.titleList = []
       let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
+
       const {ruleAttrList} = ruleInfo;
+
+      console.log(ruleInfo)
+      console.log(ruleAttrList)
       let skuTotal = 1;
       for (let ruleAttrListKey in ruleAttrList) {
         let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
@@ -534,7 +597,6 @@ export default {
         skuTotal = skuTotal * ruleAttrInfo.valueList.length;
       }
       this.titleList.push(...this.templateTitleList) ;
-      console.log(this.titleList);
       this.skuList = [];
       for (let i = 0; i < skuTotal; i++) {
         this.skuList.push(
@@ -626,7 +688,6 @@ export default {
       listCategory().then(response => {
         this.categoryOptions = [];
         this.categoryOptions = this.handleTree(response.data, "id", "parentId");
-        console.log(this.categoryOptions)
       });
     },
     remoteSearchBrandList(queryValue){
@@ -640,7 +701,7 @@ export default {
     next() {
       let isValidate = true;
       this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
-        console.log(valid)
+
         if (valid) {
           isValidate = false;
         }
@@ -675,13 +736,16 @@ export default {
         image: null,
         carouselImages: null,
         status: null,
-        ruleId: null,
         brandId: null,
         remark: null,
         createBy: null,
         createTime: null,
         updateBy: null,
-        updateTime: null
+        updateTime: null,
+        skuList: [],
+        titleList: [],
+        categoryCommonElement: [],
+        oneSettingForm: {}
       };
       this.resetForm("form");
       this.initCategoryTree();
@@ -706,15 +770,36 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.initCategoryTree()
       this.open = true;
+      this.skuList=[]
+      this.titleList= []
+      this.oneSettingForm = {}
       this.title = "添加商品信息";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
       this.reset();
       const id = row.id || this.ids
+
       getInfo(id).then(response => {
+        console.log("response",response)
+        this.respData = response.data.asProductAttributeInfos
         this.form = response.data;
+        console.log("sd",this.form.id)
+        this.initCategoryTree()
+        this.oneSettingForm = response.data.projectSkuInfos
+        this.categoryOptionValue = [Number(response.data.mianType),Number(response.data.parentType),Number(response.data.type)]
+        this.changeRule(response.data.ruleId)
+        console.log("sku",this.skuList)
+        console.log("skuu",response.data.projectSkuInfos)
+        for (var i = 0; i < this.skuList.length; i++) {
+          this.$set(this.skuList[i], 'image', response.data.projectSkuInfos[i].image);
+          this.$set(this.skuList[i], 'price', response.data.projectSkuInfos[i].price);
+          this.$set(this.skuList[i], 'stock', response.data.projectSkuInfos[i].stock);
+          console.log(this.skuList[i].price, response.data.projectSkuInfos[i].price);
+        }
+        console.log("sfdf",this.skuList)
         this.open = true;
         this.title = "修改商品信息";
       });
@@ -723,14 +808,47 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          let attrValueList = [];
+          for (const templateAttributeGroup of this.categoryCommonElement.templateAttributeGroupList) {
+            templateAttributeGroup.attributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          }
+
+          this.categoryCommonElement.templateAttributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          this.attributeCheckedList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === this.form.ruleId);
+          const {ruleAttrList} = ruleInfo;
+          let ruleAttrSize = ruleAttrList.length;
+          let productSkuList = this.skuList.map(skuInfo => {
+            let sku = "";
+            for (let index = 0; ; index++) {
+              sku += skuInfo["prop"+index];
+              if (index+1 >= ruleAttrSize){
+                break;
+              }else {
+                sku += "-";
+              }
+            }
+            return {
+              sku: sku,
+              image: skuInfo.image,
+              stock: skuInfo.stock,
+              price: skuInfo.price
+            }
+          })
+          let productAddReq = {
+            projectAddModel: this.form,
+            attrValueList: attrValueList,
+            productSkuList: productSkuList
+          };
+          console.log("pto",productAddReq)
           if (this.form.id != null) {
-            updateInfo(this.form).then(response => {
+            updateInfo(productAddReq).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addInfo(this.form).then(response => {
+            addInfo(productAddReq).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
diff --git a/src/views/product/shop/index.vue b/src/views/product/shop/index.vue
new file mode 100644
index 0000000..3ef5cd5
--- /dev/null
+++ b/src/views/product/shop/index.vue
@@ -0,0 +1,229 @@
+<template>
+  <div>
+    <div class="title">选购商品</div>
+    <table class="table" width="100%">
+      <template v-for="(item, index) in goodsList" v-if="index%2==0">
+        <tr>
+          <td class="video-row" @click="goto(item.id)">
+            <div class="row-line">
+              <img :src="item.image" style="width: 400px; height: 400px"/>
+              <div class="video-title">{{item.name}}</div>
+              <div>
+                <el-row :gutter="20">
+                  <el-col :span="8">
+                    <div>
+                      <el-statistic
+                        group-separator=","
+                        :precision="2"
+                        :value="value2"
+                        :title="title"
+                      ></el-statistic>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div>
+                      <el-statistic title="好评比">
+                        <template slot="formatter">
+                          456/2
+                        </template>
+                      </el-statistic>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div>
+                      <el-statistic :value="like ? 5 : 1" 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>
+            </div>
+          </td>
+          <!--添加td作为两行之间的间距，td中用&nbsp;进行占位-->
+          <td class="line-bg">&nbsp;</td>
+          <td v-if="index+1<goodsList.length" class="video-row"  @click="goto(goodsList[index+1].id,goodsList[index+1].title)">
+            <div class="row-line">
+              <img :src="goodsList[index+1].image" style="width: 400px; height: 400px"/>
+              <div class="video-title">{{goodsList[index+1].name}}</div>
+              <div>
+                <el-row :gutter="20">
+                  <el-col :span="8">
+                    <div>
+                      <el-statistic
+                        group-separator=","
+                        :precision="2"
+                        :value="value2"
+                        :title="title"
+                      ></el-statistic>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div>
+                      <el-statistic title="好评比">
+                        <template slot="formatter">
+                          456/2
+                        </template>
+                      </el-statistic>
+                    </div>
+                  </el-col>
+                  <el-col :span="8">
+                    <div>
+                      <el-statistic :value="like ? 4 : 520" title="Feedback">
+                        <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>
+            </div>
+          </td>
+        </tr>
+      </template>
+    </table>
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+
+import {getDetailInfo, listInfo} from "@/api/product/info";
+
+export default {
+  name: "ShopProduct",
+  //import引入的组件需要注入到对象中才能使用"
+  components: {},
+  props: {},
+  data() {
+    //这里存放数据"
+
+    return {
+      like: true,
+      value1: 4154.564,
+      value2: 1314,
+      title: "近期下单",
+      goodsList: [],
+      shop: {}
+    };
+  },
+  //计算属性 类似于data概念",
+  computed: {},
+  //监控data中的数据变化",
+  watch: {},
+  //方法集合",
+  methods: {
+    getALlGoods(){
+      listInfo().then(
+        res => {
+          console.log(res)
+          this.goodsList = res.data.rows
+        }
+      )
+    },
+    goto(id){
+      console.log(id)
+      getDetailInfo(id).then(response => {
+        console.log(response)
+        this.shop = response.data;
+        if (response && response.data){
+          let routeData = this.$router.resolve({ path: '/gb', query: { shop: this.shop } });
+          this.$router.push(routeData.route);
+        }else {
+          console.error("没有获取到表单数据")
+        }
+      });
+
+
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）",
+  created() {
+    this.getALlGoods()
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）",
+  mounted() {
+  },
+  beforeCreate() {
+  }, //生命周期 - 创建之前",
+  beforeMount() {
+  }, //生命周期 - 挂载之前",
+  beforeUpdate() {
+  }, //生命周期 - 更新之前",
+  updated() {
+  }, //生命周期 - 更新之后",
+  beforeDestroy() {
+  }, //生命周期 - 销毁之前",
+  destroyed() {
+  }, //生命周期 - 销毁完成",
+  activated() {
+  } //如果页面有keep-alive缓存功能，这个函数会触发",
+};
+</script>
+<style lang="scss" scoped>
+.wrapper {
+  height: 100%;
+  padding: 20px 20px 20px 20px;
+  font-size: 16px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+  color: #2A333F;
+  background-color: #f3f3f3;
+  line-height: 22px;
+}
+.title {
+  font-size: 14px;
+  text-align: center;
+  color:#091222;;
+  letter-spacing: 1px;
+  margin-bottom: 20px;
+}
+.table{
+  width:100%;
+}
+.video-row{
+  width: 48%;
+  height: 160px;
+  border-radius: 6px;
+  text-align: center;
+  .row-line{
+    background: #FFFFFF;
+  }
+  img {
+    width: 54px;
+    height: 54px;
+    margin: 35px 0 14px 0;
+  }
+}
+.line-bg{
+  width: 4%; //两列布局之间增加间距，HTML中添加&nbsp;占位
+  background: #f3f3f3;
+}
+.video-title {
+  margin-bottom: 15px;
+  padding-bottom: 34px;
+}
+.like {
+  cursor: pointer;
+  font-size: 25px;
+  display: inline-block;
+}
+</style>