pco/app-ui/pages/login/login.vue

<template>
  <view>
    <view class="l-topbox">
      <text>欢迎登录场站管理系统</text>
    </view>
    <view class="box">

      <view class="item">
        <view class="l">登录名：</view>
        <view class="r">
          <u-input v-model="form.key" placeholder="登录名"/>
        </view>
      </view>
      <view class="item">
        <view class="l">密码：</view>
        <view class="r">
          <u-input v-model="form.password" placeholder="输入密码" type="password"/>
        </view>
      </view>
    </view>
    <view class="common-btn" @click="sliderVerifyFLag = true">确认登录</view>
    <slider-verify :isShow="sliderVerifyFLag" @touchSliderResult="verifyResult" ref="verifyElement"></slider-verify>
  </view>
</template>

<script>
export default {
  data() {
    return {
      sliderVerifyFLag: false, //滑块验证
      form: {
        key: '',
        password: ''
      }
    }
  },
  methods: {
    loginFn() {
      if (!this.form.key) {
        this.$common.toast('请输入登录名');
        return;
      }
      if (!this.form.password) {
        this.$common.toast('请输入密码');
        return;
      }
      let openid = uni.getStorageSync('openid');
      if (!openid) {
        openid = uni.getStorageSync('login_openid');
      }
      this.form.openid = openid
      this.$api.doLogin(this.form).then(resp => {
        let data = resp.data;
        if (data.tokenInfo) {
          uni.setStorageSync('token', data.tokenInfo.tokenValue);
          uni.setStorageSync('customerId', data.admin.customerId)
          uni.setStorageSync('userInfo', data.admin)
          uni.setStorageSync('perList', data.per_list)
          uni.setStorageSync('openid', openid)
          setTimeout(() => {
            this.$common.to('/pages/index/index')
          }, 500)

        } else {
          this.$common.toast('登录失败');
        }
      })
    },
    verifyResult(res) {
      this.sliderVerifyFLag = false;
      if (res) {  //校验通过
        this.loginFn()
      } else {
        // 校验失败,点击关闭按钮
        console.log("验证失败，并点了关闭")
      }
    }


  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.l-topbox {
  //background-color: #0080ff;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  //border-radius: 0 0 30rpx 30rpx;
  margin-bottom: 50rpx;
  background-image: url(../../static/login-bg.png);
  background-size: 100% 100%;

  text {
    font-size: 50rpx;
    font-weight: bold;
    color: #fff;
  }
}

@import '@/common/common.scss';
.box {
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
  background-color: #fff;
  box-sizing: border-box;
  margin: 60rpx;
  margin-top: -150rpx;
  width: auto;
  border-radius: 10rpx;
}

.common-btn {
  margin: 100rpx 60rpx;
  width: auto;
  height: 98rpx;
  box-shadow: 0 30rpx 30rpx -15rpx rgba(0, 128, 255, 0.2);
}
</style>