lcoco/pages/my/edit/we-chat.vue

<template>
  <view class="form-box">
    <en-nav title="" :title-color="'#333'" :right-show="true" :right-type="2" >
      <template v-slot:right>
        <text class="nav-right sys-weight-600 sys-color-white" @click="setNextStep">保存</text>
      </template>
    </en-nav>
    <view class="login-box"  >
      <view class="login-top">
        <view class="login-title">
          <text class="title-item sys-color-black sys-weight-600">上传微信，赚取奖励</text>
        </view>
        <view class="login-from">
          <view class="from-title">
            <view class="title-circle sys-background-black" :class="{'sys-background-green':weChat!==''}"></view>
            <view class="title-text sys-color-black">添加微信</view>
          </view>
          <view class="from-text from-item" :class="{'apply-shake':isShakeBut}">
            <input type="text" class="from-input sys-color-gray-3" max="11" v-model="weChat" placeholder="请输入微信"></input>
          </view>

        </view>
      </view>

    </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 {
      'weChat':'',
      'isShakeBut':false
    }
  },
  watch: {
    'weChat': function () {
      this.verifyIsOK()
    },
  },
  methods: {
    setNextStep() {
      if (this.isOK) {
        uni.navigateBack()
      } else {
        tools.error('请输入微信号')
        this.isShakeBut = true
        setTimeout(() => {
          this.isShakeBut = false
        }, 500)
      }
    },
    verifyIsOK() {
      this.isOK = this.weChat !== '';
    },
  }
}
</script>

<style scoped lang="scss">
@import "/static/css/shake.css";
.form-box{
  padding: 0 32rpx;
  .nav-right{
    font-size: 28rpx;
    line-height: 44rpx;
    color: #333;

  }
  .login-box{
    padding: 82rpx 0 0 0;
    box-sizing: border-box;
    position: relative;
    .login-top{
      .login-title{
        padding-bottom: 60rpx;
        .title-item{
          font-size: 48rpx;
        }
      }
      .login-from{
        .from-title{
          display: flex;
          justify-content: flex-start;
          height: 44rpx;
          .title-circle{
            width: 16rpx;
            height: 16rpx;
            border-radius: 50%;
            margin-top: 14rpx;
            margin-right: 8rpx;
          }


        }
        .from-text{
          width: 100%;
          padding-bottom: 40rpx;
          border-bottom: 1rpx solid #E0E0E0;
          .from-input{
            font-size: 32rpx;
            height: 44rpx;
            line-height: 44rpx;
          }
          .from-input::placeholder{
            color: #999999;
          }
        }
        .from-item{
          margin-top: 60rpx;
        }

      }

      .login-but{
        margin-top: 120rpx;
      }

      .local-txt{
        padding-top: 32rpx;
        font-size: 24rpx;
        text-align: center;
      }
    }

  }

}

</style>