wanyu_frontend/pages/user/login.vue

<template>
  <view class="container">
    <view class="info">
      <view class="top flex-c">
        <view class="icon-container flex-c">
          <image class="img" mode="aspectFill" :src="inject('globalData').appIcon"></image>
        </view>
      </view>
      <view class="bottom">超邦手工单系统</view>
    </view>

    <view class="login-area">
      <view :class="[isShake ? 'animation-shake' : '', 'agreement flex-c']">
        <view class="clickable-area flex-r" @click="select()">
          <me-icon v-if="checked" class="icon" type="icon-checkbox-circle" size="40rpx" color="var(--themeColor)"></me-icon>
          <me-icon v-else class="icon" type="icon-checkbox-blank-circle" size="40rpx" color="var(--summaryColor)"></me-icon>
          阅读并同意
        </view>
        <view class="text">&nbsp<text @click="userAgreement()">用户协议</text>、<text @click="privacyPolicy()">隐私协议</text></view>
      </view>
      <view class="btn-area flex-c">
        <view hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
          <button v-show="!isLogin" @click="login()" type="default" class="login flex-c"
          >微信一键登录</button>
          <button v-show="isLogin" open-type="getPhoneNumber" @getphonenumber="bindPhoneNumber" class="login flex-c" type="default"
          >绑定手机号</button>
        </view>
      </view>
    </view>
    <view class="visitor-ctr flex-c">
      <view class="visitor flex-c" @click="visitor()" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">体验一下</view>
    </view>
  </view>
</template>

<script setup>

import MeIcon from "../../components/me-icon/me-icon.vue";
import { ref, inject } from 'vue'
import helpers from "../../utils/helpers";
import api from "../../api/api";
import {throttle} from "../../utils/throttle";

const userAgreement = () => {
  helpers.jumpToPage('user-agreement')
}

const privacyPolicy = () => {
  helpers.jumpToPage('privacy-policy')
}

const visitor = () => {
  api.guestLogin().then(res => {
    storageUserInfo(res)

    setTimeout(() => {
      helpers.jumpToPage('index','', 'switchTab')
    }, 1000)
  }).catch(() => {})
}

//是否勾选协议
const checked = ref(false)

//是否抖动
const isShake = ref(false)

//是否已授权登录
const isLogin = ref(false)

//绑定手机号的token
const vendorToken = ref('')

//绑定手机号
const bindPhoneNumber = throttle((e) => {
  if (e.detail.code === undefined) {
    return helpers.showToast("请授权手机号")
  }

  uni.showLoading({
    title: '绑定中…'
  });
  api.bindPhoneNumber({code: e.detail.code, vendor_token: vendorToken.value}).then(res => {
    helpers.showToast('绑定成功')
    storageUserInfo(res)

    setTimeout(() => {
      helpers.jumpToPage('index','', 'switchTab')
    }, 1000)
  }).catch(() => {}).finally(() => {
    helpers.delayHideLoading()
  })
})

//微信一键登录
const login = throttle(() => {
  if (checked.value === false) {
    helpers.showToast("请阅读并同意用户协议")
    isShake.value = true
    setTimeout(() => {
      isShake.value = false
    }, 1000)

    return false
  }

  uni.login({
    provider: 'weixin',
    success: function (res) {
      uni.showLoading({
        title: '登录中…'
      });

      if (!res.code) {
        helpers.delayHideLoading()
        return helpers.showToast('登录失败：' + res.errMsg)
      }

      api.wechatLogin({code: res.code}).then(res => {
        helpers.showToast('登录成功')
        storageUserInfo(res)

        setTimeout(() => {
          helpers.jumpToPage('index','', 'switchTab')
        }, 1000)
      }).catch(err => {
        vendorToken.value = err.data.vendor_token
        isLogin.value = true
      }).finally(() => {
        helpers.delayHideLoading()
      })
    }
  });
}, 500)

//勾选协议
const select = () => {
  checked.value = !checked.value
}

//存储用户信息
const storageUserInfo = (userInfo) => {
  uni.setStorageSync('token', userInfo.token)
  uni.setStorageSync('user_info', userInfo)
}
</script>
<style>
page {
  height: 100vh;
  background-color: var(--navbarBgColor) !important;
}
</style>

<style lang="scss" scoped>
.container {
  padding: 0 32rpx;
  box-sizing: border-box;
  .info {
    margin-top: 40rpx;
    width: 100%;
    .top {
      width: 100%;
      height: 160rpx;
      .icon-container {
        width: 160rpx;
        height: 160rpx;
        border-radius: 80rpx;
        border: 1px solid #E9F1FE;
        .img {
          width: 160rpx;
          height: 160rpx;
          border-radius: 80rpx;
        }
      }
    }
    .bottom {
      width: 100%;
      height: 50rpx;
      font-weight: 500;
      font-size: 34rpx;
      color: var(--titleColor);
      line-height: 50rpx;
      text-align: center;
      margin-top: 36rpx;
    }
  }
  .login-area {
    width: 100%;
    margin-top: 264rpx;
    .agreement {
      width: 100%;
      height: 80rpx;
      font-weight: 500;
      font-size: 28rpx;
      color: var(--titleColor);
      line-height: 80rpx;
      .clickable-area {
        height: 80rpx;
        .icon {
          margin-left: 8rpx;
          margin-right: 8rpx;
        }
      }
      .text {
        height: 80rpx;
        text {
          color: var(--themeColor);
        }
      }
    }
    .animation-shake{
      animation: shake 800ms ease-in-out;
    }

    /* 水平抖动特效*/
    @keyframes shake {
      10%, 90% {
        transform: translate3d(-1px, 0, 0);
      }
      20%, 80% {
        transform: translate3d(+2px, 0, 0);
      }
      30%, 70% {
        transform: translate3d(-4px, 0, 0);
      }
      40%, 60% {
        transform: translate3d(+4px, 0, 0);
      }
      50% {
        transform: translate3d(-4px, 0, 0);
      }
    }
    .btn-area {
      width: 100%;
      height: 96rpx;
      margin-top: 32rpx;
      .login {
        width: 590rpx;
        height: 96rpx;
        color: #FFFFFF;
        background: var(--themeColor);
        border-radius: 16rpx;
        font-size: 30rpx;
      }
    }
  }
  .visitor-ctr {
    width: 100%;
    height: 104rpx;
    position: fixed;
    bottom: 68rpx;
    left: 0;
    .visitor {
      width: 176rpx;
      height: 72rpx;
      font-size: 28rpx;
      color: var(--summaryColor);
    }
  }
}
</style>