Halaman utama Jelajahi Bantuan
Daftar Masuk
zwq
/
tuanfeng-pc-mer
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

添加了赠送代金券以及选品静态完成

wzy 1 tahun lalu
induk
39403e712c
melakukan
9b2e6f3136
17 mengubah file dengan 1434 tambahan dan 11 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 2 2
      .env.development
  2. 1 1
      package.json
  3. 5 0
      public/index.html
  4. 11 0
      src/api/selectionCenter.js
  5. 1 1
      src/layout/components/AppMain.vue
  6. 1 1
      src/router/index.js
  7. 3 3
      src/views/commodity/commoditySystem/addCommodity.vue
  8. 21 2
      src/views/commodity/commoditySystem/addComponent.vue
  9. 1 1
      src/views/commodity/commoditySystem/index.vue
  10. 309 0
      src/views/selectionCenter/management/components/detailPage.vue
  11. 247 0
      src/views/selectionCenter/management/components/mySelection.vue
  12. TEMPAT SAMPAH
      src/views/selectionCenter/management/image/bg.png
  13. TEMPAT SAMPAH
      src/views/selectionCenter/management/image/logo.png
  14. TEMPAT SAMPAH
      src/views/selectionCenter/management/image/qw.png
  15. TEMPAT SAMPAH
      src/views/selectionCenter/management/image/test.png
  16. 533 0
      src/views/selectionCenter/management/index.scss
  17. 299 0
      src/views/selectionCenter/management/index.vue

+ 2 - 2
.env.development
Tampilan Berkas 

@@ -4,8 +4,8 @@ ENV = 'development'
 
 # base api
 
 VUE_APP_BASE_API = '/dev-api'
 
 # 开发环境
 
-# VUE_APP_DOMAIN_PREFIX = 'http://192.168.0.91:9104'
 
-VUE_APP_DOMAIN_PREFIX = '/businessapi'
 
+VUE_APP_DOMAIN_PREFIX = 'http://192.168.0.91:9104'
 
+# VUE_APP_DOMAIN_PREFIX = '/businessapi'
 
 
 # 演示环境
 
 # VUE_APP_DOMAIN_PREFIX = 'http://192.168.0.91:9104'

+ 1 - 1
package.json
Tampilan Berkas 

@@ -27,7 +27,7 @@
 
 		"screenfull": "^5.0.2",
 
 		"swiper": "^5.4.5",
 
 		"vue": "2.6.10",
 
-		"vue-awesome-swiper": "^4.1.0",
 
+		"vue-awesome-swiper": "^4.1.1",
 
 		"vue-lang": "^0.2.5",
 
 		"vue-quill-editor": "^3.0.6",
 
 		"vue-router": "3.0.6",

+ 5 - 0
public/index.html
Tampilan Berkas 

@@ -9,6 +9,11 @@
 
 	<title>
 
 		<%= webpackConfig.name %>
 
 	</title>
 
+	<style>
 
+		.el-popup-parent--hidden{
 
+			padding-right: 0px !important;
 
+		}
 
+	</style>
 
 </head>
 
 
 <body>

+ 11 - 0
src/api/selectionCenter.js
Tampilan Berkas 

@@ -0,0 +1,11 @@
 
+import request from '@/utils/request'
 
+
 
+
 
+// 查询选品中心的数据
 
+export function getSelectionData(data) {
 
+    return request({
 
+      url: '/platformProduct/getClaasifyProducts',
 
+      method: 'post',
 
+      data
 
+    })
 
+  }

+ 1 - 1
src/layout/components/AppMain.vue
Tampilan Berkas 

@@ -23,7 +23,7 @@ export default {
 
   min-height: calc(100vh - 50px);
 
   width: 100%;
 
   position: relative;
 
-  overflow: hidden;
 
+  overflow-x: hidden;
 
   background: #f7f7f7;
 
 }
 
 .fixed-header + .app-main {

+ 1 - 1
src/router/index.js
Tampilan Berkas 

@@ -772,7 +772,7 @@ const router = createRouter()
 
 
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 
 export function resetRouter() {
 
-  const newRouter = createRouter()
 
+  const newRouter = createRouter();
 
   router.matcher = newRouter.matcher // reset router
 
 }

+ 3 - 3
src/views/commodity/commoditySystem/addCommodity.vue
Tampilan Berkas 

@@ -70,8 +70,8 @@
 
                 <el-option                  @change="handleChangeCascader"
 
                 v-for="(item, index) in groupList" :key="index" :label="item.groupName"
 
                 :value="item.shopGroupId"
 
-                /> -->
 
-              </el-select>
 
+                />
 
+              </el-select> -->
 
             </el-form-item>
 
             <el-form-item label="品牌">
 
               <el-select v-model="form.brandId" clearable placeholder="请选择品牌">
 
@@ -605,7 +605,7 @@ export default {
 
       //   }
 
       // })
 
       this.params.skuList = this.form.skus
 
-      this.params.attrStyle = res.data.skus[0].style
 
+      this.params.attrStyle = res.data.skus[0]?.style
 
       this.params.imgs = res.data.images
 
     },
 
     async selectList() {

+ 21 - 2
src/views/commodity/commoditySystem/addComponent.vue
Tampilan Berkas 

@@ -82,6 +82,16 @@
 
               />
 
             </template>
 
           </el-table-column>
 
+          <el-table-column label="赠送代金券">
 
+            <template slot-scope="scope">
 
+              <span>代金券</span>
 
+              <!-- <el-input-number
 
+                v-model="scope.row.presenter_voucher" :controls="false" :max="999" :min="0"
 
+                :precision="2"
 
+                :step="0.01" style="width: auto;"
 
+              /> -->
 
+            </template>
 
+          </el-table-column>
 
           <el-table-column label="代金卷最大抵扣额度(一般设置全额抵扣)">
 
             <template slot-scope="scope">
 
               <el-input-number v-model="scope.row.voucherPrice" :controls="false" :min="0" :precision="6" :step="0.01" style="width: auto;" />
 
@@ -185,6 +195,15 @@
 
               />
 
             </template>
 
           </el-table-column>
 
+          <el-table-column label="赠送代金券">
 
+            <template slot-scope="scope">
 
+              <el-input-number
 
+                v-model="scope.row.presenterVoucher" :controls="false" :max="scope.row.price" :min="0"
 
+                :precision="6"
 
+                :step="1" style="width: auto;"
 
+              />
 
+            </template>
 
+          </el-table-column>
 
           <el-table-column label="代金卷最大抵扣额度(一般设置全额抵扣)">
 
             <template #header="scope">
 
               <div>代金卷最大抵扣额度(一般设置全额抵扣)<el-button type="warning" size="mini" @click="$emit('syncVoucherPrice')">同步售价</el-button></div>
 
@@ -307,7 +326,7 @@ export default {
 
       },
 
       fileList: [],
 
       //  记录当前是哪里增加或者删除的
 
-      idx:null
 
+      idx:null,
 
     }
 
   },
 
   computed: {
 
@@ -414,7 +433,7 @@ export default {
 
         this.form.deletes.splice(this.form.deletes.length - 1,1)
 
       }
 
       // console.log(JSON.parse(JSON.stringify(this.form)))
 
-      console.log(this.form.skuAttrList[index])
 
+      // console.log(this.form.skuAttrList[index])
 
     },
 
     addSkuAttrList() {
 
       // eslint-disable-next-line vue/no-mutating-props

+ 1 - 1
src/views/commodity/commoditySystem/index.vue
Tampilan Berkas 

@@ -330,7 +330,7 @@ export default {
 
         message: '数据导出中，请勿重复操作！',
 
         type: 'success'
 
       })
 
