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

<template id="popup-advertisement">
    <div flex="main:around">
        <div class="general-modal-left" style="padding: 85px 35px; position: relative; background: rgba(0, 0, 0, 0.4);">
            <el-image style="width: 100%;height:100%;" :src="form.advertisingMap" fit="fit"></el-image>
            <span>关闭</span>
        </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>
                <div class="label">广告图</div>
                <diy-img-setting :img-infos="imageUrl" def-img-count="1" :show-url="false" :suggest-site="2" suggest-size-text="建议图片宽度290，高度375。" :img-contain-style="{padding: 0}" :show-title="false" @change="addIconImg"></diy-img-setting>
            </div>
            <div flex style="margin-bottom: 20px;">
                <div class="label">设置链接</div>
                <com-pick-link @selected="selectedUrl" :default-tabs="[{name: 'mall'},{name: 'addons'}, {name: 'goods', children:['store_renov_goods']}]">
                    <diy-url :text="form.selectUrl"></diy-url>
                </com-pick-link>
            </div>
            <div flex="cross:center">
                <div class="label">显示类型</div>
                <el-radio-group v-model="form.showType">
                    <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('popup-advertisement', {
        name: "popup-advertisement",
        template: '#popup-advertisement',
        props: {
            data: {
                type: Object,
                default () {
                    return {}
                }
            }
        },
        data() {
            return {
                form: {
                    value: false,
                    selectUrl: '',
                    linkItem: null,
                    showType: 1,
                    count: 1,
                    advertisingMap: 'resources/img/decorate/default_img.png'
                },
                imageUrl: [],
            }
        },
        watch: {
            form: {
                handler(newVal) {
                    // 直接监听
                    this.$emit("change", Object.assign({}, newVal))
                },
                deep: true
            },
            data: {
                handler(newVal) {
                    // 直接监听
                    console.log(newVal, "=======> newVal");
                    if (newVal) {
                        this.form = newVal
                        this.imageUrl = [{
                            imgUrl: newVal.advertisingMap
                        }]
                    }
                },
                immediate: true
            },
        },
        methods: {
            // 图片
            addIconImg(arr) {
                if (arr[0]) {
                    this.form.advertisingMap = arr[0].imgUrl || 'resources/img/decorate/default_img.png'
                    this.$emit("change", Object.assign({}, this.form))
                }
            },
            selectedUrl(value) {
                var item = value[0]
                this.form.linkItem = item
                this.form.selectUrl = item.title
            }
        },
    });
</script>
<style>
    .general-modal-left {
        position: relative;
        padding: 85px 35px;
        width: 222px;
        height: 378px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.4);
    }

    .general-modal-left span {
        position: absolute;
        right: 35px;
        top: 85px;
        color: #fff;
        width: 66px;
        height: 66px;
        line-height: 58px;
        text-align: center;
        font-size: 20px;
        transform: scale(.5);
        transform-origin: right top;
        padding-left: 12px;
        background: #000;
        border-radius: 0 8px 0 66px;
    }

    .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 .diy-url {
        height: 32px;
        line-height: 1.5;
        padding: 4px 12px;
    }

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

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