|
|
@ -1,86 +1,51 @@ |
|
|
<template> |
|
|
<template> |
|
|
<view class="running-water"> |
|
|
|
|
|
|
|
|
<view class="page"> |
|
|
<!-- 导航栏 --> |
|
|
<!-- 导航栏 --> |
|
|
<navbar title="流水记录" leftClick @leftClick="$utils.navigateBack" bgColor="#E3441A" color="#fff" /> |
|
|
|
|
|
|
|
|
|
|
|
<view class="bg"></view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="money-info-wrapper"> |
|
|
|
|
|
<view class="money-info"> |
|
|
|
|
|
<view class="total-brokerage"> |
|
|
|
|
|
<view class="title">总佣金</view> |
|
|
|
|
|
<view class="total-money">￥{{ totalMoney }}</view> |
|
|
|
|
|
<!-- <view class="btn"> |
|
|
|
|
|
<view @click="$utils.navigateTo('/pages_order/mine/withdraw')" class=""> |
|
|
|
|
|
提现 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> --> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="total-withdraw"> |
|
|
|
|
|
<view class="title">累计提现</view> |
|
|
|
|
|
<view class="total-money">￥{{ totalWithdraw }}</view> |
|
|
|
|
|
<!-- <view class="btn"> |
|
|
|
|
|
<view class=""> |
|
|
|
|
|
提现记录 |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> --> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
<navbar title="提现记录" leftClick @leftClick="$utils.navigateBack" color="#fff" /> |
|
|
|
|
|
|
|
|
|
|
|
<view class="tools"> |
|
|
|
|
|
<uv-datetime-picker |
|
|
|
|
|
ref="datetimePicker" |
|
|
|
|
|
v-model="selectedTime" |
|
|
|
|
|
mode="year-month" |
|
|
|
|
|
@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> |
|
|
|
|
|
|
|
|
<view class="date-select"> |
|
|
|
|
|
<!-- <view class="select-title"> |
|
|
|
|
|
金额明细 |
|
|
|
|
|
</view> --> |
|
|
|
|
|
<view class="year-info" |
|
|
|
|
|
@click="openCalendars"> |
|
|
|
|
|
<view class="time-unit"> |
|
|
|
|
|
<!-- format('YYYY-MM-DD HH:mm:ss') --> |
|
|
|
|
|
{{ $dayjs(beforeDate).format('YYYY') }}年 |
|
|
|
|
|
<uv-icon name="arrow-down-fill"></uv-icon> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="time-unit"> |
|
|
|
|
|
{{ $dayjs(beforeDate).format('MM') }}月 |
|
|
|
|
|
<uv-icon name="arrow-down-fill"></uv-icon> |
|
|
|
|
|
|
|
|
<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> |
|
|
</view> |
|
|
<text class="interval">至</text> |
|
|
|
|
|
<view class="time-unit"> |
|
|
|
|
|
{{ $dayjs(afterDate).format('YYYY') }}年 |
|
|
|
|
|
<uv-icon name="arrow-down-fill"></uv-icon> |
|
|
|
|
|
</view> |
|
|
|
|
|
<view class="time-unit"> |
|
|
|
|
|
{{ $dayjs(afterDate).format('MM') }}月 |
|
|
|
|
|
<uv-icon name="arrow-down-fill"></uv-icon> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="tab-box"> |
|
|
|
|
|
<view class="tab-box1"> |
|
|
|
|
|
<uv-cell center border :title="item.title" v-for="(item, index) in list" :key="index" |
|
|
|
|
|
:value="x[item.type] + item.money" :label="item.createTime" /> |
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view style="padding: 100rpx 0;" v-if="list.length == 0"> |
|
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
<template v-else> |
|
|
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" /> |
|
|
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" /> |
|
|
</view> |
|
|
|
|
|
|
|
|
</template> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<Calendars ref="calendars" @select="handleSelectCalendars"></Calendars> |
|
|
|
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import mixinsList from "@/mixins/list.js" |
|
|
import mixinsList from "@/mixins/list.js" |
|
|
import Calendars from "@/components/calendars/index.vue" |
|
|
|
|
|
export default { |
|
|
export default { |
|
|
mixins: [mixinsList], |
|
|
mixins: [mixinsList], |
|
|
components: { |
|
|
|
|
|
Calendars |
|
|
|
|
|
}, |
|
|
|
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
|
|
|
selectedTime: new Date(), |
|
|
|
|
|
|
|
|
x: ['+', '-', '-', '+'], |
|
|
x: ['+', '-', '-', '+'], |
|
|
mixinsListApi: "getWaterPageList", |
|
|
mixinsListApi: "getWaterPageList", |
|
|
beforeDate: new Date(), //开始日期 |
|
|
beforeDate: new Date(), //开始日期 |
|
|
@ -90,6 +55,11 @@ |
|
|
totalWithdraw : 0, |
|
|
totalWithdraw : 0, |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
|
|
|
computed: { |
|
|
|
|
|
displaySelectedTime() { |
|
|
|
|
|
return this.$dayjs(this.selectedTime).format("YYYY年M月") |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
//打开日历 |
|
|
//打开日历 |
|
|
openCalendars() { |
|
|
openCalendars() { |
|
|
@ -117,120 +87,75 @@ |
|
|
this.list = result.page.records |
|
|
this.list = result.page.records |
|
|
this.total = result.page.total |
|
|
this.total = result.page.total |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
openTimePicker() { |
|
|
|
|
|
this.$refs.datetimePicker.open(); |
|
|
|
|
|
}, |
|
|
|
|
|
onTimeChange(e) { |
|
|
|
|
|
// todo |
|
|
|
|
|
console.log('--onTimeChange', e) |
|
|
|
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
.running-water { |
|
|
|
|
|
width: 750rpx; |
|
|
|
|
|
background: #F5F5F5; |
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
|
.page { |
|
|
|
|
|
background-color: $uni-bg-color; |
|
|
min-height: 100vh; |
|
|
min-height: 100vh; |
|
|
|
|
|
|
|
|
.bg { |
|
|
|
|
|
background: $uni-color; |
|
|
|
|
|
padding: 100rpx 0rpx; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/deep/ .nav-bar__view { |
|
|
|
|
|
background-image: linear-gradient(#84A73F, #D8FF8F); |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.money-info-wrapper { |
|
|
|
|
|
padding: 0rpx 20rpx; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
background: white; |
|
|
|
|
|
height: 130rpx; |
|
|
|
|
|
|
|
|
|
|
|
.money-info { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
background: white; |
|
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
transform: translateY(-60%); |
|
|
|
|
|
box-shadow: 0rpx 0rpx 10rpx rgba(0, 0, 0, .1); |
|
|
|
|
|
|
|
|
|
|
|
.total-brokerage, |
|
|
|
|
|
.total-withdraw { |
|
|
|
|
|
width: 50%; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
padding: 20rpx 0rpx; |
|
|
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
|
font-size: 34rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.total-money { |
|
|
|
|
|
color: $uni-color; |
|
|
|
|
|
font-size: 36rpx; |
|
|
|
|
|
margin: 20rpx 0rpx; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
view { |
|
|
|
|
|
width: 40%; |
|
|
|
|
|
border: 1px solid $uni-color; |
|
|
|
|
|
padding: 10rpx; |
|
|
|
|
|
color: $uni-color; |
|
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.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; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.date-select { |
|
|
|
|
|
padding: 0rpx 20rpx; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
background: white; |
|
|
|
|
|
padding-bottom: 20rpx; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
|
|
|
|
|
|
.select-title {} |
|
|
|
|
|
|
|
|
|
|
|
.year-info { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
color: $uni-color; |
|
|
|
|
|
font-size: 26rpx; |
|
|
|
|
|
|
|
|
|
|
|
.time-unit { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
border: 1px solid $uni-color; |
|
|
|
|
|
margin: 0rpx 10rpx; |
|
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
padding: 7rpx 12rpx; |
|
|
|
|
|
|
|
|
|
|
|
&::v-deep .uv-icon { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&::v-deep .uv-icon__icon { |
|
|
|
|
|
color: $uni-color !important; |
|
|
|
|
|
margin-left: 5rpx; |
|
|
|
|
|
font-size: 20rpx !important; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
&-info { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
color: #949494; |
|
|
|
|
|
|
|
|
.interval { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.highlight { |
|
|
|
|
|
color: #333333; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tab-box { |
|
|
|
|
|
margin: 20rpx; |
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
border-radius: 20rpx; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
&-value { |
|
|
|
|
|
color: #FF2A2A; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
