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";
export default {
  components: {EnNav},
  data() {
    return {
      code:'',
      codeShake:false,
      isLogin: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
      }

      uni.redirectTo({
        'url':'/pages/my/set'
      })
    },
  }
}
</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>