qimall/backend/views/components/common/diy/bargain-popup.php

<template id="bargain-popup">
    <div flex="main:around">
        <div class="general-modal-left" style="padding: 85px 35px; position: relative;"></div>
        <div class="general-modal-right">
            <div flex="cross:center" style="margin-bottom: 20px;">
                <div class="label">是否开启</div>
                <el-switch v-model="form.value"></el-switch>
            </div>
            <div flex="cross:center">
                <div class="label">显示类型</div>
                <el-radio-group v-model="form.showType" @change="typeChange">
                    <el-radio :label="1">仅首次</el-radio>
                    <el-radio :label="2">多次</el-radio>
                </el-radio-group>
            </div>
            <div flex v-if="form.showType === 1">
                <div class="label"></div>
                <div class="desc">
                    <!-- 砍价成功后只显示一次弹窗，再次砍价成功不再显示，更换砍价图后砍价成功可再次显示 -->
                </div>
            </div>
            <div flex v-else style="margin-top: 20px;">
                <div class="label">显示次数</div>
                <div class="desc">
                    <el-input placeholder="请输入内容" v-model="form.count">
                        <template slot="append">人/日</template>
                    </el-input>
                    <div style="margin-top: 10px;">
                        每次进入商城显示一次广告，每人每日最多显示1次，建议每人每日显示弹窗不超过3次
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    Vue.component('bargain-popup', {
        name: "bargain-popup",
        template: '#bargain-popup',
        props: {
            data: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                form: {
                    value: false,
                    showType: 1,
                    count: 1,
                }
            }
        },
        watch: {
            form: {
                handler(newVal) {
                    // 直接监听
                    this.$emit("change", Object.assign({}, newVal))
                },
                deep: true
            },
            data: {
                handler(newVal) {
                    // 直接监听
                    console.log(newVal, "=======> newVal");
                    if (newVal) {
                        this.form = newVal
                    }
                },
                immediate: true
            },
        },
        methods: {
            typeChange(data){
                if(data === 1){
                    this.form.count = 1;
                }
            }
        }
    });
</script>
<style>
    .general-modal-left {
        position: relative;
        padding: 85px 35px;
        width: 222px;
        height: 378px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.4) url('resources/img/decorate/bargain-popup.png') center center no-repeat;
        background-size: cover;
    }

    .general-modal-right {
        margin-left: 40px;
        width: 270px;
    }

    .label {
        min-width: 68px;
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 12px;
        color: #666;
        padding: 10px 20px 10px 0;
        box-sizing: border-box;
    }

    .general-modal-right .desc {
        color: #999;
        font-size: 12px;
        padding: 0;
    }

    .general-modal-right .el-input__inner {
        height: 32px;
        line-height: 32px;
    }
</style>