qimall/addons/Pk/backend/views/components/relay-banner-simple.php

<template id="relay-banner-simple">
    <div class="relay-banner-simple">
        <div class="diy-component-edit">
            <el-form @submit.native.prevent label-width="100px">
                <el-form-item label="样式">
                    <div flex="dir:left">
                        <div @click="data.style=1" v-if="styleData.indexOf(1) != '-1'" class="banner-style-item" :class="data.style==1?'active':''">
                            <div class="banner-style-1"></div>
                            <div>样式1</div>
                        </div>
                        <div @click="data.style=2" v-if="styleData.indexOf(2) != '-1'"  class="banner-style-item" :class="data.style==2?'active':''">
                            <div class="banner-style-2" flex>
                                <div></div>
                                <div></div>
                            </div>
                            <div>样式2</div>
                        </div>
                    </div>
                </el-form-item>
                <!-- <el-form-item label="填充方式">
                    <el-radio v-model="data.fill" :label="0">留白</el-radio>
                    <el-radio v-model="data.fill" :label="1">填充</el-radio>
                </el-form-item> -->
                <el-form-item label="高度">
                    <el-input size="small" v-model.number="data.height" min="10" type="number">
                        <template slot="append">px</template>
                    </el-input>
                </el-form-item>

                <el-form-item label="轮播图">
                    <div class="banner-edit-item" v-for="(banner,index) in data.banners">
                        <div class="banner-edit-options">
                            <el-button @click="bannerItemDelete(index)" type="primary" icon="el-icon-delete"
                                       style="top: -6px;right: -31px;"></el-button>
                        </div>
                        <div flex="box:first">
                            <div>
                                <com-image-upload width="750" :height="data.height" v-model="banner.picUrl"
                                                  style="margin-right: 5px;"></com-image-upload>
                            </div>
<!--                            <div class="chooseLink">-->
<!--                                <div @click="pickLinkClick(index)">-->
<!--                                    <el-input v-model="banner.url" placeholder="点击选择链接" readonly size="small"></el-input>-->
<!--                                    <el-button type="primary" size="small" @click="showDialog">选择活动</el-button>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                    </div>
                    <el-button size="small" @click="addBanner">添加轮播图</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="diy-component-preview" v-if="componentPreview">
            <div class="banner-container" :style="cContainerStyle">
                <el-carousel :height="data.height+'px'" :type="data.style==2?'card':''">
                    <el-carousel-item v-for="(banner,index) in data.banners" :key="index">
                        <div :class="'banner-img '+cBannerImgClass"
                             :style="'background-image: url('+banner.picUrl+');'"></div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>


    </div>
</template>
<script>
    Vue.component('relay-banner-simple', {
        template: '#relay-banner-simple',
        props: {
            value: Object,
        },
        data() {
            return {
                componentPreview: false,
                currentBannerIndex: null,
                data: {
                    style: 1,
                    fill: 1,
                    height: 450,
                    banners: [],
                },
                //样式控制数组
                styleData: [1, 2],
                dialogTableVisible: false,
                page: 1,
                pageCount: 0,
                bannerList: [],
                listLoading: false,
                multipleSelection: [],

                //弹框配置
                form: {
                    diy: 1,
                    keyword: '',
                    limit: 10,
                },
                relayList : [],
                listLoading2:false,
                dialogVisible:false,
                radioSelection:false,
                selectRelay:{},
                relayPageCount: 0,
                relayCurrentPage: 0,
            };
        },
        created() {
            if (!this.value) {
                this.$emit('input', JSON.parse(JSON.stringify(this.data)));
            } else {
                this.data = JSON.parse(JSON.stringify(this.value));
            }
        },
        computed: {
            cContainerStyle() {
                return `height:${this.data.height}px;`;
            },
            cBannerImgClass() {
                if (this.data.fill == 0) {
                    return 'banner-img-contain';
                }
                if (this.data.fill == 1) {
                    return 'banner-img-cover';
                }
            },
        },
        watch: {
            data: {
                deep: true,
                handler(newVal, oldVal) {
                    this.$emit('input', newVal, oldVal)
                },
            },
            value: {
                deep: true,
                handler(newVal, oldVal) {
                    this.data = newVal;
                    if(newVal.showStyleData){
                        this.styleData = newVal.showStyleData;
                    }
                },
            },
        },
        methods: {
            addBanner() {
                this.data.banners.push({
                    picUrl: '',
                    url: '',
                    openType: '',
                });
            },
            bannerItemDelete(index) {
                this.data.banners.splice(index, 1);
            },
            pickLinkClick(index) {
                this.currentBannerIndex = index;
            },
            linkSelected(list) {
                if (!list.length) {
                    return;
                }
                const link = list[0];
                if (this.currentBannerIndex !== null) {
                    this.data.banners[this.currentBannerIndex].openType = link.open_type;
                    this.data.banners[this.currentBannerIndex].url = link.new_link_url;
                    this.data.banners[this.currentBannerIndex].params = link.params ? link.params : [];
                    this.currentBannerIndex = null;
                }
            },
            handleSelectionChange(val) {
                let arr = [];
                val.forEach(function (item, index) {
                    arr.push({
                        picUrl: item.pic_url,
                        openType: item.open_type,
                        url: item.page_url,
                        params: item.params
                    })
                });
                this.multipleSelection = arr;
            },
            updateBanner() {
                console.log(this.multipleSelection)
                let self = this;
                self.multipleSelection.forEach(function (item, index) {
                    self.data.banners.push(item)
                });
                self.dialogTableVisible = false;
            },

            //显示弹框
            showDialog(){
                this.dialogVisible = true;
                this.radioSelection = 0;
                this.getRelayList();
            },
            getRelayList(){
                this.listLoading2 = true;
                request({
                    params: {
                        r: 'plugin/relay/mall/relay/get-list',
                        ...this.form
                    },
                    method: 'get',
                }).then(res => {
                    if (res.data.code == 0) {
                        var data = res.data.data;
                        this.relayList = data.list;
                        this.relayPageCount = data.pagData.page_count;
                        this.relayCurrentPage = data.pagData.current_page;
                    }

                    this.listLoading2 = false;
                }).catch(e => {
                    this.listLoading2 = false;
                });
            },
            //分页
            pagination(currentPage) {
                this.form.page = currentPage;
                this.getRelayList();
            },
            selectionChange(e){
                this.selectRelay = e;
            },
            cancelSelect(){
                this.selectRelay = null;
                this.dialogVisible = false;
            },
            confirmSelectRelay(){
                this.dialogVisible = false;

                if (this.currentBannerIndex !== null) {
                    this.data.banners[this.currentBannerIndex].openType = '';
                    this.data.banners[this.currentBannerIndex].url = '/mch/Solitaire/details/details?relayId=' + this.selectRelay.id;
                    this.data.banners[this.currentBannerIndex].params = [];
                    this.currentBannerIndex = null;
                }
            },
            searchFun(){
                this.getRelayList();
            },
            reset() {
                this.form = {};
                this.getRelayList();
            },
        }
    });
