|
@@ -1,14 +1,44 @@
|
|
|
<template>
|
|
|
- <view class="">
|
|
|
- <uni-collapse>
|
|
|
- <uni-collapse-item title="默认开启" :open="true">
|
|
|
- <text>折叠内容</text>
|
|
|
- </uni-collapse-item>
|
|
|
- <uni-collapse-item title="折叠内容">
|
|
|
- <text>折叠内容</text>
|
|
|
- </uni-collapse-item>
|
|
|
- <uni-collapse-item title="禁用状态" disabled>
|
|
|
- <text>折叠内容</text>
|
|
|
+ <view class="bill-list">
|
|
|
+ <uni-collapse class="bill-box">
|
|
|
+ <uni-collapse-item class="bill-item" v-for="(item,index) in list" :key="item.id" title-border="none"
|
|
|
+ :border="false">
|
|
|
+ <template v-slot:title>
|
|
|
+ <view class="collapse-title">
|
|
|
+ <view class="label">{{'第' + item.phase + '期'}}</view>
|
|
|
+ <view>
|
|
|
+ <view class="hui-tag info" v-if="!item.status">待付款</view>
|
|
|
+ <view class="hui-tag warning" v-if="item.status === 1">付款中</view>
|
|
|
+ <view class="hui-tag success" v-if="item.status === 2">已付款</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <view class="contract-bill-box">
|
|
|
+ <view class="contract-bill-item">
|
|
|
+ <view class="name">账单期数</view>
|
|
|
+ <view class="label">{{'第' + item.phase + '期'}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="contract-bill-item">
|
|
|
+ <view class="name">账单日期</view>
|
|
|
+ <view class="label">{{item.startDate}}至{{item.endDate}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="contract-bill-item">
|
|
|
+ <view class="name">金额</view>
|
|
|
+ <view class="label">{{item.amount}}元</view>
|
|
|
+ </view>
|
|
|
+ <view class="contract-bill-item">
|
|
|
+ <view class="name">收款方</view>
|
|
|
+ <view class="label">{{item.organizationName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="contract-bill-item">
|
|
|
+ <view class="name">付款方</view>
|
|
|
+ <view class="label">{{item.payMerchantName || item.payClientName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="contract-bill-item">
|
|
|
+ <view class="name">账单组成</view>
|
|
|
+ <view class="label">{{returnLabel(item.data)}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</uni-collapse-item>
|
|
|
</uni-collapse>
|
|
|
</view>
|
|
@@ -41,6 +71,8 @@
|
|
|
})
|
|
|
},
|
|
|
returnLabel(data) {
|
|
|
+ if (!data) return ''
|
|
|
+ console.log(data);
|
|
|
let list = JSON.parse(data);
|
|
|
let str = [];
|
|
|
for (var i = 0; i < list.length; i++) {
|
|
@@ -57,5 +89,47 @@
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
+<style lang="scss">
|
|
|
+ .bill-list {
|
|
|
+
|
|
|
+ .bill-box,
|
|
|
+ .uni-collapse {
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .collapse-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 84rpx;
|
|
|
+ padding-left: 30rpx;
|
|
|
+
|
|
|
+ .label {
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bill-item {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contract-bill-box {
|
|
|
+ padding: 30rpx;
|
|
|
+ border-top: 1px solid $uni-border-1;
|
|
|
+ .contract-bill-item {
|
|
|
+ margin-top: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ color: $uni-secondary-color;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|