<!-- 充值中心 -->
<template>
	<view class="container">
		<up-navbar bgColor="transparent" title="明细" @leftClick="back"></up-navbar>
		<view class="header-wrap">
			<image class="bg" src="/static/czzx_header_bg.png" mode="aspectFill"></image>

			<view class="u-flex info text-center">
				<view class="u-flex-1">
					<view class="color-333 font-14">我的余额</view>
					<view class="u-m-t-30 font-700 color-333" style="font-size: 40rpx;">200.00</view>
				</view>
				<view class="u-flex-1">
					<view class="color-333 font-14">我的积分</view>
					<view class="u-m-t-30 font-700 color-333" style="font-size: 40rpx;">200.00</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="u-flex tabs">
				<view class="color-333 font-16 tabs-item" v-for="(item,index) in tabs.list" :key="index"
					@click="tabs.sel=index" :class="{active:tabs.sel==index}">
					<view>
						{{item.name}}
					</view>
					<view class="u-flex u-flex-center u-m-t-10">
						<view class="block">
							
						</view>
					</view>
					
				</view>
			</view>
			
			
			<view class="u-m-t-32">
				<view class="color-333 font-16 font-700">订单消费</view>
				<view v-for="(item,index) in lists" :key="index">
					<view>森食界创意轻食(未央店)</view>
				</view>
			</view>
			
			
			


		</view>

	</view>
</template>

<script setup>
	import * as vipApi from '@/common/api/market/recharge.js'
	import {
		joinMember
	} from '@/common/api/order/index.js'
	import {
		ref,
		onMounted,
		computed,
		reactive
	} from 'vue'
	import {
		onLoad,onReachBottom
	} from '@dcloudio/uni-app'


	async function buy() {
		const res = await joinMember()
	}

	function back() {
		uni.navigateBack();
	}
	const list = ref([])
	async function init() {
		const res = await vipApi.config()
		if (res) {
			list.value = res
		}
	}
	onMounted(init)

	const tabs = reactive({
		list: [{
				name: '余额明细'
			},
			{
				name: '积分明细'
			},
		],
		sel: 0
	})

	onLoad(() => {

	})
	
	onReachBottom(()=>{
		console.log('onReachBottom');
	})
</script>

<style scoped lang="scss">
	.tabs {
		justify-content: center;
		gap: 138rpx;

		.tabs-item {
			.block {
				width: 58rpx;
				height: 6rpx;
				background-color: transparent;
				border-radius: 6rpx;
				transition: all .3s ease-in-out;
			}

			&.active {
				.block {
					background-color: #FFAA62;
				}
			}
		}
	}

	.color1 {
		color: #5F2E0F;
	}

	.color2 {
		color: #FF6300;
	}





	.header-wrap {
		width: 100%;
		height: 530rpx;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 180upx) 28upx 28upx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}

		.info {
			position: relative;
		}




	}

	.bottom {
		background-color: rgba(255, 255, 255, .3);
		padding: 40rpx 28rpx 0 28rpx;
		transform: translateY(-140rpx);
		border-radius: 74rpx 74rpx 0 0;
	}
</style>