detail.vue
4.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<template>
<layout-body>
<layout-filter>
<filter-item>
<p><span class="bold-title">状态：提现成功</span><br /><span class="no">交易成功时间：2020-03-31 23:43:21</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 :columns="columns" :row-class-name="rowClassName" :data="dataList"></Table>-->
<table border class="table-body">
<tr class="tr-body" v-for="(row, outerIndex) in dataArray" :key="outerIndex">
<!-- flex: 0 0 x% 自适应布局，每一大列的宽度按百分比显示 -->
<div class="td-box" :style="{flex: '0 0 ' + 100 / row.length + '%'}" v-for="(col, innerIndex) in row" :key="innerIndex">
<td class="td-key">{{ col.key }}</td>
<td class="td-value">{{ col.value }}</td>
</div>
</tr>
</table>
</layout-list>
<layout-filter>
<filter-item>
<i-button type="primary" @click="backList">返回列表</i-button>
<i-button type="ghost" @click="handleTeacherData">测试数据展示</i-button>
</filter-item>
</layout-filter>
</layout-body>
</template>
<script>
import _ from 'lodash';
import detail from './store/detail';
export default {
data() {
return detail.call(this);
},
props: {
dataArray: {
type: Array,
require: true
}
},
methods: {
backList() {
this.$router.push({ name: 'finance.withdraw.withdrawlist' });
},
handleTeacherData () {
// if (!teacher) {
// return
// }
let 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;
}
},
}
</script>
<style lang="scss" scoped>
.bold-title{
font-size: 20px;
font-weight: bold;
}
.table-body {
width: 100%;
border: 1px solid #333333;
.tr-body {
display: flex;
border-bottom: 1px solid #333333;
&:last-child {
border-bottom: 0;
}
.td-box {
display: flex;
border-left: 1px solid #333333;
&:first-child {
border-left: 0;
}
.td-key {
width: 120px;
padding: 10px;
line-height: 20px;
text-align: center;
background-color: #999999;
border-right: 1px solid #444444;
}
.td-value {
flex: 1 0;
line-height: 20px;
padding: 10px 20px;
}
}
}
}
</style>