|
|
|
<template>
|
|
|
|
<layout-body>
|
|
|
|
<layout-filter>
|
|
|
|
<filter-item>
|
|
|
|
<div class="detail">
|
|
|
|
<div class="detail-header">
|
|
|
|
<p class="bold-title">状态：{{ this.data.status }}</p>
|
|
|
|
<p class="no-title">提现发起后，正常xx-xx工作日到款</p>
|
|
|
|
</div>
|
|
|
|
<div class="detail-list">
|
|
|
|
<p>
|
|
|
|
<span class="bold-title">状态：提现成功</span><br /><span class="no">交易成功时间：2020-03-31 23:43:21</span>
|
|
|
|
<span class="no-title">创建时间：{{ this.data.createTime | timeFormat }}</span>
|
|
|
|
<span class="no-title">店铺：{{ this.data.shopName }}</span>
|
|
|
|
<span class="no-title">供应商: {{ this.data.supplierName }}</span>
|
|
|
|
</p>
|
|
|
|
</filter-item>
|
|
|
|
<filter-item>
|
|
|
|
<p>
|
|
|
|
<span class="no">创建时间：2020-3-30 21:34:23</span><span class="no">店铺：一件代发店铺</span>
|
|
|
|
<span class="no">供应商:一件代发供应商</span>
|
|
|
|
</p>
|
|
|
|
</filter-item>
|
|
|
|
</layout-filter>
|
|
|
|
<layout-list>
|
|
|
|
<table border class="table-body">
|
|
|
|
<tr v-for="(row, outerIndex) in dataArray" :key="outerIndex" class="tr-body">
|
|
|
|
<!-- flex: 0 0 x% 自适应布局，每一大列的宽度按百分比显示 -->
|
|
|
|
<div
|
|
|
|
v-for="(col, innerIndex) in row"
|
|
|
|
:key="innerIndex"
|
|
|
|
class="td-box"
|
|
|
|
:style="{ flex: '0 0 ' + 100 / row.length + '%' }"
|
|
|
|
>
|
|
|
|
<td class="td-key">{{ col.key }}</td>
|
|
|
|
<td class="td-value">{{ col.value }}</td>
|
|
|
|
</div>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</layout-list>
|
|
|
|
<layout-filter>
|
|
|
|
<filter-item>
|
|
|
|
<table border class="table-body">
|
|
|
|
<tr>
|
|
|
|
<td>业务单据号</td>
|
|
|
|
<td>{{ this.data.statementSn }}</td>
|
|
|
|
<td>类型</td>
|
|
|
|
<td>{{ this.data.type }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>收款账户</td>
|
|
|
|
<td>{{ this.data.targetAccount }}</td>
|
|
|
|
<td>付款账户</td>
|
|
|
|
<td>有货商贸有限公司（yh@yoho.cn）{{ this.data.targetAccount }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>申请金额（元）</td>
|
|
|
|
<td>{{ this.data.applyAmount }}</td>
|
|
|
|
<td>服务费</td>
|
|
|
|
<td>{{ this.data.serviceAmount }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>成功金额（元）</td>
|
|
|
|
<td>{{ this.data.tradeSuccessAmount }}</td>
|
|
|
|
<td>操作人</td>
|
|
|
|
<td>{{ this.data.applyPid }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>说明</td>
|
|
|
|
<td>{{ this.data.remarks }}</td>
|
|
|
|
<td>失败原因</td>
|
|
|
|
<td>{{ this.data.errorReason }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>备注</td>
|
|
|
|
<td>{{ this.data.remarks }}</td>
|
|
|
|
<td></td>
|
|
|
|
<td></td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
<div class="detail-footer">
|
|
|
|
<i-button type="primary" @click="backList">返回列表</i-button>
|
|
|
|
<i-button type="ghost" @click="handleTeacherData">测试数据展示</i-button>
|
|
|
|
</filter-item>
|
|
|
|
</layout-filter>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</layout-body>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import _ from 'lodash';
|
|
|
|
import { Detail } from './store';
|
|
|
|
import FinanceService from 'services/finance/finance-service';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
dataArray: {
|
|
|
|
type: Array,
|
|
|
|
require: true,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
name: 'Detail',
|
|
|
|
props: ['id'],
|
|
|
|
data() {
|
|
|
|
return Detail.call(this);
|
|
|
|
return {
|
|
|
|
data: [],
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.financeService = new FinanceService();
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.getDetail();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
backList() {
|
|
|
|
this.$router.push({ name: 'finance.withdraw.withdrawlist' });
|
|
|
|
},
|
|
|
|
handleTeacherData() {
|
|
|
|
// if (!teacher) {
|
|
|
|
// }
|
|
|
|
const table = []; // 大表格
|
|
|
|
let tmpRow = []; // 临时数组，表示 row，一行数据
|
|
|
|
|
|
|
|
tmpRow.push({ key: '业务单据号', value: '20200330200040011100100086516385' }),
|
|
|
|
tmpRow.push({ key: '类型', value: '提现' }),
|
|
|
|
table.push(tmpRow),
|
|
|
|
(tmpRow = []),
|
|
|
|
tmpRow.push({ key: '收款账户', value: '张三商贸有限公司（caomei@yoho.cn）' }),
|
|
|
|
tmpRow.push({ key: '付款账户', value: '有货商贸有限公司（yh@yoho.cn）' }),
|
|
|
|
table.push(tmpRow),
|
|
|
|
(tmpRow = []),
|
|
|
|
tmpRow.push({ key: '申请金额（元）', value: '10000.00' }),
|
|
|
|
tmpRow.push({ key: '服务费', value: '100.00' }),
|
|
|
|
table.push(tmpRow),
|
|
|
|
(tmpRow = []),
|
|
|
|
tmpRow.push({ key: '成功金额（元）', value: '9900.00' }),
|
|
|
|
tmpRow.push({ key: '操作人', value: '商家/平台' }),
|
|
|
|
table.push(tmpRow),
|
|
|
|
(tmpRow = []),
|
|
|
|
tmpRow.push({ key: '说明', value: '提现转账扣款（2020-03-23至2020-03-28）' }),
|
|
|
|
tmpRow.push({ key: '失败原因', value: '付款账户余额不足' }),
|
|
|
|
table.push(tmpRow),
|
|
|
|
(tmpRow = []),
|
|
|
|
tmpRow.push({ key: '备注', value: '++++++------++++++' }),
|
|
|
|
table.push(tmpRow),
|
|
|
|
(tmpRow = []),
|
|
|
|
(this.dataArray = table);
|
|
|
|
getDetail() {
|
|
|
|
return this.financeService.shopWithdrawApplyById(this.$route.params).then(result => {
|
|
|
|
if (result.code === 200) {
|
|
|
|
this.data = result.data;
|
|
|
|
this.$emit('on-change', this.data);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
},
|
|
|
|
refresh() {
|
|
|
|
this.getDetail();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.bold-title {
|
|
|
|
font-size: 20px;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
|
|
|
.table-body {
|
|
|
|
width: 100%;
|
|
|
|
border: 1px solid #333333;
|
|
|
|
<style lang="scss">
|
|
|
|
.detail {
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
|
|
.tr-body {
|
|
|
|
display: flex;
|
|
|
|
border-bottom: 1px solid #333333;
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
border-bottom: 0;
|
|
|
|
.detail-header {
|
|
|
|
.bold-title {
|
|
|
|
font-size: 25px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.td-box {
|
|
|
|
display: flex;
|
|
|
|
border-left: 1px solid #333333;
|
|
|
|
.no-title {
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:first-child {
|
|
|
|
border-left: 0;
|
|
|
|
}
|
|
|
|
.detail-list {
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
|
|
.td-key {
|
|
|
|
width: 120px;
|
|
|
|
padding: 10px;
|
|
|
|
line-height: 20px;
|
|
|
|
text-align: center;
|
|
|
|
background-color: #999999;
|
|
|
|
border-right: 1px solid #444444;
|
|
|
|
}
|
|
|
|
table,
|
|
|
|
tr,
|
|
|
|
td {
|
|
|
|
border: 1px solid #e9e9e9;
|
|
|
|
padding: 8px 16px;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
.td-value {
|
|
|
|
flex: 1 0;
|
|
|
|
line-height: 20px;
|
|
|
|
padding: 10px 20px;
|
|
|
|
}
|
|
|
|
table {
|
|
|
|
font-size: 12px;
|
|
|
|
border-collapse: collapse;
|
|
|
|
border-spacing: 0;
|
|
|
|
empty-cells: show;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.detail-footer {
|
|
|
|
margin-top: 20px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
