editor_page/src/components/setting/settingCoupon.vue

<template>
    <div class="panel">
        <div class="panel-header">
            <h3 class="header-title">{{ data.name }}设置</h3>
            <a class="el-icon-close close-btn" @click="closeRightTemplateHandle"></a>
        </div>
        <div>
            <el-form label-position="top" ref="form" label-width="80px">
                <el-form-item style="margin-bottom: 0;" label="输入标题">
                    <el-input size="mini" @input="handleDate" v-model="content.value.couponTitle"></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;" label="选择优惠券">
                    <el-select
                        @change="couponChange"
                        v-model="selectList"
                        multiple
                        collapse-tags
                        placeholder="选择优惠券">
                        <el-option
                            v-for="item in couponList"
                            :key="item.id"
                            :label="item.title"
                            :value="item.id">
                    </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;" label="输入按钮名称">
                    <el-input size="mini" @input="handleDate" v-model="content.value.buttonName"></el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 0;" label="按钮背景色（可只选一个，两个皆选为过渡色）">
                    <el-color-picker @change="changeBgColor" v-model="btnBackground[0]"></el-color-picker>
                    <el-color-picker style="margin-left: 20px;" @change="changeBgColor" v-model="btnBackground[1]"></el-color-picker>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'settingCoupon',
    props: ['data', 'className'],
    data() {
        return {
            content: JSON.parse(JSON.stringify(this.data)),
            selectList:'',
            couponList:[{
                id:101,
                title:'xxx优惠券'
            },{
                id:220,
                title:'xxx2优惠券'
            }],
            btnBackground:['','']
        }
    },
    created() {
        this.getCouponList()
        this.selectList = this.content.value.couponList.length>0?this.content.value.couponList:[]

        if(this.content.value.btnBackground[0]){
            this.btnBackground[0] = this.content.value.btnBackground[0]
        }
        if(this.content.value.btnBackground[1]){
            this.btnBackground[1] = this.content.value.btnBackground[1]
        }
    },
    methods: {
        // 获取优惠券列表
        getCouponList() {
            // service.get("/custom/form/column/list?formId=" + formId).then((res) => {
            //     if (res.data.code != 0) {
            //         return that.$message.error(res.data.data.msg);
            //     }
            //     this.formColumnList = res.data.data;
            // }).catch(function () {
            // });
        },
        couponChange(val){
            console.log('val',val)
            let list = []
            this.couponList.map(item=>{
                if(val.indexOf(item.id)>-1)
                list.push(item)
            })
            this.content.value.couponList = list
            this.handleDate()
        },
        changeBgColor(val){
            console.log(val)
            this.content.value.btnBackground = this.btnBackground.filter(item=>{return item})
            console.log(this.content.value.btnBackground)
            this.handleDate()
        },
        handleDate() {
            this.$emit('updataContent', this.content)
        },
        closeRightTemplateHandle() {
            this.$emit('closeRightTemplateHandle', false)
        }
    }
}
</script>

<style  scoped>
.panel {
    padding: 0 10px;
}

.panel .panel-header {
    position: relative;
    height: 40px;
    line-height: 40px;
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: middle;
    border-bottom: 1px solid #dcdcdc;
    box-sizing: border-box;
    z-index: 10;
}

.panel .panel-header .header-title {
    padding-left: 5px;
    font-size: 14px;
    color: #29304e;
    position: relative;
}

.panel .panel-header .header-title:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: #1890ff;
    opacity: 1;
    border-radius: 2px;
}

.panel .panel-header .close-btn {
    position: absolute;
    top: 12px;
    right: 0;
    border: none;
    outline: none;
    cursor: pointer;
    color: #999;
    font-weight: 700;
}

.panel .panel-body {
    position: absolute;
    top: 40px;
    bottom: 0;
    width: 100%;
    overflow-y: auto;
}

.text-setting {
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}
</style>