improve: 商品选择体验及重复点击

template/admin/src/components/goodsList/index.vue

@@ -95,6 +95,12 @@ export default {
       type: Boolean,
       default: false,
     },
+    selectIds: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
     datas: {
       type: Object,
       default: function () {
@@ -259,6 +265,7 @@ export default {
     } else {
       this.getList();
     }
+    console.log(this.diy);
   },
   methods: {
     productList() {
@@ -324,7 +331,22 @@ export default {
         }
         changeListApi(this.formValidate)
           .then(async (res) => {
+            console.log(this.selectIds);
+
             let data = res.data;
+            if (this.selectIds.length) {
+              let arr = []
+              this.selectIds.map((item) => {
+                data.list.map((i) => {
+                  if (i.id == item) {
+                    console.log(i);
+                    i._checked = true;
+                    arr.push(i)
+                  }
+                });
+              });
+              this.changeCheckbox(arr)
+            }
             this.tableList = data.list;
             this.total = res.data.count;
             this.loading = false;
@@ -347,9 +369,23 @@ export default {
             data.list.forEach((el) => {
               el.image = el.cover_img;
             });
-            this.tableList = data.list;
-            this.total = res.data.count;
-            this.loading = false;
+
+            console.log(this.selectIds);
+            if (this.selectIds.length) {
+              this.selectIds.map((item) => {
+                data.list.map((i) => {
+                  if (i.id == item) {
+                    console.log(i);
+                    i._checked = true;
+                  }
+                });
+              });
+            }
+            this.$nextTick((e) => {
+              this.tableList = data.list;
+              this.total = res.data.count;
+              this.loading = false;
+            });
           })
           .catch((res) => {
             this.loading = false;

template/admin/src/pages/marketing/live/add_goods.vue

@@ -26,7 +26,7 @@
                   <img :src="item.image" alt="" />
                   <Icon type="ios-close-circle" size="20" @click="bindDelete(index)" />
                 </div>
-                <div class="upload-box" @click="modals = true">
+                <div class="upload-box" @click="selectGoods">
                   <Icon type="ios-camera-outline" size="36" />
                 </div>
               </div>
@@ -66,7 +66,13 @@
       </div>
     </Card>
     <Modal v-model="modals" title="商品列表" class="paymentFooter" scrollable width="900" :footer-hide="true">
-      <goods-list ref="goodslist" @getProductId="getProductId" v-if="modals" :ischeckbox="true"></goods-list>
+      <goods-list
+        ref="goodslist"
+        :selectIds="selectIds"
+        @getProductId="getProductId"
+        v-if="modals"
+        :ischeckbox="true"
+      ></goods-list>
     </Modal>
   </div>
 </template>
@@ -143,6 +149,13 @@ export default {
     };
   },
   methods: {
+    selectGoods() {
+      this.modals = true;
+      this.selectIds = this.goodsList.map((i) => {
+        return i.product_id;
+      });
+      console.log(this.selectIds,this.goodsList)
+    },
     // 生成直播商品
     liveGoods() {
       let array = [];
@@ -161,7 +174,7 @@ export default {
         });
     },
     getProductId(data) {
-      this.goodsList = this.goodsList.concat(data);
+      this.goodsList = data;
       this.$nextTick((res) => {
         setTimeout(() => {
           this.modals = false;

template/admin/src/pages/marketing/live/index.vue

@@ -79,7 +79,7 @@
           <a @click="detail(row, '详情')">详情</a>
           <Divider type="vertical" />
           <a @click="del(row, '删除这条信息', index)">删除</a>
-          <Divider type="vertical"  v-if="row.live_status == 102"/>
+          <Divider type="vertical" v-if="row.live_status == 102" />
           <a v-if="row.live_status == 102" @click="addGoods(row)">添加商品</a>
         </template>
       </Table>
@@ -105,6 +105,7 @@
         ref="goodslist"
         @getProductId="getProductId"
         v-if="isShowBox"
+        :selectIds="selectIds"
         :ischeckbox="true"
         :liveStatus="true"
       ></goods-list>
@@ -179,6 +180,7 @@ export default {
       tabList: [],
       loading: false,
       activeItem: {},
+      selectIds: [],
     };
   },
   computed: {
@@ -236,6 +238,7 @@ export default {
     },
     // 直播间添加商品
     addGoods(row) {
+      this.selectIds = row.product_ids;
       this.activeItem = row;
       this.isShowBox = true;
     },

template/admin/src/utils/modalForm.js

@@ -13,6 +13,7 @@ import Modal from './modal';
 import Vue from 'vue';
 import { Message, Spin, Notice } from 'iview';
 let modalInstance;
+let btnStop = false;
 
 function getModalInstance(render = undefined) {
   modalInstance =
@@ -88,13 +89,9 @@ export default function (formRequestPromise, { width = '700' } = { width: '700'
             },
           },
         };
-        let btnStop = false;
         data.config.onSubmit = (formData, $f) => {
-          console.log('add')
           $f.btn.loading(true);
           $f.btn.disabled(true);
-          if (btnStop) return;
-          btnStop = true;
           request[data.method.toLowerCase()](data.action, formData)
             .then((res) => {
               modalInstance.remove();
@@ -105,7 +102,6 @@ export default function (formRequestPromise, { width = '700' } = { width: '700'
               Message.error(err.msg || '提交失败');
             })
             .finally(() => {
-              btnStop = false;
               $f.btn.loading(false);
               $f.btn.disabled(false);
             });
@@ -144,7 +140,12 @@ export default function (formRequestPromise, { width = '700' } = { width: '700'
                   },
                   on: {
                     click: () => {
+                      if (btnStop) return;
+                      btnStop = true;
                       fApi.submit();
+                      setTimeout(() => {
+                        btnStop = false;
+                      }, 1000);
                     },
                   },
                 },