lishang/pages/user/exchangeIntegral.vue

<template>
	<view class="exchangeIntegral">
		<view class="integral">
			<view class="">
				可兑换积分
			</view>
			<view class="num">
				{{integral}}
			</view>
		</view>
		<view class="applyIntegral">
			<view class="">
				申请兑换购物积分
			</view>
			<input type="number" class="num" v-model="num"/>
		</view>
		<view class="all" @click="all"><text>全部转换</text></view>
		<view class="button" @click="submit">提交申请</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				integral: 1000,
				num: ''
			}
		},
		methods: {
			all() {
				this.num = this.integral
			},
			submit() {
				if(this.integral < this.num) {
					this.all()
				}
			}
		},
		watch: {
			num() {
				if(this.integral < this.num) {
					this.all()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.exchangeIntegral {
		.integral,.applyIntegral{
			display: flex;
			justify-content: space-between;
			padding: 30rpx;
			background-color: #fff;
			margin-bottom: 5rpx;
			font-size: 30rpx;
			.num {
				font-size: 40rpx;
				text-align: right;
				max-width: 400rpx;
			}
		}
		.all {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 2rpx;
			background-color: #fff;
			padding: 0 30rpx;
			margin-bottom: 380rpx;
			text {
				margin:auto 0 ;
				float: right;
				font-size: 28rpx;
				color: #EF3A55;
			}
		}
		.button {
			background: linear-gradient(90deg, #438BED 0%,  #44BFEC 100%);
			color: #fff;
			width: 70%;
			padding: 20rpx;
			font-size: 30rpx;
			border-radius: 10rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>