耀实惠小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

67 lines
1.6 KiB

<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>