兑换码记录

src/views/service/record/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class='app-container'>
+    <!-- 搜索 -->
+    <el-form inline size="mini">
+      <el-form-item label="批次号：">
+        <el-input v-model="form.no" placeholder="请输入批次号" clearable />
+      </el-form-item>
+      <el-form-item label="兑换码编码：">
+        <el-input v-model="form.code" placeholder="请输入兑换码编码" clearable />
+      </el-form-item>
+      <el-form-item label="设备标识：">
+        <el-input v-model="form.deviceMac" placeholder="请输入设备标识" clearable />
+      </el-form-item>
+      <el-form-item label="设备名称：">
+        <el-input placeholder="请输入设备名称" />
+      </el-form-item>
+      <el-form-item label="设备型号：">
+        <el-select v-model="form.clientType" placeholder="请选择设备型号">
+          <el-option v-for="item in devOptions" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用户手机号：">
+        <el-input v-model="form.phone" placeholder="请输入用户手机号" clearable />
+      </el-form-item>
+      <el-form-item label="服务时长：">
+        <el-select v-model="form.serviceTime" placeholder="请选择服务时长" clearable>
+          <el-option v-for="item in serviceTimeOptions" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="当前状态：">
+        <el-select v-model="form.activeStatus" placeholder="请选择当前状态" clearable>
+          <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
+        <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <!-- 列表 -->
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column label="批次号" prop="no" align="center" show-overflow-tooltip />
+      <el-table-column label="兑换码编码" prop="code" align="center" show-overflow-tooltip />
+      <el-table-column label="设备标识" prop="deviceMac" align="center" show-overflow-tooltip />
+      <el-table-column label="设备型号" prop="clientType" align="center" show-overflow-tooltip />
+      <el-table-column label="设备名称" align="center" />
+      <el-table-column label="用户账号" prop="userId" align="center" />
+      <el-table-column label="用户手机号" prop="phone" align="center" />
+      <el-table-column label="服务时长" prop="serviceTime" align="center" :formatter="serviceFormatter" />
+      <el-table-column label="领取时间" prop="activeTime" align="center" />
+      <el-table-column label="创建时间" prop="createTime" align="center" />
+      <el-table-column label="当前状态" prop="activeStatus" align="center" :formatter="statusFormatter" />
+    </el-table>
+    <pagination v-show="total > 0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
+      @pagination="getList" />
+  </div>
+</template>
+
+<script>
+import { list } from '@/api/service/platform'
+import { serviceTimeMixin, devMixin } from '@/mixin/index'
+export default {
+  mixins: [serviceTimeMixin, devMixin],
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      // 总数据
+      total: 0,
+      // 列表
+      tableData: [],
+      // 当前状态
+      statusOptions: [{
+        value: 0,
+        label: '未激活'
+      }, {
+        value: 1,
+        label: '已激活'
+      }]
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    // 列表
+    getList() {
+      this.loading = true
+      list(this.form).then(res => {
+        console.log(res);
+        if (res.code === 0) {
+          this.tableData = res.data.records
+          this.total = res.data.total
+          this.loading = false
+        }
+      })
+    },
+
+    // 搜索
+    getSearch() {
+      this.form.pageNum = 1
+      this.getList()
+    },
+
+    // 重置
+    getRefresh() {
+      this.form = {
+        pageNum: 1,
+        pageSize: 10
+      }
+      this.getList()
+    },
+
+    // 字典翻译
+    statusFormatter(row) {
+      return this.selectDictLabel(this.statusOptions, row.activeStatus)
+    },
+    serviceFormatter(row) {
+      return this.selectDictLabel(this.serviceTimeOptions, row.serviceTime)
+    }
+  }
+}
+</script>