recruitment-wechat-uniapp-241012/pages_order/mine/redeemCode.vue

<template>
	<view class="page">
		<navbar
		title="兑换码"
		leftClick 
		@leftClick="$utils.navigateBack"
		/>
		
		<view class="input">
			<input type="text" v-model="form.code"
			placeholder="请输入兑换码"/>
			<view class="btn" @click="useExchange()">
				兑换
			</view>
		</view>
		
		<view class="list">
			<view class="item"
			v-for="(item, index) in listInfo"
			:key="index">
				<view class="title">
					{{item.question}}
				</view>
				<view class="info">
					{{item.answer}}
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form : {
					code:'',
					
				},
				listInfo:[]
			}
		},
		onShow() {
			this.queryExchangeList();
		},
		methods: {
			queryExchangeList(){
				this.$api('queryExchangeList',{}, res =>{
					if(res.code == 200){
						this.listInfo = res.result.records;
					}
				})
			},
			useExchange(){
				if(this.$utils.verificationAll(this.form,{
					code:'请输入兑换码'
				})) {
					return
				}
				this.$api('useExchange',this.form, res =>{
					if(res.code == 200){
						uni.showToast({
							title:'兑换成功',
							icon: 'none'
						})	
					}
				})
			},
			
		},
	}
</script>

<style scoped lang="scss">
.page{
	.input{
		display: flex;
		width: 690rpx;
		margin: 30rpx;
		margin-top: 80rpx;
		input{
			height: 50rpx;
			padding: 10rpx 20rpx;
			flex: 1;
			border: 1px solid $uni-color;
			border-radius: 15rpx;
			margin-right: 20rpx;
			background-color: #fff;
		}
		.btn{
			width: 100rpx;
			height: 70rpx;
			text-align: center;
			line-height: 70rpx;
			background-color: $uni-color;
			color: #fff;
			border-radius: 15rpx;
		}
	}
	.list{
		margin: 30rpx;
		.item{
			margin: 30rpx 0;
			.title{
				margin-bottom: 10rpx;
			}
			.info{
				color: #f40;
			}
		}
	}
}
</style>