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">
      	    	+
      	    </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 {

			}
		},
		onLoad() {

		},
		methods: {
            btnmx(){
				uni.navigateTo({
					url:'/pages/detail/index'
				})
			},
			
			picbtn() {
				// console.log(11);
				let that = this
				// 从相册选择1张图
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						// 获取上传的图片路径
						const tempFilePath = res.tempFiles[0].path
						that.tempFilePathpic = res.tempFiles[0].path
						// uni.showLoading({
						// 	title: '正在识别...'
						// });
						// uni.uploadFile({
						// 	url: 'https://up-z2.qiniup.com', // 上传图片的接口地址
						// 	filePath: tempFilePath, //所要上传的图片地址
						// 	name: 'file', //所要上传的文件类型
						// 	header: {
						// 		accept: 'application/json'
						// 	},
						// 	formData: {
						// 		token: that.token,
						// 	},
						// 	success: (res) => {
						// 		let urlpic = that.picdomain + '/' + JSON.parse(res.data).key
						// 		console.log(urlpic);
								
						// 	}
						// })
					}
				})
			},
		}
	}
</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: 150rpx;
					font-size: 180rpx;
				}
			}
		}
	}
</style>