yl-gzh/pages/login/index.vue

<template>
  <view style="width: 100%;height: 100%;">
    <image src="../../static/images/card.jpg" style="width: 100%;height: 100%;" mode="scaleToFill" @click="keyHideStatus">
      <uni-forms ref="baseForm" id="form1" :modelValue="formData" :rules="rules">
        <view class="cardBody">
          <view class="card " :style="'height:'+height+' ;'">
            <view class="phoneText global-font" @click="keyHideStatus">
              用户类型
            </view>
            <view>
              <uni-forms-item name="accountType">
                <radio-group @change="typeChange" style="text-align: center;">
                  <label v-for="item in typeList" :key="item.value">
                    <radio :value="item.value" :checked="item.value === accountType" style="transform:scale(0.85)">{{ item.text }}</radio>
                  </label>
                </radio-group>
              </uni-forms-item>
            </view>
            <view class="phoneText global-font" @click="keyHideStatus">
              账号
            </view>
            <view @click="keyHideStatus">
              <uni-forms-item name="username">
                <input class="inputClass" :style="'height:'+inputHeight+';'" ref="userInput" v-model="formData.username" :adjust-position="false"
                  @focus="openUsername" @blur="closeUsername" />
              </uni-forms-item>
            </view>

            <view class="phoneText global-font" @click="keyHideStatus">
              密码（初始密码为身份证号后6位）
            </view>
            <view>
              <uni-forms-item name="password">
                <input id="ins" class="inputClass" :style="'height:'+inputHeight+';'" v-model="formData.password" :password="showPassword"
                  @blur="close()" @focus="open" />
                <tki-float-keyboard ref="keyb" :mode="keyMode" :type="keyType" :title="title" @del="keyDel" @val="keyVal" @show="keyShow"
                  @hide="keyHide"></tki-float-keyboard>
              </uni-forms-item>
            </view>
            <view>
              <button class="buttonClass" @click="to">登录</button>
            </view>
            <!-- <view class="zcText">
							<text class="global-font" @click="register">注册账号</text>
						</view> -->
            <view class="mzText" id="protocol">
              <radio :checked="protocol" @click="radioChange"></radio>
              <view class="global-font">已阅读并同意</view>
              <view class="global-font">
                <navigator url="/pages/protocol/yonghuxieyi" hover-class="none">《用户协议》</navigator>
              </view>
              <view class="global-font">和</view>
              <view class="global-font">
                <navigator url="/pages/protocol/yinsizhengce" hover-class="none">《隐私政策》</navigator>
              </view>
            </view>
          </view>
        </view>
      </uni-forms>
    </image>

  </view>


</template>

