<template> <div class="refund"> <el-table :data="list" style="width: 100%"> <el-table-column prop="out_trade_no" label="out_trade_no"> </el-table-column> <el-table-column prop="refund_no" label="退款编号"> </el-table-column> <el-table-column prop="user_id" label="用户ID"> </el-table-column> <el-table-column prop="order_money" label="订单金额"> <template slot-scope="scope"> {{parseFloat(scope.row.order_money / 100)}} </template> </el-table-column> <el-table-column prop="refund_money" label="退款金额"> <template slot-scope="scope"> {{parseFloat(scope.row.refund_money / 100)}} </template> </el-table-column> <el-table-column prop="desc" label="退款原因"> </el-table-column> <el-table-column prop="callback" label="微信回调"> </el-table-column> <el-table-column label="退款状态"> <template slot-scope="scope"> {{scope.row.status|filterStatus}} </template> </el-table-column> <el-table-column prop="success_at" label="退款成功时间"> </el-table-column> <el-table-column label="操作" min-width="80" > <template slot-scope="scope"> <el-button @click="editComment(scope.row.out_trade_no, scope.row.desc)" type="warning" plain size="mini"> 备注 </el-button> </template> </el-table-column> </el-table> <page :nowPage="nowPage" :total="total"/> </div> </template> <script> import {getRefundListApi,editOrderDescApi} from "../../service/api"; import page from '../framework/page' export default { name: "index", components:{ page }, data(){ return { nowPage: 1, total: 0, list: [ { out_trade_no: '111', refund_no: '111', user_id: '1', order_money: 100, refund_money: 100, desc: 'sdfaf', callback: 'ewewew', status: 1, success_at: '2018-09-01' } ] } }, filters:{ filterStatus:function (value) { let msg = ''; if(value === 0){ msg = '退款中' }else if(value === 1){ msg = '退款成功' }else if(value === 2){ msg = '退款失败' } return msg; } }, mounted(){ this.getRefundList() }, methods: { editComment(id, desc) { this.$prompt('编辑备注', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputValue: desc }).then(({ value }) => { editOrderDescApi(id,'refund',{desc: value}).then(res=>{ if( res.data.result === 'success' ){ this.$message({ type: 'success', message: '编辑备注成功' }); }else{ this.$message.error( res.data.message ); } }); }).catch(() => { this.$message({ type: 'info', message: '取消编辑备注' }); }); }, getRefundList(){ getRefundListApi().then((res)=>{ this.total = res.total; }) } } } </script> <style scoped> .refund{ margin: 10px; } </style>