短信-验证码记录

src/api/sms/smsRecord.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request';
+import {genQueryParam} from "@/utils/maintainer";
+
+export const pageRecord = query => {
+    return request({
+        url: '/admin/smsRecord/page',
+        method: 'get',
+        params: query
+    });
+};

src/views/sms/SmsRecordView.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="box">
+    <!-- ID -->
+    <div class="condition">
+      <div class="inquire">
+        <span>手机号</span>
+        <el-input v-model="inquire.phone" placeholder="手机号" class="input" />
+      </div>
+    </div>
+    <!-- 按钮 -->
+    <div class="but">
+      <el-button class="primary" type="primary" @click="getData()">查询</el-button>
+    </div>
+
+    <!-- 表格 -->
+    <el-table
+      v-loading="loading"
+      :data="table.tableData"
+      border
+      style="width: 100%; margin-top: 25px"
+    >
+      <el-table-column prop="phone" align="center" label="手机号" />
+      <el-table-column prop="deviceId" align="center" label="设备号" />
+      <el-table-column prop="appVersion" align="center" label="app版本" />
+      <el-table-column prop="model" align="center" label="手机型号" />
+      <el-table-column prop="os" align="center" label="操作系统" />
+      <el-table-column prop="smsType" align="center" label="业务类型">
+        <template v-slot="scope">
+          {{ getTypeDesc(scope.row.smsType) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="smsCode" align="center" label="验证码" />
+      <el-table-column prop="ip" align="center" label="ip" />
+      <el-table-column prop="resCode" align="center" label="服务商状态码" />
+      <el-table-column prop="resMsg" align="center" label="服务商提示" />
+      <el-table-column prop="createTime" align="center" label="发送时间" />
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+      style="margin-top: 10px"
+      class="paginationClass"
+      v-model:current-page="currentPage"
+      v-model:page-size="pageSize"
+      :page-sizes="[20, 50, 100, 200]"
+      layout="sizes, prev, pager, next"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+
+  </div>
+</template>
+<script>
+import { pageRecord } from "@/api/sms/smsRecord";
+
+export default {
+  name: "SmsRecordView",
+  data() {
+    return {
+      typeMap :{
+        1: "注册验证码",
+        2: "登录",
+        3: "忘记密码(客户端重置支付密码有用到)",
+        4: "绑定手机",
+        5: "绑定支付宝",
+        6: "重置支付密码",
+        7: "更换绑定手机号码",
+        8: "实名认证",
+        9: "h5绑定支付宝",
+        10: "后台登录",
+        11: "绑定提现银行卡",
+        12: "h5 绑定提现银行卡",
+        13: "非登录态重置密码",
+        14: "登录态重置密码",
+        15: "手机授权码"
+      },
+      loading: false,
+      //查询所需条件对象
+      inquire: {
+        phone: undefined,
+      },
+      table: {
+        tableData: [],
+        total: 10, //总页数
+        currentPage: 1, //页码
+        pageSize: 10, //条数
+      },
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    getTypeDesc(type){
+      return this.typeMap[type] || "未知";
+    },
+    // 查询接口
+    getData() {
+      this.loading = true;
+      pageRecord({
+        phone: this.inquire.phone,
+        pageNo: this.table.currentPage,
+        pageSize: this.table.pageSize,
+      }).then((res) => {
+        this.loading = false;
+        if (res.code !== 200){
+          throw new Error(res.msg);
+        }
+        this.table.total = res.data.total;
+        this.table.tableData = res.data.rows;
+      });
+    },
+    // 分页导航
+    handleSizeChange() {
+      this.getData();
+    },
+    handleCurrentChange() {
+      this.getData();
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.box {
+  padding-top: 20px;
+  background: #ecf0f5;
+  .condition {
+    margin-bottom: 20px;
+    .inquire {
+      display: inline-block;
+      margin-right: 20px;
+      span {
+        margin-right: 10px;
+      }
+      .input {
+        width: 180px;
+        margin-right: 10px;
+      }
+    }
+  }
+  .but {
+    margin-bottom: 20px;
+  }
+}
+</style>