<template> <div class="sms"> <el-form ref="searchFrom" :model="searchFrom" label-width="100px" inline> <el-form-item label="类型"> <el-select v-model="searchFrom.type" placeholder="请选择" @change="getList" clearable> <el-option v-for="item in TypeList" :key="item.status" :label="item.value" :value="item.status"> </el-option> </el-select> </el-form-item> <el-form-item label="短信手机号"> <el-input v-model="searchFrom.mobile" @change="getList"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="getList">搜索</el-button> </el-form-item> </el-form> <el-tabs v-model="searchFrom.status" type="card" style="background: white;padding-top: 10px" @tab-click="getList"> <el-tab-pane label="全部" name="-1"></el-tab-pane> <el-tab-pane label="发送成功" name="0"></el-tab-pane> <el-tab-pane label="发送失败" name="1"></el-tab-pane> </el-tabs> <el-table :data="list" style="width: 100%"> <el-table-column className="f-c" label="用户"> <template slot-scope="scope"> <div v-if="scope.row.user_id"> <img class="avatar" :src="scope.row.avatar"> {{scope.row.nickname}}(ID:{{scope.row.user_id}}) <br>手机:{{scope.row.user_mobile}} </div> <div v-if="!scope.row.user_id"> 未绑定用户信息 </div> </template> </el-table-column> <el-table-column prop="mobile" label="短信手机号"> </el-table-column> <el-table-column prop="sms_code" label="短信验证码"> </el-table-column> <el-table-column label="发送结果"> <template slot-scope="scope"> <div v-if="scope.row.status==0"> {{scope.row.status | filterStatus}} </div> <div v-if="scope.row.status != 0"> {{scope.row.status | filterStatus}} / {{scope.row.result}} </div> </template> </el-table-column> <el-table-column prop="created_at" label="发送时间" sortable> </el-table-column> </el-table> <page :nowPage="nowPage" :total="total" @pageChange="onPageChange" @sizeChange="onSizeChange"/> </div> </template> <script> import page from '../framework/page' import {getsmsRecordApi} from "../../service/api"; export default { name: "smsRecord", components:{ page }, data(){ return { nowPage: 1, total: 0, limit: 10, useTypeList:[ { status:0, value:'发送成功' }, { status:1, value:'发送失败' }, ], TypeList:[ { status:1, value:'注册验证码' }, ], searchFrom: { type: '', mobile:'', status:'-1' }, list: [] } }, filters:{ filterStatus:function (value) { let msg = ''; if(value === 0){ msg = '发送成功' }else{ msg = '发送失败' } return msg; } }, mounted(){ this.getList() }, methods: { onPageChange(val){ this.nowPage = val; this.getList() }, onSizeChange(val){ this.nowPage = 1; this.limit = val; this.getList() }, getList(){ let json = { limit: this.limit, page: this.nowPage, }; if(this.searchFrom.type){ json.type = this.searchFrom.type } if(this.searchFrom.status !== '-1'){ json.status = this.searchFrom.status } if(this.searchFrom.mobile){ json.mobile = this.searchFrom.mobile } getsmsRecordApi(json).then((res)=>{ this.total = res.total; this.list = res.list ? res.list : [] }) } } } </script> <style scoped lang="less"> .sms{ padding: 20px 0; } .avatar { width:50px; min-width: 50px; height: 50px; border-radius: 50%; } </style> <style> .f-c >.cell div{ display: flex !important; flex-flow: row; justify-content: flex-start; align-items: center; } </style>