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.
162 lines
3.3 KiB
162 lines
3.3 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="提现记录" leftClick @leftClick="$utils.navigateBack" color="#fff" />
|
|
|
|
<view class="tools">
|
|
<uv-datetime-picker
|
|
ref="datetimePicker"
|
|
v-model="selectedTime"
|
|
mode="year-month"
|
|
confirmColor="#84A73F"
|
|
@confirm="onTimeChange"
|
|
></uv-datetime-picker>
|
|
<button plain class="flex btn" @click="openTimePicker">
|
|
<text>{{ displaySelectedTime }}</text>
|
|
<image class="btn-icon" src="../static/runningWater/icon-arrow.png" mode="widthFix"></image>
|
|
</button>
|
|
</view>
|
|
|
|
<view class="card list">
|
|
<template v-if="list.length">
|
|
<view class="flex list-item"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
>
|
|
<image class="list-item-icon" src="../static/runningWater/icon-commission.png" mode="widthFix"></image>
|
|
<view class="list-item-info">
|
|
<view class="highlight">佣金提现</view>
|
|
<view>{{ item.createTime }}</view>
|
|
</view>
|
|
<view class="list-item-value">{{ `-${item.money}` }}</view>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
|
|
</template>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from "@/mixins/list.js"
|
|
export default {
|
|
mixins: [mixinsList],
|
|
data() {
|
|
return {
|
|
selectedTime: new Date(),
|
|
|
|
x: ['+', '-', '-', '+'],
|
|
mixinsListApi: "getWaterPageList",
|
|
beforeDate: new Date(), //开始日期
|
|
afterDate: new Date(), //结束日期
|
|
|
|
totalMoney : 0,
|
|
totalWithdraw : 0,
|
|
}
|
|
},
|
|
computed: {
|
|
displaySelectedTime() {
|
|
return this.$dayjs(this.selectedTime).format("YYYY年M月")
|
|
}
|
|
},
|
|
methods: {
|
|
//打开日历
|
|
openCalendars() {
|
|
if (this?.$refs?.calendars) {
|
|
this.$refs.calendars.open();
|
|
}
|
|
},
|
|
|
|
// 选择了日期
|
|
handleSelectCalendars(day) {
|
|
|
|
console.log(day);
|
|
|
|
// let beforeDate = this.getYearMonth(day?.range?.before)
|
|
// let afterDate = this.getYearMonth(day?.range?.after)
|
|
// this.beforeYear = beforeDate.year;
|
|
// this.beforeMonth = beforeDate.month;
|
|
// this.afterYear = afterDate.year;
|
|
// this.afterMonth = afterDate.month;
|
|
},
|
|
|
|
getDataThen(list, total, result){
|
|
this.totalMoney = result.totalMoney
|
|
this.totalWithdraw = result.totalWithdraw
|
|
this.list = result.page.records
|
|
this.total = result.page.total
|
|
},
|
|
|
|
openTimePicker() {
|
|
this.$refs.datetimePicker.open();
|
|
},
|
|
onTimeChange(e) {
|
|
// todo
|
|
console.log('--onTimeChange', e)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
background-color: $uni-bg-color;
|
|
min-height: 100vh;
|
|
|
|
/deep/ .nav-bar__view {
|
|
background-image: linear-gradient(#84A73F, #D8FF8F);
|
|
}
|
|
}
|
|
|
|
.tools {
|
|
background-color: $uni-fg-color;
|
|
padding: 25rpx 42rpx;
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
border: none;
|
|
color: #000000;
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
|
|
&-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
margin-left: 12rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
margin: 9rpx 13rpx;
|
|
padding: 31rpx 20rpx;
|
|
|
|
&-item {
|
|
padding-bottom: 19rpx;
|
|
border-bottom: 1rpx solid #E0E0E0;
|
|
margin-bottom: 20rpx;
|
|
font-size: 28rpx;
|
|
|
|
&-icon {
|
|
width: 56rpx;
|
|
height: auto;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
&-info {
|
|
flex: 1;
|
|
color: #949494;
|
|
|
|
.highlight {
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
&-value {
|
|
color: #FF2A2A;
|
|
}
|
|
}
|
|
}
|
|
</style>
|