前端工作小结85-小程序学习3开始布局页面3

<template>
  <view class="box u-p-l-35 u-p-r-35">
    <u-image class="head_img" shape="circle" width="120rpx" height="120rpx" src="../../static/head.png"></u-image>
    <view class="title">
      <text>苏州华开农创智慧科技管</text>
    </view>
    <u-form>
      <u-form-item>
        <u-input v-model="account" placeholder="请输入账号"></u-input>
      </u-form-item>
      <u-form-item>
        <u-input class="inp" v-model="password" type="password" placeholder="请输入密码"></u-input>
      </u-form-item>
      <u-form-item>
        <u-input class="inp" type="text" v-model="code" placeholder="请输入验证码"></u-input>
        <canvas :style="{width:width+'px',height:height+'px'}" canvas-id="canvas" @click="changeCode" @error="canvasIdErrorCallback"></canvas>
      </u-form-item>
      <view class="option">
        <u-icon @click="getMore" :name="arrow" :index="arrow" color="#666666"></u-icon><text>网络配置</text>
      </view>
      <view v-if="arrow  == 'arrow-up-fill'">
        <u-form-item>
          <u-input v-model="ip_adress" placeholder="请输入IP地址"></u-input>
        </u-form-item>
        <u-form-item>
          <u-input v-model="port_number" placeholder="请输入端口号"></u-input>
        </u-form-item>
      </view>
    </u-form>
    <u-image v-if="sub_show" class="sub" src="../../static/login.png" width="100rpx" height="100rpx" mode="widthFix"></u-image>
    <u-image v-else class="sub" @click.native="sub" src="../../static/login_show.png" width="100rpx" height="100rpx" mode="widthFix"></u-image>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        //头像
        headimg: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606985171381&di=db5845b1115851ca0d934f0b7619ec47&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201910%2F26%2F20191026201534_xotym.thumb.700_0.jpg',
        //表单数据
        account: '',
        password: '',
        code: '',
        ip_adress: '',
        port_number: '',
        //验证码size
        width: 120,
        height: 45,
        //下拉状态
        arrow: 'arrow-down-fill',
        //按钮显示状态
        sub_show: true
      }
    },
    methods: {
      //提交
      sub: function() {
        if (this.account == '') {
          uni.showToast({
            icon: 'none',
            position: 'center',
            title: '请填写账号'
          });
          return false;
        }
        if (this.password == '') {
          uni.showToast({
            icon: 'none',
            position: 'center',
            title: '请填写密码'
          });
          return false;
        }
        if (this.code.toLowerCase() != uni.getStorageSync('imgcode').toLowerCase()) {
          uni.showToast({
            icon: 'none',
            position: 'bottom',
            title: '验证码不正确'
          });
          return false;
        }
      },
      //切换
      getMore: function(e) {
        console.log(e)
        console.log(666)
        if (e == 'arrow-down-fill') {
          this.arrow = 'arrow-up-fill'
        } else {
          this.arrow = 'arrow-down-fill'
        }
      },
      //验证码换一张
      changeCode: function() {
        this.init();
      },
      // 初始化验证码
      init: function() {
        console.log('start');
        var context = uni.createCanvasContext('canvas', this),
          w = this.width,
          h = this.height;
        context.setFillStyle("white");
        context.setLineWidth(5);
        context.fillRect(0, 0, w, h);
        var pool = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "I", "M", "N", "O", "P", "Q", "R", "S",
            "T", "U", "V", "W", "S", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"
          ],
          str = '';
        for (var i = 0; i < 4; i++) {
          var c = pool[this.rn(0, pool.length - 1)];
          var deg = this.rn(-30, 30);
          context.setFontSize(18);
          context.setTextBaseline("top");
          context.setFillStyle(this.rc(80, 150));
          context.save();
          context.translate(30 * i + 15, parseInt(h / 1.5));
          context.rotate(deg * Math.PI / 180);
          context.fillText(c, -15 + 5, -15);
          context.restore();
          str += c;
        }
        uni.setStorage({
          key: 'imgcode',
          data: str,
        });
        for (var i = 0; i < 40; i++) {
          context.beginPath();
          context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
          context.closePath();
          context.setFillStyle(this.rc(150, 200));
          context.fill();
        }
        context.draw();
        console.log('end');
      },
      rc: function(min, max) {
        var r = this.rn(min, max);
        var g = this.rn(min, max);
        var b = this.rn(min, max);
        return "rgb(" + r + "," + g + "," + b + ")";
      },
      rn: function(max, min) {
        return parseInt(Math.random() * (max - min)) + min;
      },
      canvasIdErrorCallback: function(e) {
        console.error(e.detail.errMsg)
      },
    },
    updated: function() {
      console.log('updated')
      if (this.code != '' || this.account != '' || this.password != '') {
        this.sub_show = false;
        console.log(6)
      }else{
        this.sub_show = true;
      }
    },
    onShow() {
      var _this = this;
      setTimeout(function() {
        _this.init();
      }, 1000)
    }
  }
</script>
<style lang="scss">
  .box {
    background-color: white;
    .head_img {
      margin: auto;
      margin-top: 88rpx;
      margin-bottom: 22rpx;
      text-align: center;
    }
    .title {
      font-size: 36rpx;
      text-align: center;
      margin-bottom: 70rpx;
    }
    .sub {
      margin: auto;
      margin-top: 226rpx;
    }
    canvas {
      width: 180rpx;
      height: 56rpx;
      border-radius: 28rpx;
      float: left;
      margin-top: 22rpx;
    }
    .option {
      margin-top: 29rpx;
      text {
        color: #666666;
        font-size: 26rpx;
        margin-left: 12rpx;
      }
    }
  }
</style>