lishang/pages/user/integralTransforms.vue

<template>
	<view class="integralTransforms">
		<view class="header">
			<text class="title">{{ integral || '0.00' }}</text><br>
			<text>可转换积分</text>
		</view>
		<view class="account">
			<text class="title">收款人账户</text>
			<input type="text" placeholder="请输入收款人账户" v-model="account"/>
		</view>
		<view class="num">
			<text class="title">转账数量</text>
				<view class="">
					<text class="ti">￥</text>
					<input type="number" v-model.number="num" placeholder="请输入转账数量" />
				</view>
		</view>
		<view class="button" @click="submit">
			提交申请
		</view>
	</view>
</template>

<script> 
	export default {
		data() {
			return {
				num: '',//转账数量
				account: '',//收款人账户
			}
		},
		methods: {
			submit() {
				const data = {
					num: this.num,
					account: this.account
				}
				console.log(data)
			}
		},
		computed: {
			//积分
			integral() {
				return this.$store.state.user.userInfo.integral
			}
		},
		watch: {
			num() {
				if (this.num > this.integral) {
					this.num = this.integral
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.integralTransforms {
		.header,.account,.num {
			background-color: #fff;
			margin: 20rpx 0;
			padding: 30rpx;
			input {
				margin-top: 10rpx;
			}
			.title {
				font-size: 30rpx;
				color: #333333;
				font-family: PingFang-SC-Regular;
			}
		}
		.header {
			text-align: center;
			text:nth-child(1) {
				font-size: 45rpx;
			}
			text:nth-child(3) {
				font-size: 30rpx;
				color: #666666;
			}
		}
		.num {
			.ti {
				float: left;
			}
		}
		.button {
			width: 520rpx;
			margin: 60rpx auto;
			padding: 20rpx;
			text-align: center;
			border-radius: 10rpx;
			background: linear-gradient(90deg, #438BED 0%,  #44BFEC 100%);
			color: #fff;
		}
	}
</style>