eduerpos_ui_manage/src/components/page/admin/operate/PublicAccountParameterManage.vue

<template>
    <div>
<!--        <div class="crumbs">-->
<!--            <el-breadcrumb separator="/">-->
<!--                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>商品管理</el-breadcrumb-item>-->
<!--                <el-breadcrumb-item>-->
<!--                    <template v-if="newfla">新建商品</template>-->
<!--                    <template v-else>编辑商品</template>-->
<!--                </el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->
<!--        </div>-->
        <div class="container">
            <div class="container" style="margin-top:10px">
<!--                <div class="crumbs" style="margin-top:-10px;">-->
<!--                    <el-breadcrumb separator="" style="position: relative;">-->
<!--                        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>商品型号</el-breadcrumb-item>-->
<!--                    </el-breadcrumb>-->
<!--                </div>-->
                <el-table :border="true" :data="tableData" :fit="true" :stripe="true"
                          style="width: 100%;">
                    <el-table-column align="left" label="今日扫码关注" prop="num">
                    </el-table-column>
                    <el-table-column align="left" label="今日扫码总数" prop="num1">
                    </el-table-column>
                    <el-table-column align="left" label="今日扫码(已关注)" prop="num2">
                    </el-table-column>
                </el-table>
            </div>
            <div class="container" style="margin-top:10px">
                <div class="crumbs" style="margin-top:-10px">
                    <el-breadcrumb separator="" style="position: relative;">
                        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i>公众号参数二维码</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="handle-box">
                    <el-button type="primary" icon="search" @click="addRow"
                    >添加二维码</el-button>
                    <el-button type="primary" icon="search" @click="statistics"
                    >统计数据</el-button>
                </div>
                <dptable :columns="columns1" :dataSource="tableData2" :fetch="getDataList" :options="options2"/>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="addDialogVisible" :before-close="closeDialog">
            <div class="container" >
                <div class="form-box">
                    <el-form ref="form" :model="addForm" label-width="120px">
                        <el-form-item label="场景值" :required="true" style="text-align:left">
                            <el-input v-model="addForm.scene" style="width:360px" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="closeDialog">保存</el-button>
                            <el-button @click="closeDialog">关闭</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </el-dialog>

        <el-dialog :title="title1" :visible.sync="addDialogVisible1" :before-close="closeDialog1" width="60%">
            <div class="container" >
                <div>
                    <span>场景值</span>
                    <el-select v-model="scene" clearable placeholder="请选择">
                        <el-option
                            v-for="item in sceneList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <span>时间范围</span>
                    <el-date-picker
                        v-model="time"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button type="primary" icon="search" @click="getSceneList">查询</el-button>
                </div>
            </div>
            <div class="container" >
                <div class="container" style="margin-top:10px">
                    <el-table :border="true" :data="tableData" :fit="true" :stripe="true"
                              style="width: 100%;">
                        <el-table-column align="left" label="今日扫码关注" prop="num">
                        </el-table-column>
                        <el-table-column align="left" label="今日扫码总数" prop="num1">
                        </el-table-column>
                        <el-table-column align="left" label="今日扫码(已关注)" prop="num2">
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeDialog1">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import dptable from "../../../common/Dptable";

