uniapp 页面开发 结合uivew实现余额提现ui

代码

<template>
	<view>
		<u-navbar @leftClick="goback" @rightClick="gojilu" rightText="记录" :safeAreaInsetTop="true" bg-color="#FFDC05"
			title="余额提现">
		</u-navbar>
		<view class="changepwd">
			<u--form labelPosition="left" labelWidth="100" :model="model1" ref="form1">
				<u-form-item label="可提现余额" prop="userInfo.yue" borderBottom ref="item1">
					<u--input disabledColor="#ffffff" disabled class="inputx" type="number" placeholder=""
						inputAlign="right" v-model="model1.userInfo.yue" border="none"></u--input>
				</u-form-item>
				<u-form-item :label="active==0?'支付宝账号':'微信账号'" prop="userInfo.account" borderBottom ref="item1">
					<u--input class="inputx" type="text" placeholder="请输入你的账号" inputAlign="right"
						v-model="model1.userInfo.account" border="none"></u--input>
				</u-form-item>
				<u-form-item label="校验姓名" prop="userInfo.name" borderBottom ref="item1">
					<u--input class="inputx" type="text" placeholder="诗输入你的账号持有人姓名" inputAlign="right"
						v-model="model1.userInfo.name" border="none"></u--input>
				</u-form-item>
				<u-form-item label="提现金额" prop="userInfo.jine" borderBottom ref="item1">
					<u--input class="inputx" type="number" placeholder="请输入金额" inputAlign="right"
						v-model="model1.userInfo.jine" border="none"></u--input>
				</u-form-item>
				<u-form-item label=" " borderBottom ref="item1">
					<div class="tabs">
						<div class="tab cur" :class="{active:active==index}" @click="getactive(index)"
							v-for="(item,index) in list" :key="index">
							<div class="dian"></div><span>{{ item }}</span>
						</div>
					</div>
				</u-form-item>
			</u--form>
			<u-button class="mt50" @click="submit" type="primary">提现</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						yue: 7500,
						account: '',
						name: '',
						jine: '',
					},
				},
				type: 0,
				list: ['微信', '支付宝'],
				active: 0
			};
		},
		methods: {
			submit() {

			},
			getactive(e) {
				this.active = e
				this.$forceUpdate()
			},
			goback() {
				uni.navigateBack({

				})
			},
			gojilu() {

			}
		},
	};
</script>

<style lang="scss" scoped>
	.changepwd {
		width: 690rpx;
		margin: 0 auto;
	}

	.inputx {
		width: 100%;
		text-align: right;
	}

	.mt50 {
		margin-top: 50rpx;
	}

	.tabs {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;

		.tab {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			margin-right: 10px;
			margin-left: 10px;

			.dian {
				width: 22rpx;
				height: 22rpx;
				background: rgba(229, 164, 20, 0);
				border: 1rpx solid #757575;
				border-radius: 50%;
				margin-right: 8rpx;
			}

			span {
				font-size: 24rpx;
				font-family: PingFang;
				font-weight: 300;
				color: #666666;
			}
		}

		.tab.active {
			.dian {
				background: #E5A414;
				border: 1rpx solid #E5A414;
			}
		}
	}
</style>