234 lines
5.7 KiB
Plaintext
234 lines
5.7 KiB
Plaintext
<template>
|
|
<view v-if="isLoading" class="skeleton-container" style="padding: 10rpx 30rpx">
|
|
<!-- 骨架屏记录项 -->
|
|
<view class="skeleton-record-item" v-for="i in 3" :key="i">
|
|
<!-- 标题骨架 -->
|
|
<view class="skeleton-title"></view>
|
|
|
|
<!-- 金额区域骨架 -->
|
|
<view class="skeleton-amount-section">
|
|
<view class="skeleton-amount-line"></view>
|
|
<view class="skeleton-amount-value"></view>
|
|
</view>
|
|
|
|
<!-- 信息行骨架 -->
|
|
<view class="skeleton-info-row">
|
|
<view class="skeleton-info-label"></view>
|
|
<view class="skeleton-info-value"></view>
|
|
</view>
|
|
|
|
<view class="skeleton-info-row">
|
|
<view class="skeleton-info-label"></view>
|
|
<view class="skeleton-info-value"></view>
|
|
</view>
|
|
|
|
<view class="skeleton-info-row">
|
|
<view class="skeleton-info-label"></view>
|
|
<view class="skeleton-info-value"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 加载更多骨架 -->
|
|
<view class="skeleton-loadmore"></view>
|
|
</view>
|
|
<view v-else style="padding: 10rpx 30rpx;">
|
|
<view class="" v-for="(item,index) in withdrowList" :key="index"
|
|
style="margin-top: 20rpx; gap: 20rpx; background-color: #fff; border-radius: 20rpx; padding: 30rpx; ">
|
|
<view class="" style="font-weight: bold; border-bottom: 1rpx solid #f6f6f6; padding-bottom: 15rpx;">
|
|
余额提现-{{ item.payway}}
|
|
</view>
|
|
<view class=""
|
|
style="width: 100%; height: 200rpx; display: flex;flex-direction: column; justify-content: center; align-items: center; ">
|
|
<view class="" style="">
|
|
提现金额 {{ item.amount}} 元
|
|
</view>
|
|
<view class="" style="font-size: 32rpx; font-weight: bold; margin-top: 10rpx; ">
|
|
实际到账 {{item.withAmount}} 元
|
|
</view>
|
|
</view>
|
|
<view class="" style="display: flex; align-items: center; gap: 30rpx; ">
|
|
<view class="" style="width: 120rpx;">
|
|
收款人
|
|
</view>
|
|
<view class="" style="">
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
<view class="" style="display: flex; align-items: center; gap: 30rpx; margin-top: 10rpx; ">
|
|
<view class="" style="width: 120rpx;">
|
|
提现账号
|
|
</view>
|
|
<view class="" style="">
|
|
{{ item.account }}
|
|
</view>
|
|
</view>
|
|
<view class="" style="display: flex; align-items: center; gap: 30rpx; margin-top: 10rpx;">
|
|
<view class="" style="width: 120rpx;">
|
|
提现时间
|
|
</view>
|
|
<view class="" style="">
|
|
{{ Service.formatDate(item.addTime,1) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<up-loadmore :status="status" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onShow, onLoad, onReachBottom } from "@dcloudio/uni-app";
|
|
import { Service } from '@/Service/Service';
|
|
import { ref } from "vue";
|
|
import { CNRiderOrderService } from '@/Service/CN/CNRiderOrderService'
|
|
|
|
let isLoading = ref(true)
|
|
|
|
let withdrowList = ref<Array<any>>([])
|
|
let status = ref('nomore')
|
|
let page = ref(1)
|
|
|
|
onLoad(() => {
|
|
getData()
|
|
});
|
|
|
|
onShow(() => {
|
|
|
|
});
|
|
|
|
|
|
|
|
onReachBottom(() => {
|
|
getList()
|
|
})
|
|
|
|
const getData = () => {
|
|
status.value = 'loadmore'
|
|
page.value = 1
|
|
withdrowList.value = []
|
|
getList()
|
|
}
|
|
|
|
|
|
//获取订单
|
|
const getList = () => {
|
|
if (status.value == 'nomore' || status.value == 'loading') {
|
|
return
|
|
}
|
|
status.value == 'loadmore'
|
|
CNRiderOrderService.GetRiderWithList(page.value).then(res => {
|
|
isLoading.value = false
|
|
if (res.data) {
|
|
withdrowList.value = [...withdrowList.value, ...res.data.list]
|
|
status.value = res.data.list == 10 ? 'loadmore' : 'nomore'
|
|
page.value++
|
|
}
|
|
})
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.icon-placeholder {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
background-color: #E6F7FF;
|
|
border-radius: 8rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* 骨架屏样式 */
|
|
.skeleton-record-item {
|
|
margin-top: 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.skeleton-title {
|
|
width: 200rpx;
|
|
height: 32rpx;
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
border-radius: 4rpx;
|
|
margin-bottom: 20rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-amount-section {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.skeleton-amount-line {
|
|
width: 180rpx;
|
|
height: 28rpx;
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
border-radius: 4rpx;
|
|
margin-bottom: 10rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-amount-value {
|
|
width: 250rpx;
|
|
height: 40rpx;
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
border-radius: 4rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-info-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.skeleton-info-label {
|
|
width: 120rpx;
|
|
height: 28rpx;
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
border-radius: 4rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-info-value {
|
|
width: 300rpx;
|
|
height: 28rpx;
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
border-radius: 4rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
.skeleton-loadmore {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
|
|
background-size: 200% 100%;
|
|
border-radius: 4rpx;
|
|
margin-top: 20rpx;
|
|
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
}
|
|
|
|
/* 骨架屏动画 */
|
|
@keyframes skeleton-loading {
|
|
0% {
|
|
background-position: -100% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: 100% 0;
|
|
}
|
|
}
|
|
</style> |