qimall/addons/Album/backend/views/default/index.php

<?php
//画册列表

?>
<div id="app"></div>

<template id="main">
    <el-card shadow="never" style="border:0;min-width: 800px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="flex text-bold text-sm justify-between align-center" slot="header">画册管理</div>
        <div class="padding-xs solid-gray">
            <components :$route="route" @router="route = $event" :is="route.path"></components>
        </div>
    </el-card>
</template>

<template id="mtmlt">
    <div>
        <div class="flex">
            <div class="solid-bottom flex align-center padding-bottom-xs">
                <el-button type="primary"  @click="openalbum()" class="el-button--small">新增画册</el-button>
            </div>
        </div>
        <div style="min-height: 70vh;" v-loading="loading">
            <el-row>
                <el-col :key="index" v-for="(item,index) in albumList" :lg="4" :md="8" :sm="12">
                    <div  class="album">
                        <div class="album-content">
                            <el-image style="width: 240px; height: 150px" fit="cover" fit="cover" :src="item.album_image" @click="handle('edit',item)"></el-image>
                            <div class="list_title">
                                <div>{{item.title}}</div>
                                <div>
                                    <span>创建时间：{{item.created_at|dateTimeFormat('Y-m-d H:i:s')}}</span>
                                    <dl>共{{item.page_num}}页</dl>
                                </div>
                                <div class="button_erea">
                                    <el-button  type="primary" class="el-button--small small_button" @click="handle('edit',item)">编辑</el-button>
                                    <el-button type="primary" class="el-button--small small_button" @click="openstatistics(item)">数据</el-button>
                                    <el-button type="primary" class="el-button--small small_button" @click="handle('copy',item)">复制</el-button>
                                    <el-button type="danger" class="el-button--small small_button" @click="handle('delete',item)">删除</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>

        </div>
        <div style="text-align: right;margin: 20px 0;">
            <el-pagination v-if="pagination" :page-size="pagination.pageSize"
                           style="display: inline-block;float: right;" background @current-change="pageChange"
                           layout="prev, pager, next" :total="pagination.total_count">
            </el-pagination>
        </div>
        <!--        弹框添加相册-->
        <el-dialog title="创建画册" width="30%" :visible.sync="dialogAddgsVisible"
                   @close="closeDialogAddgsVisible" :modal-append-to-body="false">
            <el-form :model="addForm" ref="addForm" :rules="addRule" :inline="true"  @submit.native.prevent label-width="100px">
                <el-form-item label="相册名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请填写相册名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogAddgsVisible = false">取 消</el-button>
                <el-button type="primary" :loading="btnLoading" @click="handle('add','addForm')">确 定</el-button>
            </span>
        </el-dialog>
        <!--        弹框添加相册结束-->

        <!-- “数据”弹窗 -->
        <!-- <el-dialog title="数据(数据更新于2021-02-12 12:11)" :visible.sync="dialogFormVisible"> -->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" >
            <div class="flex-x-between">
                <div class="statistics_name">画册名称：{{data_list.title}}</div>
                <div class="statistics_created_at" v-if="data_list.created_at">
                    发布时间：{{data_list.created_at | dateTimeFormat("Y-m-d H:i:s")}}
                </div>
            </div>
            <div class="dialog-cont" :data="data_list">
                <div class="cont-title">互动数据</div>
                <el-row :gutter="20" style="padding: 10px 0;background-color: #f3f2f2;">
                    <el-col :span="4">
                        <div class="cont-num center">{{data_list.views_count||"0"}}</div>
                        <div class="center">浏览次数</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="cont-num center">{{data_list.visit_count||"0"}}</div>
                        <div class="center">浏览人数</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="cont-num center" >{{data_list.stop_time||"0"}}</div>
                        <div class="center">平均浏览时长(秒)</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="cont-num center">{{data_list.shares_count||"0"}}</div>
                        <div class="center">分享次数</div>
                    </el-col>
                    <el-col :span="4">
                        <div class="cont-num center">{{data_list.shares_click_count||"0"}}</div>
                        <div class="center">分享访问</div>
                    </el-col>
                </el-row>
            </div>

            <div class="dialog-cont">
                <div class="cont-title">商品数据</div>
                <el-table :data = "goods_data" height="250" style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
                    <el-table-column label="商品名称" align="left">
                        <template slot-scope="scope">
                            <div v-if="scope.row.goods != ''&& scope.row.goods != null">
                                <div style="float: left; width:60px">
                                    <img width='60px' height='60px'
                                         style="float: left;"
                                         v-if="scope.row.goods.cover_pic"
                                         :src="scope.row.goods.cover_pic"
                                    />
                                </div>
                                <div style="float: left; width: 50%;margin-left: 10px; text-align: left;">
                                    <com-ellipsis :line="1" :title="scope.row.goods.goods_name">{{scope.row.goods.goods_name}}</com-ellipsis>
                                    <p style="color: red;">￥{{scope.row.goods.price}}</p>
                                </div>
                            </div>
                            <samp v-else>--</samp>
                        </template>
                    </el-table-column>
                    <el-table-column prop="view_number" label="引导进详情页人数" width="180">
                        <template slot-scope="scope">
                            <span :title="scope.row.view_number" class="">{{scope.row.visit_count||0}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="bought_number" label="引导付款人数">
                        <template slot-scope="scope">
                            <span :title="scope.row.bought_number" class="">{{scope.row.pay_count||0}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="amount" label="引导付款金额">
                        <template slot-scope="scope">
                            <span :title="scope.row.amount" class="">{{scope.row.amount||0}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>

</template>
<script>
    // 无路由通过Prop 模拟路由
    const VueRoute = {
        props: {
            $route: {
                type: Object,
                required: true
            }
        },
        methods: {
            $router(path) {
                if (typeof path === 'string') {
                    this.$emit('router', {
                        path,
                        query: {}
                    })
                } else {
                    this.$emit('router', path)
                }
            }
        }
    }
    const components = {
        ManagementAlbum: {
            template: '#mtmlt',
            extends: VueRoute,
            created() {
                this.getAlbumList()
            },
            data() {
                var validatePass = (rule, value, callback) => {
                    var reg = /^[\u4e00-\u9fa5\w]+$/;
                    if (reg.test(value)) {
                        callback();
                    }else{
                        callback(new Error('规则名不能含有特殊字符'));
                    }
                };
                return {
                    page: 1,
                    page_count: 0,
                    page_size: 0,
                    title:'',
                    btnLoading: false,
                    total: 0,
                    addForm:{
                        name:'',
                    },
                    data_list:{

                    },
                    dialogFormVisible: false, //数据弹窗
                    dialogAddgsVisible:false, //添加相册弹窗
                    loading: false,
                    pagination:[],
                    goods_data:[],
                    albumList: [],
                    api_url:'',
                    addRule: {
                        name: [
                            {required: true, message: '请填写相册名称', trigger: 'change'},
                            {
                                validator: (rule, value, callback) => {
                                    if(value.length>12||value.length<0){
                                        callback('最大长度在1-12个字内');
                                    }
                                    callback();
                                }
                            },
                            {
                                validator:validatePass,
                                trigger: 'blur'
                            },
                        ],
                    },
                }
            },
            methods: {
                /**
                 *关闭或取消模态框，清空值
                 * @param
                 */
                closeDialogAddgsVisible() {
                    this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                    this.title = "" //初始化title的值
                    this.addForm = {//初始化addForm中的值
                        title: "",
                    }
                },
                openalbum(){
                    //this.addForm.name = '';
                    this.dialogAddgsVisible = true;
                },
                openstatistics(data){
                    this.dialogFormVisible = true;
                    this.data_list = data;
                    let self = this;
                    self.btnLoading = true;
                    request({
                        params: {
                            r: 'album/statistics/statistics',
                        },
                        method: 'post',
                        data:{id:data.id},
                    }).then(e => {
                        this.btnLoading = false;
                        if (e.data.code == 0) {
                            this.data_list = e.data.data;
                            this.goods_data = e.data.data.goods;
                            if(this.data_list.created_at){
                                this.title = "数据（数据自"+this.data_list.created_at+"日开始统计）";
                            }else{
                                this.title = "数据统计";
                            }
                            this.data_list.title = data.title;
                            this.data_list.created_at = data.created_at;
                            this.data_list.updated_at = data.updated_at;
                        } else {
                            self.$message.error(e.data.msg);
                        }
                        this.dialogAddgsVisible = false;
                    }).catch(e => {
                        console.log(e);
                    });
                },
                handle(type,data = null){
                    switch (type) {
                        case 'delete':// 删除
                            this.$confirm('删除该条数据后不可以恢复, 是否继续?', '警告', {type: 'warning'}).then(() => {this.send({id: data.id,status:-1,type:'1'});})
                            break;
                        case 'enable':
                            var status = 0;
                            if(data.status=='0') status = 1;
                            this.send({id: data.id,status: status,type:'1'});
                            break;
                        case 'sort':
                            this.send({sort:this.sort,id:this.id});
                            this.id = '';
                            break;
                        case 'edit':
                            let info = {r: 'album/default/edit',album_id: data.id};
                            navigateTo(info);
                            break;
                        case 'copy':
                            let copy = {r: 'album/default/edit',album_id: data.id,type:2};
                            navigateTo(copy);
                            break;
                        case 'add':
                            this.$refs[data].validate((valid) => {
                                let self = this;
                                if (valid) {
                                    let copy = {r: 'album/default/edit',name: self.addForm.name};
                                    navigateTo(copy);
                                } else {
                                    console.log('error submit!!');
                                    return false;
                                }
                            });
                            break;
                    }
                },
                send(data,type=''){
                    let self = this;
                    self.btnLoading = true;
                    request({
                        params: {
                            r: 'album/default/edit',
                        },
                        method: 'post',
                        data:data,
                    }).then(e => {
                        this.dialogAddgsVisible = false;
                        this.btnLoading = false;
                        if (e.data.code == 0) {
                            if(type == 1){
                                let copy = {r: 'album/default/edit',album_id: e.data.data.id};
                                navigateTo(copy);
                            }else{
                                self.$message.success(e.data.msg);
                                self.getAlbumList();
                            }
                        } else {
                            self.$message.error(e.data.msg);
                        }
                    }).catch(e => {
                        console.log(e);
                    });
                },
                pageChange(currentPage) {
                    let self = this;
                    self.page = currentPage;
                    self.getAlbumList();
                },
                getAlbumList(page = 1) {
                    let self = this;
                    self.btnLoading = true;
                    request({
                        params: {
                            r: 'album/default/index',
                        },
                        method: 'post',
                        data: {
                            page:this.page,
                        },
                    }).then(e => {
                        this.btnLoading = false;
                        this.albumList = e.data.data.list;
                        this.api_url = e.data.data.api_url;
                        this.pagination = e.data.data.pagination;
                        this.pagination.pageSize = e.data.data.page_size;
                        this.pagination.total_count = e.data.data.count;
                    }).catch(e => {
                        console.log(e);
                    });
                },

            },

        },

    }


    new Vue({
        el: '#app',
        template: '#main',
        data() {
            return {
                // 模拟路由
                route: {
                    //  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

                    path: 'ManagementAlbum',
                    query: {

                    }
                }
            }
        },
        method: {
            delAlbum() {
                console.log(11)
            }
        },
        components

    })
</script>
<style>
    /* 下部分可抽离 */
    .flex {
        display: flex;
    }
    .align-center {
        align-items: center;
    }

    .justify-between {
        justify-content: space-between;
    }


    .margin-top-xs {
        margin-top: 10px;
    }

    .padding-xs {
        padding: 10px;
    }


    .padding-bottom-xs {
        padding-bottom: 10px;
    }



    .text-sm {
        font-size: 16px;
    }



    .text-bold {
        font-weight: bold;
    }
</style>
<style>
    /* 数据 */
    .el-dialog__body{
        padding: 20px;
    }
    .flex-x-between{
        width: 100%;
        height: 30px;
        line-height: 30px;
    }
    .dialog-cont{
        margin-top: 20px;
        clear: both;
    }
    .cont-title {
        font-size: 15px;
        padding-top: 20px;
        padding-bottom: 10px;
        font-weight: 700;
    }
    .cont-num {
        font-size: 14px;
        font-weight: 700;
        padding-bottom: 10px;
    }
    .center {
        text-align: center;
    }
    .el-dialog__header .el-dialog__title{
        font-size: 18px;
    }
    .el-dialog__wrapper .el-dialog__body{
        padding: 3px 20px;
    }
    .statistics_name{
        width: 55%;
        float: left;
    }
    .statistics_created_at{
        width: 25%;
        font-size: 12px;
        color: #999999;
        float: right;
    }
    .statistics_update_at{
        width: 20%;
        color: #999999;
        font-size: 12px;
        float: left;
    }
    /* 列表 */
    .list_title{
        width: 100%;
        height: 30px;
        line-height: 20px;
        text-align: left;
        font-size: 15px;
        margin-top: 10px;
    }
    .list_title span{
        color: #999999;
        font-size: 12px;
    }
    .list_title dl{
        margin: 0;
        padding: 0;
        color: #999999;
        font-size: 12px;
        float: right;
        width: 50px;
        text-align: right;
    }
    .solid-gray {
        background-color: #FFFFFF;
    }
    .button_erea .small_button{
        margin: 0;
        color: #ffffff;
    }
    .button_erea .small_button span{
        color: #ffffff;
    }
    .button_erea{
        margin-top: 10px;
    }
    .album {
        background-color: white;
        width: 250px;
        height: 260px;
        border-radius: 5px;
        margin-top: 10px;
        padding: 5px;
        margin: 5px auto;
        cursor: pointer;
        position: relative;
        border: 1px solid #efefef;
    }

    .album-content {
        height: 100%;
        width: 100%;
    }

    .album-content>.el-image {
        width: 100%;
        display: block;
        height: 90%;
    }

    .album-mask {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        position: absolute;
        background-color: rgba(0, 0, 0, .3);
    }


    .bg-white {
        background-color: white;
    }
</style>