qimall/addons/SecondaryCard/backend/views/default/components/diy-preview.php

<template id="diy-preview">
    <div style="position:relative">
        <el-scrollbar class="dp-el-scrollbar" ref="scrollbar">
            <div id="diy-preview-contain" class="dp-contain" ref="diyPreview" :style="mainStyle">
                <div id="diy-test">
                    <div style="position: relative" data-html2canvas-ignore>
                        <div class="dp-header-placeholder"></div>
                    </div>
                    <div class="drag-scroll" >
                            <div class="secondary-card-box">
                                <div class="header-bg"></div>
                                <div class="body-box">
                                    <div class="secondary-card" :style="background">
                                        <div class="secondary-card-share" :style="{'background':activeItem.font_color}">分享</div>
                                        <div>
                                            <div class="secondary-card-title" :style="font_color">{{name}}</div>
                                            <div class="secondary-card-desc" :style="font_color" v-show="expire_type==1">{{expire_day}} 日有效</div>
                                            <div class="secondary-card-desc" :style="font_color" v-show="expire_type==2">{{begin_at ||'--'}}至{{end_at  || '--'}}有效</div>
                                        </div>
                                        <div class="secondary-card-bottom flex-x-between flex-y-baseline">
                                            <div class="secondary-card-desc" :style="font_color">
                                                    已领 {{virtual_sales}} 张
                                            </div>
                                            <div class="flex-y-baseline">
                                                <div class="secondary-card-desc" :style="font_color">原价<span class="line-through">￥{{original_price}}</span></div>
                                                <div class="bold"  :style="font_color">￥<span class="price">{{price}}</span></div>
                                            </div>
                                        </div>
                                        </div>
                                        </div>
                                       
                                    </div>
                                    <div class="sc-btn-box">
                                        <div class="sc-btn">
                                            <span class="sc-small-text">￥</span>{{price}} <span class="sc-small-text line-through">￥{{original_price}}</span> 立即开通
                                        </div>
                                    </div>
                                    <div class="sc-info">
                                        <div class="sc-info-title">使用规则：</div>
                                        <el-input
                                            type="textarea"
                                            :rows="10"
                                            placeholder="请输入内容"
                                            v-model="rule">
                                        </el-input> 
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>
<script src="/resources/js/Sortable.min.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>

<script>
    Vue.component('diy-preview', {
        name: "diy-preview",
        template: '#diy-preview',
        props: {
            activeItem: {
                type: Object,
                default () {
                    return {}
                }
            },
        },
        data() {
            return {
                static_img_prefix: '<?= Yii::getAlias('@attachurl') ?>'+'/static',
            };
        },
        computed: {
            name(){
				if(!this.activeItem.name){
					return ''
				} else{
					return this.activeItem.name
				}
			},
            font_color(){
                return {color:this.activeItem.font_color}
            },
            background(){
                if(!this.activeItem.background){   
					return {'background-image':`url(${this.static_img_prefix}/addons/SecondaryCard/background2.png)`} 
				} else{
                    if(this.activeItem.background_type == 0){
                        return  {'background-image':`url(${this.static_img_prefix}${this.activeItem.background})`} 
                    }  
					return  {'background-image':`url(${this.activeItem.background})`} 
				}
            },
            expire_type(){
                return this.activeItem.expire_type
            },
            expire_day(){
                if(!this.activeItem.expire_day){
					return '1'
				} else{
					return this.activeItem.expire_day
				}
            },
            begin_at(){
                console.log('begin_at',this.activeItem)
                if(!this.activeItem.begin_at){
					return ''
				} else{
					return this.activeItem.begin_at
				}
            },
            end_at(){
                if(!this.activeItem.end_at){
					return ''
				} else{
					return this.activeItem.end_at
				}
            },
            price(){
                if(!this.activeItem.price){
					return '0.00'
				} else{
					return this.activeItem.price
				}
            },
            original_price(){
                if(!this.activeItem.original_price){
					return '0.00'
				} else{
					return this.activeItem.original_price
				}
            },
            virtual_sales(){
                if(!this.activeItem.virtual_sales){
					return '0'
				} else{
					return this.activeItem.virtual_sales
				}
            },
            rule(){
                if(!this.activeItem.rule){
					return ''
				} else{
					return this.activeItem.rule
				}
            },

            mainStyle() {
                var style = {
                    backgroundSize: "100%",
                    backgroundRepeat: "no-repeat",
                    backgroundPosition: "left top",
                    backgroundColor: '#F5F5F5'
                } 
                return style
            }
        },
        methods: {
        },
    });