</script>
<style>
    .el-input--small{
        width: 75%!important;
    }

    .relay-banner-simple .diy-component-edit {
        width: 600px;
        float: left;
        margin: 0 20px;
    }

    .relay-banner-simple .diy-component-preview {
        width: 400px;
        float: left;
        margin: 0 30px;
        border: 1px #00a0e9 dashed;
        padding: 10px 10px 25px 10px;
    }

    .relay-banner-simple .banner-container {
        background: #fff;
    }

    .relay-banner-simple .banner-container .banner-img {
        height: 100%;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .relay-banner-simple .banner-container .banner-img-cover {
        background-size: cover;
    }

    .relay-banner-simple .banner-container .banner-img-contain {
        background-size: contain;
    }

    .relay-banner-simple .banner-edit-item {
        border: 1px solid #dcdfe6;
        padding: 5px;
        margin-bottom: 5px;
    }

    .relay-banner-simple .pic-upload {
        display: block;
        width: 65px;
        height: 65px;
        line-height: 65px;
        border: 1px dashed #8bc4ff;
        color: #8bc4ff;
        background: #f9f9f9;
        cursor: pointer;
        background-size: 100% 100%;
        font-size: 28px;
        text-align: center;
        vertical-align: middle;
    }

    .relay-banner-simple .banner-edit-options {
        position: relative;
    }

    .relay-banner-simple .banner-edit-options .el-button {
        height: 25px;
        line-height: 25px;
        width: 25px;
        padding: 0;
        text-align: center;
        border: none;
        border-radius: 0;
        position: absolute;
        margin-left: 0;
    }

    .relay-banner-simple .banner-style-item {
        width: 100px;
        border: 1px solid #ebeef5;
        cursor: pointer;
        padding: 5px;
        line-height: normal;
        text-align: center;
        color: #606266;
    }

    .relay-banner-simple .banner-style-item + .banner-style-item {
        margin-left: 5px;
    }

    .relay-banner-simple .banner-style-item.active {
        border-color: #00a0e9;
        color: #409EFF;
    }

    .relay-banner-simple .banner-style-1,
    .relay-banner-simple .banner-style-2 {
        display: block;
        height: 50px;
        margin: 0 auto 5px;
        position: relative;
    }

    .relay-banner-simple .banner-style-1 {
        background: #e6f4ff;
    }

    .relay-banner-simple .banner-style-2 > div {
        background: #e6f4ff;
        position: absolute;
        left: 0;
        top: 10%;
        height: 50px;
        width: 100%;
        z-index: 0;
        zoom: .75;
    }

    .relay-banner-simple .banner-style-2 > div:last-child {
        left: 15%;
        zoom: 1;
        box-shadow: 0 0 5px rgba(0, 0, 0, .2);
        z-index: 1;
        width: 70%;
        top: 0;
    }

    .chooseLink .el-input-group__append {
        background-color: #fff;
    }
</style>