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

<template>
	<dmDialog ref='popView' :isShowTitle="true" title="提现" :isShowClose="true" :isShowConfirm="false" marginSize="60rpx">
		<view class="content">
			<view class="report_title">
				<text class="report_title_" :style="{color:titleColor}">提现到：</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_" :style="{color:titleColor}">
					提现金额
				</view>
				<view class="report_title_desc" :style="{color:contentColor}">
					（可提现金额￥{{canCashOut||'0.00'}}）
				</view>
			</view>
			<view class="input_money" :style="{color:titleColor}">
				<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" :style="{color:contentColor}" v-else>单笔限额200元</text>
			<view class="btn">
				<view class="btn_cancel" @click="cancel">
					取消
				</view>
				
				<view class="btn_confirm" @click="confirmWithDrawal" :style="{background:color1}">
					确认提现
				</view>
			</view>
		</view>
		 
	</dmDialog>
</template>

<script>
	import dmDialog from "./dmDialog.vue"
	export default{
		props:{
			canCashOut:[String,Number],
			
		},
		data(){
			return {
				moneyMaxLeng:11,
				money:"",
				titleColor:"",
				contentColor:"",
				color1:"",
			}
		},
		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:"请输入提现金额"
					})
					return
				}
				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:"申请成功，请稍后至提现记录查看结果",
						duration:3000
					});
					this.$emit("updata")
					this.knowAction()
				}else{
					uni.showToast({
						icon:"none",
						title:res.data.message
					})
				}
			}
		},
		mounted() {
			this.titleColor = getApp().globalData.titleColor;
			this.contentColor = getApp().globalData.contentColor;
			this.color1 = getApp().globalData.color1;
		},
		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>