</script>

<style>
    .dp-contain {
        position: relative;
        box-sizing: initial;
        display: flex;
        flex-direction: column;
        width: 375px;
        margin: 45px 20px 0;
        border: 1px solid #ddd;
        min-height: 700px;
    }

    .dp-el-scrollbar {
        height: 100%;
    }

    .dp-header-placeholder {
        width: 100%;
        height: 44px;
        background-size: 100% 100%;
        z-index: 99;
        background: url("resources/img/decorate/nav/light1.png") no-repeat;
    }

    #float {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        margin-top: 88px;
    }

    .dp-nav-placeholder {
        position: relative;
        height: 44px;
    }

    .dp-list-item {
        position: relative;
    }

    .float-dp-list-item {
        /* position: relative; */
        float: left;
        pointer-events: auto;
    }

    .dp-list-item .dp-close,
    .float-dp-list-item .dp-close {
        display: none;
    }

    .dp-active-item:before,
    .float-dp-active-item .diy-solid-line:before {
        box-sizing: border-box;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid var(--diy-theme);
        height: 100%;
        z-index: 100;
        pointer-events: none;
        cursor: move;
    }

    .dp-active-item .dp-close,
    .float-dp-active-item .dp-close {
        display: block;
    }

    .slide-right {
        position: absolute;
        width: 42px;
        height: 200px;
        top: 0;
        bottom: 0;
        left: 50%;
        background: #73767D;
        margin: auto 0 auto 220px;
        /* margin-left: ; */
        border-radius: 2px;
        z-index: 999;
    }

    .slide-right .iconfont-el {
        color: #fff;
        display: block;
        text-align: center;
        font-size: 24px;
        line-height: 40px;
        cursor: pointer;
        position: relative;
    }

    .slide-right .iconfont-el>p {
        display: none;
    }

    .dp-close {
        position: absolute;
        top: 0;
        right: 0;
        width: 16px;
        height: 16px;
        background-color: var(--diy-theme);
        color: #fff;
        font-size: 12px;
        text-align: center;
        border-bottom-left-radius: 40px;
        z-index: 99;
    }

    .dp-close .el-icon-close {
        transform: translate(2px, -2px);
    }

    .flip-list-move {
        transition: transform 1s;
    }

    .dp-hover:before {
        box-sizing: border-box;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px dashed var(--diy-theme);
        height: 100%;
        z-index: 100;
        pointer-events: none;
        cursor: move;
        display: none;
    }

    .dp-list-item:hover .dp-hover:before,
    .float-dp-list-item .diy-solid-line:hover .dp-hover:before {
        display: block;
    }


    .secondary-card-box .header-bg{
        height: 100px;
        background-color: #ffdd00;
    }
    .secondary-card-box .body-box {
        position: relative;
        top: -85px;
        margin: 16px;
    }
    .secondary-card {
        position: relative;
        height: 170px;
        margin: 16px 0;
        padding: 24px;
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
        background-repeat: no-repeat;
        background-color: #fff;
        background-size: 100% 100%;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.2);

    }
    .secondary-card-share {
        position: absolute;
        width: 60px;
        right: 0;
        top:0;
        height: 22px;
        line-height: 22px;
        background: linear-gradient(172.93deg, #fdb33b 0%, #fd880e 94.38%);
        color:#FFF;
        text-align: center;
        border-bottom-left-radius: 22px;
        opacity: 0.6;
    }
    .secondary-card-title {
        font-size:18px;
        min-height:24px;
        font-weight: bold;
        width: 60%;
        margin-bottom: 8px;
    }
    .secondary-card-bottom {
        display: flex;
        justify-content: space-between;
    }
    .secondary-card-desc {
        opacity: 0.8;
        font-size:12px
    }

    .sc-btn-box{
        padding: 10px;
        background-color: #FFF;
    }
    .sc-btn-box .sc-btn{
        border-radius: 50px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(172.93deg, #fdb33b 0%, #fd880e 94.38%);
        color: #fff;
        margin: auto;
        text-align: center;
        font-size:16px;
    }
    .sc-btn-box .sc-small-text{
        font-size:10px;
    }
    .line-through {
        text-decoration: line-through;
    }
    .sc-info {
        padding: 16px 0;
    }
    .sc-info-title {
        font-size:14px;
        padding-bottom: 4px;
    }
    .flex-y-baseline{
        display: flex;
        align-items: baseline;
    }
    .price {
        font-size:26px;
    }
    .bold{
        font-weight: bold;
    }

</style>