qimall/backend/modules/mall/views/diy/index_old.php

<?php

/**
 * Created by PhpStorm.
 * User: 阿源
 * Date: 2020/11/26
 * Time: 11:06
 */
?>
<div id="app" v-cloak>
    <el-card v-loading="loading">
        <div class="nav">店铺装修</div>

        <div class="header_box">
            <div class="add_temp_box flex flex-x-between flex-y-center">
                <div class="add_temp_left flex flex-y-center">
                    <p style="margin-right: 30px;">页面管理</p>
                    <el-button type="primary" style="width: 162px;height:40px" @click="$navigate({r: 'mall/diy/edit'})">新建页面</el-button>
                </div>
                <div class="add_temp_right">
                    <el-input placeholder="输入页面关键词搜索" v-model='title' suffix-icon="el-icon-search" @change='changeName'></el-input>
                </div>
            </div>
        </div>

        <div class="template_body">
            <div class="flex" style="flex-wrap: wrap;">
                <div class='template_item' v-for="(item,index) in temp_list">
                    <div class="template_img_box">
                        <div class="template_img_block">
                            <img class="template_img" :src="item.cover" alt="">
                        </div>
                        <!-- <img :src="item.image" alt="" style="width:100%"> -->
                        <div class='mask flex flex-x-center flex-y-center'>
                            <div class="flex">
                                <div class="temp_preview_small" @click="handle('edit', item)" style="margin-right: 10px;margin-bottom:8px;">编辑页面</div>
                                <div class="temp_preview_small" @click="previewTemp(item)">预览页面</div>
                            </div>
                            <div class="flex" style="margin-bottom: 10px;">
                                <div class="temp_preview_small" @click="handle('copy_page', item)" style="margin-right: 10px;margin-bottom:8px;">复制页面</div>
                                <div class="temp_preview_small" @click="handle('destroy', item)">删除页面</div>
                            </div>
                            <div class="temp_preview copy_btn" @click="handle('copy_link', item)">复制链接</div>
                            <div class="temp_preview" @click="handle('set_home', item)" v-if='item.is_home_page == 0 && item.type == 1'>设为首页</div>
                            <div class="temp_preview" @click="handle('set_home', item)" v-if="item.is_home_page == 0 && item.template == 'home_page'">设为首页</div>
                        </div>
                    </div>
                    <div class="template_text">
                        <div class="template_title flex flex-y-center">
                            <div style="margin-right: 12px;"> 名称：{{item.title}}</div>
                        </div>
                        <div class="use_number flex">
                            <el-tag v-if="item.template == 'custom_page' && item.is_home_page == 1" effect="plain" size="medium" style="margin-right: 5px;"> 首页 </el-tag>
                            <el-tag effect="plain" size="medium"> {{template[item.template]}} </el-tag>
                        </div>
                        <div class="use_number flex">
                            <div>创建时间：{{item.created_at | dateTimeFormat('Y-m-d H:i')}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pagination flex flex-x-between">
                <el-pagination background layout="prev, pager, next" :total="total_count" :hide-on-single-page="true" @current-change='currentChange'></el-pagination>
            </div>
        </div>

        <!-- 预览框 -->
        <el-dialog :visible.sync="dialogVisible" width="24%" :before-close="handleClose">
            <div class="preview_box">
                <div class="preview_content" ref='uContent' @mouseover='enterImg' @mouseout='is_begin = false'>
                    <img @mousemove='imgMove' ref='uImg' class="preview_img" :src="selectObj.image" alt="">
                </div>
            </div>
        </el-dialog>
    </el-card>

</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: '',

                temp_list: [],
                template: [],
                cate_index: 0,
                temp_index: -1,
                page: 1,
                dialogVisible: false,
                scrolltop: 0,
                timer: '', //图片定时滚动任务
                clientY: 0, //用来判断鼠标方向
                speed: 1, //图片滚动的速度
                is_begin: false, //是否开始滚动
                direction: '',
                timerDown: '',
                timerUp: '',
                title: null,

                total_count: 0,

                selectObj: '',
            }
        },
        watch: {
            direction(newVal) { //控制图片随鼠标上下滑动而滑动
                if (newVal == 'up') { //分成两个方法为了方便控制上下滚动
                    clearInterval(this.timerDown)
                    this.rollingUp();
                } else {
                    clearInterval(this.timerUp)
                    this.rollingDown();
                }
            }
        },
        created() {
            this.getList();
        },
        methods: {
            handle(type, data = null) {
                let id = data ? parseInt(data.id) : '';
                switch (type) {
                    case 'edit':
                        let params = {
                            r: 'mall/diy/edit'
                        };
                        if (id) params = Object.assign(params, {
                            id: id
                        });
                        navigateTo(params);
                        break;
                    case 'destroy':
                        if (data.type == 2) {
                            this.$message.error('该页面不允许删除!');
                            return false;
                        }
                        param = {id: data.id};
                        this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {this.send(param, 'mall/diy/delete')})
                        break;
                    case 'copy_page':
                        param = {
                            id: data.id
                        };
                        this.send(param, 'mall/diy/copy-page');
                        break;
                    case 'set_home':
                        param = {
                            id: data.id,
                        };
                        this.send(param, 'mall/diy/set-home');
                        break;
                    case 'copy_link':
                        this.copyLink(data);
                        break;
                }
            },
            send(params, url = '') {
                let self = this;
                request({
                    params: {
                        r: url,
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                        self.getList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    console.log(e);
                });
            },
            copyLink(data) { //复制链接
                var arr = window.location.href.split('/');
                if (data.is_home_page == 0) {
                    var url = arr[0] + '//' + arr[2] + `/h5/#/pages/diy/diy?mall_id=${data.mall_id}&id=${data.id}`;
                } else {
                    var url = arr[0] + '//' + arr[2] +  `/h5/#/?mall_id=${data.mall_id}`;
                }

                var clipboard = new ClipboardJS('.copy_btn', {
                    text: function() {
                        return url;
                    }
                });

                clipboard.on('success', (e) => {
                    this.$message.success('复制成功!');
                    e.clearSelection()
                    clipboard.destroy()
                });
                clipboard.on('error', (e) => {
                    this.$message.error('复制失败!');
                    this.clipboard.destroy()
                });
            },
            changeName(e) {
                this.title = e;
                this.getList();
            },
            previewTemp(obj) {
                this.selectObj = obj;
                this.dialogVisible = true;
            },
            getList() {
                this.loading = true;
                this.$request({
                    params: {
                        r: 'mall/diy/index',
                    },
                    method: 'post',
                    data: {
                        title: this.title,
                        page: this.page
                    }
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.temp_list = e.data.data.list;
                        this.template = e.data.data.template;
                        this.total_count = e.data.data.pagination.total_count;
                    }
                });
            },
            currentChange(e) { //分页点击
                this.page = e;
                this.getList();
                console.log(e, '这是他点击了那个页面');
            },
            handleClose(done) {
                this.dialogVisible = false;
                clearInterval(this.timerUp);
                clearInterval(this.timerDown);
                this.scrolltop = 0;
                this.$refs.uContent.scrollTop = 0;
            },
            enterImg() { //进入图片事件
                setTimeout(() => { //加一个延时，防止鼠标刚移进去图片就开始动
                    this.is_begin = true;
                }, 1000)
            },
            imgMove(e) { //图片滚动事件
                if (!this.is_begin) return;
                if (this.clientY != 0) {
                    if (this.clientY > e.clientY) {
                        this.direction = 'up';
                    } else {
                        this.direction = 'down';
                    }
                };
                this.clientY = e.clientY;
            },
            rollingDown() {
                this.timerDown = setInterval(() => {
                    if (this.$refs.uContent.scrollHeight - 696 >= this.scrolltop) {
                        this.scrolltop = this.scrolltop + this.speed;
                        this.$refs.uContent.scrollTop = this.scrolltop;
                    } else {
                        clearInterval(this.timerDown);
                    }
                }, 2)
            },
            rollingUp() {
                this.timerUp = setInterval(() => {
                    if (this.$refs.uContent.scrollTop <= 0) {
                        clearInterval(this.timerUp);
                    } else {
                        this.scrolltop = this.scrolltop - this.speed;
                        this.$refs.uContent.scrollTop = this.scrolltop;
                    }
                }, 2)
            }
        }
    })
