5 changed files with 113 additions and 73 deletions
-
4src/pages/index/index.vue
-
107src/subpackage/wallet/components/filtrate_bar.vue
-
68src/subpackage/wallet/components/record_item.vue
-
7src/subpackage/wallet/pages/douyin_withdraw/record.vue
-
BINsrc/subpackage/wallet/static/images/filter.png
@ -0,0 +1,107 @@ |
|||||
|
<template> |
||||
|
<view class="time-selection"> |
||||
|
<view class="ts-left"> |
||||
|
<picker class="tl-class" mode="date" @change="startDateChange" :value="startDate"> |
||||
|
<view class="tl-frame"> |
||||
|
<input type="text" class="tf-time" disabled :value="startDate"> |
||||
|
<image class="tf-icon" mode="aspect" src="/subpackage/wallet/static/images/arrow_c33.png"></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
<view class="tl-txt">至</view> |
||||
|
<picker class="tl-class" mode="date" @change="endDateChange" :value="endDate"> |
||||
|
<view class="tl-frame"> |
||||
|
<input type="text" class="tf-time" disabled :value="endDate"> |
||||
|
<image class="tf-icon" mode="aspect" src="/subpackage/wallet/static/images/arrow_c33.png"></image> |
||||
|
</view> |
||||
|
</picker> |
||||
|
</view> |
||||
|
<view class="ts-right" @click="filterBtn"> |
||||
|
<text class="tr-txt">筛选</text> |
||||
|
<image class="tr-icon" mode="aspect" src="/subpackage/wallet/static/images/filter.png"></image> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { formatDate } from '@/utils/util'; |
||||
|
export default { |
||||
|
data(){ |
||||
|
return { |
||||
|
startDate: '', |
||||
|
endDate: '' |
||||
|
} |
||||
|
}, |
||||
|
created(){ |
||||
|
let _date = new Date(); |
||||
|
this.startDate = formatDate({ date: new Date(_date.setFullYear(_date.getFullYear() - 1))}); |
||||
|
this.endDate = formatDate({}); |
||||
|
}, |
||||
|
methods: { |
||||
|
startDateChange(e){ |
||||
|
this.startDate = e.detail.value; |
||||
|
}, |
||||
|
endDateChange(e){ |
||||
|
this.endDate = e.detail.value; |
||||
|
}, |
||||
|
filterBtn(){ |
||||
|
uni.showActionSheet({ |
||||
|
itemList: ['全部', '待处理', '已处理'], |
||||
|
success: (res) => { |
||||
|
console.log(res.tapIndex); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.time-selection{ |
||||
|
padding: 26upx 24upx; |
||||
|
background: #fff; |
||||
|
@include ctf(space-between); |
||||
|
.ts-left{ |
||||
|
@include ctf; |
||||
|
.tl-class{ |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.tl-frame{ |
||||
|
flex-shrink: 0; |
||||
|
padding: 0 16upx; |
||||
|
height: 92upx; |
||||
|
width: 240upx; |
||||
|
border-radius: 10upx; |
||||
|
background: #F2F2F7; |
||||
|
@include ctf(space-between); |
||||
|
.tf-time{ |
||||
|
flex-grow: 1; |
||||
|
box-sizing: border-box; |
||||
|
height: 100%; |
||||
|
@include flcw(28upx, 40upx, #1A1A1A); |
||||
|
} |
||||
|
.tf-icon{ |
||||
|
margin-left: 4upx; |
||||
|
flex-shrink: 0; |
||||
|
width: 20upx; |
||||
|
height: 20upx; |
||||
|
} |
||||
|
} |
||||
|
.tl-txt{ |
||||
|
margin: 0 18upx; |
||||
|
@include flcw(32upx, 44upx, #1A1A1A); |
||||
|
} |
||||
|
} |
||||
|
.ts-right{ |
||||
|
@include ctf(flex-end); |
||||
|
.tr-txt{ |
||||
|
margin-right: 12upx; |
||||
|
@include flcw(28upx, 40upx, #9C9C9F); |
||||
|
} |
||||
|
.tr-icon{ |
||||
|
flex-shrink: 0; |
||||
|
width: 40upx; |
||||
|
height: 40upx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
@ -1,68 +0,0 @@ |
|||||
<template> |
|
||||
<view class="record-item"> |
|
||||
<veiw class="ri-line"> |
|
||||
<veiw class="rl-name">提现金额:</veiw> |
|
||||
<view class="rl-value">12.00</view> |
|
||||
<view class="rl-status">待处理</view> |
|
||||
</veiw> |
|
||||
<veiw class="ri-line"> |
|
||||
<veiw class="rl-name">提现单号:</veiw> |
|
||||
<view class="rl-value">TX20191017898999</view> |
|
||||
</veiw> |
|
||||
<veiw class="ri-line"> |
|
||||
<veiw class="rl-name">申请时间:</veiw> |
|
||||
<view class="rl-value">2019-10-17 12:12:12</view> |
|
||||
</veiw> |
|
||||
<veiw class="ri-line"> |
|
||||
<veiw class="rl-name">收款人名称:</veiw> |
|
||||
<view class="rl-value">广州欧轩网络科技有限公司</view> |
|
||||
</veiw> |
|
||||
<veiw class="ri-line"> |
|
||||
<veiw class="rl-name">收款人账号:</veiw> |
|
||||
<view class="rl-value">62170033200934025456</view> |
|
||||
</veiw> |
|
||||
<veiw class="ri-line"> |
|
||||
<veiw class="rl-name">处理时间:</veiw> |
|
||||
<view class="rl-value">2024-10-17 12:12:12</view> |
|
||||
</veiw> |
|
||||
<veiw class="ri-line"> |
|
||||
<veiw class="rl-name">备注:</veiw> |
|
||||
<view class="rl-value">-</view> |
|
||||
</veiw> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style lang="scss"> |
|
||||
.record-item{ |
|
||||
padding: 26upx 20upx; |
|
||||
border-radius: 10upx; |
|
||||
background: #fff; |
|
||||
.ri-line{ |
|
||||
display: flex; |
|
||||
justify-content: space-between; |
|
||||
align-items: baseline; |
|
||||
.rl-name{ |
|
||||
flex-shrink: 0; |
|
||||
flex-grow: 0; |
|
||||
@include flcw(28upx, 56upx, #9A9A9D); |
|
||||
} |
|
||||
.rl-value{ |
|
||||
flex-grow: 1; |
|
||||
@include flcw(28upx, 56upx, #1A1A1A); |
|
||||
@include tHide(2); |
|
||||
} |
|
||||
.rl-status{ |
|
||||
flex-shrink: 0; |
|
||||
flex-grow: 0; |
|
||||
margin-left: 10upx; |
|
||||
@include flcw(28upx, 56upx, #1A1A1A); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
After Width: 40 | Height: 40 | Size: 290 B |
Write
Preview
Loading…
Cancel
Save
Reference in new issue