JP-ChargeTeam51/pages/user/coupon/conversion.vue

<template>
	<view >
		<ujp-navbar title="优惠券兑换"></ujp-navbar>
		
		<view class="input-box">
			<u-input v-model="exchangeCode" placeholder="请输入兑换码" :placeholder-style="elderStatus ? 'font-size: 16px;' : ''"></u-input>
		</view>
		<u-button class="couversion-btn oldTextjp2" oldstyle="font-size: 18px;" type="success" shape="circle" @click="redeemNow">立即兑换</u-button>
		
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	
	export default{
		data(){
			return{
				exchangeCode: '',
				elderStatus: false,
			}
		},
		onReady() {
			if(this.carhelp.get("getElderModeClass") == "长辈模式") {
				this.elderStatus = true;
			} else {
				this.elderStatus = false;
			}
		},
		methods:{
			redeemNow() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.exchange({
					key: this.exchangeCode
				}).then((res) => {
					uni.hideLoading();
					
					uni.navigateBack({
						
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>

<style lang="scss" scoped>
	.input-box{
		padding: 4px 0;
		margin: 20px 28px;
		border-bottom: 1px solid #f7f7f7;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
		font-size: 100px;
 

	}
	
	.couversion-btn{
		margin: 28px ;
		background-color:#00B962!important;
		border-color: #00B962!important;
		color:#fff!important;
	}
</style>