link-wechat-web-pc/src/views/weGroupFission/modules/CompExtras.vue

<template>
    <div class="custom-list">
        <div style="text-align: right; margin-bottom: 10px;">
            <el-button type="primary" size="mini" plain icon="el-icon-plus" @click="addExtra">添加奖励</el-button>
        </div>

        <div class="extra-row" v-for="(item, index) in innerValue" :key="index">
            <div class="extra-line">
                <span class="label">完成：</span>
                <el-select v-model="item.tierIndex" placeholder="请选择阶梯" size="small" style="width: 200px"
                    @change="handleChange">
                    <el-option v-for="opt in options" :key="opt.value" :label="opt.label" :value="opt.value"
                        :disabled="innerValue.some(t => t.tierIndex === opt.value && t !== item)">
                    </el-option>
                </el-select>
                <i class="el-icon-delete delete-icon" @click="removeExtra(index)"></i>
            </div>

            <div class="extra-line" style="margin-top: 10px;">
                <span class="label">奖励：</span>
                <el-select v-model="item.rewardType" placeholder="类型" size="small"
                    style="width: 200px; margin-right: 10px;" @change="handleChange">
                    <el-option v-for="item in dicts.rewardType" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                </el-select>

                <div class="dynamic-input">
                    <el-input-number v-if="item.rewardType == 1" :min="0" v-model="item.rewardValue"
                        controls-position="right" size="small" placeholder="输入金额"
                        @change="handleChange"></el-input-number>
                    <span v-if="item.rewardType == 1" style="margin-left:5px">元</span>

                    <el-select v-else-if="item.rewardType == 2" v-model="item.rewardValue" placeholder="选择权益券"
                        size="small" @change="handleChange">
                        <el-option v-for="item in dicts.rightInfoId" :key="item.val" :label="item.name" :value="item.val"></el-option>
                    </el-select>

                    <el-select v-else-if="item.rewardType == 3" v-model="item.rewardValue" placeholder="选择抽奖活动"
                        size="small" @change="handleChange">
                        <el-option v-for="item in dicts.lotteryActivityId" :key="item.val" :label="item.name" :value="item.val"></el-option>
                    </el-select>
                </div>
            </div>
        </div>

        <div v-if="innerValue.length === 0"
            style="color: #999; text-align: center; padding: 10px; background: #fafafa; border-radius: 4px;">
            暂无额外奖励，点击右上角添加
        </div>
    </div>
</template>

<script>
import { 
    getDicts 
} from '@/api/system/menu';
import { 
    getDictListByType,
} from '@/api/activity/index';

export default {
    name: 'CompExtras',
    props: {
        value: {
            type: Array,
            default: () => []
        },
        options: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            innerValue: [],
            dicts: {
                rewardType: [],
                rightInfoId: [],
                lotteryActivityId: []
            }
        };
    },
    watch: {
        value: {
            handler(val) {
                this.innerValue = val ? JSON.parse(JSON.stringify(val)) : [];
            },
            immediate: true,
            deep: true
        }
    },
    created() {
        this.initData();
    },
    methods: {
        initData() {
            // 奖励方式
            getDicts('reward_groupFission_method').then((res) => {
                this.dicts.rewardType = res.data;
            });
            // 权益券
            getDictListByType({ type: 2 }).then((res) => {
                this.dicts.rightInfoId = res.data;
            });
            // 抽奖
            getDictListByType({ type: 3 }).then((res) => {
                this.dicts.lotteryActivityId = res.data;
            });
        },
        addExtra() {
            this.innerValue.push({
                tierIndex: undefined,
                rewardType: '1',
                rewardValue: undefined
            });
            this.handleChange();
        },
        removeExtra(index) {
            this.innerValue.splice(index, 1);
            this.handleChange();
        },
        handleChange() {
            this.$emit('input', this.innerValue);
            this.$emit('change', this.innerValue);
        }
    }
};
</script>

<style lang="scss" scoped>
.custom-list {
    width: 100%;
    max-width: 800px;

    .extra-row {
        color: #606266;
        padding: 15px;
        margin-bottom: 15px;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        background: #fff;
        position: relative;

        .extra-line {
            display: flex;
            align-items: center;
        }

        .label {
            width: 80px;
            text-align: right;
            padding-right: 10px;
        }

        .delete-icon {
            font-size: 16px;
            color: #f56c6c;
            cursor: pointer;
            position: absolute;
            top: 15px;
            right: 15px;
        }

        .dynamic-input {
            flex: 1;
            display: flex;
        }
    }
}
</style>