powerbank/pages/detail/immediately/index.vue

<template>
	<view class="page">
		<u-navbar title="申请提现" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='38'></u-navbar>
		<view class="box">
			<view class="scpic">
				<view class="">
					上传二维码:
				</view>
				<view class="tp" @click="picbtn" v-if="userImgs">
					<image :src="userImgs" mode=""></image>
				</view>
				<view class="tp" @click="picbtn" v-else>
					+
				</view>
			</view>
			<view class="txje">
				<view class="title">
					提现金额
				</view>
				<view class="tx">
					<view class="qian">
						<text
							style="font-weight: 500;font-size: 44rpx;color: #3D3D3D;vertical-align: bottom;margin-right:10rpx;">￥</text>
						<input type="text" v-model="xutx" placeholder="请输入提现金额（请输入整数）" />
					</view> <text class="qb" @click="btnqbtx">全部提现</text>
				</view>
				<view class="ketx">
					<view class="">
						可提现金额：<text>{{txobj.balance}}</text>元
					</view>
					<view class="mx" @click="btnmx">
						提现明细
					</view>
				</view>
				<view class="zje">
					总金额：<text>{{txobj.totalAmount}}</text>元
				</view>
				<view class="sxf">
					提现手续费：<text>{{txobj.serviceRate}}%</text>
				</view>
			</view>

			<view class="txsm">
				<view class="title">
					提现说明:
				</view>
				<view class="hong">
					-提现时间：每月提取可提现金额（上月及之前费用),提现率{{txobj.serviceRate}}%
				</view>
				<view class="hui">
					-提现额度：单笔提现金额最低{{txobj.minAmount}}元
				</view>
				<view class="hui">
					-到账时间：3个工作日
				</view>
				<view class="hui">
					-每笔提现不能超过{{txobj.maxAmount}}元，请保存收款码上传，不要上传截图收款码
				</view>
			</view>
			<view class="btnanniu" @click="btnljtx">
				立即提现
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userImgs: '',
				ketx: 500,
				zongtx: 600,
				xutx: '',
				txobj: {}
			}
		},
		onLoad() {
			this.getQiniuToken()
		},
		onShow() {
			this.getguize()
		},
		methods: {
			btnqbtx() {
				this.xutx = this.txobj.balance
			},
			btnmx() {
				uni.navigateTo({
					url: '/pages/detail/index'
				})
			},
			btnljtx() {
				let data = {
					picture:this.userImgs,
					amount:this.xutx,
					serviceRate:this.txobj.serviceRate,
					type:1
				}
                this.$u.post('/agent/withdraw',data).then(res => {
                     if(res.code == 200){
						uni.showToast({
							title: '提现成功',
							icon: 'none',
							duration: 2000
						})
						this.xutx = ''
						this.getguize()
					 }else if(res.code == 500){
						 uni.showToast({
						 	title: res.msg,
						 	icon: 'none',
						 	duration: 2000
						 })
					 }
 				})
			},
			getguize() {
				this.$u.get('/agent/withdraw/rule').then(res => {
					if (res.code == 200) {
						this.txobj = res.data
					}
				})
			},
			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
					}
				})
			},
			picbtn() {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseMessageFile({
					count: 1,
					type: 'all',
					success(res) {
						let tempFilePaths = res.tempFiles
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths[0].path,
							formData: {
								token: _this.token, //后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								let str = JSON.parse(res.data)
								_this.userImgs = 'https://api.ccttiot.com/' + str.key
								console.log(_this.userImgs);
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: ;
		background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;

		.box {
			.btnanniu {
				width: 680rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				text-align: center;
				line-height: 90rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				margin: auto;
				position: fixed;
				bottom: 84rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			.txsm {
				margin-top: 36rpx;
				padding-left: 58rpx;
				padding-right: 58rpx;
				box-sizing: border-box;

				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #808080;
				}

				.hong {
					font-size: 24rpx;
					color: #FF4444;
					margin-top: 10rpx;
				}

				.hui {
					font-size: 24rpx;
					color: #808080;
					margin-top: 16rpx;
				}
			}

			margin-top: 32rpx;
			width: 750rpx;
			height: 1440rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 22rpx;

			.txje {
				width: 680rpx;
				height: 352rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				margin-top: 30rpx;
				padding-top: 28rpx;
				padding-right: 30rpx;
				padding-left: 30rpx;
				box-sizing: border-box;

				.title {
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
				}

				.zje {
					margin-top: 16rpx;
					font-size: 24rpx;
					color: #3D3D3D;

					text {
						color: #FF8157;
					}
				}

				.sxf {
					margin-top: 16rpx;
					font-size: 20rpx;
					color: #3D3D3D;

					text {
						color: #FF4444;
					}
				}

				.ketx {
					display: flex;
					justify-content: space-between;
					margin-top: 38rpx;
					font-size: 24rpx;
					color: #3D3D3D;

					text {
						color: #FF4444;
					}

					.mx {
						color: #808080;
					}
				}

				.tx {
					display: flex;
					justify-content: space-between;
					margin-top: 16rpx;
					border-bottom: 1px solid #ccc;
					padding-bottom: 8rpx;

					.qb {
						font-size: 24rpx;
						color: #1DBE7B;
						margin-top: 15rpx;
					}

					.qian {
						display: flex;

						input {
							margin-top: 10rpx;
							width: 440rpx;
						}
					}
				}
			}

			.scpic {
				width: 680rpx;
				height: 300rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding-top: 74rpx;
				padding-left: 48rpx;
				box-sizing: border-box;
				display: flex;

				.tp {
					width: 166rpx;
					height: 166rpx;
					background-color: #eee;
					margin-left: 28rpx;
					color: #fff;
					text-align: center;
					line-height: 135rpx;
					font-size: 180rpx;
				}
			}
		}
	}
</style>