<template>
  <view class="exchange-page">
    <view class="title">请输入兑换码</view>
    <input 
      class="input" 
      type="text" 
      placeholder="请输入" 
      v-model.trim="exchangeCode"
    />
    <view class="error-message" v-if="showError">{{ errorMessage }}</view>
    <button :class="['submit-btn',exchangeCode.trim().length>0?'active':'']" @click="submit">提交</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      exchangeCode: '', // 兑换码输入值
      showError: false, // 是否显示错误信息
      errorMessage: '兑换码已使用/兑换码错误' // 错误提示信息
    };
  },
  methods: {
    submit() {
      // 这里是提交逻辑示例，实际需根据业务需求对接后端
      if (!this.exchangeCode) {
        uni.showToast({
          title: '请输入兑换码',
          icon: 'none'
        });
        return;
      }
      // 模拟兑换码验证失败
      this.showError = true;
	  
	  uni.showToast({
	  	title:"兑换成功",
		icon:"success"
	  })
    }
  }
};
</script>

<style lang="scss" scoped>
.exchange-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;

  .title {
    font-size: 18px;
    color: #007AFF;
    margin-bottom: 20px;
  }

  .input {
    width: 100%;
    height: 40px;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .error-message {
    font-size: 14px;
    color: #FF0000;
    margin-top: 10px;
  }

  .submit-btn {
    width: 100px;
    height: 36px;
    background-color: #CCCCCC;
    color: #FFFFFF;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
	margin-top: 20px;
	&.active{
		 background-color: #FF0000;
	}
  }
}
</style>