</script>

<style scoped>
    img {
        display: block;
    }

    .nav {
        background: #ffffff;
        border-radius: 5px;
        padding: 26px 24px;
        margin-bottom: 10px;
        /*color: #808695;*/
    }

    .cate_header {
        font-size: 14px;
        color: #808695;
    }

    .cate_title {
        margin-right: 24px;
    }

    .cate_item_active {
        color: #2DB7F5;
        background: #EDF6FF;
    }

    .template_body {
        background: #fff;
        border-radius: 0px 0 5px 5px;
        padding: 0px 49px 70px;
    }

    .template_item {
        width: 220px;
        margin: 0 38px 60px 0;
        cursor: pointer;
    }

    .template_img_box {
        width: 220px;
        height: 430px;
        /* border: 1px solid #BFBFBF; */
        border-radius: 18px;
        overflow: hidden;
        position: relative;
        background: url('resources/img/mall/decorate/duihuakuang240.png');
        background-size: 100% 100%;
    }

    .template_img_block {
        width: 95.7%;
        height: 399px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 26px;
        border-radius: 0 0 15px 15px;
        overflow: hidden;
    }

    .template_img {
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .mask {
        background: rgba(0, 0, 0, 0.5);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        opacity: 0;
        transition: all 0.3s;
        flex-direction: column;
    }

    .template_item:hover .mask {
        opacity: 1;
    }

    .temp_preview_small {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        text-align: center;
        line-height: 30px;
        background: #ffffff;
        color: #313131;
        font-size: 12px;
    }

    .temp_preview {
        width: 170px;
        height: 30px;
        border-radius: 30px;
        background: #2DB7F5;
        color: #ffffff;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        margin-bottom: 8px;
    }

    .template_text {
        font-size: 14px;
        color: #515A6E;
        padding: 0 12px;
    }

    .template_title {
        margin: 10px 0 6px;
    }

    .use_number {
        font-size: 14px;
        align-items: center;
        color: #C5C8CE;
        margin-top: 10px;
    }

    /* 公共样式 */
    .flex {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
    }

    .flex-x-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .flex-x-between {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-pack: space-between;
        -webkit-justify-content: space-between;
        -ms-flex-pack: space-between;
        justify-content: space-between;
    }

    .flex-y-center {
        display: -webkit-box;
        display: -webkit-flex;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }

    /* 溢出隐藏 */
    .over1 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }

    .over2 {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .pagination {
        width: 100%;
        flex-direction: row-reverse;
    }

    .pop {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    /* 预览框 */
    .preview_box {
        width: 377px;
        height: 760px;
        background: url('statics/img/mall/decorate/duihuakuang.png')no-repeat;
        position: relative;
    }

    .preview_content {
        background: #ffffff;
        width: 357px;
        height: 696px;
        position: absolute;
        top: 56px;
        left: 50.2%;
        transform: translateX(-50%);
        border-radius: 0 0 37px 36px;
        scrollbar-width: none;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
    }

    .preview_content::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }

    .preview_img {
        width: 100%;
    }

    .el-dialog__body {
        padding: 0;
        width: 377px;
        height: 760px;
    }

    .el-dialog__header {
        display: none;
    }

    .el-dialog {
        min-width: 377px;
        max-width: 377px;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .header_box {
        padding: 25px;
        background: #fff;
        border-radius: 5px 5px 0 0;
        color: #808695;
    }

    .add_temp_right {
        width: 400px;
    }

    .el-card {
        background: transparent;
        box-shadow: none !important;
        border: 0;
    }

    .el-card__body {
        padding: 0;
    }

    .logo_text {
        width: 56px;
        height: 21px;
        border-radius: 30px;
        background: #FF7161;
        text-align: center;
        line-height: 21px;
        color: #fff;
    }

    .logo_text2 {
        background: #C5C8CE;
    }
</style>