pet-front/otherPages/myOrdersManage/bond/detail.vue

<template>
	<!-- <div>保证金明细</div> -->
	<view class="box">
		<view class="top flex" :style="{ borderRadius: '31.5rpx' }">
			<view 
				class="income flex element" 
				v-for="(tab, tIdx) in tabs"
				:key="`tab-${tIdx}`"
				:class="[queryParams.status === tab.value ? 'is-active' : '']" 
			>
				{{ tab.title }}
			</view>
		</view>
		<view>
			<view class="Recharge flex"
				v-for="(item, index) in list"
				:key="`record-${index}`"
			>
				<view class="flex">
					<image src="https://img1.baidu.com/it/u=3034232350,1041791648&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
						mode=""></image>
					<view class="text1">
						<view class="text2">
							{{ item.title }}
						</view>
						<view>
							{{ item.createTime }}
						</view>
					</view>
				</view>
				<view class="text3">
					{{ `¥${item.price}` }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { usePageList } from "@/utils/pageList";

const tabs = reactive([
	{
		title: '收入明细',
		value: '0',
	},
	{
		title: '支出明细',
		value: '1',
	},
])

// todo
const { queryParams, list, total, getData } = usePageList()

onShow(() => {
	list.value = [
		{
			title: '提现',
			price: 168,
			status: '1',
			createTime: '2020-12-29 12:54:54'
		},
		{
			title: '提现',
			price: 168,
			status: '1',
			createTime: '2020-12-29 12:54:54'
		},
		{
			title: '提现',
			price: 168,
			status: '1',
			createTime: '2020-12-29 12:54:54'
		},
	]
})

</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 1452rpx;
		background-color: #FFFFFF;
		padding: 2% 2% 0 2%;
		box-sizing: border-box;
	}

	.top {
		width: 722rpx;
		height: 63rpx;
		background-color: #F3F3F3;
	}

	.element {
		border-radius: 32rpx;

		&.is-active {
			background-color: #FFBF60;
			color: white;
		}
	}

	.income {
		width: 361rpx;
		height: 63rpx;
		line-height: 63rpx;
		font-size: 30rpx;
		justify-content: center;
	}



	.Recharge {
		padding: 20rpx 0;
		box-sizing: border-box;
		justify-content: space-between;
		border-bottom: 1rpx solid #E0E0E0;
	}

	.flex {
		display: flex;
	}

	.text1 {
		font-size: 30rpx;
		color: #949494;
	}

	.Recharge image {
		width: 56rpx;
		height: 56rpx;
		margin-top: 0.5%;
	}

	.text2 {
		font-weight: 700;
		color: #333333;
	}

	.text3 {
		color: #FF2A2A;
	}
</style>