提现和提现列表

components/subComponents/dmDialog.vue

@@ -9,7 +9,7 @@
 		
 		
 		
-		<view :class="['pop-contentView',containerVisible ? 'pop-contentView-show' : '']" :style="{zIndex: zIndex}"
+		<view :class="['pop-contentView',containerVisible ? 'pop-contentView-show' : '']" :style="{zIndex: zIndex,right:marginSize,left:marginSize}"
 		 @touchmove.stop.prevent="moveHandle">
 			<text class="pop-title" v-if="isShowTitle">{{title}}</text>
 			<image class="pop-close" src="../../static/icons/icon_close@2x.png" v-if="isShowClose" mode="" @click="handleCancel"></image>
@@ -51,6 +51,10 @@
 			isScannerOption:{
 				type:Boolean,
 				default:false
+			},
+			marginSize:{
+				type: String,
+				default: '20rpx'
 			}
 		},
 		data() {
@@ -79,9 +83,7 @@
 			hide() {
 				this.maskBgColor = ''
 				this.containerVisible = false
-				setTimeout(() => {
-					this.visible = false
-				}, 200)
+				this.visible = false
 				this.$emit('close')
 			},
 			handleCancel() {
@@ -116,13 +118,13 @@
 
 		.pop-contentView {
 			position: fixed;
-			right: 0;
-			left: 0;
-			bottom: 0;
+			left: 20rpx;
+			right: 20rpx;
+			top: 50%;
+			transform: translateY(-50%);
 			overflow-y: scroll;
 			background-color: #fff;
-			border-radius: 40rpx 40rpx 0rpx 0rpx;
-			box-shadow: 0rpx 8rpx 12rpx 0rpx;
+			border-radius: 20rpx;
 			display: flex;
 			flex-direction: column;
 			align-items: center;

components/subComponents/dmWithDrawal.vue

@@ -0,0 +1,256 @@
+<template>
+	<dmDialog ref='popView' :isShowTitle="true" title="提现" :isShowClose="true" :isShowConfirm="false" marginSize="60rpx">
+		<view class="content">
+			<view class="report_title">
+				<text class="report_title_">提现到：</text>
+				<image class="icon_weichart" src="../../static/icons/icon_weichat.png" mode=""></image>
+				<text class="report_title_money">微信零钱</text>
+			</view>
+			<view class="withDrawal_content">
+				<view class="report_title_">
+					提现金额
+				</view>
+				<view class="report_title_desc">
+					（可提现金额￥{{canCashOut||'0.00'}}）
+				</view>
+			</view>
+			<view class="input_money">
+				<text class="money_bz">￥</text>
+				<input class="money" type="digit" v-model="money" @input="onKeyInput" :maxlength="moneyMaxLeng"/>
+				<image class="icon_close" v-if="money" src="../../static/icons/icon_close_full.png" mode="" @click="clearMoney"></image>
+			</view>
+			<view class="line">
+				
+			</view>
+			<text class="notice_red" v-if="Number(money)>Number(canCashOut)">输入金额超过可提现金额</text>
+			<text class="notice" v-else>单笔限额200元</text>
+			<view class="btn">
+				<view class="btn_cancel" @click="cancel">
+					取消
+				</view>
+				
+				<view class="btn_confirm" @click="confirmWithDrawal">
+					确认提现
+				</view>
+			</view>
+		</view>
+		 
+	</dmDialog>
+</template>
+
+<script>
+	import dmDialog from "./dmDialog.vue"
+	export default{
+		props:{
+			canCashOut:[String,Number],
+			
+		},
+		data(){
+			return {
+				moneyMaxLeng:11,
+				money:""
+			}
+		},
+		methods:{
+			show() {
+				this.$refs.popView.show()
+			},
+			knowAction(){
+				this.money = ""
+				this.$refs.popView.hide()
+			},
+			onKeyInput(e){
+				let val = e.target.value;
+				val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
+				val = val.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
+	            val = val.replace(/^0+\./g, '0.');
+				val = val.match(/^0+[1-9]+/) ? val = val.replace(/^0+/g, '') : val
+				val = (val.match(/^\d*(\.?\d{0,2})/g)[0]) || ''
+				 if (val.includes(".")) {
+					let numDian = val.toString().split(".")[1].length;
+					if (numDian === 2) {
+					  this.moneyMaxLeng = val.length;
+					}
+				  } else {
+					this.moneyMaxLeng = 8;
+				  }
+				this.money = val
+			},
+			clearMoney(){
+				this.money = ""
+			},
+			cancel(){
+				this.money = ""
+				this.$refs.popView.hide()
+			},
+			async confirmWithDrawal(){
+				if(!this.money||this.money==0){
+					uni.showToast({
+						icon:"none",
+						title:"请输入提现金额"
+					})
+				}
+				let param = {
+					"amount": this.money
+				}
+				const res = await this.$myRequest({
+					url: '/cash/apply',
+					data:param,
+				});
+				if (res && res.data.success) {
+					uni.showToast({
+						icon:"none",
+						title:"提现成功"
+					})
+				}else{
+					uni.showToast({
+						icon:"none",
+						title:res.data.message
+					})
+				}
+			}
+		},
+		mounted() {
+			
+		},
+		components:{
+			dmDialog
+		}
+		
+	}
+</script>
+
+<style scoped lang="scss">
+	.content{
+		width: 100%;
+		height: 490rpx;
+		padding-left: 40rpx;
+		padding-right: 40rpx;
+		box-sizing: border-box;
+	}
+	.report_title{
+		display: flex;
+		align-items: center;
+		margin-top: 52rpx;
+		margin-bottom: 40rpx;
+		
+		.report_title_{
+			font-size: 28rpx;
+			font-family: Verdana, Verdana-Regular;
+			font-weight: 400;
+			text-align: left;
+			color: #262626;
+		}
+		
+		.icon_weichart {
+			width: 34rpx;
+			height: 28rpx;
+			margin-right: 8rpx;
+		}
+		
+		.report_title_money{
+			font-size: 28rpx;
+			font-family: Verdana, Verdana-Regular;
+			font-weight: 400;
+			text-align: left;
+			color: #262626;
+		}
+	}
+	
+	.withDrawal_content{
+		display: flex;
+		align-items: center;
+		.report_title_{
+			font-size: 28rpx;
+			font-family: Verdana, Verdana-Regular;
+			font-weight: 400;
+			text-align: left;
+			color: #262626;
+		}
+		.report_title_desc{
+			font-size: 28rpx;
+			font-family: Verdana, Verdana-Regular;
+			font-weight: 400;
+			text-align: left;
+			color: #b1b1b1;
+		}
+	}
+	.input_money{
+		margin-top: 12rpx;
+		margin-bottom: 19rpx;
+		display: flex;
+		align-items: center;
+		.money_bz{
+			font-size: 52rpx;
+			font-family: DIN Alternate, DIN Alternate-Bold;
+			font-weight: 700;
+			text-align: left;
+			color: #262626;
+		}
+		.money{
+			font-size: 52rpx;
+			font-family: DIN Alternate, DIN Alternate-Bold;
+			font-weight: 700;
+			text-align: left;
+			color: #262626;
+			padding-right: 10rpx;
+		}
+		.icon_close{
+			width: 40rpx;
+			height: 40rpx;
+			min-width: 40rpx;
+		}
+	}
+	.line{
+		height: 1px;
+		background: rgba(127,127,127,0.1);
+	}
+	.notice{
+		font-size: 28rpx;
+		font-family: Verdana, Verdana-Regular;
+		font-weight: 400;
+		text-align: left;
+		color: #b1b1b1;
+		margin-top: 15rpx;
+	}
+	.notice_red{
+		font-size: 28rpx;
+		font-family: Verdana, Verdana-Regular;
+		font-weight: 400;
+		text-align: left;
+		color: rgba(206,21,21,0.8);
+	}
+	.btn{
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: 40rpx;
+		.btn_cancel{
+			width: 250rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			background: #ffffff;
+			border: 2rpx solid #f07423;
+			border-radius: 42rpx;
+			text-align: center;
+			font-size: 28rpx;
+			font-family: Verdana, Verdana-Bold;
+			font-weight: 700;
+			color: #f07423;
+		}
+		.btn_confirm{
+			width: 250rpx;
+			height: 80rpx;
+			line-height: 80rpx;
+			background: #f07423;
+			border-radius: 40rpx;
+			box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(240,116,35,0.37); 
+			text-align: center;
+			font-size: 28rpx;
+			font-family: Verdana, Verdana-Bold;
+			font-weight: 700;
+			color: #ffffff;
+		}
+	}
+	
+</style>

components/subComponents/dmWithDrawalRecord.vue

@@ -3,8 +3,55 @@
 		<view class="content">
 			<view class="report_title">
 				<text class="report_title_">累计提现</text>
-				<text class="report_title_money">￥23,227,00.00</text>
+				<text class="report_title_money">￥{{alreadyCashOut||'0.00'}}</text>
 			</view>
+			<view class="withDrawal" v-if="recordList.length>0">
+				<view class="withDrawal_title">
+					<view class="title_item">
+						提现金额
+					</view>
+					<view class="title_item">
+						提现时间
+					</view>
+					<view class="title_item">
+						提现结果
+					</view>
+					<view class="title_item">
+						微信到账时间
+					</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">
+					 		￥{{item.amount}}
+					 	</view>
+					 	<view class="withDrawal_item">
+					 		{{item.applyTime}}
+					 	</view>
+					 	<view class="withDrawal_item_success" v-if="item.cashStatus==1">
+					 		成功
+					 	</view>
+					 	<view class="withDrawal_item_failure" v-if="item.cashStatus==2">
+					 		失败
+					 	</view>
+					 	<view class="withDrawal_item_confirmed"  v-if="item.cashStatus==3">
+					 		待确认
+					 	</view>
+					 	<view class="withDrawal_item">
+					 		{{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>
@@ -13,9 +60,15 @@
 <script>
 	import dmDialog from "./dmDialog.vue"
 	export default{
+		props:{
+			alreadyCashOut:[String,Number]
+		},
 		data(){
 			return {
-				
+				recordList:[],
+				total:0,
+				pageNo:1,
+				pageSize:10,
 			}
 		},
 		methods:{
@@ -25,9 +78,35 @@
 			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.pageNo=1;
+			this.getRecordList();
 		},
 		components:{
 			dmDialog
@@ -39,10 +118,15 @@
 <style scoped lang="scss">
 	.content{
 		width: 100%;
-		height: 776rpx;
+		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;
@@ -57,6 +141,109 @@
 			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;
+			}
+			.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>

pages/reportPage/reportPage.vue

@@ -10,7 +10,7 @@
 				</view>
 				<view class="right">
 					<view class="txRecord" :style="`color: ${color2};`" @click="txRecordList">提现记录></view>
-					<view class="txRequest" :style="`background-color: ${color1};`">提现申请</view>
+					<view class="txRequest" :style="`background-color: ${color1};`" @click="requestWithDrawal">提现申请</view>
 				</view>
 			</view>
 			<view class="sectionB">
@@ -93,6 +93,7 @@
 		
 		<dm-calendar-picker-view ref='calendarPickerView' @confirmSelDate='confirmSelDate'></dm-calendar-picker-view>
 	    <dmWithDrawalRecord ref='withDrawalRecord'></dmWithDrawalRecord>
+		<dmWithDrawal ref='withDrawal' :canCashOut='headerInfo.canCashOut'></dmWithDrawal>
 	</view>
 
 </template>
@@ -102,6 +103,7 @@
 	import dmCalendarPickerView from '../../components/subComponents/dmCalendarPickerView.vue'
 	import moment from '../../static/moment.min.js'
 	import dmWithDrawalRecord from '../../components/subComponents/dmWithDrawalRecord.vue' 
+	import dmWithDrawal from '../../components/subComponents/dmWithDrawal.vue'
 	let app = getApp();
 	export default {
 		data() {
@@ -272,6 +274,9 @@
 			},
 			txRecordList(){
 				this.$refs.withDrawalRecord.show();
+			},
+			requestWithDrawal(){
+				this.$refs.withDrawal.show()
 			}
 		},
 		
@@ -294,6 +299,7 @@
 			numRun,
 			dmCalendarPickerView,
 			dmWithDrawalRecord,
+			dmWithDrawal
 		}
 	}
 </script>