zhibo/pages_user/user/userTuiMoney.vue

<template>
  <view    >
    <view class="header">
      <view class="promoterHeader">
		<image class="bg" src="/static/images/transparent.png" />
        <view class="headerCon acea-row row-between-wrapper">
          <view>
            <view class="name">可提现金额</view>
            <view>
              <text class="num">{{nowMoney}}</text>
              <text>元</text>
            </view>
          </view>
        </view>
      </view>
    </view>
	<view class="form-box">
		<view class="form-item">
			<text class="label">提现金额</text>
			<input type="number" v-model="form.extractPrice" maxlength="10" placeholder="请输入提现金额" class="form-input" />
		</view>
		<view class="form-item">
			<text class="label">收款人</text>
			<input type="text" v-model="form.realName"  placeholder="请输入收款人" class="form-input" />
		</view>
		<view class="form-item">
			<text class="label">开户行</text>
			<input type="text" v-model="form.bankAddress"  placeholder="请输入收款人开户行" class="form-input" />
		</view>
		<view class="form-item">
			<text class="label">银行账号</text>
			<input type="text" v-model="form.bankCode"  placeholder="请输入收款人银行账号" class="form-input" />
		</view>
	</view>
    <view class="btn-box">
    	<view class="sub-btn" @click="submit()">提交</view>
    </view>
	<view class="tips">
		<view>冻结佣金：{{brokeragePrice}}元</view>
		<view>提现规则</view>
		<view>1.订单支付即产生佣金；</view>
		<view>2.佣金在用户确认收货前处于冻结状态；</view>
		<view>3.每笔最低提现额度100元以上，且为10的倍数；</view>
		<view>4.提现后3~7个工作日到账</view>
		<view>5.目前仅支持银行卡提现，微信、支付宝提现开发中，尽请期待</view>
	</view>
  </view>
</template>
<script>
import {getUserInfo,doExtract} from '@/api/user'
export default {
    name: "tuiMoney",
    data: function () {
      return {
        nowMoney:0,
		brokeragePrice:0,
		form:{
			extractPrice:0,
			bankCode:"",
			bankAddress:"",
			realName:"",
			
		}
      };
    },
    mounted: function () {
		this.getUserInfo();
    },
    methods: {
		submit(){
			doExtract(this.form).then(
				res => {
					if(res.code==200){
						uni.showToast({
							icon:'none',
						 	title: res.msg,
						});
						this.getUserInfo();
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				},
				rej => {}
			);
		},
		getUserInfo(){
			getUserInfo().then(
				res => {
					if(res.code==200){
						if(res.user!=null){
							this.nowMoney=res.user.nowMoney;
							this.brokeragePrice=res.user.brokeragePrice;
						}
						else{
							this.utils.loginOut();
						}
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				},
				rej => {}
			);
		},
    }
  };
</script>
<style lang="less">
	
	/*所有推广头部样式*/
	.promoterHeader {
	  width: 100%;
	  height: 2.2 * 100rpx;
	  background-color: #2BC7B9;
	  position: relative;
	  .bg{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	  }
	}
	
	.promoterHeader .headerCon {
	  height: 100%;
	  padding: 0 0.88 * 100rpx 0 0.88 * 100rpx;
	  font-size: 0.28 * 100rpx;
	  color: #fff;
	  background-repeat: no-repeat;
	  background-size: 100% 100%;
	}
	
	.promoterHeader .headerCon .name {
	  margin-bottom: 0.02 * 100rpx;
	}
	
	.promoterHeader .headerCon .num {
	  font-size: 0.5 * 100rpx;
	}
	
	.promoterHeader .headerCon .iconfont {
	  font-size: 1.25 * 100rpx;
	}
	.form-box{
		padding: 0 30upx;
		background: #FFFFFF;
		.form-item{
			padding: 30upx 0;
			display: flex;
			align-items: flex-start;
			border-bottom: 1px solid #F1F1F1;
			&:last-child{
				border-bottom: none;
			}
			.label{
				width: 150upx;
				text-align: left;
				font-size: 30upx;
				line-height: 44upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #222222;
				flex-shrink: 0;
			}
			input{
				text-align: left;
			}
			.form-input{
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #111111;
				text-align: left;
			}
			.form-textarea{
				font-size: 30upx;
				color: #111111;
				height: 100upx;
				padding: 4upx 0;
			}
			 
			.birth-picker {
				flex: 1;
				display: flex;
				align-items: center;
				
				.right-box{
					width: 100%;
					display: flex;
					align-items: center;
					.input-box{
						width: 470upx;
					}
					.arrow{
						width: 13upx;
						height: 23upx;
						margin-left: 20upx;
					}
				}
			}
		}
	}
	.btn-box{
		margin-top: 30rpx;
		height: 120upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.sub-btn{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #2BC7B9;
			border-radius: 44upx;
		}
	}
	.tips{
		padding: 0 30upx;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #A9AFB8;
		line-height: 48upx;
	}
</style>