export default {
    components: {
        dptable
    },
    data() {
        return {
            time: '',
            scene: '',
            sceneList: [{
                value: '选项1',
                label: '小包纸巾'
            }, {
                value: '选项2',
                label: '公众号进入'
            }],
            addForm: {
                scene: ''
            },
            // 数据列的定义
            tableData: [
                {
                    num: 10,
                    num1: 20,
                    num2: 5,
                }
            ],
            dialogVisible: false,
            addDialogVisible: false,
            addDialogVisible1: false,
            title: '',
            title1: '',
            columns1: [
                {
                    prop: "appId",
                    label: "公众号appid",
                },
                {
                    prop: "scene",
                    label: "场景值",
                },
                {
                    prop: "num",
                    label: "扫码次数",
                },
                {
                    prop: "orderKey",
                    label: "小程序码",
                },
                {
                    prop: 'createDate', label: '创建时间', formatter: (row) => {
                        var date = row.createDate;
                        if (date == undefined) {
                            return "";
                        }
                        return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
                    }
                },
                {
                    button: true,
                    label: "操作",
                    group: [
                        {
                            name: '编辑',
                            icon: 'el-icon-edit',
                            plain: true,
                            onClick: (row, index) => {
                                this.editRow(row);
                            }
                        },
                        {
                            name: '删除',
                            type: 'danger',
                            icon: 'el-icon-delete',
                            plain: true,
                            onClick: (row, index) => {
                                this.deleteRow(row);
                            }
                        }
                    ]
                }
            ],
            tableData2: [],
            options2: {
                mutiSelect: false,// 是否有前部的多选框
                index: false, // 显示序号， 多选则 mutiSelect
                initTable: false, // 是否一挂载就加载数据
                border: true
            },
            isImgShow: false,
        }

    },
    created() {
       
    },
    methods: {
        getSceneList() {
            
        },
        closeDialog() {
            this.addDialogVisible = false
        },
        closeDialog1() {
            this.addDialogVisible1 = false
        },
        
        getDataList() {
        },
        editRow() {
            this.title = '编辑公众号参数二维码';
            this.addDialogVisible = true;
        },
        addRow() {
            this.title = '新增公众号参数二维码';
            this.addDialogVisible = true;
        },
        statistics() {
            this.title1 = '新增公众号参数二维码统计';
            this.addDialogVisible1 = true;
        },
        //删除商品参数
        deleteRow(goodsParamId) {
            this.$confirm('确定要删除该公众号参数二维码吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success("删除成功！");
            }).catch(() => {
                this.$message.info('已取消删除');
            });
        },
    }
}
</script>
<style scoped>
.added {
    position: absolute;
    right: 20px;
    top: -10px;
}

.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.del-dialog-cnt {
    font-size: 16px;
    text-align: center
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.container {
    background-color: #f6fafd;
    margin-top: 10px;
}

.el-form-item label {
    color: #35637d;
    margin-right: 10px;

}

/* .el-form-item div{
    border-bottom: 1px solid #cccccc;
    margin-left: 20px;
    width: 60%;
    height: 30px;
} */
.el-form-item .upload-demo /deep/ .el-upload–text {
    border: none;
    width: 0px;
}


.avatar-uploader .el-upload {
    border: none;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 400px;
    background: none;
    height: 210px;
}

.el-upload--text {
    color: #97a8be;
    font-size: 14px;
    text-align: center;
    width: 210px !important;
    height: 210px !important;
    background: none !important;
}

/* .el-upload--text {
    background-color: #fff;
    border: none;
    border-radius: 6px;

    width: 0px;
    height: 0px;
    cursor: pointer;
    position: fixed;
    overflow: hidden;
} */

.el-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    outline: 0;
    width: 0px;
    height: 0px;
}

.hide .el-upload--picture-card {
    display: none;
}

.addimg {
    width: 192px;
    border: 1px solid;
    color: #97a8be;
    transition: color .25s;
    position: relative;
    border-radius: 6px;
    /* padding: 20px 0; */
    min-height: 80px;
}

.addimg::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    margin-left: -30px;
    margin-top: -5px;
    border-top: 5px solid;
}

.addimg::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 60px;
    margin-left: -2px;
    margin-top: -30px;
    border-left: 5px solid;
}

.el-dialog__wrapper /deep/ .el-dialog .el-dialog__body {
    padding: 10px 20px !important;
}

.addimg1 {
    border: 1px solid;
    width: 192px;
    color: #97a8be;
    transition: color .25s;
    position: relative;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 20px 0; */
}
</style>