diff --git a/src/api/activecode.js b/src/api/activecode.js
new file mode 100644
index 0000000..d763c60
--- /dev/null
+++ b/src/api/activecode.js
@@ -0,0 +1,23 @@
+import request from '@/utils/request'
+
+export function genCodes(count) {
+  return request({
+    url: '/active_code/gen?count=' + count,
+    method: 'get'
+  })
+}
+
+export function getCodes(data) {
+  return request({
+    url: '/active_code/list',
+    method: 'post',
+    data
+  })
+}
+
+export function downloadFile(batchid) {
+  return request({
+    url: '/active_code/download?batchid=' + batchid,
+    method: 'get'
+  })
+}
diff --git a/src/router/index.js b/src/router/index.js
index 0f4f6bf..14a58bd 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -353,6 +353,12 @@ export const asyncRoutes = [
         component: () => import('@/views/whitelist/super'),
         name: 'superwhitelist',
         meta: { title: '至尊白名单', pername: 'superwhitelist' }
+      },
+      {
+        path: 'activecode',
+        component: () => import('@/views/activecode/info'),
+        name: 'activecode',
+        meta: { title: '激活码', pername: 'activecode' }
       }
     ]
   }
diff --git a/src/views/activecode/info.vue b/src/views/activecode/info.vue
new file mode 100644
index 0000000..8bb7585
--- /dev/null
+++ b/src/views/activecode/info.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="createPost-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+      <div class="createPost-main-container">
+        <el-row>
+          <el-col :span="1">
+            <el-button class="filter-item" style="margin-left: 10px;" type="primary" @click="handleCreate">
+              新增
+            </el-button>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label-width="120px" label="批次号:" class="postInfo-container-item" prop="batch_id" required>
+              <el-input v-model.number="postForm.batch_id" />
+            </el-form-item>
+          </el-col>
+          <el-button style="margin-left: 10px;" type="success" @click="submitForm()">
+            查询
+          </el-button>
+          <el-button :key="1" :style="{ display: disabledownload===true ? 'none': '' }" type="success" @click="download">下载</el-button>
+        </el-row>
+
+        <el-table
+          :empty-text="emptytext"
+          height="400"
+          :data="activecodelist"
+          border
+          fit
+          highlight-current-row
+          style="width: 100%;"
+        >
+          <el-table-column
+            prop="batch_id"
+            label="批次号"
+            width="150"
+          />
+          <el-table-column
+            prop="activation_code"
+            label="激活码"
+          />
+        </el-table>
+        <el-pagination
+          background
+          :current-page="curpage"
+          :page-size="page_size"
+          :page-count="totalpage"
+          layout="prev, pager, next"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-form>
+    <el-dialog title="新增" :visible.sync="dialogFormVisible" :close-on-click-modal="false" style="width:50%" @close="handleDialogClose()">
+      <el-form ref="form" :rules="countrules" :model="form" label-position="left" style="width: 400px; margin-left:50px;">
+        <el-form-item label-width="70px" label="数量:" class="postInfo-container-item" prop="count" required>
+          <el-input v-model.number="form.count" style="width: 100px" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = handleDialogClose()">
+          Cancel
+        </el-button>
+        <el-button type="primary" @click="createCodes()">
+          Confirm
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { genCodes, getCodes, downloadFile } from '@/api/activecode'
+// import { Papa } from 'papaparse'
+
+export default {
+  name: 'ActiveCode',
+  data() {
+    var r = /^\+?[1-9][0-9]*$/
+    var validatequery = (rule, value, callback) => {
+      if (!this.dialogFormVisible && (!this.postForm.batch_id || !r.test(this.postForm.batch_id))) {
+        callback(new Error('请填写数字'))
+      } else {
+        callback()
+      }
+    }
+
+    var countvalidatequery = (rule, value, callback) => {
+      if (this.dialogFormVisible && (!this.form.count || !r.test(this.form.count))) {
+        callback(new Error('请填写数字'))
+      } else {
+        callback()
+      }
+    }
+
+    return {
+      postForm: {
+        batch_id: ''
+      },
+      form: {
+        count: ''
+      },
+      rules: {
+        batch_id: [{ required: false, validator: validatequery, trigger: 'blur' }]
+      },
+      countrules: {
+        count: [{ required: false, validator: countvalidatequery, trigger: 'blur' }]
+      },
+      downloadbatchid: '',
+      disabledownload: true,
+      emptytext: ' ',
+      activecodelist: [],
+      totalpage: 0,
+      curpage: 1,
+      page_size: 8,
+      dialogFormVisible: false,
+      itemlist: [{
+        name: 'sss',
+        type: 1,
+        price: '$123'
+      }]
+    }
+  },
+  watch: {
+  },
+  mounted() {
+  },
+  methods: {
+    handleDialogClose() {
+      // this.getList()
+    },
+    submitForm() {
+      try {
+        this.$refs['postForm'].validate((valid) => {
+          if (valid) {
+            this.curpage = 1
+            this.totalpage = 0
+            this.getList(true)
+          }
+        })
+      } catch (e) {
+        console.log(e)
+      }
+    },
+    handleCreate() {
+      this.form.count = ''
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['form'].clearValidate()
+      })
+    },
+    resetTemp() {
+      this.postForm = {
+        batch_id: '',
+        count: ''
+      }
+    },
+    handleCurrentChange(val) {
+      this.curpage = val
+      this.getList(false)
+    },
+    getList(query) {
+      const data = {
+        'batch_id': this.postForm.batch_id,
+        'page_dto': {
+          'page': this.curpage,
+          'pageSize': this.page_size
+        }
+      }
+      getCodes(data).then(response => {
+        this.activecodelist = response.data
+        this.totalpage = response.total_page
+        this.curpage = response.cur_page
+        if (this.activecodelist === undefined || this.activecodelist.length <= 0) {
+          this.emptytext = 'No data'
+        } else if (query) {
+          this.downloadbatchid = this.postForm.batch_id
+          this.disabledownload = false
+        }
+        this.$message({
+          message: '收到回应',
+          type: 'success',
+          duration: 1200
+        })
+      })
+    },
+    createCodes() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          genCodes(this.form.count).then(response => {
+            if (response.code === 0) {
+              this.dialogFormVisible = false
+              this.postForm.batch_id = response.batchid
+              this.downloadbatchid = response.batchid
+              this.disabledownload = true
+              this.curpage = 1
+              this.getList(true)
+              this.$notify({
+                title: 'Success',
+                message: 'Created Successfully',
+                type: 'success',
+                duration: 2000
+              })
+            }
+          })
+        }
+      })
+    },
+    download() {
+      downloadFile(this.downloadbatchid).then(response => {
+        if (response.code === 0) {
+          var csv = 'batchid,code\r\n'
+          for (const i in response.data) {
+            csv += response.data[i]['batch_id'] + ',' + response.data[i]['activation_code'] + '\r\n'
+          }
+          const content = new Blob(['\uFEFF' + csv])
+          const urlobj = window.URL || window.webkitURL || window
+          const url = urlobj.createObjectURL(content)
+          const el = document.createElement('a')
+          el.href = url
+          el.download = 'batchid_' + this.downloadbatchid + '.csv'
+          el.click()
+          urlobj.revokeObjectURL(url)
+          this.disabledownload = true
+        }
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "~@/styles/mixin.scss";
+
+.createPost-container {
+  position: relative;
+
+  .createPost-main-container {
+    padding: 40px 45px 20px 50px;
+
+    .postInfo-container {
+      position: relative;
+      @include clearfix;
+      margin-bottom: 10px;
+
+      .postInfo-container-item {
+        float: left;
+      }
+    }
+  }
+
+  .word-counter {
+    width: 40px;
+    position: absolute;
+    right: 10px;
+    top: 0px;
+  }
+}
+
+.article-textarea ::v-deep {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+
+</style>