employ-front/pages_subpack/record/index.vue

<template>
	<view>
		<view class="se-bgc-orange se-pos se-h-200">
			<view class="se-pos-cb se-flex se-flex-h-sb se-w-vw-90 se-py-30 se-bgc-white se-fs-28 se-br-20 se-bs" style="bottom: -100rpx;">
				<view class="se-flex se-flex-v-sa se-b-r se-flex-1">
					<view class="se-flex se-fs-26 se-fw-6 se-c-black">
						总余额(元）
					</view>
					<view class="se-c-orange se-fs-26 se-c-orange se-mt-20">
						￥1240.00
					</view>
					<view class="se-fs-24 se-mt-10 se-px-30 se-py-10 se-b-orange se-c-orange se-br-10 se-fw-6">
						提现
					</view>
				</view>
				<view class="se-flex se-flex-v-sa se-flex-1">
					<view class="se-flex se-fs-26 se-fw-6 se-c-black">
						累计提现
					</view>
					<view class="se-c-orange se-fs-26 se-c-orange se-mt-20">
						￥1240.00
					</view>
					<view class="se-fs-24 se-mt-10 se-px-30 se-py-10 se-b-orange se-c-orange se-br-10 se-fw-6">
						提现记录
					</view>
				</view>
			</view>
		</view>
		<view class="se-flex-h-sb se-pt-130 se-pb-20 se-px-40">
			<view class="se-c-black se-fs-30 se-fw-5">
				金额明细
			</view>
			<view class="se-flex" @click="show=true">
				<view  class="se-flex se-ml-10 se-b-orange se-c-orange se-br-10 se-flex-h-c se-px-10 se-py-8 se-fs-20">
					<text class="se-mr-8">{{year}}年</text>
					<u-icon name="arrow-down" size="10" color="#ff7a31"></u-icon>
				</view>
				<view class="se-flex se-ml-10 se-b-orange se-c-orange se-br-10 se-flex-h-c se-px-10 se-py-8 se-fs-20">
					<text class="se-mr-8">{{month}}月</text>
					<u-icon name="arrow-down" size="10" color="#ff7a31"></u-icon>
				</view>
				<view class="se-flex se-ml-10 se-c-orange se-flex-h-c se-px-10 se-py-8 se-fs-20">
					<text>至</text>
				</view>
				<view class="se-flex se-ml-10 se-b-orange se-c-orange se-br-10 se-flex-h-c se-px-10 se-py-8 se-fs-20">
					<text class="se-mr-8">{{day}}日</text>
					<u-icon name="arrow-down" size="10" color="#ff7a31"></u-icon>
				</view>
			</view>
		</view>
		<view class="se-m-20 se-bgc-white se-br-10">
			<view class="se-b-b se-m-20 se-py-20 se-px-20 se-flex-h-sb" v-for="(items,indexs) in 10" :key="indexs" @click="onMasterDetail(items)">
				<view class="se-flex se-flex-v">
					<view class="se-flex">
						<text class="se-fw-6 se-c-33 se-fs-30">金额提现</text>
					</view>
					<view class="se-c-text-third se-fs-22 se-mt-20">
						<text >2024-01-23 11:30:20</text>
					</view>
				</view>
				<view class="se-c-33 se-fs-30 se-fw-5">
					-199.00
				</view>
			</view>
		</view>
		<view class="se-h-200"></view>
		<u-picker :show="show" ref="uPicker" :columns="dates" @cancel="show=false" @confirm="dateConfirm"></u-picker>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				show:false,
				year:this.$dayjs().format('YYYY'),
				month:this.$dayjs().format('MM'),
				day:this.$dayjs().format('DD'),
				dates:[
					['2024','2025','2026','2027','2028'],
					['01','02','03','04','05','06','07','08','09','10','11','12'],
					['01','02','03','04','05','06','07','08','09','10','11','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'],
				]
			}
		},
		mounted() {
			console.info(this.$dayjs().format('YY'))
			
		},
		methods:{
			dateConfirm(event){
				console.info(event.value)
				this.year = event.value[0]
				this.month = event.value[1]
				this.day = event.value[2]
				this.show = false
			}
		}
	}
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
</style>