purchase-let/pageQuota/Balance/detail.vue

337 lines
7.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="content">
<view class="head">
<view class="head_conent">
<view class="sum">
<view class="text">已提现金额</view>
<u-count-to class="num" style="color: #F84221;" :startVal="0" :endVal="total" :decimals="2" bold
font-size="22"></u-count-to>
</view>
<view class="line"></view>
<view class="sum">
<view class="text">已提现次数</view>
<u-count-to class="num" :startVal="0" :endVal="count" bold font-size="22"></u-count-to>
</view>
</view>
</view>
<view style="margin-top: 20rpx; display: flex;align-items: center;" @click="showDate=true">
<text>{{formatTimestampToYearMonth(nowTimes) }}</text> <up-icon name="arrow-down"></up-icon>
</view>
<view class="recoder" v-if="lists.length">
<view class="card" v-for="(item,index) in lists" :key="index">
<view class="right">
<view class="item" style="justify-content: flex-start;">
<text class="rest">余额提现至</text>
<text v-if="item.merchant_bank_info.bank_code"
class="code">({{item.merchant_bank_info.bank_code.substring(item.merchant_bank_info.bank_code.length - 4)}})</text>
<text class="withdraw-type legal_company">{{ item.merchant_bank_info.is_own?"对公" :"个人"}}</text>
</view>
<view class="item">
<view class="item_title">
<text>{{item.merchant_bank_info.bank_info.name }}</text>
</view>
<view class="item_money">+{{item.amount}}</view>
</view>
<view class="item">
<view class="item-time">{{item.create_time}}</view>
{{item.is_check==1?'审核通过':item.is_check==2?"审核不通过":"待审核" }}
</view>
</view>
<view class="remark" v-if="item.fail_msg">{{item.fail_msg}}</view>
</view>
</view>
<up-empty v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
</up-empty>
<up-datetime-picker :show="showDate" @confirm='confirmDate' :maxDate='now' @cancel='showDate=false'
@close='showDate=false' v-model="nowTimes" mode="year-month"></up-datetime-picker>
</view>
</template>
<script setup>
// import hDatetimePicker from "@/components/h-datetime-picker/components/h-datetime-picker/h-datetime-picker.vue"
import {
ref,
reactive
} from "vue"
import {
UserWithdrawListsApi,
UserWithdrawIndexApi,
} from "@/api/balance.js"
const showDate = ref(false)
const count = ref(0)
const total = ref(0)
const nowTimes = ref(new Date().getFullYear() + '-' + (new Date().getMonth() + 1))
const getInfo = async () => {
let res = await UserWithdrawIndexApi()
count.value = res.data.count
total.value = res.data.total
}
getInfo()
const lists = ref([])
const getList = async () => {
let res = await UserWithdrawListsApi({
create_time: nowTimes.value
})
lists.value = res.data.lists
}
getList()
let now = ref(new Date().getTime())
function formatTimestampToYearMonth(timestamp) {
var date = new Date(timestamp);
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份是从0开始的所以需要加1
if (month < 10) {
month = '0' + month; // 如果月份小于10则在前面补零
}
return year + '-' + month;
}
const confirmDate = (e) => {
nowTimes.value = formatTimestampToYearMonth(e.value)
getList()
showDate.value = false
}
const nowDate = new Date()
// cconst
const showPop = ref(false)
const openDatePicker = () => {
showPop.value = true
}
const confirm = (e) => {
showPop.value = false
}
</script>
<style scoped lang="scss">
.content {
padding: 20rpx;
.head {
padding: 28rpx;
background-color: #fff;
border-radius: 24rpx;
box-shadow: 0rpx 4rpx 10rpx 2rpx rgba(161, 161, 161, 0.4);
border-radius: 20rpx 20rpx 20rpx 20rpx;
.head_conent {
display: flex;
justify-content: space-around;
align-items: center;
.line {
width: 1rpx;
height: 70rpx;
background-color: #dfdfdf;
}
.sum {
flex: 1;
text-align: center;
color: #737373;
font-size: 30rpx;
.num {
font-size: 48.06rpx;
margin-bottom: 15rpx;
font-weight: bold;
}
.text {
margin-bottom: 24rpx;
font-size: 28rpx;
color: #666666;
}
}
}
}
}
.recoder {
margin-top: 20rpx;
// padding: 0 28rpx 28rpx 28rpx;
.time {
height: 42rpx;
font-size: 30rpx;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 500;
color: #333333;
line-height: 45rpx;
margin-bottom: 20rpx;
display: flex;
align-items: center;
.icon {
width: 30rpx;
height: 30rpx;
transform: rotate(90deg);
margin-left: 10rpx;
}
}
.card {
// width: 694rpx;
background: #FFFFFF;
border-radius: 21rpx 21rpx 21rpx 21rpx;
opacity: 1;
padding: 28rpx;
margin-bottom: 20rpx;
.right {
flex: 1;
.item {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20rpx;
.rest {
margin-right: 10rpx;
font-size: 28rpx;
color: #333333;
}
.code {
margin-right: 10rpx;
font-weight: 600;
font-size: 28rpx;
color: #333333;
}
.legal_company {
font-size: 24rpx;
color: #FFFFFF;
background: #72BE53;
border-radius: 6rpx;
padding: 2rpx 10rpx;
}
.legal_person {
font-size: 24rpx;
color: #FFFFFF;
background: #FF8056;
border-radius: 6rpx;
padding: 2rpx 10rpx;
}
.item-time {
font-size: 28rpx;
color: #666666;
}
&_title {
font-weight: 600;
font-size: 28rpx;
color: #333333;
}
&_money {
font-weight: 600;
font-size: 36rpx;
color: #F55726;
}
&_brank {
font-size: 26rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #737373;
line-height: 39rpx;
}
&_time {
font-size: 23rpx;
font-family: PingFang SC-Regular, PingFang SC;
font-weight: 400;
color: #B3B3B3;
line-height: 34rpx;
}
.item_status {
border-radius: 6rpx 6rpx 6rpx 6rpx;
padding: 2rpx 16rpx;
font-size: 28rpx;
}
.audit {
background: rgba(38, 172, 245, .2);
color: #26ACF5;
}
.trans {
background: rgba(245, 87, 38, .2);
color: #F55726;
}
.done {
display: flex;
background: rgba(70, 176, 58, .2);
color: #46B03A;
}
.lose {
background: rgba(102, 102, 102, .2);
color: #666;
}
}
.item-title {
justify-content: flex-start;
text {
&:nth-child(1) {
width: 198rpx;
height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 51rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
&:nth-child(1) {
width: 198rpx;
height: 40rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #333333;
line-height: 51rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
}
}
}
.remark {
word-wrap: break-word;
font-size: 24rpx;
color: #F55726;
font-weight: bold;
}
}
}
</style>