guanmao-wxapp/pages/mine/exchange/index.vue

<template>
	<view class="app-container">
		<view class="title">兑换码</view>
		<input type="text" placeholder="请输入" class="input" placeholder-style="font-weight: 400; color: #999999" v-model="code" />
		<view class="button" @click="submitExchange()">立即兑换</view>
		<view class="text">注：您所兑换的兑换码，是您参与本平台的相关活动所获取的兑换码</view>
		<view class="link">
			<text @tap="toList()">历史兑换记录&gt;&gt;</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: '',
			}
		},
		
		methods: {
			submitExchange() {
				this.$axios({
					url: '/promotion/luck/draw/exchange',
					method: 'post',
					params: {
						code: this.code
					}
				}).then(res => {
					this.$successToast('兑换成功');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/mine/exchange/detail?type=1&code=' + this.code
						})
						this.code = '';
					}, 1000)
				})
			},
			
			toList() {
				uni.navigateTo({
					url: '/pages/mine/exchange/list'
				})
			}
		}
	}
</script>

<style lang="scss">
	.app-container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		box-sizing: border-box;
		.title {
			font-size: 32rpx;
			color: #999999;
		}
		.input {
			border: 1px solid #eaeaea;
			height: 80rpx;
			padding: 0 30rpx;
			text-align: center;
			font-size: 36rpx;
			margin-top: 12rpx;
			font-weight: 600;
		}
		.button {
			height: 69rpx;
			text-align: center;
			line-height: 69rpx;
			background: #fb5152;
			border-radius: 10rpx;
			font-size: 28rpx;
			color: #ffffff;
			margin-top: 60rpx;
		}
		.text {
			font-size: 24rpx;
			color: #666666;
			margin-top: 20rpx;
		}
		.link {
			text-align: right;
			margin-top: 10rpx;
			text {
				color: #fb5152;
			}
		}
	}
</style>