添加赠送商品

src/views/home/data_forms.vue

@@ -216,7 +216,9 @@ export default {
           startTime: this.query.createdAt[0],
           endTime: this.query.createdAt[1],
           cateId: this.query.cateId,
-          proName: this.query.proName
+          proName: this.query.proName,
+
+          type: this.orderType,
         });
         this.payCountList = res;
       } catch (error) {

src/views/user_manage/components/addActive.vue

@@ -20,20 +20,40 @@
                 <el-form-item label="状态">
                     <el-switch v-model="form.isDel" active-value="0" inactive-value="1"></el-switch>
                 </el-form-item>
+                <el-form-item label="赠送商品">
+                    <div>
+                        <el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...productIds])">
+                            添加商品
+                        </el-button>
+                    </div>
+                    <div class="shop_list">
+                        <div class="item_wrap" v-for="(item, index) in productIds" :key="item.id"
+                            @click="productIds.splice(index, 1)">
+                            <div class="item" :data-index="index + 1">
+                                <el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
+                            </div>
+                            <div class="name">{{ item.name }}</div>
+                        </div>
+                    </div>
+                </el-form-item>
             </el-form>
             <span slot="footer" class="dialog-footer">
                 <el-button @click="dialogVisible = false">取 消</el-button>
                 <el-button type="primary" :loading="loading" @click="onSubmitHandle">确 定</el-button>
             </span>
         </el-dialog>
+        <shopList ref="shopListRef" @success="slectShop" />
+
     </div>
 </template>
 
 <script>
 import handselTypes from '../handselTypes'
 import { modityActivate } from '@/api/shop'
+import shopList from '@/components/shopList'
 
 export default {
+    components: { shopList },
     data() {
         return {
             dialogVisible: false,
@@ -48,6 +68,7 @@ export default {
                 handselType: 'GD',
                 isDel: '0'
             },
+            productIds: [],
             resetForm: '',
             rules: {
                 minNum: [
@@ -71,6 +92,27 @@ export default {
         this.resetForm = { ...this.form }
     },
     methods: {
+        slectShop(res) {
+            if (this.productIds.length) {
+                res.map(async item => {
+                    if (!await this.checkShop(item.id)) {
+                        this.productIds.push({ ...item })
+                    }
+                })
+            } else {
+                this.productIds = res
+            }
+        },
+        // 判断是否存在重复商品
+        checkShop(id) {
+            let falg = false
+            this.productIds.map(item => {
+                if (item.id == id) {
+                    falg = true
+                }
+            })
+            return falg
+        },
         // 确认选择商品分类
         classifySuccess(e) {
             this.form.config.categoryList = e
@@ -112,4 +154,72 @@ export default {
         }
     }
 }
-</script>
+</script>
+<style scoped lang="scss">
+.shop_list {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item_wrap {
+        $size: 80px;
+
+        .item {
+            $radius: 4px;
+            width: $size;
+            height: $size;
+            border-radius: $radius;
+            overflow: hidden;
+            position: relative;
+            margin-right: 10px;
+            margin-top: 10px;
+
+            &:hover {
+                cursor: pointer;
+            }
+
+            &::after {
+                content: attr(data-index);
+                font-size: 12px;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                border-radius: 0 0 $radius 0;
+                align-items: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 10;
+            }
+
+            &::before {
+                content: '删除';
+                font-size: 12px;
+                width: 100%;
+                height: 20px;
+                display: flex;
+                padding: 0 10px;
+                align-items: center;
+                justify-content: center;
+                background-color: rgba(0, 0, 0, 0.3);
+                backdrop-filter: blur(10px);
+                color: #fff;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                z-index: 10;
+                transition: all .1s ease-in-out;
+            }
+        }
+
+        .name {
+            width: $size;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}
+</style>

src/views/user_manage/components/downloadQR.vue

@@ -22,11 +22,11 @@ export default {
         }
     },
     mounted() {
-        this.getlist()
     },
     methods: {
         show() {
             this.isshow = true
+            this.getlist()
         },
         async getlist() {
             let res = await getwxacode({