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.
236 lines
5.1 KiB
236 lines
5.1 KiB
<template>
|
|
<view class="running-water">
|
|
<!-- 导航栏 -->
|
|
<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>
|
|
</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>
|
|
<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">
|
|
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" />
|
|
</view>
|
|
</view>
|
|
|
|
<Calendars ref="calendars" @select="handleSelectCalendars"></Calendars>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mixinsList from "@/mixins/list.js"
|
|
import Calendars from "@/components/calendars/index.vue"
|
|
export default {
|
|
mixins: [mixinsList],
|
|
components: {
|
|
Calendars
|
|
},
|
|
data() {
|
|
return {
|
|
x: ['+', '-', '-', '+'],
|
|
mixinsListApi: "getWaterPageList",
|
|
beforeDate: new Date(), //开始日期
|
|
afterDate: new Date(), //结束日期
|
|
|
|
totalMoney : 0,
|
|
totalWithdraw : 0,
|
|
}
|
|
},
|
|
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
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.running-water {
|
|
width: 750rpx;
|
|
background: #F5F5F5;
|
|
margin: 0 auto;
|
|
min-height: 100vh;
|
|
|
|
.bg {
|
|
background: $uni-color;
|
|
padding: 100rpx 0rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.interval {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-box {
|
|
margin: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style>
|