h5-elab-open-ownerUnion/components/subComponents/dmWithDrawalRecord.vue

<template>
	<dmDialog ref='popView' :isShowTitle="true" title="提现记录" :isShowClose="true" :isShowConfirm="false" >
		<view class="content">
			<view class="report_title">
				<text class="report_title_" :style="{color:contentColor}">累计提现</text>
				<text class="report_title_money" :style="{color:color2}">￥{{alreadyCashOut||'0.00'}}</text>
			</view>
			<view class="withDrawal" v-if="recordList.length>0">
				<view class="withDrawal_title">
					<view class="title_item" :style="{color:contentColor}">
						提现金额
					</view>
					<view class="title_item" :style="{color:contentColor}">
						提现时间
					</view>
					<view class="title_item" :style="{color:contentColor}">
						提现结果
					</view>
					<view class="title_item" :style="{color:contentColor}">
						微信到账时间
					</view>
				</view>
				 <scroll-view class="scroll-view"  :scroll-y="true" @scrolltolower="loadMore">
					 <view class="withDrawal_content" v-for="(item,index) in recordList" :key='item.orderNo'>
					 	<view class="withDrawal_item" :style="{color:titleColor}">
					 		￥{{item.amount}}
					 	</view>
					 	<view class="withDrawal_item" :style="{color:titleColor}">
					 		{{item.applyTime}}
					 	</view>
						<view class="withDrawal_item" v-if="item.cashStatus">
							<view class="withDrawal_item_success" v-if="item.cashStatus==1">
								成功
							</view>
							<view class="withDrawal_item_failure" v-else-if ="item.cashStatus==2">
								失败
							</view>
							<view class="withDrawal_item_confirmed"  v-else>
								待确认
							</view>
						</view>
						<view class="withDrawal_item" v-else>
	
						</view>
					 	<view class="withDrawal_item" :style="{color:titleColor}">
					 		{{item.cashTime}}
					 	</view>
					 </view>
				 </scroll-view>
				
			</view>
		    <view class="withDrawal_empty" v-else>
		    	<image class="empty" src="../../static/icons/img_withDrawal_empty.png" mode=""></image>
				<text class="empty_txt">暂无提现记录</text>
		    </view>
			<view class="no_more" v-if="recordList.length>0&&recordList.length==total">
				没有更多了
			</view>
			
		</view>
		 
	</dmDialog>
</template>

<script>
	import dmDialog from "./dmDialog.vue"
	export default{
		props:{
			alreadyCashOut:[String,Number]
		},
		data(){
			return {
				recordList:[],
				total:0,
				pageNo:1,
				pageSize:10,
				titleColor:"",
				contentColor:"",
				color2:"",
			}
		},
		methods:{
			show() {
				this.pageNo=1;
				this.getRecordList();
				this.$refs.popView.show()
			},
			knowAction(){
				this.$refs.popView.hide()
			},
			async getRecordList(){
				let param = {
					"pageNo": this.pageNo,
					"pageSize": this.pageSize
				}
				const res = await this.$myRequest({
					url: '/cash/self',
					data:param
				});
				
				if(res&&res.data.success){
					if(this.pageNo==1){
						this.recordList = [];
					}
					let recordList = res.data.pageModel.resultSet||[];
					this.recordList = this.recordList.concat(recordList);
					this.total = res.data.pageModel.total||0
				}
			},
			loadMore(){
				if(this.recordList.length<this.total){
					this.pageNo++;
					this.getRecordList();
				}
			}
		},
		mounted() {
			this.titleColor = getApp().globalData.titleColor;
			this.contentColor = getApp().globalData.contentColor;
			this.color2 = getApp().globalData.color2;
		},
		components:{
			dmDialog
		}
		
	}
</script>

<style scoped lang="scss">
	.content{
		width: 100%;
		min-height: 600rpx;
		overflow: hidden;
	}
	.report_title{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 52rpx;
		margin-bottom: 28rpx;
		
		.report_title_{
			font-size: 28rpx;
			font-family: Verdana, Verdana-Regular;
			font-weight: 400;
			text-align: left;
			color: #b1b1b1;
		}
		.report_title_money{
			font-size: 48rpx;
			font-family: DIN Alternate, DIN Alternate-Bold;
			font-weight: 700;
			text-align: left;
			color: #fd8f3c;
			margin-left: 18rpx;
		}
	}
	.scroll-view{
		width: 100%;
		height: 400rpx;
	}
	.withDrawal{
		.withDrawal_title{
			display: flex;
			justify-content: space-between;
			padding-right: 30rpx;
			box-sizing: border-box;
			margin-bottom: 26rpx;
			.title_item{
				font-size: 24rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: center;
				color: #b1b1b1;
				width: 25%;
			}
		}
		
		.withDrawal_content{
			display: flex;
			justify-content: space-between;
			padding-right: 30rpx;
			box-sizing: border-box;
			margin-bottom: 50rpx;
			.withDrawal_item{
				width: 25%;
				font-size: 24rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: center;
				color: #2c2c2c;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.withDrawal_item_success{
				width: 84rpx;
				height: 44rpx;
				line-height: 44rpx;
				background: rgba(40,181,45,0.1);
				border-radius: 8rpx;
				font-size: 24rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: center;
				color: #28b52d;
			}
			
			.withDrawal_item_failure{
				width: 84rpx;
				height: 44rpx;
				line-height: 44rpx;
				background: rgba(240,116,35,0.1);
				border-radius: 8rpx;
				font-size: 24rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: center;
				color: rgba(216,68,68,1);
			}
			.withDrawal_item_confirmed{
				width: 84rpx;
				height: 44rpx;
				line-height: 44rpx;
				background: rgba(255,196,68,0.1);
				border-radius: 8rpx;
				font-size: 24rpx;
				font-family: Verdana, Verdana-Regular;
				font-weight: 400;
				text-align: center;
				color: rgba(255,196,68,1);
			}
		}
		
	}
	
	.withDrawal_empty{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.empty{
			width: 284rpx;
			height: 228rpx;
		}
		.empty_txt{
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: center;
			color: #b1b3ba;
		}
	}
	.no_more{
		opacity: 0.8;
		font-size: 32rpx;
		font-family: Verdana, Verdana-Regular;
		font-weight: 400;
		text-align: center;
		color: #818181;
		margin-bottom: 35rpx;
	}
</style>