<script>
  import config from '@/config.js'
  import { setToken, setOpenid, setUser, getOpenid } from '@/common/auth.js'
  import { Login, Login1, GetOpenId } from '@/api/login.js'
  import { showConfirm } from '../../common/common'
  import tkiFloatKeyboard from '@/components/tki-float-keyboard/tki-float-keyboard.vue'

  export default {
    components: {
      tkiFloatKeyboard
    },
    data() {
      return {
        // 键盘
        // 键盘类型  keyboard 普通键盘，car 汽车键盘，number 数字键盘
        keyMode: 'keyboard',
        // type 键盘可用区域，配合mode属性使用  默认值：0
        //mode = keyboard 时 type = 0 全部、 1 字母加数字、 2 符号、 3 字母、 4 数字、 5 字母加符号、6 数字加符号
        //mode = car 时 type = 0 全部、 1 字母加数字、 2 省、 3 字母加数字加特、 4 字母、 5 数字
        //mode = number 时 type = 0 全部、 1 禁用.
        keyType: 0,
        title: '密码键盘',
        keyShowStatus: false,
        showPassword: true,
        height: '54vh',
        inputHeight: '5vh',
        typeList: [
          { text: '民政用户', value: '1' },
          { text: '非民政用户', value: '0' },
        ],
        accountType: '1',

        formData: {
          username: '',
          password: '',
          // username: '152326197904090050',
          // password: '090050',
          // username: '15578179876',
          // username: '15143018068',
          // username: '15114481023',
          // username: 'ylfw_220822001',
          // username: 'ylfw_220822001001',
          // password: 'sckj12356',
          // code: "081X2kll21UGPc4HRlml27WxeO3X2kl6",
          code: "",
          openid: "",
        },
        rules: {
          username: {
            rules: [{
              required: true,
              errorMessage: '账号不能为空'
						}]
          },
          password: {
            rules: [{
              required: true,
              errorMessage: '密码不能为空'
						}]
          },
        },
        defaultPhoneHeight: '', //屏幕默认高度
        nowPhoneHeight: '', //屏幕现在的高度
        show: false,
        protocol: false,
      }
    },
    onLoad() {
      // 测试openid
      // setOpenid('owaO0uKdXNGMx7Zsy2jOZ0ZKsJGs')
      if (!getOpenid()) {
        this.getCode(config.appid)
      }
    },
    mounted() {
      //监听软键盘获取当前屏幕高度的事件
      this.defaultPhoneHeight = window.innerHeight
      window.onresize = () => {
        this.nowPhoneHeight = window.innerHeight
      }
    },
    watch: {
      //软键盘弹起事件
      nowPhoneHeight() {
        if (this.defaultPhoneHeight != this.nowPhoneHeight) {
          //手机键盘被唤起了。
          this.show = true
        } else {
          //手机键盘被关闭了。
          this.show = false
        }
      }
    },
    methods: {
      radioChange(e) {
        this.protocol = !this.protocol
      },
      typeChange(e) {
        this.accountType = e.detail.value
      },
      openUsername() {
        setTimeout(() => {
          if (this.show) {
            this.height = '58vh'
            this.inputHeight = '8vh'
          }
        }, 140)

      },
      closeUsername() {
        this.height = '42vh'
        this.inputHeight = '5vh'
      },
      keyHideStatus() {
        if (this.keyShowStatus) this.$refs.keyb._keyHide()
      },
      keyVal(v) {
        this.formData.password += v
      },
      keyDel(d) {
        this.formData.password = this.formData.password.substring(0, this.formData.password.length - 1)
      },
      keyShow(h) {
        this.keyShowStatus = true
      },
      keyHide(h) {
        this.keyShowStatus = false
      },
      change(e) {
        this.formData.password += e
      },
      confirm(e) {},
      backspace(e) {
        this.formData.password = this.formData.password.substring(0, this.formData.password.length - 1)
      },
      changeCarInputMode(e) {
        this.title = e;
      },
      open() {
        uni.hideKeyboard()
        this.$refs.keyb._keyShow();
      },
      close() {},
      register() {
        if (!this.protocol) {
          let ele = document.getElementById('protocol')
          if (ele) {
            ele.classList.add('shake')
            setTimeout(() => {
              ele.classList.remove('shake')
            }, 800)
          }
          return
        }
        uni.navigateTo({
          url: '/pages/lr/register?code=' + this.formData.code
          // url: '/pages/info/add?code=' + this.formData.code
        })
      },
      getCode(appid) { // 非静默授权，第一次有弹框
        let local = window.location.href; // 获取页面url
        let code = this.getUrlCode().code; // 截取code
        if (code && code !== '') { // 如果有code
          // 拿到code去请求openId并存在本地 ?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
          GetOpenId({
            code: code
          }).then(res => {
            setOpenid(res.data)
            this.formData.openid = res.data
          })
        }
        //  else {
        // 	window.location.href =
        // 		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=${new Date().getTime()}#wechat_redirect`
        // }
      },
      getUrlCode() { // 截取url中的code方法
        let url = location.search;
        let theRequest = {};
        if (url.indexOf("?") !== -1) {
          let str = url.substr(1);
          let strs = str.split("&");
          for (let i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
          }
        }
        return theRequest
      },
      to() {

        if (!this.protocol) {
          let ele = document.getElementById('protocol')
          if (ele) {
            ele.classList.add('shake')
            setTimeout(() => {
              ele.classList.remove('shake')
            }, 800)
          }
          return
        }


        uni.hideKeyboard()
        this.$refs['baseForm'].validate().then(res => {
          uni.showLoading({
            title: '登录中...'
          })
          if (!this.formData.openid) this.formData.openid = getOpenid()
          if (this.accountType === '0') {
            Login(this.formData).then(res => {
              if (res.code == 200) {
                const { data } = res
                data.sysUser.accountType = this.accountType
                setUser(data.sysUser)
                setToken(data.token.access_token)
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }
            }).finally(() => { uni.hideLoading() })
          } else {
            Login1(this.formData).then(res => {
              if (res.code == 200) {
                const { data } = res
                data.sysUser.accountType = this.accountType
                setUser(data.sysUser)
                setToken(data.access_token)
                uni.switchTab({
                  url: '/pages/index/index'
                })
              }
            }).finally(() => { uni.hideLoading() })
          }


        }).catch(err => {
          console.log(err);
        })

      }
    }
  }
</script>

<style scoped>
  .cardBody {
    display: flex;
    align-items: center;
    flex-direction: column;

    position: absolute;
    /* bottom: 20vh; */
    top: 18vh;
    left: 12vw;
  }

  .card {
    width: 76vw;
    /* height: 42vh; */
    border-radius: 2.8vw;
    background: rgba(255, 255, 255, 1);
    box-shadow: 5px 6px 18px rgba(0, 0, 0, 0.08);

  }

  .phoneText {
    margin-top: 3vh;
    margin-left: 4vw;
    width: 80vw;
    height: 3vh;
    font-size: 2.8vw;
    line-height: 2vh;
    color: rgba(116, 127, 158, 1);
    text-align: left;
    vertical-align: top;

  }

  .global-font {}

  .zcText {
    position: absolute;
    margin-top: 2vh;
    margin-left: 4vw;
    width: 68vw;
    height: 5vh;
    font-size: 2.8vw;
    color: rgba(116, 127, 158, 1);
    font-weight: 500;
    line-height: 2vh;
    text-align: center;
    vertical-align: top;
  }

  .inputClass {
    margin-top: 1vh;
    margin-left: 4vw;
    width: 68vw;
    /* height: 5vh; */
    border-radius: 5.8vw;
    border: 1px solid rgba(176, 179, 199, 1);
    text-indent: 4vw;
  }

  .buttonClass {
    margin-top: 4vh;
    margin-left: 4vw;
    width: 68vw;
    /* height: 5vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5.8vw;
    /* border: 1px solid rgba(176, 179, 199, 1); */
    background: #28d87d;
    color: white;
    height: 5vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0rpx 4rpx 10rpx 1rpx rgba(40, 216, 125, 0.4);
  }

  .mzText {
    position: absolute;
    margin-top: 4vh;
    margin-left: 4vw;
    width: 68vw;
    height: 5vh;
    font-size: 2.8vw;
    color: rgba(116, 127, 158, 1);
    font-weight: 500;
    line-height: 2vh;
    text-align: center;
    vertical-align: top;
    display: flex;
    align-items: center;
  }

  radio {
    transform: scale(0.7);
  }


  .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);
    }
  }
</style>