qimall/backend/views/components/common/com-banner.php

<?php defined('YII_ENV') or exit('Access Denied');
/**
 * @link:http://www.gdqijianshi.com/
 * @copyright: Copyright (c) 2020 广东七件事集团
 * Created by PhpStorm
 * Author: zal
 * Date: 2020-04-01
 * Time: 21:49
 */
?>
<style>
    .com-banner-scrollbar {
        height: 500px;
    }

    .com-banner-scrollbar > .el-scrollbar__wrap {
        overflow: scroll;
        overflow-x: auto;
        overflow-y: auto;
    }

    .com-banner-end {
        text-align: right;
        margin-top: 20px;
    }

    .com-banner-end div {
        height: 34px;
        text-align: center;
        margin-top: 20px;
    }

    .com-banner-title {
        padding: 1rem 5px;
        font-size: 12px;
        width: 190px;
        border-bottom: 1px solid rgba(0, 0, 0, .125);
    }

    .com-banner-list {
        display: inline-block;
        padding-right: 5px;
        height: 280px;
        width: 250px;
        margin-right: 20px;
        cursor: pointer;
    }

    .com-banner-header {
        margin-top: -15px;
        line-height: 50px;
        height: 50px;
    }

    .com-banner-item {
        display: inline-block;
        border: 4px solid #e1e1e1;
        margin: 5px;
        cursor: pointer;
    }

    .com-banner-item:hover {
        border-color: #b7b7b7;
    }

    .com-banner-item.checked {
        border-color: #5bb94c;
    }

    .com-banner-item-image {
        display: inline-block;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
        cursor: pointer;
        position: relative;
        float: left;
        width: 200px;
        margin: 5px 5px;
        border-radius: 5px;
        height: 217px;
    }

    .com-banner-item-image .com-attachment-img {
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .com-banner-item-image .status {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 99;
        display: none;
    }

    .com-banner-item-image .com-banner-dialog-btn {
        position:absolute;
        bottom:80px;
        right:20px;
        padding: 0;
        display: none;
    }

    .com-banner-item-image:hover .com-banner-dialog-btn {
        display: block;
    }

    .com-banner-item-image.checked .status {
        display: block;
    }
    .com-banner-form-button {
        background: #FFFFFF;
    }

    .com-banner-item-image:hover {
        box-shadow: 0 0 0 1px rgba(84, 200, 255, 0.41);
    }

    .com-banner-item-image.checked,
    .com-banner-item-image.selected {
        box-shadow: 0 0 0 1px #409EFF;
    }

    .com-banner-item-image.checked .com-attachment-active-icon,
    .com-banner-item-image.selected .com-attachment-active-icon {
        opacity: 1;
    }

    .com-banner-text {
        max-width: 240px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .com-banner-form-body {
        padding: 20px 0;
        background-color: #fff;
        padding-bottom: 20px;
    }

    .com-banner-button-item {
        padding: 9px 25px;
    }

    .com-banner-list-item {
        height: 280px;
        width: 250px;
    }

    .com-banner-add-icon {
        font-size: 62px;
        color: #C0C4CC;
        margin-top: 90px;
        margin-bottom: 20px;
    }

    .com-banner-list-item .el-button {
        display: none;
    }

    .com-banner-list-item:hover {
        border: 1px solid #409EFF;
    }

    .com-banner-list-item:hover .el-button {
        display: block;
    }
</style>
<script src="<?= Yii::$app->request->baseUrl ?>/resources/js/Sortable.min.js"></script>
<script src="<?= Yii::$app->request->baseUrl ?>/resources/unpkg/vuedraggable@2.18.1/dist/vuedraggable.umd.min.js"></script>
<template id="com-banner">
    <div class="com-banner">
        <el-dialog title="选择轮播图" :visible.sync="dialogVisible" @opened="dialogOpened" :close-on-click-modal="false"
                   width="718px" append-to-body style="z-index: 999;">
            <!-- 轮播图编辑 -->
            <el-dialog title="轮播图编辑" :visible.sync="bannerVisible" append-to-body>
                <el-form :model="bannerForm" label-width="100px" :rules="bannerFormRules" ref="bannerForm">
                    <el-form-item label="标题" prop="title">
                        <el-input size="small" v-model="bannerForm.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="跳转链接" prop="page_url">
                        <el-input size="small" v-model="bannerForm.page_url" class="input-with-select" autocomplete="off">
                            <com-pick-link slot="append" @selected="selectPageUrl">
                                <el-button size="mini">选择链接</el-button>
                            </com-pick-link>
                        </el-input>
                    </el-form-item>

                    <el-form-item label="图片" prop="pic_url">
                        <com-attachment title="选择图片" @selected="singlePicUrl">
                            <el-tooltip v-if="url == 'plugin/step/mall/banner/index'" class="item"
                                        effect="dark"
                                        content="建议尺寸:750 * 190"
                                        placement="top">
                                <el-button size="mini">选择图片</el-button>
                            </el-tooltip>
                            <el-tooltip v-else-if="url == 'plugin/spell-group/mall/banner/index'" class="item"
                                        effect="dark"
                                        content="建议尺寸:750 * 230"
                                        placement="top">
                                <el-button size="mini">选择图片</el-button>
                            </el-tooltip>
                            <el-tooltip v-else-if="url == 'plugin/bargain/mall/setting/banner-store'" class="item"
                                        effect="dark"
                                        content="建议尺寸:750 * 280"
                                        placement="top">
                                <el-button size="mini">选择图片</el-button>
                            </el-tooltip>
                            <el-tooltip v-else-if="url == 'plugin/lottery/mall/banner/index'" class="item"
                                        effect="dark"
                                        content="建议尺寸:750 * 280"
                                        placement="top">
                                <el-button size="mini">选择图片</el-button>
                            </el-tooltip>
                            <el-tooltip v-else-if="url == 'plugin/score_mall/mall/banner/index'" class="item"
                                        effect="dark"
                                        content="建议尺寸:750 * 190"
                                        placement="top">
                                <el-button size="mini">选择图片</el-button>
                            </el-tooltip>
                            <el-tooltip v-else class="item"
                                        effect="dark"
                                        content="建议尺寸:750 * 350"
                                        placement="top">
                                <el-button size="mini">选择图片</el-button>
                            </el-tooltip>
                        </com-attachment>
                        <com-image width='80px' height='80px' mode="aspectFill" :src="bannerForm.pic_url"></com-image>
                    </el-form-item>
                    <el-form-item style="margin-bottom: 0">
                        <el-button style="float: right;width: 80px;margin-left: 20px" size="small" type="primary" @click="bannerSubmit" :loading="bannerLoading">提交</el-button>
                        <el-button style="float: right;width: 80px;margin-left: 20px" size="small" @click="bannerVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <div class="com-banner-header">
                <div style="float:right">
                    <template v-if="showEditBlock">
                        <el-button @click="showEditBlock=false" size="mini">退出编辑</el-button>
                        <el-button @click="bannerDestroy" size="mini" type="danger">删除</el-button>
                    </template>
                    <el-button v-else @click="showEditBlock=true" size="mini">开启编辑</el-button>
                </div>
            </div>
            <el-card shadow="never">
                <el-scrollbar class="com-banner-scrollbar" v-loading="loading">
                    <div v-if="showEditBlock==true" class="com-banner-item-image" style="height: 217px;text-align: center;" @click="bannerEdit">
                        <i class="el-icon-plus com-banner-add-icon" style="margin-top: 60px"></i>
                        <div style="color: #C0C4CC;font-size: 16px">添加轮播图</div>
                    </div>
                    <div v-for="(item, index) in banners" :key="index"
                         :class="'com-banner-item-image'+((item.checked)?' checked':'')" @click="pickerChange(item)">
                        <img class="com-attachment-img" :src="item.pic_url" style="width: 100%;height: 150px;">
                        <div style="padding:15px;font-size:12px;height: 63px">
                            <div class="com-banner-text">标题：{{item.title}}</div>
                            <div class="com-banner-text">路径：{{item.page_url}}</div>
                        </div>
                        <el-button v-if="showEditBlock" style="right:75px;" class="com-banner-dialog-btn" size="small" circle type="text" @click.stop="selectItem(item)">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <img src="resources/img/mall/edit.png" alt="">
                            </el-tooltip>
                        </el-button>
                        <el-button v-if="showEditBlock" style="" class="com-banner-dialog-btn" size="small" circle type="text" @click.stop="bannerDestroy(item)">
                            <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                <img src="resources/img/mall/del.png" alt="">
                            </el-tooltip>
                        </el-button>
                        <img class="status" src="resources/img/mall/choose.png" alt="">
                    </div>
                </el-scrollbar>
                <div style="padding: 5px;text-align: center">
                    <el-button v-if="noMore" type="text" :disabled="true">已无更多</el-button>
                    <el-button v-else type="text" @click="handleLoadMore" :loading="loadMore">加载更多</el-button>
                </div>
            </el-card>
            <div class="com-banner-end">
                <el-button @click="confirm" :disabled="checkedAttachments.length == 0" style="width: 80px;" size="small" type="primary">选定</el-button>
            </div>
        </el-dialog>
        <el-card shadow="never" style="border:0" body-style="background-color: #f3f3f3;padding: 10px 0 0;" v-loading="listLoading">
            <div slot="header" class="clearfix">
                <span>轮播图管理</span>
                <div style="float: right;margin-top: -5px">
                    <el-button type="primary" @click="editItem" size="small">编辑</el-button>
                </div>
            </div>
            <div class="text item">
                <el-form label-width="20px" size="small" class="demo-ruleForm">
                    <div class="com-banner-form-body">
                    <el-form-item>
                            <div class="com-banner-list" style="float: left;">
                                <el-card  class="com-banner-list-item" :body-style="{ padding: '0px' }" shadow="never" style="text-align: center;">
                                    <div @click="dialogVisible = !dialogVisible">
                                        <i class="el-icon-plus com-banner-add-icon"></i>
                                        <div style="color: #C0C4CC;font-size: 16px">添加轮播图</div>
                                    </div>
                                </el-card>
                            </div>
                            <draggable v-model="list" :options="{animation: 200}">
                                <div v-for="(item, index) in list" class="com-banner-list">
                                    <el-card class="com-banner-list-item" :body-style="{ padding: '0px' }" shadow="never">
                                        <div style="position: relative">
                                            <img style="height:190px;width:250px;display:block;" :src="item.pic_url" alt=''>
                                            <el-button style="position:absolute;bottom:20px;right:20px;padding: 0" size="small" circle type="text" @click="listDestroy(index)">
                                                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                                    <img src="resources/img/mall/del.png" alt="">
                                                </el-tooltip>
                                            </el-button>
                                        </div>
                                        <div style="height:90px;padding:10px;font-size:12px;border-bottom:1px solid rgba(0,0,0,.125)">
                                            <div class="com-banner-text">标题：{{item.title}}</div>
                                            <div class="com-banner-text">路径：{{item.page_url}}</div>
                                        </div>
                                    </el-card>
                                </div>
                            </draggable>
                        </el-form-item>
                    </div>
                    <el-form-item class="com-banner-form-button">
                        <el-button class="button-item" type="primary" @click="onSubmit" size="small">保存</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
    </div>
</template>
<script>
    Vue.component('com-banner', {
        template: '#com-banner',
        props: {
            url: String,
            submit_url: String
        },
        data() {
            return {
                noMore: false,
                loadMore: false,
                showEditBlock: false,

                bannerForm: {},
                list: [],
                bannerLoading: false,
                bannerVisible: false,
                bannerFormRules: {
                    title: [
                        {min: 1, max: 30, message: "标题长度在1-30个字符内"},
                    ],
                    sort: [
                        {required: false, pattern: /^[1-9]\d{0,8}$/, message: '排序必须在9位正整数内'}
                    ],
                    pic_url: [
                        {required: true, message: '图片不能为空', trigger: ['blur', 'change']},
                    ]
                },
                page: 1,
                dialogVisible: false,
                loading: true,
                banners: [],
                checkedAttachments: [],
                listLoading: false,
            };
        },
        created() {
            this.getList();
        },
        methods: {
            listDestroy(index) {
                this.$confirm('确认删除该轮播图吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.list.splice(index, 1);
                    this.onSubmit(1);
                }).catch(() => {

                })
            },
            selectPageUrl(e) {
                let self = this;
                e.forEach(function (item, index) {
                    self.bannerForm.page_url = item.new_link_url;
                    self.bannerForm.open_type = item.open_type;
                    self.bannerForm.params = item.params ? item.params : [];
                })
            },
            singlePicUrl(e) {
                if (e.length) {
                    this.bannerForm.pic_url = e[0].url;
                    this.$refs.bannerForm.validateField('pic_url');
                }
            },
            bannerEdit() {
                this.bannerForm = {
                    page_url: '',
                    pic_url: '',
                    title: '',
                };
                this.bannerVisible = true;
            },

            bannerDestroy(row) {
                let para;
                if(row.id > -1) {
                    para = [row.id];
                }else {
                    para = this.checkedAttachments.map((item, index, arr) => {
                        return item['id']
                    });
                    if (!para || Object.keys(para).length == 0) {
                        this.$message.error("请至少选择一项");
                        return;
                    }
                }
                this.$confirm('确认删除该选记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    request({
                        params: {
                            r: 'mall/carousel-img/banner-destroy',
                        },
                        data: {
                            ids: para,
                        },
                        method: 'post'
                    }).then(e => {
                        if (e.data.code == 0) {
                            this.checkedAttachments = [];
                            this.page = 1;
                            this.listFormat(para);
                            this.loadList({});
                        } else {
                            this.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                    });
                });
            },
            listFormat(para){
                let newList = [];
                let oldList = JSON.parse(JSON.stringify(this.list));
                oldList.forEach(v => {
                    if(v.id.indexOf(para) === -1)
                        newList.push(v);
                })
                this.list = newList;
            },
            bannerSubmit() {
                this.$refs.bannerForm.validate((valid) => {
                    if (valid) {
                        let para = Object.assign({}, this.bannerForm);
                        this.bannerLoading = true;
                        request({
                            params: {
                                r: 'mall/carousel-img/banner-edit',
                            },
                            data: para,
                            method: 'post'
                        }).then(e => {
                            if (e.data.code == 0) {
                                this.bannerVisible = false;
                                this.checkedAttachments = [];
                                this.loadList({});
                            } else {
                                this.$message.error(e.data.msg);
                            }
                            ;
                            this.bannerLoading = false;
                        }).catch(e => {
                            this.bannerLoading = false;
                        });
                    }
                });
            },

            handleLoadMore() {
                if (this.noMore) {
                    return;
                }
                this.page++;
                this.loadMore = true;
                request({
                    params: {
                        r: 'mall/carousel-img/banner',
                        page: this.page
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        if (e.data.data.list.length == 0) {
                            this.noMore = true;
                        }
                        this.banners = this.banners.concat(e.data.data.list);
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.loadMore = false;
                }).catch({});
            },
            dialogOpened() {
                if (!this.banners || !this.banners.length) {
                    this.loadList({});
                }
            },
            loadList(params) {
                this.loading = true;
                params['r'] = 'mall/carousel-img/banner';
                request({
                    params: params,
                }).then(e => {
                    if (e.data.code === 0) {
                        this.banners = e.data.data.list;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    ;
                    this.loading = false;
                }).catch();
            },

            editItem(item) {
                let that = this;
                this.dialogVisible = true;
                setTimeout(function(){
                    resize();
                    that.bannerVisible = true;
                },0)             
            },

            selectItem(item) {
                this.bannerForm = item;
                this.bannerVisible = true;
            },
            pickerChange(item) {
                if (item.checked) {
                    item.checked = false;
                    for (let i in this.checkedAttachments) {
                        if (item.id === this.checkedAttachments[i].id) this.checkedAttachments.splice(i, 1);
                    }
                } else {
                    item.checked = true;
                    this.checkedAttachments.push(item);
                }
                this.banners = JSON.parse(JSON.stringify(this.banners));

            },
            confirm() {
                this.list = this.list.concat(this.checkedAttachments)
                this.dialogVisible = false;
                this.banners = [];
                this.checkedAttachments = [];
            },
            //获取列表
            getList() {
                this.listLoading = true;
                request({
                    params: {
                        r: this.url,
                        type: 1,
                        page: this.page,
                    },
                }).then(e => {
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false;
                }).catch(e => {
                    this.listLoading = false;
                });
            },
            onSubmit(number) {
                let data = this.list.map((item, index, arr) => {
                    return item['id']
                });
                request({
                    params: {
                        r: this.submit_url
                    },
                    data: {
                        ids: data
                    },
                    method: 'post'
                }).then(e => {
                    if (e.data.code === 0) {
                        if(number == 1) {
                            this.$message.success('删除成功');
                        }else {
                            this.$message.success(e.data.msg);
                        }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
        },
    });
</script>