zhongshen_project/app/shop/view/diy/adv_component.html

<template id="diy-adv">
    <div class="component-wrap" :class="{curr: curr == 'diy-adv'}" @click="selectComponent()" :style="{padding: value.adv.margin.join(' ')}">
        <div class="adv-wrap" :style="radius">
            <div v-if="value.adv.list.length" class="swiper-wrap">
                <div class="layui-carousel" id="advCarousel">
                    <div carousel-item>
                        <div v-for="(item, index) in value.adv.list" :key="item.id">
                            <img :src="ns.img(item.img)" alt="" v-if="item.img">
                            <div class="adv-empty-tips" v-else>
                                <p>点击编辑广告位</p>
                                <p>建议尺寸750*200</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="adv-empty-tips" v-else>
                <p>点击编辑广告位</p>
                <p>建议尺寸750*200</p>
            </div>
        </div>
        <div class="selected-area"></div>
    </div>
</template>

<!-- 组件样式 -->
<style>
    .adv-wrap {
        overflow: hidden;
    }
    .adv-wrap .adv-empty-tips {
        width: 100%;
        height: 100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #88c4dc;
        background: #ebf8fd;
    }
    .adv-wrap .swiper-wrap {
        width: 100%;
        height: 100%;
    }
    .adv-wrap .layui-carousel-ind {
        top: -25px;
    }
    .adv-wrap .layui-carousel-ind ul {
        background: none;
    }
    .adv-wrap .layui-carousel-ind ul li {
        background: rgba(50, 50, 50, .3);
    }
    .adv-wrap .layui-carousel-ind ul li.layui-this {
        background: #fff;
    }
    .adv-wrap [carousel-item] img {
        width: 100%;
    }
</style>

