供应商装扮主页

src/main/resources/static/css/supplier-center/shop/category-edit.css

@@ -7,7 +7,7 @@
   .state {width: 158px !important;}
   #newBtn div{height: 36px;border-radius: 2px;display: inline-block;text-align: center;cursor: pointer}
   #newBtn{float: left;margin: 0}
-  .disguise-content{ width: 100%;min-height: 653px;background: #FFFFFF;box-sizing: border-box;padding: 40px 200px;}
+  .disguise-content{ width: 100%;min-height: 653px;background: #FFFFFF;box-sizing: border-box;padding: 40px 100px;}
 
   .bgFrom{position: fixed; background: rgba(34,39,46, 0.3);top: 0;left: 0; width: 100%;height: 100%;z-index: 1000;opacity: 0}
   .bgFrom.show{opacity: 1}

src/main/resources/static/css/supplier-center/shop/disguise.css

@@ -7,8 +7,8 @@
     .state {width: 158px !important;}
     #newBtn div{height: 36px;border-radius: 2px;display: inline-block;text-align: center;cursor: pointer}
     #newBtn{float: left;margin: 0}
-    .disguise-content{ width: 100%;min-height: 500px;background: #FFFFFF; }
-
+    .disguise-content{ width: 100%;min-height: 500px;background: #FFFFFF; position: relative;}
+    .disguise-message{ height: 40px;position: absolute;top: 0;right: 0;line-height: 40px;font-size: 14px;color: #9AA5B5;box-sizing: border-box;padding: 0 20px; cursor: pointer;}
     .bgFrom{position: fixed; background: rgba(34,39,46, 0.3);top: 0;left: 0; width: 100%;height: 100%;z-index: 1000;opacity: 0}
     .bgFrom.show{opacity: 1}
     .modalForm{ width: 650px;height: 470px;background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);border-radius: 2px;border: solid 1px #efefef; position: absolute;left: 0;top: 0;right: 0;bottom: 0; margin: auto }

src/main/resources/static/js/supplier-center/shop/category-edit.js

@@ -19,6 +19,12 @@ var decoration = new Vue({
             sort:'',
             productIds:'',
             products:[]
+        },
+        productRadio:[]
+    },
+    computed: {
+        delDisabled() {
+            return this.productRadio.length === 0
         }
     },
     methods:{
@@ -27,6 +33,22 @@ var decoration = new Vue({
             this.getList()
             this.dialogVisible = true
         },
+        // 选择已选择商品
+        handleSelecChange(row) {
+            this.productRadio = row
+            console.log('productRadio', this.productRadio)
+        },
+        // 批量删除已选择
+        handleAlldel(){
+            this.$confirm('确定全部删除吗？', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                this.disguiseForm.productIds =''
+                this.disguiseForm.products =[]
+            })
+        },
         // 获取广告图片列
         echoShopCategory(params) {
             const _this = this;

src/main/resources/static/js/supplier-center/shop/disguise.js

@@ -4,6 +4,7 @@ var decoration = new Vue({
     mixins: [disguiseMixins,cmSysVitaMixins],
     data:{
         iconflag:true,
+        messageVisible:false,
         dialogVisible:false,
         logoShow:false,
         activeName:'first',
@@ -15,7 +16,7 @@ var decoration = new Vue({
             }else{
                 this.getBannerList()
             }
-        },
+        }
     },
     mounted:function () {
         if (globalUserData) {

src/main/resources/static/js/supplier-center/shop/mixins/categoryMixins.js

@@ -13,13 +13,13 @@ const categoryMixins = function () {
                 list: [],
                 total: 0,
                 layout:'total, prev, pager, next, jumper',
-                shopsRadio: null,
+                productSelRadio: null,
                 isLoading: true
             }
         },
         computed: {
             disabled() {
-                return this.shopsRadio === null
+                return this.productSelRadio === null
             }
         },
         mounted () {
@@ -43,7 +43,17 @@ const categoryMixins = function () {
                 SupplierApi.getShopProductList(this.listQuery, function (res) {
                     if (res.code === 0) {
                         const data = res.data
+                        if(_this.disguiseForm.products.length>0){
+                            data.results.forEach((item) => {
+                                // 在disguiseForm.products数组中查找是否存在与当前元素的productId匹配的元素
+                                const prosItem = _this.disguiseForm.products.find((prosItem) => prosItem.productId === item.productId);
+                                if (prosItem) {
+                                    item.flag = false; // 如果找到匹配的productId，将flag设置为false
+                                }
+                            });
+                        }
                         _this.list = data.results
+                        console.log('list',_this.list)
                         _this.total = data.totalRecord
                         _this.isLoading = false
                     }
@@ -51,12 +61,12 @@ const categoryMixins = function () {
             },
             // 选择供应商
             handleSelectionChange(row) {
-                this.shopsRadio = row
+                this.productSelRadio = row
                 console.log('row', row)
             },
             // 确认选择供应商
             handleConfirm() {
-                this.disguiseForm.products = this.shopsRadio
+                this.disguiseForm.products =[...this.disguiseForm.products, ...this.productSelRadio]
                 this.handleCanle()
             },
             handleCanle() {

src/main/resources/templates/supplier-center/components/disguise-dialog.html

@@ -9,7 +9,7 @@
     <div class="filter-control">
       <span>商品名称:</span>
       <el-input
-              v-model="listQuery.shopName"
+              v-model="listQuery.name"
               placeholder="商品名称"
               clearable
               style="width: 160px"

src/main/resources/templates/supplier-center/shop/category-edit.html

@@ -35,17 +35,19 @@
                         <el-form-item label="商品信息：" prop="products" :rules="rules.products">
                             <template>
                                 <el-button type="primary" autofocussize="mini" size="mini" icon="el-icon-plus" @click="handleDialogVisible">添加商品</el-button>
+                                <el-button type="danger" :disabled="delDisabled" autofocussize="mini" size="mini" icon="el-icon-delete" @click="handleAlldel">删除</el-button>
                                 <el-checkbox-group v-show="false" v-model="disguiseForm.products"></el-checkbox-group>
                             </template>
                             <template v-if="disguiseForm.products && disguiseForm.products.length > 0">
-                                <el-table :data="disguiseForm.products" border width="1000" height="500">
-                                    <el-table-column property="image" label="商品图片" align="center" width="80">
+                                <el-table :data="disguiseForm.products" border height="500" @selection-change="handleSelecChange">
+                                    <el-table-column type="selection" width="55"></el-table-column>
+                                    <el-table-column property="image" label="商品图片" align="center" width="100">
                                         <template slot-scope="{ row }">
                                             <img :src="row.image" alt="" style="width:80px;height:80px;" />
                                         </template>
                                     </el-table-column>
-                                    <el-table-column prop="name" label="商品名称" align="center" width="300"></el-table-column>
-                                    <el-table-column label="操作" align="center">
+                                    <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
+                                    <el-table-column label="操作" align="center" width="100">
                                         <template slot-scope="scope">
                                             <el-button type="text" @click="handleDeletePros(scope.$index)">删除</el-button>
                                         </template>
@@ -53,7 +55,7 @@
                                 </el-table>
                             </template>
                         </el-form-item>
-                        <el-form-item style="margin-bottom: 10px;">
+                        <el-form-item style="margin-top: 50px;">
                             <a href="/supplier/disguise.html">
                                 <el-button type="primary" style="margin: 5px;" plain>返回</el-button>
                             </a>

src/main/resources/templates/supplier-center/shop/disguise.html

@@ -37,7 +37,24 @@
                             <template th:replace="supplier-center/components/disguise-banner"></template>
                         </template>
                     </el-tabs>
+                    <div class="disguise-message" @click="messageVisible = true">
+                        <span>装扮主页说明</span>
+                        <i class="el-icon-warning-outline"></i>
+                    </div>
                 </div>
+                <el-dialog
+                        title="说明"
+                        :visible.sync="messageVisible"
+                        width="30%"
+                        style="margin: 200px auto;"
+                        :close-on-click-modal="false"
+                        :show-close="false">
+                    <p style="margin-bottom: 10px;">1、主页类别配置可将商品进行归类，在店铺主页商品将按照归类进行展示。</p>
+                    <p>2、banner广告图可上传主页banner图，图片将展示在店铺主页顶部。</p>
+                    <span slot="footer" class="dialog-footer">
+                        <el-button type="primary" @click="messageVisible = false">确 定</el-button>
+                    </span>
+                </el-dialog>
             </div>
         </div>
     </div>