|
|
|
@ -1,88 +1,53 @@ |
|
|
|
<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> --> |
|
|
|
<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> |
|
|
|
</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 class="time">{{ item.createTime }}</view> |
|
|
|
</view> |
|
|
|
<view class="list-item-value">{{ `-${item.amount}` }}</view> |
|
|
|
<view class="withdraw-btn" |
|
|
|
@click="withdraw(item)" |
|
|
|
v-if="item.status == 0">领取</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"> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<uv-empty mode="history" textSize="28rpx" iconSize="100rpx" /> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
</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 { |
|
|
|
selectedTime: new Date(), |
|
|
|
|
|
|
|
x: ['+', '-', '-', '+'], |
|
|
|
mixinsListApi: "getWaterPageList", |
|
|
|
mixinsListApi: "queryCashoutLog",//getWaterPageList |
|
|
|
beforeDate: new Date(), //开始日期 |
|
|
|
afterDate: new Date(), //结束日期 |
|
|
|
|
|
|
|
@ -90,6 +55,11 @@ |
|
|
|
totalWithdraw : 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
displaySelectedTime() { |
|
|
|
return this.$dayjs(this.selectedTime).format("YYYY年M月") |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
//打开日历 |
|
|
|
openCalendars() { |
|
|
|
@ -117,120 +87,133 @@ |
|
|
|
this.list = result.page.records |
|
|
|
this.total = result.page.total |
|
|
|
}, |
|
|
|
|
|
|
|
openTimePicker() { |
|
|
|
this.$refs.datetimePicker.open(); |
|
|
|
}, |
|
|
|
onTimeChange(e) { |
|
|
|
// todo |
|
|
|
console.log('--onTimeChange', e) |
|
|
|
}, |
|
|
|
withdraw(item){ |
|
|
|
// 拉起微信收款确认页面 |
|
|
|
if (!wx.canIUse('requestMerchantTransfer')) { |
|
|
|
wx.showModal({ |
|
|
|
content: '你的微信版本过低，请更新至最新版本。', |
|
|
|
showCancel: false, |
|
|
|
}); |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
// 在真机环境中，调用API |
|
|
|
wx.requestMerchantTransfer({ |
|
|
|
mchId: this.$config.mchId, |
|
|
|
appId: wx.getAccountInfoSync().miniProgram.appId, |
|
|
|
package: item.packageInfo, |
|
|
|
success: (res) => { |
|
|
|
uni.showToast({ |
|
|
|
title: '提现申请已提交', |
|
|
|
icon: 'success' |
|
|
|
}) |
|
|
|
this.$store.commit('getUserInfo') |
|
|
|
this.$store.commit('getRiceInfo') |
|
|
|
|
|
|
|
this.$api('getMoney', { |
|
|
|
id : item.id, |
|
|
|
}).then(res => { |
|
|
|
this.getData() |
|
|
|
}) |
|
|
|
}, |
|
|
|
fail: (res) => { |
|
|
|
console.log('fail:', res); |
|
|
|
uni.showToast({ |
|
|
|
title: '提现失败，请稍后再试', |
|
|
|
icon: 'none' |
|
|
|
}) |
|
|
|
}, |
|
|
|
complete: (res) => { |
|
|
|
console.log('requestMerchantTransfer完成:', res); |
|
|
|
} |
|
|
|
}); |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
.running-water { |
|
|
|
width: 750rpx; |
|
|
|
background: #F5F5F5; |
|
|
|
margin: 0 auto; |
|
|
|
.page { |
|
|
|
background-color: #f5f6fa; |
|
|
|
min-height: 100vh; |
|
|
|
|
|
|
|
.bg { |
|
|
|
background: $uni-color; |
|
|
|
padding: 100rpx 0rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
/deep/ .nav-bar__view { |
|
|
|
background-image: linear-gradient(135deg, #84A73F, #D8FF8F); |
|
|
|
box-shadow: 0 2px 8px rgba(132, 167, 63, 0.2); |
|
|
|
} |
|
|
|
|
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.withdraw-btn { |
|
|
|
padding: 12rpx 32rpx; |
|
|
|
margin: 0; |
|
|
|
font-size: 26rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
background: linear-gradient(135deg, #84A73F, #D8FF8F); |
|
|
|
color: #fff; |
|
|
|
border-radius: 30rpx; |
|
|
|
box-shadow: 0 2px 6px rgba(132, 167, 63, 0.2); |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: scale(0.95); |
|
|
|
opacity: 0.9; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.date-select { |
|
|
|
padding: 0rpx 20rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
background: white; |
|
|
|
padding-bottom: 20rpx; |
|
|
|
.list { |
|
|
|
margin: 20rpx; |
|
|
|
padding: 30rpx; |
|
|
|
background: #fff; |
|
|
|
border-radius: 16rpx; |
|
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); |
|
|
|
|
|
|
|
&-item { |
|
|
|
padding: 24rpx 0; |
|
|
|
border-bottom: 1rpx solid #f0f0f0; |
|
|
|
margin-bottom: 20rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
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; |
|
|
|
} |
|
|
|
align-items: center; |
|
|
|
transition: all 0.3s ease; |
|
|
|
|
|
|
|
&:last-child { |
|
|
|
border-bottom: none; |
|
|
|
margin-bottom: 0; |
|
|
|
} |
|
|
|
|
|
|
|
&:active { |
|
|
|
background-color: #f9f9f9; |
|
|
|
} |
|
|
|
|
|
|
|
&-info { |
|
|
|
flex: 1; |
|
|
|
color: #666; |
|
|
|
|
|
|
|
.highlight { |
|
|
|
color: #333; |
|
|
|
font-weight: 500; |
|
|
|
margin-bottom: 8rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.interval { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.time { |
|
|
|
font-size: 24rpx; |
|
|
|
color: #999; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.tab-box { |
|
|
|
margin: 20rpx; |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
&-value { |
|
|
|
color: #FF2A2A; |
|
|
|
font-weight: 500; |
|
|
|
margin: 0 20rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
