chunwan/pages/users/withdrawal/index.vue

<template>
	<view class="add">
		<view class="add-content">
			<view class="content">
				<view class="title">提现金额</view>
				<view class="box">
					<input v-model="money" placeholder="请输入提现金额" />
					<view class="all">全部提现</view>
				</view>
				<view class="remark">
					<view class="p">可提现金额：110元，包含：金币折算10元+账户余额100元</view>
					<view class="p">实际到账：101.2元<text>手续费(8%)：8.8元</text></view>
				</view>
			</view>
			<view class="content">
				<view class="title">提现方式（支付宝）</view>
				<view class="list">
					<view class="item">账号：188****0298</view>
					<view class="item">姓名：李哈哈</view>
				</view>
			</view>
			<view class="rule">
				<view class="title">提现规则：</view>
				<view class="list">
					<view class="item">1、提现收取8%的手续费；</view>
					<view class="item">2、金币的换算规则：100金币=1元；</view>
					<view class="item">3、每次提现，预计到账时间24小时，如有问题请联系下方客服，客服会在24小时内为您解决</view>
				</view>
			</view>
			<view class="chat">
				<view class="title">有疑问？</view>
				<view class="list">
					<image src="@/static/kefu.png"></image>
					<view class="info">
						<view class="name">在线客服</view>
						<view class="date">9:00-18:00</view>
					</view>
				</view>
			</view>
		</view>
		<view class="add-fd">
			<view class="btn" @click="toReg()">提现（手续费：0.80元）</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				money: "",
			};
		},
		onLoad() {
			
		},
		methods: {
			async toReg() {
				const that = this;
				if(!that.content){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "举报说明不能为空！"
					})
					return ;
				}
				
				const { code, data, msg } = await that.$api.report({
					userId: uni.getStorageSync("userInfo").id,
					content: that.content,
					imgurl: that.imgurl.join(","),
					reportUserId: that.type == 1?that.uid:"",
					type: that.type,
					eventid: that.id,
					reason: ""
				})
				if(code == 200){
					that.imgurl = [];
					that.content = "";
					that.show = true;
				}else{
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: msg
					})
				}
			},
			tabItem(index) {
				this.tabIndex = index;
			},
			toDel(i) {
				this.imgurl.splice(i,1)
			},
		}
	}
</script>

<style scoped lang="scss">
.add{
	overflow: hidden;
	padding-bottom: 110rpx;
	&-content{
		padding: 0 25rpx;
		overflow: hidden;
		.content{
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			overflow: hidden;
			.box{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				box-sizing: border-box;
				border-bottom: 1px solid #E6E6E6;
				input{
					flex: 1;
					height: 60rpx;
					font-size: 30rpx;
					color: #212121;
				}
				.all{
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
				}
			}
			.remark{
				.p{
					padding: 10rpx 0;
					font-weight: 500;
					font-size: 22rpx;
					color: #222222;
					text{
						margin-left: 30rpx;
					}
				}
				margin-top: 20rpx;
			}
			
			.list{
				.item{
					font-weight: 500;
					font-size: 30rpx;
					color: #999999;
					margin-top: 25rpx;
					&:first-child{
						border-bottom: 1px solid #E6E6E6;
						padding-bottom: 25rpx;
					}
				}
			}
		}
		.title{
			font-size: 30rpx;
			color: #333333;
		}
		.rule{
			background: #EDEEEF;
			border-radius: 20rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			overflow: hidden;
			.list{
				.item{
					padding: 5rpx 0;
					font-weight: 500;
					font-size: 24rpx;
					color: #222222;
				}
				margin-top: 20rpx;
			}
			
		}
	}
	
	&-fd{
		background-color: #F3F4F5;
		width: 100%;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 22;
		.btn{
			width: 100%;
			line-height: 98rpx;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			border-radius: 98rpx;
			text-align: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			letter-spacing: 5rpx;
		}
	}
}
</style>