89 lines
1.7 KiB
Vue
89 lines
1.7 KiB
Vue
<template>
|
||
<view class="record-list">
|
||
<!-- 单条记录 -->
|
||
<view class="record-item">
|
||
<!-- 记录详情循环展示 -->
|
||
<view class="record-row flex-between-center" v-for="(detail, index) in item.details" :key="detail.key">
|
||
<view>
|
||
<text v-show="detail.label" class="f-s-28 text-666">{{ detail.label }}：</text>
|
||
<text
|
||
class="f-s-28 text-333"
|
||
:class="{
|
||
'font-color': detail.key === 'paidAmount'
|
||
}"
|
||
>
|
||
{{ detail.prefix }} {{ item[detail.key] | filterEmpty }}
|
||
</text>
|
||
</view>
|
||
<text class="font-color f-s-28">
|
||
<text v-if="index === 0" class="font-color f-s-28"><slot name="status"></slot></text>
|
||
</text>
|
||
</view>
|
||
<!-- 操作按钮 -->
|
||
<view class="record-actions">
|
||
<slot name="operation"></slot>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
export default {
|
||
name: "recordList",
|
||
props: {
|
||
item:{
|
||
type: Object,
|
||
default: function() {
|
||
return {};
|
||
}
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: '',
|
||
}
|
||
},
|
||
data(){
|
||
return {
|
||
orderNo: ''
|
||
}
|
||
},
|
||
methods: {
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
/* 记录列表 */
|
||
.record-list {
|
||
padding: 28rpx 24rpx 0 24rpx;
|
||
}
|
||
|
||
/* 单条记录 */
|
||
.record-item {
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
padding: 32rpx 24rpx;
|
||
}
|
||
|
||
/* 记录行 */
|
||
.record-row {
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
/* 最后一行记录行 */
|
||
.record-row:last-child {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
/* 操作按钮容器 */
|
||
.record-actions {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 20rpx;
|
||
}
|
||
</style> |