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.
239 lines
5.4 KiB
239 lines
5.4 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">￥1240.00</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">￥15300.00</view>
|
|
<view class="btn">
|
|
<view class="">
|
|
提现记录
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="date-select">
|
|
<view class="select-title">
|
|
金额明细
|
|
</view>
|
|
<view class="year-info">
|
|
<view @click="openCalendars" class="time-unit">
|
|
{{ beforeYear }}年
|
|
<uv-icon name="arrow-down-fill"></uv-icon>
|
|
</view>
|
|
<view @click="openCalendars" class="time-unit">
|
|
{{ beforeMonth }}月
|
|
<uv-icon name="arrow-down-fill"></uv-icon>
|
|
</view>
|
|
<text class="interval">至</text>
|
|
<view @click="openCalendars" class="time-unit">
|
|
{{ afterYear }}年
|
|
<uv-icon name="arrow-down-fill"></uv-icon>
|
|
</view>
|
|
<view @click="openCalendars" class="time-unit">
|
|
{{ afterMonth }}月
|
|
<uv-icon name="arrow-down-fill"></uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tab-box">
|
|
<view class="tab-box1" v-if="list && total">
|
|
<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-else>
|
|
<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",
|
|
beforeYear: new Date().getFullYear(), //开始年
|
|
afterYear: new Date().getFullYear(), //结束年
|
|
beforeMonth: new Date().getMonth() + 1 < 9 ? '' + new Date().getMonth() + 1 : new Date().getMonth() +
|
|
1, //开始月
|
|
afterMonth: new Date().getMonth() + 1 < 9 ? '' + new Date().getMonth() + 1 : new Date().getMonth() +
|
|
1, //开始月, //结束月
|
|
}
|
|
},
|
|
methods: {
|
|
//打开日历
|
|
openCalendars() {
|
|
if (this?.$refs?.calendars) {
|
|
this.$refs.calendars.open();
|
|
}
|
|
},
|
|
|
|
// 选择了日期
|
|
handleSelectCalendars(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;
|
|
},
|
|
|
|
//获取开始年、月
|
|
getYearMonth(time) {
|
|
if (!time) {
|
|
time = new Date().toString()
|
|
}
|
|
let data = new Date(time.replace(/-/g, '/'));
|
|
let year = data.getFullYear();
|
|
let month = data.getMonth() + 1;
|
|
return {
|
|
year: data.getFullYear(),
|
|
month: month < 9 ? '0' + month : month
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</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: space-between;
|
|
|
|
.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>
|