management/src/views/user_manage/components/addActive.vue

<template>
    <div>
        <el-dialog :title="form.id ? '编辑活动' : '添加活动'" :visible.sync="dialogVisible" @close="reset">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
                <el-form-item label="最小金额">
                    <el-input-number v-model="form.minNum" controls-position="right" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="最大金额">
                    <el-input-number v-model="form.maxNum" controls-position="right" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="赠送金额">
                    <el-input-number v-model="form.handselNum" controls-position="right" :min="0"></el-input-number>
                </el-form-item>
                <!-- <el-form-item label="赠送类型">
                    <el-select v-model="form.handselType">
                        <el-option :label="item.label" :value="item.value" v-for="item in handselTypes"
                            :key="item.value"></el-option>
                    </el-select>
                </el-form-item> -->
                <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="是否赠送商品">
                    <el-switch v-model="form.isGiftPro" :active-value="1" :inactive-value="0"></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" style="display: flex;align-items: center;margin-top: 6px;"
                            v-for="(item, index) in productIds" :key="item.id">
                            <div class="name">{{ item.name }}</div>
                            <el-input style="width: 120px;" v-model="item.num" placeholder='请填写数量'
                                @input="checkIfNum(item)"></el-input>
                            <el-button type="text" @click="productIds.splice(index, 1)"
                                style="margin-left: 20px;">删除</el-button>
                        </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, activate } from '@/api/shop'
import shopList from '@/components/shopList'

export default {
    components: { shopList },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            handselTypes: handselTypes,
            form: {
                id: '',
                shopId: '',
                minNum: 1,
                maxNum: 1,
                handselNum: 1, // 打印类型
                handselType: 'GD',
                isDel: '0'
            },
            productIds: [],
            resetForm: '',
            rules: {
                minNum: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ],
                maxNum: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    mounted() {
        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
        },
        checkIfNum(item) {
            item.num = item.num.toString().replace(/\D/g, '');
        },
        // 确认选择商品分类
        classifySuccess(e) {
            this.form.config.categoryList = e
        },
        onSubmitHandle() {
            // console.log(this.form)
            let arr = []
            this.productIds.forEach(ele => {
                arr.push({
                    productId: ele.id,
                    num: ele.num
                })
            })
            this.form.products = arr
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true
                        this.form.shopId = localStorage.getItem('shopId')
                        let res = await modityActivate(this.form)
                        this.$emit('success', res)
                        this.close()
                        this.$notify({
                            title: '成功',
                            message: `${this.form.id ? '编辑' : '添加'}成功`,
                            type: 'success'
                        });
                        this.loading = false
                    } catch (error) {
                        this.loading = false
                        console.log(error)
                    }
                }
            })
        },
        async show(obj) {
            this.dialogVisible = true
            if (obj && obj.id) {
                this.form = { ...obj }
                let res = await activate(obj.id)
                this.productIds = res
                console.log(res, '调试1')
            }
        },
        close() {
            this.dialogVisible = false
        },
        reset() {
            this.form = { ...this.resetForm }
        }
    }
}
</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>