|
|
@@ -0,0 +1,251 @@
|
|
|
+<template>
|
|
|
+ <div class="order-wrapper">
|
|
|
+ <!-- <breadcrumb :item-name="['订单管理', '订单列表']"></breadcrumb> -->
|
|
|
+ <el-card>
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <div class="flex" style="justify-content: space-between;padding-bottom: 20px;">
|
|
|
+ <!-- <el-button type="primary" @click="openBuy">购买Token</el-button> -->
|
|
|
+ <el-button type="primary" icon="el-icon-refresh-right" @click="getList('reload')">刷新</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <el-col :span="8">
|
|
|
+ <el-input placeholder="请输入内容" v-model="queryInfo.query" class="input-with-select">
|
|
|
+ <el-button slot="append" icon="el-icon-search" @click="getList()"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </el-col> -->
|
|
|
+ </el-row>
|
|
|
+ <!-- 订单表格区域 -->
|
|
|
+ <el-table :data="list" border style="width: 100%" height="620">
|
|
|
+ <el-table-column prop="id" label="id" width="180">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="order_id" label="订单编号" width="350">
|
|
|
+ </el-table-column>
|
|
|
+ <!-- <el-table-column prop="status" label="是否已使用">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-tag type="success" v-if="scope.row.status == 0">待使用</el-tag>
|
|
|
+ <el-tag type="info" v-if="scope.row.status == 1">已使用</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column> -->
|
|
|
+ <el-table-column prop="createtime" label="购买时间">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{showTime(scope.row.createtime)}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column fixed="right" label="操作" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" size="small" @click="downToken(scope.row)">下载Token</el-button>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <!-- 分页区域 -->
|
|
|
+ <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
|
|
+ :current-page="queryInfo.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryInfo.pagesize"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper" :total="total">
|
|
|
+ </el-pagination> -->
|
|
|
+ </el-card>
|
|
|
+ <!-- 修改地址对话框 -->
|
|
|
+ <el-dialog title="购买Token" :visible.sync="dialogTableVisible" @close="closeEvent">
|
|
|
+ <el-form :model="form">
|
|
|
+ <el-form-item label="购买数量" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.num" type="number"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item label="交易密码" :label-width="formLabelWidth">
|
|
|
+ <el-input v-model="form.transaction" type="password"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="动态口令" :label-width="formLabelWidth" v-if="userInfo.is_binding == 1">
|
|
|
+ <el-input v-model="form.code" type="text"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="t-r">
|
|
|
+ 合计： {{hj}}元
|
|
|
+ </div>
|
|
|
+ <div class="t-r">
|
|
|
+ 当前余额： {{userInfo.money*1}}元
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogTableVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="goBuy">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import axios from 'axios'
|
|
|
+ import {
|
|
|
+ mapState,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex';
|
|
|
+ import {
|
|
|
+ createCode,
|
|
|
+ getCodeList,
|
|
|
+ createToken,
|
|
|
+ getTokenList,
|
|
|
+ getIndex,
|
|
|
+ getUserInfo
|
|
|
+ } from '@/request/agent.js'
|
|
|
+ import {
|
|
|
+ getTokenOrderList,
|
|
|
+ downToken
|
|
|
+ } from '@/request/user.js'
|
|
|
+ import {
|
|
|
+ showTime,
|
|
|
+ } from '@/assets/js/tools.js'
|
|
|
+ export default {
|
|
|
+ name: 'Order',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ formLabelWidth: '80px',
|
|
|
+ form: {
|
|
|
+ num: '',
|
|
|
+ transaction: '',
|
|
|
+ code: ''
|
|
|
+ },
|
|
|
+ dialogTableVisible: false,
|
|
|
+ queryInfo: {
|
|
|
+ keyword: '',
|
|
|
+ page: 1,
|
|
|
+ limit: 10
|
|
|
+ },
|
|
|
+ list: [],
|
|
|
+ total: 0,
|
|
|
+ dataloading: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo', 'baseInfo']),
|
|
|
+ hj() {
|
|
|
+ return this.baseInfo.token_price * 1 * this.form.num
|
|
|
+ // return 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getIndex()
|
|
|
+ this.getUserInfo()
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapMutations(['setUserInfo', 'setBaseInfo']),
|
|
|
+ showTime,
|
|
|
+ downToken(item) {
|
|
|
+ console.log(item);
|
|
|
+ downToken({
|
|
|
+ oid: item.id
|
|
|
+ }).then(res => {
|
|
|
+ // let a = document.createElement('a');
|
|
|
+ // a.href = res.data.url;
|
|
|
+ // a.download = res.data.file_name;
|
|
|
+ // a.click()
|
|
|
+ // a.remove();
|
|
|
+ // axios.get('http://jz.red.igxys.com/aa.txt',{
|
|
|
+ // headers:{
|
|
|
+ // 'Content-Type': 'text/plain'
|
|
|
+ // }
|
|
|
+ // }).then(res => {
|
|
|
+ // console.log(res);
|
|
|
+ // })
|
|
|
+ // this.downloadFile(res.data.url)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ downloadFile (url = '', fileName = '下载的文件'){
|
|
|
+ // 使用xhr下载文件
|
|
|
+ const xhr = new XMLHttpRequest()
|
|
|
+ xhr.open('GET', url, true)
|
|
|
+ xhr.responseType = 'blob'
|
|
|
+ xhr.onload = (e) => {
|
|
|
+ // 下载之后生成文件url 模拟a标签点击下载
|
|
|
+ const url = window.URL.createObjectURL(xhr.response)
|
|
|
+ const a = document.createElement('a')
|
|
|
+ a.href = url
|
|
|
+ a.download = fileName
|
|
|
+ a.click()
|
|
|
+ }
|
|
|
+ xhr.send()
|
|
|
+ },
|
|
|
+ closeEvent() {
|
|
|
+ console.log('guanbi');
|
|
|
+ },
|
|
|
+ getIndex() {
|
|
|
+ getIndex().then(res => {
|
|
|
+ this.setBaseInfo(res.data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getUserInfo() {
|
|
|
+ getUserInfo().then(res => {
|
|
|
+ this.setUserInfo(res.data)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ openBuy() {
|
|
|
+ this.dialogTableVisible = true
|
|
|
+ },
|
|
|
+ goBuy() {
|
|
|
+ let that = this
|
|
|
+ if (that.loading) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!that.form.num) {
|
|
|
+ return that.$msg.error('请输入购买数量')
|
|
|
+ }
|
|
|
+ if (!that.form.transaction) {
|
|
|
+ return that.$msg.error('请输入交易密码')
|
|
|
+ }
|
|
|
+ if (this.hj > this.userInfo.money) {
|
|
|
+ return that.$msg.error('您的账号余额不足')
|
|
|
+ }
|
|
|
+ that.loading = true
|
|
|
+ createToken(that.form).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ that.$msg.success('购买成功')
|
|
|
+ that.dialogTableVisible = false
|
|
|
+ that.loading = false
|
|
|
+ that.getList('reload')
|
|
|
+ }).catch(err => {
|
|
|
+ that.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getList(type) {
|
|
|
+ let that = this
|
|
|
+ if (type == 'reload') {
|
|
|
+ that.queryInfo.page = 1
|
|
|
+ that.dataloading = false
|
|
|
+ }
|
|
|
+ if (that.dataloading) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ that.dataloading = true
|
|
|
+ getTokenOrderList(that.queryInfo).then(res => {
|
|
|
+ that.total = res.data.count
|
|
|
+ that.list = res.data.data
|
|
|
+ that.dataloading = false
|
|
|
+ }).catch(err => {
|
|
|
+ that.dataloading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSizeChange(newPageSize) {
|
|
|
+ this.queryInfo.limit = newPageSize
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ handleCurrentChange(newPageNum) {
|
|
|
+ this.queryInfo.page = newPageNum
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .t-r {
|
|
|
+ text-align: right;
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+</style>
|