-      const res = await productExport(this.formInline)
 
+      const res = await productExport(this.formInline);
 
       if (!res) { return }
 
       const blob = new Blob([ res ], { type: 'application/vnd.ms-excel' })
 
       const fileName = '商品数据明细表.xls'

+ 309 - 0
src/views/selectionCenter/management/components/detailPage.vue
Tampilan Berkas 

@@ -0,0 +1,309 @@
 
+<template>
 
+    <div class="detailPage">
 
+        <div class="top">
 
+            <div class="swiper-box" style="height: 560px">
 
+                <!-- swiper1 -->
 
+                <Swiper ref="swiperTop" :options="swiperOptionTop" class="gallery-top">
 
+                    <SwiperSlide v-for="(item) in productData.images" :key="item"
 
+                        :style="{ backgroundImage: 'url(' + item + ')' }">
 
+                    </SwiperSlide>
 
+                </Swiper>
 
+                <!-- swiper2 Thumbs -->
 
+                <div class="swiperThumbsLeft">
 
+                    <div class="thumbsBox">
 
+                        <Swiper ref="swiperThumbs" :options="swiperOptionThumbs" class="gallery-thumbs">
 
+                            <SwiperSlide v-for="(item, index) in productData.images" :key="index"
 
+                                :style="{ backgroundImage: 'url(' + item + ')' }">
 
+                                <div style="width: 100%; height: 100%;" @click="thumbsClick(index)"></div>
 
+                            </SwiperSlide>
 
+                        </Swiper>
 
+                        <div slot="button-prev" class="swiper-button-prev swiper-button-white iconfont">
 
+                            <i class="el-icon-arrow-up"></i>
 
+                        </div>
 
+                        <div slot="button-next" class="swiper-button-next swiper-button-white iconfont">
 
+                            <i class="el-icon-arrow-down"></i>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+            <div class="proInfo">
 
+                <div class="title">
 
+                    <p>趴趴熊猫公仔抱抱熊床上可爱玩偶小号抱枕布偶女生睡觉毛绒玩具趴趴熊国宝大熊猫11111111111111</p>
 
+                </div>
 
+                <div class="price">
 
+                    <div class="left">
 
+                        <p>协议价：<span>￥5.6</span></p>
 
+                        <p>营销价：<span>￥6.9</span></p>
 
+                    </div>
 
+                    <div class="right">
 
+                        <p>已出售：<span>3260</span></p>
 
+                        <p>库存：<span>100+</span></p>
 
+                    </div>
 
+                </div>
 
+                <div class="sku">
 
+                    <div class="text">规格</div>
 
+                    <div class="sku-list">
 
+                        <ul>
 
+                            <li v-for="item in 5" :key="item">【原切肉块】五香味牛肉片50g</li>
 
+                        </ul>
 
+                    </div>
 
+                </div>
 
+                <div class="num">
 
+                    <div class="text">数量</div>
 
+                    <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
 
+                </div>
 
+                <div class="add-selection">
 
+                    <button>加入采购单</button>
 
+                    <button>加入选品</button>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
 
+import 'swiper/css/swiper.css'
 
