uniapp uview银行卡提现ui实现

uniapp yekong

uniapp小程序开发
加接口调用逻辑

uniapp uview银行卡提现ui实现


<template>
	<view class="flex-col page">
		<view class="flex-col group_5">
			<view class="flex-col group_6">
				<div class="tixiantop">
					<text class="text_6">¥</text>
					<input type="number" v-model="money" />
				</div>
				<view class="justify-between group_7">
					<view class="group_8">
						<text class="text_7">账号余额</text>
						<text class="text_8">¥{{data.money}}</text>
						<text class="text_9" @click="getall">全部提现</text>
					</view>
					<text class="text_10" @click="gotixian">提现记录</text>
				</view>
			</view>
			<view class="flex-col group_9">
				<view @click="add" class="flex-col items-center button">
					<text>确定提现</text>
				</view>
				<view class="justify-center group_10">
					<text class="text_12">提现到{{data.bankname}}:{{data.bankaccount}}</text>
					<text class="text_13" @click="gobank">更改</text>
				</view>
				<view class="flex-col section_1">
					<text>1.用户余额大于100才能进行提现</text>
					<text class="text_15">2.每周提现一次</text>
					<text class="text_16">3.每周一进行线下打款</text>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		dowithdraw,
		userindex
	} from '../../config/api.js'
	export default {
		data() {
			return {
				money: '',
				data: {
					avatar: "",
					bankaccount: "",
					bankname: "",
					group_id: 0,
					is_bind: 0,
					is_online: 0,
					money: "0",
					mobile: '',
					nickname: "",
					realname: "",
				}
			};
		},
		mounted() {
			this.userindex()
		},
		methods: {
			gobank() {
				uni.navigateTo({
					url: '/pages/bank/add'
				})
			},
			getall() {
				this.money = this.data.money
			},
			gotixian() {
				uni.navigateTo({
					url: '/pages/withdrawal/list'
				})
			},

			add() {
				var that = this;
				if (!that.money) {
					uni.showToast({
						title: '请输入金额',
						icon: 'none'
					})
					return
				}

				if (that.money > that.data.money) {
					uni.showToast({
						title: '提现金额不能大于当前金额',
						icon: 'none'
					})
					return
				}

				if (that.money < 100) {
					uni.showToast({
						title: '请输入大于100的金额',
						icon: 'none'
					})
					return
				}
				dowithdraw({
					amount: that.money,
				}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						that.$refs.uToast.show({
							type: 'success',
							title: '提示',
							message: "提交成功",
							complete() {
								uni.navigateBack({})
							}
						})
					}
				}).catch(err => {

				})
			},
			userindex() {
				var that = this;
				userindex({}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						that.data = res.data
					}
				}).catch(err => {

				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #F2F2F2;
		width: 100%;
		height: 100%;
		overflow-y: auto;
		position: absolute;

		.group_5 {
			padding-top: 30rpx;
			background-color: #fff;
			overflow-y: auto;

			.group_6 {
				padding-left: 24rpx;
				padding-right: 21rpx;

				.text_6 {
					margin-left: 4rpx;
					color: rgb(59, 59, 59);
					font-size: 32rpx;
					line-height: 25rpx;
					white-space: nowrap;
				}

				.group_7 {
					margin-top: 25rpx;
					padding-left: 10rpx;
					padding-top: 30rpx;
					border-top: solid 2rpx rgb(238, 238, 238);

					.group_8 {
						line-height: 22rpx;
						white-space: nowrap;
						height: 25rpx;

						.text_7 {
							color: rgb(172, 170, 170);
							font-size: 24rpx;
							line-height: 23rpx;
						}

						.text_8 {
							margin-left: 11rpx;
							color: rgb(172, 170, 170);
							font-size: 24rpx;
							line-height: 23rpx;
						}

						.text_9 {
							margin-left: 49rpx;
							color: rgb(255, 180, 0);
							font-size: 24rpx;
							line-height: 23rpx;
						}
					}

					.text_10 {
						color: rgb(172, 170, 170);
						font-size: 24rpx;
						line-height: 22rpx;
						white-space: nowrap;
					}
				}
			}

			.group_9 {
				margin-top: 69rpx;

				.button {
					margin: 0 49rpx;
					padding: 29rpx 0 30rpx;
					color: rgb(255, 255, 255);
					font-size: 30rpx;
					line-height: 29rpx;
					white-space: nowrap;
					background-color: rgb(255, 176, 0);
					border-radius: 15rpx;
				}

				.group_10 {
					padding: 27rpx 0 33rpx;

					.text_12 {
						color: rgb(172, 170, 170);
						font-size: 24rpx;
						line-height: 23rpx;
						white-space: nowrap;
					}

					.text_13 {
						margin-left: 21rpx;
						color: rgb(255, 176, 0);
						font-size: 24rpx;
						line-height: 22rpx;
						white-space: nowrap;
					}
				}

				.section_1 {
					padding: 53rpx 36rpx 489rpx;
					color: rgb(172, 170, 170);
					font-size: 24rpx;
					line-height: 23rpx;
					white-space: nowrap;
					background-color: rgb(242, 242, 242);

					.text_15 {
						margin-top: 19rpx;
					}

					.text_16 {
						margin-top: 19rpx;
					}
				}
			}
		}
	}

	.tixiantop {
		height: 80rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;

		input {
			width: 670rpx;
			height: 80rpx;
			font-size: 30rpx;
			margin-left: 10px;
		}
	}
</style>

喜欢