商品详情页面

package.json

@@ -41,7 +41,7 @@
     "clipboard": "2.0.8",
     "core-js": "3.25.3",
     "echarts": "5.4.0",
-    "element-ui": "2.15.13",
+    "element-ui": "^2.15.13",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",

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({

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/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'
 

src/router/index.js

@@ -3,6 +3,7 @@ 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)
 
 /**
@@ -80,12 +81,16 @@ export const constantRoutes = [
     children: [
       {
         path: 'product-detail',
-        component: () => import('@/views/product/info/detail/index'),
+        component: () => import('@/views/product/shop/index'),
-        name: 'Demo',
+        name: 'ShopProduct',
         meta: {title: '商品详情', icon: 'dashboard', affix: true}
       }
     ]
   },
+  {
+    path: '/gb',
+    component: detail
+  },
   {
     path: '/user',
     component: Layout,

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

@@ -2,17 +2,28 @@
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-       <el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{breadcrumb}}</el-breadcrumb-item>
+       <el-breadcrumb-item v-for="breadcrumb in receivedShop.categoryInfoList">{{breadcrumb.name}}</el-breadcrumb-item>
      </el-breadcrumb>
-     <el-row :gutter="20">
+     <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
-         <el-carousel trigger="click" height="150px">
+         <el-carousel trigger="click" height="300px">
-           <el-carousel-item v-for="item in 4" :key="item">
+           <el-carousel-item v-for="item in Products" :key="item">
-             <h3 class="small">{{ item }}</h3>
+             <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="12">
+             <el-col :span="6">
                <div>
                  <el-statistic title="男女比">
                    <template slot="formatter">
@@ -21,13 +32,106 @@
                  </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}}
+             <h2 style="color: red">125</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.ruleAttrModelList":label="ruleAttr.name">
+             <el-radio-group  v-model="form['rule'+index]">
+               <el-radio v-for="value in ruleAttr.valueList" :label="value" border>{{value}}</el-radio>
+             </el-radio-group>
+           </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>
+
+       </el-col>
+     </el-row>
+     <el-row style="margin-top: 50px">
+       <el-card class="box-card">
+         <div slot="header" class="clearfix">
+           <span style="">商品详情</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-item label="备注">
+             <el-tag size="small">学校</el-tag>
+           </el-descriptions-item>
+           <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
+         </el-descriptions>
+         <editor v-model="editorValue" :read-only="true"></editor>
+       </el-card>
      </el-row>
    </div>
 </template>
 
 <script>
+import {getInfo} from "@/api/product/info";
+
 export default {
-  name: "productDetail",
+  name: "Detailindex",
   data() {
     return {
       breadcrumbList: [
@@ -39,14 +143,61 @@ export default {
       value1: 4154.564,
       value2: 1314,
       title: "增长人数",
+      form: {
+        num: 1,
+        rule0: '', // 第一个规格的默认值
+        rule1: '', // 第二个规格的默认值
+        rule2: '', // 第三个规格的默认值
+      },
+      shopData: {},
+      receivedShop: {},
+      editorValue: "阿萨德刚",
+      deadline2: Date.now() + 10 * 60 * 60 ,
+      // 商品轮播图
+      Products: []
     }
+
   },
   created() {
+    this.parseShopFromRoute();
   },
-  methods:{}
+  methods:{
+    hilarity() {
+      this.$notify({
+        title: "提示",
+        message: "时间已到",
+        duration: 0,
+      });
+    },
+    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)
+
+    }
+  }
 }
 </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>
+

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>