lcoco/pages/my/set/conversion.vue

<template>
  <view class="form-box">
    <en-nav title="兑换码" :title-color="'#333'" >

    </en-nav>
    <view class="from-input" :class="{'apply-shake':codeShake}">
      <input type="text" class="input-item sys-height-44" v-model="code" placeholder="请输入兑换码"></input>
    </view>
    <view class="from-text sys-color-gray-9">
      在输入框内正确输入兑换码
    </view>
    <view class="chang-phone-but sys-color-white sys-background-black sys-selected-but" @click="setPhone" :class="{'sys-unselected-but':!isLogin}">确认</view>
  </view>
</template>

<script>
import EnNav from "@/components/en-utils/en-nav/en-nav";
import tools from "@/service/tools";
import {exchangeCode} from "@/api/my";
export default {
  components: {EnNav},
  data() {
    return {
      code:'',
      codeShake:false,
      isLogin:false,
      isAjax:false
    }
  },
  watch:{
    'code':function (){
      this.verifyIsLogin()
    },
  },
  methods: {
    verifyIsLogin(){
      this.isLogin =  this.code !== '';
    },
    setShake(){
      this.codeShake=true
      setTimeout(()=>{
        this.codeShake=false
      },500)
    },
    setPhone(){

      if(this.code ===''){
        tools.error('请输入兑换码')
        this.setShake()
        tools.vibrate()
        return false
      }
      if(this.isAjax){
        return ;
      }
      this.isAjax=true
      exchangeCode({'code':this.code}).then((res)=>{
        if(res.code===0){
          tools.success('兑换成功')
          setTimeout(()=>{
            uni.redirectTo({
              'url':'/pages/my/set'
            })
          },1500)
        }else {
          this.isAjax=false
          tools.error(res.msg)
        }
      })

    },
  }
}
</script>

<style scoped lang="scss">
.form-box{
  padding: 0 32rpx;
  position: relative;
  min-height: 100vh;

  .from-input{
    margin-top: 56rpx;
    background-color: #F2F2F2;
    border-radius: 16rpx;
    padding: 32rpx;
    .input-item{
      font-size: 28rpx;
      color: #333;
    }
    .input-item::placeholder{
      color: #999;
    }
  }
  .from-text{
    margin-top: 24rpx;
        font-size: 24rpx;
  }

  .chang-phone-but{
    position: absolute;
    bottom:calc(50rpx + env(safe-area-inset-bottom));
    left: 32rpx;
    width:calc(100vw - 64rpx);
  }

}

</style>