qimall/backend/modules/mall/views/sms/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>短信发送日志</span>
        </div>

        <!-- 统计 -->
        <el-card class="box-card" style="margin-bottom: 10px;">
            <div class="headBox">
                <div class="headItem" >
                    <div>
                        <i class="el-icon-coin" style="font-size: 50px;margin-right: 10px;"></i>
                    </div>
                    <div>
                        <div>
                            <label slot="label">短信发送总数
                                <el-tooltip class="item" effect="dark"
                                            content="商城短信发送总数"
                                            placement="top-start">
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                        </div>
                        <div style="font-weight: bold;font-size: 25px;">{{ statistic.send_total }}</div>
                    </div>
                </div>
                <div class="headItem">
                    <div>
                        <i class="el-icon-coin" style="font-size: 50px;margin-right: 10px;"></i>
                    </div>
                    <div>
                        <div>
                            <label slot="label">验证码
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        会员在商城发送验证码总数
                                    </div>
                                    <i class="el-icon-info"></i>
                                </el-tooltip>
                            </label>
                        </div>
                        <div style="font-weight: bold;font-size: 25px;">{{ statistic.captcha }}</div>
                    </div>
                </div>
                <div class="headItem" style="background-color: #F59C6C;">
                    <div>
                        <i class="el-icon-coin" style="font-size: 50px;margin-right: 10px;"></i>
                    </div>
                    <div>
                        <div>新用户注册</div>
                        <div style="font-weight: bold;font-size: 25px;">{{ statistic.newuser }}</div>
                    </div>
                </div>
                <div class="headItem" style="background-color: #1ABC9C;">
                    <div>
                        <i class="el-icon-coin" style="font-size: 50px;margin-right: 10px;"></i>
                    </div>
                    <div>
                        <div>订单支付提醒</div>
                        <div style="font-weight: bold;font-size: 25px;">{{ statistic.order }}</div>
                    </div>
                </div>
                <div class="headItem" style="background-color: #6C9EF5;">
                    <div>
                        <i class="el-icon-coin" style="font-size: 50px;margin-right: 10px;"></i>
                    </div>
                    <div>
                        <div>订单售后提醒</div>
                        <div style="font-weight: bold;font-size: 25px;">{{ statistic.refund_order }}</div>
                    </div>
                </div>
            </div>
        </el-card>
        <!-- 统计 -->

        <div class="table-body">
            <el-form ref="form" style="margin-bottom: 10px;" :model="search" label-width="96px" size="mini">
                <el-row :gutter="24">
                    <el-col :span="4" style="padding-left: 0;" class="top_form">
                        <el-form-item label="手机号">
                            <el-input v-model="search.mobile" placeholder="请输入手机号" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6" class="top_form">
                        <el-form-item label="ip">
                            <el-input v-model="search.ip" placeholder="请输入ip" clearable></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4"  class="top_form">
                        <el-form-item label="短信类型">
                            <el-select v-model="search.type" placeholder="请选择短信类型">
                                <el-option v-for="(name,title) in type_arr" :label="name" :value="title" :key="name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-button type="primary" size="mini" @click="toSearch" >搜索</el-button>
                        <el-button type="danger" size="mini" @click="resetSearch" >清除</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <el-table :data="list" stripe v-loading="loading" size="small" style="margin-bottom: 15px;">
                <el-table-column prop="mobile" label="手机号码" align="center"></el-table-column>
                <el-table-column prop="ip" label="IP" align="center"></el-table-column>
                <el-table-column label="短信类型" prop="type" align="center">
                    <template slot-scope="scope">
                        <el-tag size="small">{{ type_arr[scope.row.type] }}</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="发送时间"  align="center">
                    <template slot-scope="scope">
                        {{scope.row.created_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
            </el-table>

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>
</div>
<style>
    /*统计样式*/
    .headBox {
        display: flex;
        flex-wrap: wrap;
        /*margin-bottom: 10px;*/
        color: #fff;
    }

    .headItem {
        width: 16%;
        margin:0 0.5%;
        height: 120px;
        border-radius: 10px;
        background-color: #F56C6C;
        /*margin-right: 20px;*/
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            loading: false,
            dialogVisible: false,
            page: 1,
            pageCount: 0,
            list: [],
            search: {
                mobile: null,
                ip: null,
                type: null,
            },
            type_arr: [],// 模块
            statistic:{
                send_total: 0,// 发送总数
                captcha: 0,// 验证码
                newuser: 0,// 新用户注册
                order: 0,// 订单支付提醒
                refund_order: 0,// 订单售后提醒
            }
        },
        mounted() {
            this.loadData();
        },
        methods: {
            //获取列表信息
            loadData() {
                this.loading = true;
                let params = {
                    r: 'mall/sms/index',
                    page:this.page,
                };
                params = Object.assign(params, this.search);
                request({
                    params: params,
                    method: 'get'
                }).then(e => {
                    this.loading = false;
                    if (e.data.code == 0) {
                        this.list = e.data.data.list.list;
                        this.type_arr = e.data.data.type_arr;
                        if(this.page == 1) this.statistic = e.data.data.statistic;
                        this.pageCount = e.data.data.list.page_count;
                        this.page = e.data.data.list.page;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                    this.loading = false;
                });
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadData();
            },
            //搜索
            toSearch() {
                this.page = 1;
                this.loadData();
            },
            //清空搜索
            resetSearch() {
                this.search = {};
                this.loadData();
            },
            handleClose() {
                this.dialogVisible = false
            },
        }
    });
</script>