xpl/pages/conversion/candy.vue

<template>
	<view class="center">
		<view class="content-money">
			<view class="buttom">
				<text class="text">可兑换积分</text>
				<view class="icon"><text>￥</text>{{ integral }}</view>
			</view>
			<view class="interval"></view>
			<view class="buttom">
				<text class="text">申请兑换糖果</text>
				<view class=" icon">
				<input class="input" type="number" v-model="withdrawal > integral ? integral : withdrawal" 
				placeholder="申请兑换糖果数量" placeholder-class="placeholder" /></view>
			</view>
			<view class="interval"></view>
			<view class="tip">
				<view class=" tip-icon" @click="all()">全部转换</view>
			</view>
		</view>
		<view class="code">
			
		</view>
		<view class="btn" @click="submit">
			提交申请
		</view>
	</view>
</template>

<script>
import { exchange } from '@/api/market.js';
export default {
	data(){
		return{
			// money: 1000,
			withdrawal:'',
		}
	},
	computed: {
		//可兑换积分
		integral() {
			return this.$store.state.user.userInfo.integral
		}
	},
	methods: {
		//全部转换
		all() {
			this.withdrawal = this.integral
		},
		//提交申请兑换
		submit() {
			
		}
	}
}
</script>

<style lang="scss">
page,.center {
	height: 100%;
	background: #FFFFFF;
}
.content-money {
	padding: 0 20rpx;
	background-color: #ffffff;
	.buttom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 110rpx;
	}
	.interval {
		width: 100%;
		height: 1px;
		background: #E6E6E6;
	}
	.icon {
		font-size: 48rpx;
		font-family: SourceHanSansCN;
		font-weight: 500;
		color: #333333;
		text{
			font-size: 32rpx;
		}
		.input {
			text-align: right;
			flex: 1;
			font-size: 30rpx;
			color: $font-color-dark;
		}
		.iconlocation {
			text-align: right;
			font-size: 36rpx;
			color: $font-color-light;
		}
	}
	.text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.tip {
		height: 74rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.tip-text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.tip-icon {
			font-size: 26rpx;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #EF041F;
		}
	}
}
.btn {
	text-align: center;
	margin: 134rpx auto;
	width: 670rpx;
	height: 88rpx;
	background: linear-gradient(0deg, #2E58FF, #32C6FF);
	border-radius: 10px;
	text-align: center;
	line-height: 88rpx;
	font-size: 32rpx;
	font-family: SourceHanSansCN;
	font-weight: 500;
	color: #FEFEFE;
}
.code {
	width: 750rpx;
	height: 20rpx;
	background: #F7F7F7;
}
</style>