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: 40rpx;color: #3D3D3D;vertical-align: bottom;">￥</text> <input type="text" placeholder="请输入提现金额（请输入整数）"/>
				</view> <text class="qb">全部提现</text>
			</view>
			<view class="ketx">
				<view class="">
					可提现金额：<text>937.19</text>元 
				</view>
				<view class="mx" @click="btnmx">
					提现明细
				</view>
			</view>
			<view class="zje">
				总金额：<text>1184.12</text>元
			</view>
			<view class="sxf">
				提现手续费：<text>3%</text>
			</view>
		</view>
		
		<view class="txsm">
			<view class="title">
				提现说明:
			</view>
			<view class="hong">
				-提现时间：每月6-31日提取可提现金额（上月及之前费用),提现率3%
			</view>
			<view class="hui">
				-提现额度：单笔提现金额最低1元
			</view>
			<view class="hui">
				-到账时间：3个工作日
			</view>
			<view class="hui">
				-每笔提现不能超过500元，请保存收款码上传，不要上传截图收款码
			</view>
		</view>
		<view class="btnanniu">
			立即提现
		</view>
		
      </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                userImgs:''
			}
		},
		onLoad() {
            this.getQiniuToken()
		},
		methods: {
            btnmx(){
				uni.navigateTo({
					url:'/pages/detail/index'
				})
			},
			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) {
               			console.log(res,'resres');
               			let str = JSON.parse(res.data)
               			_this.userImgs = 'https://api.ccttiot.com/' + str.key
               		}
               	});
                 }
               })
			},
		}
	}
</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: 12rpx;
					.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>