<template>
	<view class="page">
		<view class="title-top">
			<div class="left">
				<text @click="show = true">2024年<u-icon name="arrow-down"></u-icon></text>
				<u-picker v-model="show" mode="time" :params="{year: true}"></u-picker>
			</div>
			<div class="right"><text class="price"><u-icon name="rmb" style="font-size: 24rpx;" />6451.00</text></div>
		</view>
		<view class="record-list">
			<view class="record-item" v-for="(item, index) in dataList" :key="index" @click="toDetail">
				<view class="info-title">
					<view class="title">7月</view>
					<view class="right"><text class="price"><u-icon name="rmb" style="font-size: 24rpx;" />6451.00</text></view>
				</view>
				<view class="info-items" v-for="(v, i) in item.children" :key="i">
					<view class="info-item">
						<view class="left title">支付订单编号</view>
						<view class="right"><text class="price"><u-icon name="rmb" style="font-size: 24rpx;" />500.00</text></view>
					</view>
					<view class="info-item">
						<view class="left">物业费、服务费、卫生费</view>
						<view class="right" style="color: #8A8A8A;">共3项</view>
					</view>
					<view class="info-item">
						<view class="left" style="color: #0FBB59;">支付成功</view>
						<view class="right" style="color: #8A8A8A;">07.11 15:21</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				dataList: [
					{
						children: [{}, {}]
					},
					{
						children: [{}, {}]
					},
				]
			}
		},
		methods: {
			toDetail() {
				uni.navigateTo({
					url: '/pages/propertyPay/payDetail/payDetail'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'payRecord.scss';
</style> 