<script>
    Vue.component('diy-adv', {
        props: {
            curr: {
                type: String,
                default: ''
            },
            value: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data: function () {
            return {
                carousel: 100
            }
        },
        mounted(){
            if (this.value.adv.list.length) {
                setTimeout(function () {
                    carousel.render({
                        elem: '#advCarousel',
                        width: '100%', //设置容器宽度
                        height: '100%',
                        arrow: 'none'
                    });
                })
            }
        },
        computed: {
            radius(){
                let wrapHeight = 0,
                    imgs = ns.deepclone(this.value.adv.list),
                    wrapWidth = 375 - parseInt(this.value.adv.margin[1]) * 2;

                imgs.forEach((item, index) => {
                    let ratio = wrapWidth / item.img_width;
                    let height = item.img_height * ratio;
                    if (wrapHeight == 0 || wrapHeight < height) wrapHeight = height;
                });

                return {
                    'border-top-left-radius': this.value.adv.radius[0],
                    'border-top-right-radius': this.value.adv.radius[0],
                    'border-bottom-left-radius': this.value.adv.radius[1],
                    'border-bottom-right-radius': this.value.adv.radius[1],
                    'height': (wrapHeight ? wrapHeight : 100) + 'px'
                }
            }
        },
        methods: {
            selectComponent(){
                this.$emit('click', 'diy-adv');
            },
            /**
             * 计算图片高度
             */
            calculateHeight(){
                var height = 100;
                if (this.value.adv.list.length) {

                }
                this.carousel = height;
            },
            /**
             * 验证数据
             * @returns {boolean}
             */
            verify(){
                var verify = true, self = this;
                for (var i = 0; i < this.value.adv.list.length; i++) {
                    let item = this.value.adv.list[i];
                    if (item.img == '') {
                        layer.msg('请上传广告图片'); verify = false;
                        break;
                    }
                }
                return verify;
            }
        },
        watch:{
            'value.adv.list': function (nval, oval) {
                setTimeout(function () {
                    carousel.render({
                        elem: '#advCarousel',
                        width: '100%', //设置容器宽度
                        height: '100%',
                        arrow: 'none'
                    });
                })
                this.calculateHeight();
            }
        },
        template: '#diy-adv'
    })
</script>

<!--编辑组件-->
<template id="diy-adv-edit">
    <div class="component-wrpp diy-adv-edit">
        <div class="edit-title">
            <span>广告位设置</span>
            <div class="tab-wrap">
                <span class="tab-item" :class="{active: tab == 'content'}" @click="tab = 'content'">内容</span>
                <span class="tab-item" :class="{active: tab == 'style'}" @click="tab = 'style'">样式</span>
            </div>
        </div>
        <div class="layui-form">
            <div v-show="tab == 'content'">
                <div class="group-title">
                    <span>广告设置</span>
                </div>
                <div class="adv-list">
                    <div class="adv-item" v-for="(item, index) in value.adv.list" :key="item.id">
                        <div class="iconfont icontuodong"></div>
                        <div class="main-box">
                            <div class="layui-form-item">
                                <label class="layui-form-label sm">广告图</label>
                                <div class="layui-input-block img-upload">
                                    <div class="upload-img-block">
                                        <div class="upload-img-box" :class="{hover: item.img}">
                                            <div class="upload-default">
                                                <div class="preview_img" v-if="item.img" :id="'adv-icon-' + index">
                                                    <img :layer-src="img(item.img)" :src="img(item.img)" class="img_prev"/>
                                                </div>
                                                <div class="upload" v-else @click="uploadImg(index)">
                                                    <span class="add">+</span>
                                                </div>
                                            </div>
                                            <div class="operation">
                                                <div >
                                                    <i title="图片预览" class="iconfont iconreview js-preview" @click="previewImg(index)"></i>
                                                    <i title="删除图片" class="layui-icon layui-icon-delete js-delete" @click="deleteImg(index)"></i>
                                                </div>
                                                <div class="replace_img js-replace" @click="uploadImg(index)">点击替换</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label sm">链接</label>
                                <div class="layui-input-block">
                                    <div class="select-url" @click="selectLink(index)">
                                        <div class="text" :class="{'text-color': item.link.title }">{{ item.link.title ? item.link.title : '请选择链接' }}</div>
                                        <i class="layui-icon layui-icon-right"></i>
                                    </div>
                                </div>
                            </div>
                            <i class="del" @click="deleteAdv(index)">x</i>
                        </div>
                    </div>
                </div>
                <div class="add-adv" @click="addAdv" v-if="value.adv.list.length < 5">
                    <i class="iconfont iconjia2"></i>
                    添加广告
                </div>
            </div>
            <div v-show="tab == 'style'">
                <div class="group-title">
                    <span>组件样式</span>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">上边距</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="top"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">下边距</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="bottom"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">左右边距</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="about"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">上圆角</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="top-radius"></div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label sm">下圆角</label>
                    <div class="layui-input-block slide-wrap">
                        <div class="bottom-radius"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
    .diy-adv-edit {

    }
    .diy-adv-edit .adv-item {
        background: #fff;
        padding: 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        user-select: none;
        position: relative;
        border: 1px dashed #eee;
    }
    .diy-adv-edit .adv-item .del {
        background: #999;
        color: #FFFFFF;
        position: absolute;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        font-size: 12px;
        font-style: normal;
        line-height: 18px;
        text-align: center;
        right: -10px;
        top: -10px;
        cursor: pointer;
        z-index: 1;
        display: none;
    }
    .diy-adv-edit .adv-item:hover .del {
        display: block;
    }
    .diy-adv-edit .adv-item .icontuodong {
        cursor: move;
        margin-right: 10px;
    }
    .diy-adv-edit .adv-item .main-box {
        flex: 1;
        width: 0;
    }
    .diy-adv-edit .adv-item .layui-form-label {
        width: 55px;
    }
    .diy-adv-edit .adv-item .layui-form-label.sm + .layui-input-block {
        margin-left: 60px;
    }
    .diy-adv-edit .adv-item .layui-form-item:last-child {
        margin-bottom: 0;
    }
    .diy-adv-edit .add-adv {
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #eee;
        cursor: pointer;
        color: #666;
        margin-top: 10px;
        border-radius: 4px;
        font-size: 12px;
    }
    .diy-adv-edit .add-adv:hover {
        background: #f5f5f5;
    }
</style>

<script>
    Vue.component('diy-adv-edit', {
        props: {
            value: {
                type: Object,
                default: function () {
                    return {};
                }
            }
        },
        data: function () {
            return {
                tab: 'content',
                styleList: [
                    { title: '样式一', value: 1},
                    { title: '样式二', value: 2}
                ]
            }
        },
        mounted(){
            var self = this;
            slider.render({
                elem: '.diy-adv-edit .top',
                input: true,
                value: self.value.adv.margin[0].split('px')[0],
                change: function (value) {
                    self.value.adv.margin[0] = value + 'px';
                    self.updateMargin();
                }
            });
            slider.render({
                elem: '.diy-adv-edit .bottom',
                input: true,
                value: self.value.adv.margin[2].split('px')[0],
                change: function (value) {
                    self.value.adv.margin[2] = value + 'px';
                    self.updateMargin();
                }
            });
            slider.render({
                elem: '.diy-adv-edit .about',
                input: true,
                max: 20,
                value: self.value.adv.margin[1].split('px')[0],
                change: function (value) {
                    self.value.adv.margin[1] = value + 'px';
                    self.value.adv.margin[3] = value + 'px';
                    self.updateMargin();
                }
            });
            slider.render({
                elem: '.diy-adv-edit .top-radius',
                input: true,
                value: self.value.adv.radius[0].split('px')[0],
                max: 30,
                change: function (value) {
                    self.value.adv.radius[0] = value + 'px';
                    self.updateRadius()
                }
            });
            slider.render({
                elem: '.diy-adv-edit .bottom-radius',
                input: true,
                value: self.value.adv.radius[1].split('px')[0],
                max: 30,
                change: function (value) {
                    self.value.adv.radius[1] = value + 'px';
                    self.updateRadius()
                }
            });

            var downIndex = 0;
            $('.diy-adv-edit .adv-list').DDSort({
                //拖拽数据源
                target: '.adv-item',
                down: function (index) {
                    downIndex = index;
                },
                //拖拽结束
                up: function () {
                    var index = $(this).index();
                    var temp = self.value.adv.list.splice(downIndex, 1);
                    self.value.adv.list.splice(index, 0, temp[0]);
                }
            });
        },
        methods: {
            updateMargin(){
                this.value.adv.margin.push('')
                this.value.adv.margin.pop()
            },
            updateRadius(){
                this.value.adv.radius.push('')
                this.value.adv.radius.pop()
            },
            addAdv(){
                this.value.adv.list.push({
                    id: ns.gen_non_duplicate(6),
                    img: '',
                    text: '',
                    link: {
                        name: ''
                    }
                })
            },
            img(src){
                return ns.img(src);
            },
            /**
             * 选择链接
             * @param index
             */
            selectLink(index){
                var self = this;
                ns.select_link(this.value.adv.list[index].link, function (data) {
                    self.value.adv.list[index].link = data;
                    self.updateArray('list');
                });
            },
            uploadImg(index){
                var self = this;
                openAlbum(function (obj) {
                    for (var i = 0; i < obj.length; i++) {
                        self.value.adv.list[index].img = obj[i].pic_path;
                        self.value.adv.list[index].img_width = obj[i].pic_spec.split("*")[0];
                        self.value.adv.list[index].img_height = obj[i].pic_spec.split("*")[1];
                        self.updateArray('list');
                    }
                }, 1);
            },
            previewImg(index){
                layer.photos({
                    photos: '#adv-icon-' + index,
                    anim: 5
                });
                $('#adv-icon-' + index + ' img').click()
            },
            deleteImg(index){
                this.value.adv.list[index].img = '';
                this.updateArray('list');
            },
            deleteAdv(index){
                var self = this;
                layer.confirm('确定要删除吗?', function(_index){
                    self.value.adv.list.splice(index, 1);
                    layer.close(_index);
                });
            },
            updateArray(key){
                this.value.adv[key].push('')
                this.value.adv[key].pop()
            }
        },
        template: '#diy-adv-edit'
    })
</script>