<template>
    <div class="crowdnum">
        <el-table  :data="sactionData" style="margin-top:30px" >
            <el-table-column label="交易名称" align="center" key="recordName" prop="recordName"/>
            <el-table-column label="交易类型" align="center" key="recordType" prop="recordType" >
                <template slot-scope="scope">
                    <span v-if="scope.row.recordType==0" style="color:#e6a23c">充值</span>
                    <span v-if="scope.row.recordType==1" style="color:#409eff">提现</span>
                    <span v-if="scope.row.recordType==2" style="color:#f56c6c">支出</span>
                    <span v-if="scope.row.recordType==3" style="color:#67c23a">收入</span>
                </template>
            </el-table-column>
            <el-table-column label="交易金额" align="center" key="recordAmount" prop="recordAmount">
                <template slot-scope="scope">
                   <p>{{hasDot(scope.row.recordAmount)}}</p>
                </template>
            </el-table-column>
            <el-table-column label="交易状态" align="center" key="recordStatus" prop="recordStatus" >
                <template slot-scope="scope">
                    <span v-if="scope.row.recordStatus==0" style="color:#409eff">处理中</span>
                    <span v-if="scope.row.recordStatus==1" style="color:#67c23a">已完成</span>
                    <span v-if="scope.row.recordStatus==2" style="color:#e6a23c">已取消</span>
                    <span v-if="scope.row.recordStatus==3" style="color:#f56c6c">已失败</span>
                </template>
            </el-table-column>
            <el-table-column label="交易时间" align="center" key="recordTime"  prop="recordTime" >
                <template slot-scope="scope">
                    <span v-if="scope.row.recordTime">{{scope.row.recordTime.slice(0,10)}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column  label="操作" align="center"  class-name="small-padding fixed-width" width="260"></el-table-column> -->
        </el-table>
        <!-- <div v-if="total>10"  style='width:100%;margin-top:30px;text-align: center;'>
            <el-pagination background
                @current-change="handleCurrentChange"
                :page-size="queryParams.pageSize"
                layout="total,  prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div> -->
    </div>
</template>
<script>
     import {mapGetters} from "vuex";
    import {queryRecord} from "@/api/my/testb";
    export default{
        data(){
            return{
                sactionData:[],
                total: 0,
            }
        },
        mounted(){
            queryRecord(this.userinform.userId).then(res=>{
                // res.rows=[{recordName:'1',recordType:'3',recordAmount:'500.363654',recordStatus:'2',recordTime:'2023.01.60 10:50'}]
                this.sactionData = res.rows;
                this.total = res.total;
            })
        },
        computed: {
            ...mapGetters(['userinform'])
        },
        methods:{
            hasDot(num){ // 保留小数点后两位
                if(num){
                      var result = (num.toString()).indexOf(".");// 查找是否含有小数点
                    if(result != -1) {
                        return (num.toString()).substring(0,result+3)  //有小数点保留两位小数
                    } else {
                        return num
                    }
                }
		    }
        },

    }
</script>
<style scoped>
    .crowdnum>>>.el-table th{
        background-color:#F7F7F7;
        color:#0e0c0c;
        text-align:center;
    }
    .crowdnum>>>.el-table td{
        /* text-align:center; */
        background-color:#FAF9F9;
        height:60px;
        color:#666666;
    }
    .crowdnum>>>.el-table--border th{
        border-right:#F7F7F7
    }
</style>