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.
147 lines
2.3 KiB
147 lines
2.3 KiB
<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>
|