<template>
|
|
<view class="recharge-detail">
|
|
<u-collapse :head-style="{'fontWeight': 'bold', 'fontSize': '30rpx'}" event-type="close" arrow :accordion="false">
|
|
<u-collapse-item :index="index" :open="item.open" :title="item.head" v-for="(item, index) in itemList" :key="index">
|
|
<view class="collapse-item">
|
|
<view class="recharge-detail-item flex align-center justify-between" v-for="(subItem, index) in item.data" :key="index">
|
|
<view>
|
|
<view class="font-26 text-black font-weight-bold m-b-10">余额充值</view>
|
|
<view class="font-24 text-grey">{{ subItem.date }}</view>
|
|
</view>
|
|
<view class="font-26 text-red font-weight-bold">
|
|
+{{subItem.price}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-collapse-item>
|
|
</u-collapse>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
itemList: [
|
|
{
|
|
head: '2021年7月',
|
|
data: [
|
|
{date: '2020-12-29 11:12:34', price: '200'}
|
|
],
|
|
open: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
head: '2021年6月',
|
|
data: [
|
|
{date: '2020-12-29 11:12:34', price: '200'},
|
|
{date: '2020-12-29 11:12:34', price: '200'},
|
|
{date: '2020-12-29 11:12:34', price: '200'},
|
|
],
|
|
open: true,
|
|
disabled: true
|
|
},
|
|
{
|
|
head: '2021年5月',
|
|
data: [
|
|
{date: '2020-12-29 11:12:34', price: '200'}
|
|
],
|
|
open: true,
|
|
disabled: true
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.recharge-detail {
|
|
padding: 40rpx;
|
|
&-item {
|
|
border-bottom: 2rpx solid #d1d1d1;
|
|
margin-bottom: 16rpx;
|
|
padding: 0 20rpx 10rpx;
|
|
}
|
|
}
|
|
</style>
|