|
|
|
@ -2,6 +2,72 @@ |
|
|
|
<view> |
|
|
|
<navbar title="我的钱包" leftClick @leftClick="$utils.navigateBack" /> |
|
|
|
|
|
|
|
<view class="content"> |
|
|
|
<view class="card overview"> |
|
|
|
<image class="bg" src="../static/center/overview-bg.png"></image> |
|
|
|
|
|
|
|
<view class="overview-info"> |
|
|
|
<view class="flex user-info"> |
|
|
|
<!-- todo: 换回接口提供的 --> |
|
|
|
<image class="avatar" src="../static/temp-avatar.png"></image> |
|
|
|
<!-- todo: 换回接口提供的 --> |
|
|
|
<text class="nick-name">裂变星1号</text> |
|
|
|
</view> |
|
|
|
<view class="account"> |
|
|
|
<!-- todo: 换回接口提供的 --> |
|
|
|
<view class="account-count">{{ `￥${100.0}` }}</view> |
|
|
|
<view class="account-desc">可提现余额（元）</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<button class="flex btn-withdraw" @click="$utils.navigateTo('/pages_order/mine/withdraw')"> |
|
|
|
<text>去提现</text> |
|
|
|
<image class="btn-withdraw-arrow" src="../static/center/arrow.png"></image> |
|
|
|
</button> |
|
|
|
|
|
|
|
<view class="flex overview-summary"> |
|
|
|
<!-- todo: 换回接口提供的 --> |
|
|
|
<view>总收益：<text class="highlight">{{ `￥${276.0}` }}</text></view> |
|
|
|
<view>已提现：<text class="highlight">{{ `￥${176.0}` }}</text></view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="detail"> |
|
|
|
<view class="flex detail-header"> |
|
|
|
<view class="detail-title"> |
|
|
|
<image class="bg" src="../static/center/title-bg.png"></image> |
|
|
|
<text class="text">收支明细</text> |
|
|
|
</view> |
|
|
|
<view class="detail-tools"> |
|
|
|
<uv-calendars ref="calendars" @confirm="onSelectDate" /> |
|
|
|
<button class="flex btn-calendar" @click="openCalendars"> |
|
|
|
<text>日期选择</text> |
|
|
|
<image class="btn-calendar-arrow" src="../static/center/down.png"></image> |
|
|
|
</button> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="detail-list"> |
|
|
|
<view class="card detail-list-item" |
|
|
|
v-for="item in detailList" |
|
|
|
:key="item.id" |
|
|
|
> |
|
|
|
<view class="flex detail-list-item-row highlight"> |
|
|
|
<text>{{ item.title }}</text> |
|
|
|
<template v-if="item.type === 'in'"> |
|
|
|
<text class="count count-in">{{ `+${item.count}` }}</text> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<text class="count count-out">{{ `-${item.count}` }}</text> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
<view class="flex detail-list-item-row"> |
|
|
|
<text>{{ item.createTime }}</text> |
|
|
|
<text>{{ `余额：${item.account}` }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -9,10 +75,235 @@ |
|
|
|
export default { |
|
|
|
data() { |
|
|
|
return { |
|
|
|
detailList: [ |
|
|
|
{ |
|
|
|
id: '001', |
|
|
|
title: '提现-微信', |
|
|
|
type: 'out', |
|
|
|
count: '88.0', |
|
|
|
account: '100.0', |
|
|
|
createTime: '2025年2月15日 12:56:48', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '002', |
|
|
|
title: '活动奖励', |
|
|
|
type: 'in', |
|
|
|
count: '12.8', |
|
|
|
account: '188.0', |
|
|
|
createTime: '2025年2月14日 12:56:48', |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: '003', |
|
|
|
title: '提现-微信', |
|
|
|
type: 'out', |
|
|
|
count: '88.0', |
|
|
|
account: '263.2', |
|
|
|
createTime: '2025年2月13日 12:56:48', |
|
|
|
}, |
|
|
|
] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
onShow() { |
|
|
|
// todo |
|
|
|
|
|
|
|
// fetch user-info |
|
|
|
// fetch detail |
|
|
|
}, |
|
|
|
onReachBottom() { |
|
|
|
// todo |
|
|
|
|
|
|
|
// fetch more detail |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
openCalendars() { |
|
|
|
this.$refs.calendars.open(); |
|
|
|
}, |
|
|
|
onSelectDate(e) { |
|
|
|
console.log('--onSelectDate', e) |
|
|
|
|
|
|
|
// todo |
|
|
|
|
|
|
|
// fetch detail |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.content { |
|
|
|
padding: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.overview { |
|
|
|
position: relative; |
|
|
|
border-radius: 14rpx; |
|
|
|
padding: 0; |
|
|
|
height: 462rpx; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
color: #04D6A3; |
|
|
|
|
|
|
|
.bg { |
|
|
|
width: 100%; |
|
|
|
height: 374rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-info { |
|
|
|
position: absolute; |
|
|
|
width: 100%; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
|
|
|
|
padding: 43rpx 0 0 54rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.user-info { |
|
|
|
justify-content: flex-start; |
|
|
|
} |
|
|
|
|
|
|
|
.avatar { |
|
|
|
width: 80rpx; |
|
|
|
height: 80rpx; |
|
|
|
border-radius: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.nick-name { |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 700; |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.account { |
|
|
|
margin-top: 44rpx; |
|
|
|
|
|
|
|
&-count { |
|
|
|
font-size: 78rpx; |
|
|
|
font-weight: 900; |
|
|
|
margin-left: -8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-desc { |
|
|
|
font-size: 24rpx; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.btn-withdraw { |
|
|
|
position: absolute; |
|
|
|
top: 223rpx; |
|
|
|
right: 0; |
|
|
|
|
|
|
|
background-color: #04D6A3; |
|
|
|
line-height: 1; |
|
|
|
font-size: 32rpx; |
|
|
|
padding: 20rpx 6rpx 20rpx 30rpx; |
|
|
|
border-top-left-radius: 42rpx; |
|
|
|
border-bottom-left-radius: 42rpx; |
|
|
|
|
|
|
|
&-arrow { |
|
|
|
width: 28rpx; |
|
|
|
height: 28rpx; |
|
|
|
margin-left: 22rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-summary { |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: 0; |
|
|
|
|
|
|
|
width: 100%; |
|
|
|
padding: 28rpx 48rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
color: #1B1B1B; |
|
|
|
font-size: 24rpx; |
|
|
|
|
|
|
|
.highlight { |
|
|
|
color: #04D6A3; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.detail { |
|
|
|
|
|
|
|
&-header { |
|
|
|
align-items: flex-start; |
|
|
|
justify-content: space-between; |
|
|
|
margin-top: 20rpx; |
|
|
|
} |
|
|
|
|
|
|
|
&-title { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.bg { |
|
|
|
width: 139rpx; |
|
|
|
height: 13rpx; |
|
|
|
vertical-align: text-bottom; |
|
|
|
} |
|
|
|
|
|
|
|
.text { |
|
|
|
color: #1B1B1B; |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 900; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-tools { |
|
|
|
.btn-calendar { |
|
|
|
display: inline-block; |
|
|
|
width: auto; |
|
|
|
height: auto; |
|
|
|
background-color: #FFFFFF; |
|
|
|
border: none; |
|
|
|
padding: 21rpx 19rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
margin: 0; |
|
|
|
line-height: 1; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999999; |
|
|
|
border-radius: 33rpx; |
|
|
|
|
|
|
|
&-arrow { |
|
|
|
width: 26rpx; |
|
|
|
height: 12rpx; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
&-list { |
|
|
|
margin-top: 25rpx; |
|
|
|
|
|
|
|
&-item { |
|
|
|
color: #999999; |
|
|
|
font-size: 24rpx; |
|
|
|
|
|
|
|
& + & { |
|
|
|
margin-top: 11rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.highlight { |
|
|
|
color: #1B1B1B; |
|
|
|
font-size: 32rpx; |
|
|
|
font-weight: 700; |
|
|
|
} |
|
|
|
|
|
|
|
&-row { |
|
|
|
justify-content: space-between; |
|
|
|
} |
|
|
|
|
|
|
|
.count { |
|
|
|
&-in { |
|
|
|
color: #FF2020; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