+export default {
 
+    components: {
 
+        Swiper,
 
+        SwiperSlide
 
+    },
 
+    data() {
 
+        return {
 
+            swiperTop: null,
 
+            swiperThumbs: null,
 
+            swiperOptionTop: {
 
+                spaceBetween: 10,
 
+                loop: true,
 
+                loopedSlides: 20
 
+            },
 
+            swiperOptionThumbs: {
 
+                navigation: {
 
+                    nextEl: '.swiper-button-next',
 
+                    prevEl: '.swiper-button-prev'
 
+                },
 
+                direction: 'vertical',
 
+                spaceBetween: 10,
 
+                slidesPerView: 3,
 
+                loop: true,
 
+                freeMode: true,
 
+                loopedSlides: 20, // looped slides should be the same
 
+                centeredSlides: true,
 
+                watchSlidesVisibility: true
 
+            },
 
+            productData: {
 
+                images: ["https://img1.baidu.com/it/u=1635025062,2659056813&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500", "https://img95.699pic.com/xsj/0y/14/dg.jpg%21/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast", "https://img2.baidu.com/it/u=3206404871,704002142&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"]
 
+            },
 
+            num: 1
 
+        }
 
+    },
 
+    mounted() {
 
+        if (!this.swiperTop || !this.swiperThumbs) {
 
+            this.swiperTop = this.$refs.swiperTop.$swiper
 
+            this.swiperThumbs = this.$refs.swiperThumbs.$swiper
 
+
 
+            this.swiperTop.controller.control = this.swiperThumbs
 
+            this.swiperThumbs.controller.control = this.swiperTop
 
+        }
 
+    },
 
+    methods: {
 
+        // 轮播图
 
+        thumbsClick(index) {
 
+            console.log(index);
 
+            this.swiperThumbs.slideTo(index, 300, false)
 
+            this.swiperTop.slideTo(index, 300, false)
 
+        },
 
+        //  数量
 
+        handleChange(value) {
 
+            console.log(value);
 
+        }
 
+    },
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+$mainGlod: #C5AA7B;
 
+
 
+.detailPage {
 
+    .top {
 
+        margin-bottom: 30px;
 
+        padding: 40px 45px;
 
+        background-color: #FFF;
 
+        display: flex;
 
+
 
+        .swiper-box {
 
+            width: 580px;
 
+            position: relative;
 
+            margin-right: 50px;
 
+
 
+            .swiper-slide {
 
+                background-size: contain;
 
+                background-repeat: no-repeat;
 
+                background-position: center;
 
+            }
 
+
 
+            .gallery-top {
 
+                height: 100% !important;
 
+                width: 440px;
 
+                position: absolute;
 
+                right: 0;
 
+            }
 
+
 
+            .swiperThumbsLeft {
 
+                width: 120px;
 
+                position: absolute;
 
+                left: 0;
 
+                top: 10%;
 
+                box-sizing: border-box;
 
+                padding: 10px 0;
 
+                height: 80%;
 
+
 
+                .thumbsBox {
 
+                    width: 100%;
 
+                    height: 100%;
 
+                    position: relative;
 
+
 
+                    .swiper-button-prev,
 
+                    .swiper-button-next {
 
+                        font-size: 30px;
 
+                        position: absolute;
 
+                        left: 45px;
 
+                        text-align: center;
 
+                        color: $mainGlod;
 
+
 
+                        &::after {
 
+                            content: '';
 
+                        }
 
+                    }
 
+
 
+                    .swiper-button-prev {
 
+                        position: absolute;
 
+                        top: -30px;
 
+                    }
 
+
 
+                    .swiper-button-next {
 
+                        position: absolute;
 
+                        top: initial;
 
+                        bottom: -50px;
 
+                    }
 
+                }
 
+            }
 
+
 
+            .gallery-thumbs {
 
+                position: relative;
 
+                width: 100%;
 
+                height: 100%;
 
+            }
 
+
 
+            .gallery-thumbs .swiper-slide {
 
+                width: 100%;
 
+                opacity: 0.7;
 
+            }
 
+
 
+            .gallery-thumbs .swiper-slide-active {
 
+                opacity: 1;
 
+                border: 1px solid $mainGlod;
 
+                box-sizing: border-box;
 
+            }
 
+        }
 
+
 
+        .proInfo {
 
+            width: 700px;
 
+            font-family: Microsoft YaHei;
 
+
 
+            .title {
 
+                p {
 
+                    width: 100%;
 
+                    font-size: 24px;
 
+                    font-weight: 800;
 
+                    overflow: hidden;
 
+                    text-overflow: ellipsis;
 
+                    white-space: nowrap;
 
+                }
 
+            }
 
+
 
+            .price {
 
+                margin-top: 50px;
 
+                display: flex;
 
+                padding: 0 30px;
 
+                box-sizing: border-box;
 
+                justify-content: space-between;
 
+                height: 150px;
 
+                background-color: rgb(244, 249, 254);
 
+                padding-top: 40px;
 
+
 
+                .left {
 
+                    p {
 
+                        &:first-of-type {
 
+                            margin-bottom: 20px;
 
+
 
+                            span {
 
+                                font-size: 24px;
 
+                                font-weight: 600;
 
+                            }
 
+                        }
 
+
 
+                        span {
 
+                            color: rgb(251, 106, 66);
 
+                        }
 
+                    }
 
+                }
 
+
 
+                .right {
 
+                    display: flex;
 
+                    gap: 30px;
 
+                }
 
+            }
 
+
 
+            .sku {
 
+                margin: 40px 0 20px;
 
+                display: flex;
 
+                box-sizing: border-box;
 
+                padding-left: 40px;
 
+                gap: 40px;
 
+
 
+                .sku-list {
 
+                    flex: 1;
 
+
 
+                    ul {
 
+                        display: flex;
 
+                        flex-wrap: wrap;
 
+                        gap: 20px;
 
+
 
+                        li {
 
+                            border: 1px solid #ccc;
 
+                            padding: 5px 10px;
 
+                            border-radius: 5px;
 
+                            font-size: #000;
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            .num{
 
+                display: flex;
 
+                align-items: center;
 
+                margin: 40px 0 20px;
 
+                box-sizing: border-box;
 
+                padding-left: 40px;
 
+                gap: 40px;
 
+            }
 
+            .add-selection{
 
+                display: flex;
 
+                margin-top: 40px;
 
+                padding-left: 150px;
 
+                box-sizing: border-box;
 
+                gap: 30px;
 
+                button{
 
+                    cursor: pointer;
 
+                    padding: 10px 20px;
 
+                    border-radius:42px;
 
+                    height: 40px;
 
+                    color: #fff;
 
+                    background-image: linear-gradient(90deg,#ff724b,#ff3e13);
 
+                }
 
+            }
 
+        }
 
+    }
 
+
 
+}</style>

+ 247 - 0
src/views/selectionCenter/management/components/mySelection.vue
Tampilan Berkas 

@@ -0,0 +1,247 @@
 
+<template>
 
+    <div class="my-selection">
 
+        <div class="title">
 
+            <p>我的选品</p>
 
+            <span @click="close">关闭</span>
 
+        </div>
 
+        <div class="selection-list">
 
+            <div class="selection-item" v-for="item in 10" :key="item">
 
+                <el-checkbox v-model="checked"></el-checkbox>
 
+                <div class="commodity-box">
 
+                    <div class="box-title">团蜂</div>
 
+                    <div class="commodity">
 
+                        <div class="img-box">
 
+                            <img src="https://img13.360buyimg.com/n1/jfs/t1/229873/19/3272/128629/6555d346F8d1ffae1/966548db340e59dd.jpg"
 
+                                alt="">
 
+                        </div>
 
+                        <div class="text-box">
 
+                            <p> 王老吉凉茶 植物饮料 绿盒装 250ml*24盒 整箱水饮 中华老字号 年货礼盒</p>
 
+                            <div class="text">
 
+                                <p>协议价<span>￥41</span></p>
 
+                                <p>利润率<span>9.2%</span></p>
 
+                            </div>
 
+                            <div class="text">
 
+                                <p>指导价<span>￥44.8</span></p>
 
+                                <p>折扣<span>9.2折</span></p>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                    <div class="delete-selection">
 
+                        <i class="el-icon-close"></i>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+        <div class="page">
 
+            <div class="all-checkout">
 
+                <el-checkbox :indeterminate="isIndeterminate" v-model="allCheckout"></el-checkbox>
 
+                <p>共23件商品，共选0件</p>
 
+                <span>删除</span>
 
+            </div>
 
+            <div class="pagination-box">
 
+                <el-pagination small layout="prev, pager, next" :total="50">
 
+                </el-pagination>
 
+            </div>
 
+        </div>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+    data() {
 
+        return {
 
+            checked: true,
 
+            allCheckout:false,
 
+            //  控制全选框选择的是横线还是对钩
 
+            isIndeterminate:true
 
+        }
 
+    },
 
+    methods: {
 
+        //  关闭抽屉框
 
+        close() {
 
+            this.$emit("closeDrawer");
 
+        }
 
+    }
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+.my-selection {
 
+    height: 100%;
 
+
 
+    .title {
 
+        display: flex;
 
+        justify-content: space-between;
 
+        box-sizing: border-box;
 
+        height: 60px;
 
+        align-items: center;
 
+        padding: 0 30px;
 
+        background-color: #fff;
 
+
 
+        p {
 
+            font-size: 20px;
 
+        }
 
+
 
+        span {
 
+            padding: 5px 15px;
 
+            border: 1px solid #EF530E;
 
+            color: #EF530E;
 
+            border-radius: 20px;
 
+            cursor: pointer;
 
+        }
 
+    }
 
+
 
+    .selection-list {
 
+        box-sizing: border-box;
 
+        padding-left: 20px;
 
+        height: 85%;
 
+        overflow-y: scroll;
 
+
 
+        .selection-item {
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 20px;
 
+            margin-top: 30px;
 
+
 
+            .commodity-box {
 
+                width: 80%;
 
+                height: 150px;
 
+                box-sizing: border-box;
 
+                padding: 15px 0px 15px 15px;
 
+                background-color: #fff;
 
+                border-radius: 10px;
 
+                position: relative;
 
+                border: 1px solid transparent;
 
+                cursor: pointer;
 
+
 
+                &:hover {
 
+                    border-color: #EF530E;
 
+                }
 
+
 
+                &:hover .delete-selection {
 
+                    display: flex;
 
+                }
 
+
 
+                .commodity {
 
+                    display: flex;
 
+                    align-items: center;
 
+                    margin-top: 5px;
 
+
 
+                    .img-box {
 
+                        width: 100px;
 
+                        height: 100px;
 
+
 
+                        img {
 
+                            width: 100%;
 
+                            height: 100%;
 
+                            display: block;
 
+                        }
 
+                    }
 
+
 
+                    .text-box {
 
+                        margin-left: 20px;
 
+                        display: flex;
 
+                        gap: 15px;
 
+                        flex-direction: column;
 
+
 
+                        >p {
 
+                            width: 250px;
 
+                            overflow: hidden;
 
+                            text-overflow: ellipsis;
 
+                            white-space: nowrap;
 
+                            font-size: 18px;
 
+                            font-weight: 600;
 
+                        }
 
+
 
+                        .text {
 
+                            display: flex;
 
+                            gap: 10px;
 
+                            justify-content: space-between;
 
+                            align-items: center;
 
+                            box-sizing: border-box;
 
+
 
+                            &:first-of-type {
 
+                                p {
 
+                                    span {
 
+                                        color: #EF530E;
 
+                                    }
 
+                                }
 
+                            }
 
+
 
+                            &:last-of-type {
 
+                                p {
 
+                                    span {
 
+                                        color: rgb(15, 111, 241);
 
+                                    }
 
+                                }
 
+                            }
 
+
 
+                            p {
 
+                                span {
 
+                                    margin-left: 8px;
 
+                                }
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+
 
+                .delete-selection {
 
+                    cursor: pointer;
 
+                    position: absolute;
 
+                    right: 0;
 
+                    top: 0;
 
+                    width: 25px;
 
+                    height: 25px;
 
+                    background-color: #EF530E;
 
+                    font-size: 14px;
 
+                    color: #fff;
 
+                    display: none;
 
+                    align-items: center;
 
+                    justify-content: center;
 
+                    border-radius: 0px 10px 0px 10px;
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .page{
 
+        height: 50px;
 
+        padding: 10px 10px 10px 20px;
 
+        box-sizing: border-box;
 
+        display: flex;
 
+        gap: 20px;
 
+        align-items: center;
 
+        background-color: #fff;
 
+        margin-top: 10px;
 
+        .all-checkout{
 
+            display: flex;
 
+            align-items: center;
 
+            gap: 10px;
 
+            font-size: 14px;
 
+            p{
 
+                color: rgb(102, 102, 102);
 
+                font-weight: 600;
 
+            }
 
+            span{
 
+                color: rgb(237, 42, 30);
 
+                font-weight: 600;
 
+                cursor: pointer;
 
+            }
 
+        }
 
+    }
 
+}
 
+
 
+::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
 
+    background-color: #EF530E;
 
+    border-color: #EF530E;
 
+}
 
+
 
+::v-deep .el-pager li.active{
 
+    color: #EF530E;
 
+    font-weight: 600;
 
+}
 
+
 
+::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
 
+    background-color: #EF530E;
 
+    border-color: #EF530E;
 
+}
 
+</style>

TEMPAT SAMPAH
src/views/selectionCenter/management/image/bg.png
Tampilan Berkas


TEMPAT SAMPAH
src/views/selectionCenter/management/image/logo.png
Tampilan Berkas


TEMPAT SAMPAH
src/views/selectionCenter/management/image/qw.png
Tampilan Berkas


TEMPAT SAMPAH
src/views/selectionCenter/management/image/test.png
Tampilan Berkas


+ 533 - 0
src/views/selectionCenter/management/index.scss
Tampilan Berkas 

@@ -0,0 +1,533 @@
 
+.management{
 
+    width: 100%;
 
+    height: 500px;
 
+    position: relative;
 
+    .management-center{
 
+        width: 1920px;
 
+        margin: 0 auto;
 
+        .selection{
 
+            width: 1200px;
 
+            height: 500px;
 
+            margin: 0 auto;
 
+            nav{
 
+                display: flex;
 
+                justify-content: space-between;
 
+                align-items: center;
 
+                height: 64px;
 
+                padding: 10px 0;
 
+                .logo-class{
 
+                    display: flex;
 
+                    align-items: center;
 
+                    img{
 
+                        width: 150px;
 
+                        height: 46px;
 
+                    }
 
+                    ul{
 
+                        margin-left: 20px;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        gap: 25px;
 
+                        li{
 
+                            padding: 12px;
 
+                            span{
 
+                                margin-left: 8px;
 
+                            }
 
+                        }
 
+                        .active{
 
+                            color: #EF530E;
 
+                        }
 
+                    }
 
+                }
 
+                .btn-list{
 
+                    display: flex;
 
+                    gap: 26px;
 
+                    button{
 
+                        display: flex;
 
+                        align-items: center;
 
+                        justify-content: center;
 
+                        gap: 10px;
 
+                        padding: 15px 5px;
 
+                        border-radius: 4px;
 
+                        font-size: 14px;
 
+                        font-weight: 500;
 
+                        background-color: transparent;
 
+                        &:first-of-type{
 
+                            width: 127px;
 
+                            background-color: #333333;
 
+                            color: #fff;
 
+                            cursor: pointer;
 
+                        }
 
+                        &:nth-of-type(2){
 
+                            width: 127px;
 
+                            background-color: #EF530E;
 
+                            color: #fff;
 
+                        }
 
+                        &:last-of-type{
 
+                            width: 84px;
 
+                            border: 1px solid #E5E5E5;
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            .bg{
 
+                width: 100%;
 
+                height: 240px;
 
+                background-color: #EF530E !important;
 
+                position: absolute;
 
+                left: 0;
 
+                top: 64px;
 
+                background: url("./image/bg.png") no-repeat center;
 
+                background-size: cover;
 
+                z-index: 0;
 
+                .search{
 
+                    position: absolute;
 
+                    left: 50%; 
+                    transform: translateX(-50%);
 
+                    top: 63px;
 
+                    display: flex;
 
+                    flex-direction: column;
 
+                    gap: 20px;
 
+                    h1{
 
+                        font-family: Source Han Sans;
 
+                        font-size: 40px;
 
+                        font-weight: bold;
 
+                        color: #fff;
 
+                    }
 
+                    .ipt{
 
+                        width: 560px;
 
+                        height: 48px;
 
+                        background-color: #fff;
 
+                        position: relative;
 
+                        span{
 
+                            position: absolute;
 
+                            left: 20px;
 
+                            top: 50%;
 
+                            transform: translateY(-50%);
 
+                            font-size: 25px;
 
+                        }
 
+                        input{
 
+                            width: calc(100% - 40px);
 
+                            height: 100%;
 
+                            position: absolute;
 
+                            left: 50px;
 
+                        }
 
+                    }
 
+                    .history{
 
+                        display: flex;
 
+                        align-items: center;
 
+                        color: #fff;
 
+                        ul{
 
+                            display: flex;
 
+                            align-items: center;
 
+                            gap: 10px;
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            .screen{
 
+                margin-top: 240px;
 
+                padding: 40px;
 
+                font-size: 14px;
 
+                position: relative;
 
+                .popular{
 
+                    width: 100%;
 
+                    border-bottom: 1px solid #E5E5E5;
 
+                    padding: 20px;
 
+                    display: flex;
 
+                    position: relative;
 
+                    .title{
 
+                        text-align: center;
 
+                        margin-right: 15px;
 
+                        height: 30px;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        p{
 
+                            width: 100px;
 
+                            line-height: 30px;
 
+                        }
 
+                        span{
 
+                            width: 85px;
 
+                            height: 30px;
 
+                            text-align: center;
 
+                            line-height: 30px;
 
+                            border-radius: 50px;
 
+                            margin-right: 16px;
 
+                        }
 
+                        .active{
 
+                            color: #fff;
 
+                            background-color: #EF530E;
 
+                        }
 
+                    }
 
+                    .all{
 
+                        display: flex;
 
+                        ul{
 
+                            padding: 0 5px;
 
+                            display: flex;
 
+                            align-items: center;
 
+                            flex-wrap: wrap;
 
+                            gap: 10px;
 
+                            margin-right: 10px;
 
+                            color: #333333;
 
+                            li{
 
+                                height: 30px;
 
+                                line-height: 30px;
 
+                                padding: 0px 10px;
 
+                                border-radius: 20px;
 
+                                font-size: 16px;
 
+                                cursor: pointer;
 
+                            }
 
+                            .act{
 
+                                background-color: #EF530E;
 
+                                color: #fff;
 
+                            }
 
+                        }
 
+                    }
 
+                    .more{
 
+                        position: absolute;
 
+                        right: 20px;
 
+                        top: 30px;
 
+                        color: #EF530E;
 
+                        font-size: 14px;
 
+                    }
 
+                }
 
+                .brand{
 
+                    width: 100%;
 
+                    border-bottom: 1px solid #E5E5E5;
 
+                    padding: 20px;
 
+                    display: flex;
 
+                    position: relative;
 
+                    .title{
 
+                        text-align: center;
 
+                        height: 30px;
 
+                        display: flex;
 
+                        align-items: center;
 
+                        p{
 
+                            width: 100px;
 
+                        }
 
+                    }
 
+                    .all{
 
+                        .top{
 
+                            display: flex;
 
+                            span{
 
+                                width: 85px;
 
+                                height: 30px;
 
+                                text-align: center;
 
+                                line-height: 30px;
 
+                                border-radius: 50px;
 
+                                margin-right: 16px;
 
+                            }
 
+                            .allbrand{
 
+                                background-color: #EF530E;
 
+                                color: #fff;
 
+                            }
 
+                            ul{
 
+                                display: flex;
 
+                                align-items: center;
 
+                                gap: 3px;
 
+                                li{
 
+                                    padding: 5px 10px;
 
+                                    cursor: pointer;
 
+                                }
 
+                                .brandActive{
 
+                                    background-color: #EF530E;
 
+                                    color: #fff;
 
+                                }
 
+                            }
 
+                        }
 
+                        .bottom{
 
+                            ul{
 
+                                display: flex;
 
+                                flex-wrap: wrap;
 
+                                margin-top: 5px;
 
+                                li{
 
+                                    margin-top: 10px;
 
+                                    width: 85px;
 
+                                    height: 30px;
 
+                                    text-align: center;
 
+                                    line-height: 30px;
 
+                                    border-radius: 20px;
 
+                                    &:first-of-type{
 
+                                        color: #EF530E;
 
+                                        border: 1px solid #EF530E;
 
+                                    }
 
+                                }
 
+                            }
 
+                        }
 
+                    }
 
+                    .more{
 
+                        position: absolute;
 
+                        right: 20px;
 
+                        top: 30px;
 
+                        color: #EF530E;
 
+                        font-size: 14px;
 
+                    }
 
+                }
 
+            }
 
+            main{
 
+                .filter{
 
+                    display: flex;
 
+                    align-items: center;
 
+                    justify-content: space-between;
 
+                    padding: 0 20px;
 
+                    box-sizing: border-box;
 
+                    .left{
 
+                        display: flex;
 
+                        gap: 40px;
 
+                        color: #333333;
 
+                        ul{
 
+                            display: flex;
 
+                            gap: 40px;
 
+                            li{
 
+                                display: flex;
 
+                                align-items: center;
 
+                                position: relative;
 
+                                cursor: pointer;
 
+                                padding-bottom: 5px;
 
+                                &:hover .box{
 
+                                    display: block;
 
+                                }
 
+                                &:hover p{
 
+                                    color: #000000;
 
+                                }
 
+                                &:hover p span{
 
+                                    background-color: #000;
 
+                                }
 
+                                p{
 
+                                margin-left: 7px;
 
+                                display: flex;
 
+                                flex-direction: column;
 
+                                color: #b8b6b6;
 
+                                span{
 
+                                    background-color: #b8b6b6;
 
+                                    height: 1px;
 
+                                    width: 10px;
 
+                                    margin-left: 2.5px;
 
+                                }
 
+                              }
 
+                              .box{
 
+                                width: 150px;
 
+                                padding: 10px 0;
 
+                                box-sizing: border-box;
 
+                                background-color: #ffffff;
 
+                                position: absolute;
 
+                                bottom: -120px;
 
+                                left: -50px;
 
+                                z-index: 9;
 
+                                display: none;
 
+                                p{
 
+                                    width: 100%;
 
+                                    height: 50px;
 
+                                    text-align: center;
 
+                                    line-height: 50px;
 
+                                    margin-left: 0;
 
+                                    font-size: 16px;
 
+                                    &:hover{
 
+                                        background-color: #EF530E;
 
+                                        color: #fff;
 
+                                    }
 
+                                }
 
+                              }
 
+                            }
 
+                        }
 
+                    }
 
+                    .right{
 
+                        button{
 
+                            padding: 10px 5px;
 
+                            background-color: #000;
 
+                            color: #fff;
 
+                            border-radius: 5px;
 
+                        }
 
+                    }
 
+                }
 
+                .card-list{
 
+                    display: flex;
 
+                    flex-wrap: wrap;
 
+                    gap: 24px;
 
+                    margin-top: 35px;
 
+                    .card{
 
+                        width: 215px;
 
+                        height: auto;
 
+                        border: 1px solid transparent;
 
+                        box-sizing: border-box;
 
+                        &:hover{
 
+                            border:  1px solid #EF530E;
 
+                            border-radius: 10px;
 
+                        }
 
+                        &:hover .img-box .btn-list{
 
+                            opacity: 1;
 
+                        }
 
+                        &:hover .price-bottom{
 
+                            visibility: visible;
 
+                        }
 
+                        &:hover .card-content{
 
+                            border-radius: 20px 20px 0 0 ;
 
+                        }
 
+                        .card-content{
 
+                            background-color: #fff;
 
+                            border-radius: 20px;
 
+                        }
 
+                        .img-box{
 
+                            width: 213px;
 
+                            height: 213px;
 
+                            margin: 0 auto;
 
+                            border-radius: 20px 20px 0 0;
 
+                            position: relative;
 
+                            img{
 
+                                width: 100%;
 
+                                display: block
 
+                            }
 
+                            .btn-list{
 
+                                width: 100%;
 
+                                position: absolute;
 
+                                left: 0;
 
+                                bottom: 0;
 
+                                display: flex;
 
+                                transition: all .5s ease;
 
+                                opacity: 0;
 
+                                button{
 
+                                    height: 32px;
 
+                                    width: 50%;
 
+                                    background-color: #EF530E;
 
+                                    color: #fff;
 
+                                    border-radius: 0;
 
+                                    cursor: pointer;
 
+                                }
 
+                                .danger{
 
+                                    cursor: not-allowed;
 
+                                    background-color: gray;
 
+                                }
 
+                            }
 
+                        }
 
+                        .text{
 
+                            width: 220px;
 
+                            height: 40px;
 
+                            padding: 0px 8px;
 
+                            overflow: hidden;
 
+                            text-overflow: ellipsis;
 
+                            display: -webkit-box;
 
+                            -webkit-line-clamp: 2;
 
+                            -webkit-box-orient: vertical;
 
+                            font-size: 16px;
 
+                            margin-top: 10px;
 
+                        }
 
+                        .price{
 
+                            width: 85%;
 
+                            margin: 0 auto;
 
+                            display: -webkit-box;
 
+                            display: flex;
 
+                            padding-top: 10px;
 
+                            border-top: 1px dashed #e9e9e9;
 
+                            padding-bottom: 10px;
 
+                            .price-box{
 
+                                width: 50%;
 
+                                display: flex;
 
+                                align-items: center;
 
+                                justify-content: center;
 
+                                flex-direction: column;
 
+                                font-weight: 700;
 
+                                text-align: center;
 
+                                gap: 5px;
 
+                                &:first-of-type{
 
+                                    position: relative;
 
+                                    &::after{
 
+                                        content: "";
 
+                                        width: 1px;
 
+                                        height: 70%;
 
+                                        background-color: #bdbdbd;
 
+                                        position: absolute;
 
+                                        right: 0;
 
+                                        top: 50%;
 
+                                        transform: translateY(-50%);
 
+                                    }
 
+                                }
 
+                                p{
 
+                                    &:first-of-type{
 
+                                        color: #666666;
 
+                                    }
 
+                                    &:last-of-type{
 
+                                        color: #EF530E;
 
+                                    }
 
+                                }
 
+                            }
 
+                        }
 
+                        .price-bottom{
 
+                            padding: 10px 10px;
 
+                            visibility: hidden;
 
+                            background-color: #fff;
 
+                            border-radius:0 0 20px 20px;
 
+                            ul{
 
+                                display: flex;
 
+                                justify-content: space-between;
 
+                                li{
 
+                                    display: flex;
 
+                                    flex-direction: column;
 
+                                    justify-content: center;
 
+                                    align-items: center;
 
+                                    gap: 10px;
 
+                                    p{
 
+                                        color: #999999;
 
+                                    }
 
+                                    span{
 
+                                        color: #000;
 
+                                        font-weight: 700;
 
+                                    }
 
+                                }
 
+                            }
 
+                        }
 
+                    }
 
+                    .broadside{
 
+                        width: 100px;
 
+                        position: fixed;
 
+                        top: 50%;
 
+                        transform: translateY(-50%);
 
+                        right: 10%;
 
+                        transform: translateX(10%);
 
+                        background-color: #fff;
 
+                        .enterprise{
 
+                            background-color: #EF530E;
 
+                            height: 120px;
 
+                            display: flex;
 
+                            flex-direction: column;
 
+                            justify-content: center;
 
+                            align-items: center;
 
+                            gap: 5px;
 
+                            img{
 
+                                width: 80px;
 
+                                height: 80px;
 
+                            }
 
+                            p{
 
+                                color: #fff;
 
+                            }
 
+                        }
 
+                        ul{
 
+                            padding: 0 20px;
 
+                            box-sizing: border-box;
 
+                            li{
 
+                                display: flex;
 
+                                flex-direction: column;
 
+                                align-items: center;
 
+                                justify-content: center;
 
+                                color: #000000;
 
+                                padding: 15px 0px;
 
+                                border-top: 1px solid #E5E5E5;
 
+                                i{
 
+                                    font-size: 32px;
 
+                                }
 
+                                &:last-of-type{
 
+                                    color: #EF530E;
 
+                                }
 
+                            }
 
+                        }
 
+                    }
 
+                }
 
+            }
 
+            footer{
 
+                display: flex;
 
+                align-items: center;
 
+                justify-content: center;
 
+                padding-bottom: 100px;
 
+                padding-top: 50px;
 
+            }
 
+        }
 
+    }
 
+}

+ 299 - 0
src/views/selectionCenter/management/index.vue
Tampilan Berkas 

@@ -0,0 +1,299 @@
 
+<template>
 
+    <div class="management">
 
+        <div class="management-center">
 
+            <div class="selection">
 
+                <nav>
 
+                    <div class="logo-class">
 
+                        <img src="./image/logo.png" alt="">
 
+                        <ul>
 
+                            <li class="active">商品分类 <span><i class="el-icon-arrow-down"></i></span></li>
 
+                            <li>商品库</li>
 
+                            <li>精选推荐</li>
 
+                        </ul>
 
+                    </div>
 
+                    <div class="btn-list">
 
+                        <button @click="drawer = true"><i class="el-icon-goods"></i>已选商品&nbsp;&nbsp;&nbsp;20</button>
 
+                        <button><i class="el-icon-plus"></i>采购单&nbsp;&nbsp;&nbsp;20</button>
 
+                        <button><i class="el-icon-user-solid"></i>我的</button>
 
+                    </div>
 
+                </nav>
 
+                <div class="bg">
 
+                    <div class="search">
 
+                        <h1>一站式选品便捷服务平台</h1>
 
+                        <div class="ipt">
 
+                            <span><i class="el-icon-search"></i></span>
 
+                            <input type="text" placeholder="快速搜索输入商品名称/ID/品牌">
 
+                        </div>
 
+                        <div class="history">
 
+                            <span>搜索记录：</span>
 
+                            <ul>
 
+                                <li>家用电器</li>
 
+                                <li>家居日用</li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="screen">
 
+                    <div class="popular">
 
+                        <div class="title">
 
+                            <p>热门类目：</p><span :class="idx == null ? 'active' : ''" @click="allHot">全部热门</span>
 
+                        </div>
 
+                        <div class="all">
 
+                            <ul>
 
+                                <li v-for="(item, index) in 5" :key="item" @click="hotCategory(index)"
 
+                                    :class="index == idx ? 'act' : ''">家用电器</li>
 
+                            </ul>
 
+                        </div>
 
+                        <div class="more"><span>更多&nbsp;<i class="el-icon-arrow-down"></i></span></div>
 
+                    </div>
 
+                    <div class="brand">
 
+                        <div class="title">
 
+                            <p>品牌列表：</p>
 
+                        </div>
 
+                        <div class="all">
 
+                            <div class="top">
 
+                                <span :class="brandIdx == null ? 'allbrand' : ''" @click="allLetter">全部热门</span>
 
+                                <ul>
 
+                                    <li v-for="(item, index) in letterList" :class="brandIdx == index ? 'brandActive' : ''"
 
+                                        @click="changeBrand(index)"> {{ item }}</li>
 
+                                </ul>
 
+                            </div>
 
+                            <div class="bottom">
 
+                                <ul>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                    <li>家用电器</li>
 
+                                </ul>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <main>
 
+                    <div class="filter">
 
+                        <div class="left">
 
+                            <div class="text">最新上架</div>
 
+                            <ul>
 
+                                <li>
 
+                                    <span>协议价</span>
 
+                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
 
+                                    <div class="box">
 
+                                        <p>最低</p>
 
+                                        <p>最高</p>
 
+                                    </div>
 
+                                </li>
 
+                                <li>
 
+                                    <span>利润率</span>
 
+                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
 
+                                    <div class="box">
 
+                                        <p>最低</p>
 
+                                        <p>最高</p>
 
+                                    </div>
 
+                                </li>
 
+                                <li>
 
+                                    <span>折扣</span>
 
+                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
 
+                                    <div class="box">
 
+                                        <p>最低</p>
 
+                                        <p>最高</p>
 
+                                    </div>
 
+                                </li>
 
+                                <li>
 
+                                    <span>毛利率</span>
 
+                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
 
+                                    <div class="box">
 
+                                        <p>最低</p>
 
+                                        <p>最高</p>
 
+                                    </div>
 
+                                </li>
 
+                                <li>
 
+                                    <span>销量</span>
 
+                                    <p><span></span><i class="el-icon-caret-bottom"></i></p>
 
+                                    <div class="box">
 
+                                        <p>最低</p>
 
+                                        <p>最高</p>
 
+                                    </div>
 
+                                </li>
 
+                            </ul>
 
+                        </div>
 
+                        <div class="right">
 
+                            <button>全选页面商品</button>
 
+                        </div>
 
+                    </div>
 
+                    <div class="card-list">
 
+                        <div class="card" v-for="(item, index) in 12" :key="index">
 
+                            <div class="card-content">
 
+                                <div class="img-box">
 
+                                    <img src="./image/test.png" alt="">
 
+                                    <div class="btn-list">
 
+                                        <button @click="details">查看详情</button>
 
+                                        <button>加入选品</button>
 
+                                        <!-- <button type="danger" class="danger" disabled>已加选品</button> -->
 
+                                    </div>
 
+                                </div>
 
+                                <p class="text">输入商品名称最多显示2行字体未 14颜</p>
 
+                                <div class="price">
 
+                                    <div class="price-box">
 
+                                        <p>协议价</p>
 
+                                        <p>￥202</p>
 
+                                    </div>
 
+                                    <div class="price-box">
 
+                                        <p>利润率</p>
 
+                                        <p>85.2%</p>
 
+                                    </div>
 
+                                </div>
 
+                            </div>
 
+                            <div class="price-bottom">
 
+                                <ul>
 
+                                    <li>
 
+                                        <p>指导价</p>
 
+                                        <span>￥69.8</span>
 
+                                    </li>
 
+                                    <li>
 
+                                        <p>最小利润</p>
 
+                                        <span>￥0</span>
 
+                                    </li>
 
+                                    <li>
 
+                                        <p>折扣</p>
 
+                                        <span>7.3</span>
 
+                                    </li>
 
+                                    <li>
 
+                                        <p>毛利率</p>
 
+                                        <span>23.3%</span>
 
+                                    </li>
 
+                                </ul>
 
+                            </div>
 
+                        </div>
 
+                        <div class="broadside">
 
+                            <div class="enterprise">
 
+                                <img src="./image/qw.png" alt="">
 
+                                <p>企微</p>
 
+                            </div>
 
+                            <ul>
 
+                                <li>
 
+                                    <i class="el-icon-service"></i>
 
+                                    <span>客服</span>
 
+                                </li>
 
+                                <li>
 
+                                    <i class="el-icon-edit-outline"></i>
 
+                                    <span>反馈</span>
 
+                                </li>
 
+                                <li>
 
+                                    <i class="el-icon-upload2"></i>
 
+                                    <span>顶部</span>
 
+                                </li>
 
+                            </ul>
 
+                        </div>
 
+                    </div>
 
+                </main>
 
+                <footer>
 
+                    <div class="txt">共4580个商品</div>
 
+                    <div class="paging">
 
+                        <el-pagination background layout="prev, pager, next" :total="1000">
 
+                        </el-pagination>
 
+                    </div>
 
+                </footer>
 
+            </div>
 
+        </div>
 
+        <!-- 侧边栏 -->
 
+        <el-drawer :visible.sync="drawer" :with-header="false" size="25%">
 
+            <mySelection @closeDrawer="closeDrawer"></mySelection>
 
+        </el-drawer>
 
+        <!-- 详情显示 -->
 
+        <el-dialog title="详情" :visible.sync="centerDialogVisible" width="70%" center>
 
+            <detailPage></detailPage>
 
+        </el-dialog>
 
+    </div>
 
+</template>
 
+
 
+<script>
 
+import detailPage from "./components/detailPage"
 
+import mySelection from "./components/mySelection"
 
+import { getSelectionData } from "@/api/selectionCenter"
 
+export default {
 
+    data() {
 
+        return {
 
+            letterList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '#'],
 
+            drawer: false, // 控制已选商品的显示
 
+            centerDialogVisible: false, // 控制详情的显示
 
+            idx: null, // 控制热门类目的状态切换,
 
+            brandIdx: null, // 控制品牌的状态切换
 
+        }
 
+    },
 
+    created() {
 
+        this.getSelectionList();
 
+    },
 
+    components: {
 
+        detailPage,
 
+        mySelection
 
+    },
 
+    methods: {
 
+        //  获取选品中心的数据
 
+        async getSelectionList() {
 
+            let res = await getSelectionData({
 
+                "productMarque": "",
 
+                "search": "",
 
+                "shelveState": "",
 
+                "stock": "",
 
+                "classifyId": "",
 
+                "page": 1,
 
+                "pageSize": 10
 
+            })
 
+            console.log(res);
 
+        },
 
+        //  全部热门
 
+        allHot() {
 
+            this.idx = null
 
+        },
 
+        // 热门类目的事件
 
+        hotCategory(val) {
 
+            this.idx = val
 
+            this.brandIdx = null
 
+        },
 
+        //  品牌列表 全部热门的切换
 
+        allLetter() {
 
+            this.brandIdx = null
 
+        },
 
+        //  品牌列表状态切换
 
+        changeBrand(val) {
 
+            this.brandIdx = val
 
+        },
 
+        //  详情显示
 
+        details() {
 
+            this.centerDialogVisible = true
 
+        },
 
+        //  关闭抽屉框
 
+        closeDrawer() {
 
+            this.drawer = false
 
+        }
 
+    },
 
+}
 
+</script>
 
+
 
+<style lang="scss" scoped>
 
+@import url("./index.scss");
 
+
 
+::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
 
+    background-color: #EF530E !important;
 
+}
 
+
 
+::v-deep .el-dialog__header {
 
+    display: none;
 
+}
 
+
 
+//  侧边弹出框的颜色
 
+::v-deep .el-drawer__body {
 
+    background-color: rgb(237 237 237 / 85%);
 
+}
 
+</style>