OfficeApp/pages/oaLogin/oaLogin.vue

<template>
  <view class="login">
    <image
      class="bg-iamge"
      src="../../static/img/login/login_back_img.png"
    ></image>
    <!-- #ifdef APP-PLUS||H5 -->
    <view style="height: var(--status-bar-height)"></view>
    <!-- #endif -->
    <view class="body">
      <view class="title">欢迎进入里海供销平台！</view>
      <view class="login-card">
        <view class="top">
          <view class="text item">
            <u-tabs
              :list="tabList"
              @click="changeTabs"
              lineColor="#3274F9"
              itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;font-size: 32rpx;"
            ></u-tabs>
          </view>
          <input
            v-if="current == 0"
            class="mobile item"
            v-model="formData.account"
            placeholder="输入账号"
          />
          <input
            v-if="current == 0"
            class="mobile item"
            v-model="formData.password"
            maxlength="26"
            placeholder="输入密码"
            password
            type="safe-password"
          />
          <input
            v-if="current == 1"
            class="mobile item"
            v-model="formData.account"
            placeholder="输入手机号"
          />
          <view v-if="current == 1" class="code item">
            <input
              placeholder="输入验证码"
              v-model="formData.code"
              maxlength="6"
            />
            <u-code
              :seconds="seconds"
              @end="end"
              @start="start"
              ref="uCode"
              @change="codeChange"
            ></u-code>
            <view class="get-code" @click="getCode">{{ tips }}</view>
          </view>
          <view class="btn">
            <!-- <view>新用户注册</view> -->
            <!-- <view @click="forgetPWD">忘记密码?</view> -->
          </view>
        </view>
        <button class="submit_btn" @click="login">登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import {
  loginAccount,
  userInfo,
  test
} from "@/api/oaUser.js"
import {
  Toast
} from "../../libs/uniApi";
// #ifdef APP-PLUS
var jpushModule = uni.requireNativePlugin("JG-JPush");

// #endif

export default {
  data () {
    return {

      tabList: [{
        name: '账号登录'
      },
        // {name:'手机登录'},
      ],
      current: 0,
      formData: {
        account: '',
        password: '',
        code: '',
        terminal: 6, //6是APP端
        scene: 1,
        register_id: ""
      },
      tips: '获取验证码',
      // refCode: null,
      seconds: 60,
    };
  },
  methods: {
    changeTabs (e) {
      this.current = e.index;
      this.formData.scene = e.index + 1;
    },
    async login () {
      if (!this.formData.account) return Toast('账号不能为空');
      if (this.formData.scene == 1 && !this.formData.password) return Toast('密码不能为空');
      if (this.formData.scene == 2 && !this.formData.code) return Toast('验证码不能为空');
      let that = this;
      // let res = await test();
      // console.log(res);
      uni.showLoading({
        title: '正在登录中'
      })
      let res = await loginAccount(that.formData);
      console.log(that.formData)
      this.$store.commit('SET_USERINFO', {
        user: data,
        token: res.data.token
      })
      let { data } = await userInfo();
      this.$store.commit('setUserInfo', data);
      uni.hideLoading()
      if (data.is_new_user) {
        uni.showLoading({
          mask: true,
          title: '加载中'
        })
        uni.switchTab({
          url: '/pages/oaHome/oaHome',
          success: () => {
            uni.$emit('initOaTask'); // 更新任务
            uni.hideLoading()
          }
        })
      } else uni.navigateTo({
        url: '/pages/updatePasswprd/updatePasswprd'
      });

    },
    initTerminal () {
      // #ifndef APP-PLUS
      this.formData.terminal = 6;
      // #endif
      uni.getSystemInfo({
        success: (res) => {
          const platform = res.platform.toLowerCase();
          if (platform === 'ios') {
            this.formData.terminal = 5;
          } else if (platform === 'windows') {
            this.formData.terminal = 4;
          } else if (platform === 'mac') {
            this.formData.terminal = 4;
          }
        }
      })
      // #ifdef H5
      this.formData.terminal = 3;
      // #endif
      // #ifdef MP-WEIXIN
      this.formData.terminal = 1;
      // #endif
    },
    codeChange (text) {
      this.tips = text;
    },
    getCode () {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end () {
      // uni.$u.toast('倒计时结束');
    },
    start () {
      // uni.$u.toast('倒计时开始');
    },
    //忘记密码
    forgetPWD () {
      Toast('暂未开放')
    }
  },
  mounted () {
    // // #ifdef APP-PLUS
    // jpushModule.initJPushService()
    // jpushModule.getRegistrationID(result => {
    //   // 绑定极光设备id
    //   this.formData.register_id = result.registerID
    //   console.log("设备----", this.formData)
    // })
    // // #endif
    this.initTerminal();

  }
}
</script>

<style lang="scss">
.login {
  width: 100vw;
  height: 100vh;
  position: relative;
  /* #ifdef H5 */
  background-image: url("../../static/img/login/login_back_img.png");

  /* #endif */
  .bg-iamge {
    width: 100vw;
    height: 100vh;
    position: absolute;
    z-index: -99;
  }

  .body {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      width: 694rpx;
      height: 74rpx;
      margin-top: 200rpx;
      margin-bottom: 51rpx;
      font-size: 53rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 68rpx;
      -webkit-background-clip: text;
    }

    .login-card {
      width: 694rpx;
      height: 643rpx;
      background: #ffffff;
      border-radius: 21rpx 21rpx 21rpx 21rpx;
      opacity: 1;
      box-sizing: border-box;
      padding: 38.5rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .top {
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;

        .item {
          margin-bottom: 35rpx;
        }

        .text {
          font-size: 32rpx;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.8);
          line-height: 35rpx;
        }

        .mobile,
        .code {
          width: 613rpx;
          height: 112rpx;
          background: #f5f5f5;
          border-radius: 56rpx 56rpx 56rpx 56rpx;
          opacity: 1;
          padding: 0 45.56rpx;
          box-sizing: border-box;
          font-size: 28rpx;
          font-weight: 400;
          color: #333;
          line-height: 35rpx;
        }

        .code {
          display: flex;
          justify-content: space-between;
          align-items: center;

          input {
            font-size: 28rpx;
          }

          .get-code {
            color: $theme-oa-color;
          }
        }

        .btn {
          display: flex;
          justify-content: space-between;
        }
      }

      .submit_btn {
        width: 613rpx;
        height: 112rpx;
        background: $theme-oa-color;
        border-radius: 56rpx 56rpx 56rpx 56rpx;
        opacity: 1;
        text-align: center;
        line-height: 112rpx;
        color: #ffffff;
        font-size: 35rpx;
        font-weight: 500;
      }
    }
  }
}
</style>