<template>
|
<el-container class="user-center">
|
<el-header class="user-header">
|
<home-header></home-header>
|
</el-header>
|
<div class="usercot recharge">
|
<el-container class="main-wrapper">
|
<el-aside width="178px">
|
<menu-box></menu-box>
|
</el-aside>
|
<el-main>
|
<div class="user-center-title" style="text-align:left;">
|
<span class="iconfont icon-you" style="color:#C11815;font-size:18px;margin-right:10px"></span>
|
充值记录
|
</div>
|
<div class="wrapper">
|
<el-table v-if="true" :data="list.list" style="width: 100%">
|
<el-table-column width="100px" prop="payChannel">
|
<template slot-scope="scope">
|
<span class="paytype" style="background-color: #138EB4;"
|
v-if="scope.row.payChannel === '0'">支付宝</span>
|
<span class="paytype" style="background-color: ;" v-else-if="scope.row.payChannel === 1">对公转账</span>
|
<span class="paytype" style="background-color: #04823E;"
|
v-else-if="scope.row.payChannel === 2">微信</span>
|
<span class="paytype" style="background-color: ;" v-else>{{ scope.row.payChannel }}</span>
|
</template>
|
</el-table-column>
|
<el-table-column prop="payAmt" width="400px">
|
<template slot-scope="scope">
|
<span class="number">充值: <span class="rmb">￥{{ scope.row.payAmt }}</span></span>
|
</template>
|
</el-table-column>
|
<el-table-column width="168px" prop="orderSn">
|
</el-table-column>
|
<el-table-column prop="addTime" width="178px">
|
<template slot-scope="scope">
|
<b v-if="scope.row.addTime">{{ scope.row.addTime | timeFormat }}</b>
|
<b v-else></b>
|
</template>
|
</el-table-column>
|
<el-table-column prop="orderStatus">
|
<template slot-scope="scope">
|
<span :class="scope.row.orderStatus === 1 ? 'green' : scope.row.orderStatus === 2 ? 'red' : 'red'">
|
<!-- 1 => 成功 2 失败 3取消 4 等待 -->
|
<i v-if="scope.row.orderStatus === 1" class="iconfont icon-tongguo4 animated bounceIn"></i>
|
<i v-if="scope.row.orderStatus == 0" class="iconfont icon-dengdai animated bounceInDown"></i>
|
<i v-if="scope.row.orderStatus === 2" class="iconfont icon-failure animated bounceInDown"></i>
|
<i v-if="scope.row.orderStatus === 3"
|
class="iconfont icon-iconfontweitongguo animated bounceInDown"></i>
|
{{ scope.row.orderStatus === 1 ? '充值成功' : scope.row.orderStatus === 2 ? '充值失败' :
|
scope.row.orderStatus ===
|
3 ? '取消充值' : '审核中'
|
}}
|
</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<el-card class="box-card">
|
<!-- <div class="user-center-title">
|
充值记录
|
</div> -->
|
|
|
|
<div v-if="false" v-for="item in list.list" :key="item.key" class="box-card-item">
|
<div>
|
<el-tag :type="item.payChannel === '0' ? '' : item.payChannel === 1 ? 'warning' : 'success'">
|
<span v-if="item.payChannel === '0'">支付宝</span>
|
<span v-else-if="item.payChannel === 1">对公转账</span>
|
<span v-else>{{ item.payChannel }}</span>
|
</el-tag>
|
￥<span class="money">{{ item.payAmt }}</span>
|
<div class="pull-right">
|
<span :class="item.orderStatus === 1 ? 'green' : item.orderStatus === 2 ? 'red' : 'red'">
|
<!-- 1 => 成功 2 失败 3取消 4 等待 -->
|
<i v-if="item.orderStatus === 1" class="iconfont icon-tongguo4 animated bounceIn"></i>
|
<i v-if="item.orderStatus == 0" class="iconfont icon-dengdai animated bounceInDown"></i>
|
<i v-if="item.orderStatus === 2" class="iconfont icon-failure animated bounceInDown"></i>
|
<i v-if="item.orderStatus === 3"
|
class="iconfont icon-iconfontweitongguo animated bounceInDown"></i>
|
{{ item.orderStatus === 1 ? '充值成功' : item.orderStatus === 2 ? '充值失败' : item.orderStatus ===
|
3 ? '取消充值' : '审核中'
|
}}
|
</span>
|
</div>
|
</div>
|
<div>
|
<p>订单号：{{ item.orderSn }}</p>
|
<p class="mini-font">
|
充值时间：{{ item.addTime | timeFormat }}
|
</p>
|
</div>
|
|
</div>
|
<el-pagination class="pull-right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
|
:current-page="list.pageNum" :page-sizes="[10, 20, 30, 40, 50]" :page-size="list.pageSize"
|
layout="total, sizes, prev, pager, next, jumper" :total="list.total">
|
</el-pagination>
|
</el-card>
|
|
</div>
|
<!-- <home-footer :siteInfo="siteInfo"></home-footer> -->
|
</el-main>
|
</el-container>
|
</div>
|
</el-container>
|
|
</template>
|
|
<script>
|
import HomeHeader from '../../../../components/HeaderOrder'
|
import HomeFooter from '../../../../components/Footer'
|
import MenuBox from '../menu'
|
import * as api from '../../../../axios/api'
|
|
export default {
|
components: {
|
HomeHeader,
|
HomeFooter,
|
MenuBox
|
},
|
props: {},
|
data() {
|
return {
|
pageNum: 1,
|
pageSize: 15,
|
list: {
|
list: []
|
}
|
}
|
},
|
watch: {},
|
computed: {},
|
created() { },
|
mounted() {
|
this.getlist()
|
this.$store.state.userMenu = '2-5'
|
},
|
methods: {
|
handleSizeChange(size) {
|
this.pageSize = size
|
this.getlist()
|
},
|
handleCurrentChange(page) {
|
this.pageNum = page
|
this.getlist()
|
},
|
async getlist() {
|
// 获取 提现记录
|
let opts = {
|
pageNum: this.pageNum,
|
pageSize: 10
|
}
|
let data = await api.rechargeList(opts)
|
if (data.status === 0) {
|
// data.data.list.forEach(element => {
|
// this.list.push(element)
|
// });
|
this.list = data.data
|
console.log(data)
|
// this.total = data.data.total
|
} else {
|
this.$message.error(data.msg)
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.code {
|
font-size: 12px;
|
color: #999;
|
}
|
|
.main-wrapper {
|
.wrapper {
|
padding: 20px;
|
|
.table-search {
|
margin-bottom: 15px;
|
}
|
}
|
}
|
|
.number {
|
font-size: 18px;
|
color: #333;
|
}
|
|
.box-card-item {
|
// box-shadow: 0 2px 12px 0 #ddd;
|
padding: 10px 20px;
|
border-radius: 4px;
|
margin-bottom: 20px;
|
line-height: 30px;
|
border-bottom: 1px solid #eee;
|
|
.money {
|
font-size: 20px;
|
}
|
|
p {
|
color: #666;
|
}
|
}
|
|
.box-card {
|
padding-bottom: 20px;
|
}
|
</style>
|
