hitch-sb-antd/src/views/Scan.vue

<template>
  <div>
    <div class="fh-login">
      <h2 style="font-size:30px;text-align: center;color: #fff"> 思康新材料</h2>
      <h2 style="font-size:30px;text-align: center;color: #fff">设备管理系统</h2>
      <div class="login-title">{{ user.realName }},辛苦了</div>
      <a-form
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        id="formLogin"
        ref="formLogin"
        :form="form"
        class="login-form"
        @submit="handleSubmit">
        <a-form-item>
          <a-input
            size="large"
            type="password"
            autocomplete="false"
            placeholder="请输入密码"
            class="login-input"
            max="6"
            v-decorator="[
              'password',
              {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
            ]"
          >
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button class="btn" type="primary" htmlType="submit" :loading="loading">
            {{ buttonText }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script>
import { fetchWorkUser, updateUserWorkFlag } from '@/api/upms/user'
import { encryptPassword } from '@/common/common'

export default {
  components: {

  },
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      form: this.$form.createForm(this),
      buttonText: '上班',
      password: null,
      loading: false,
      show: false,
      user: {
        realName: ''
      }
    }
  },
  created () {
    const url = location.href.split('?')[1] // 获取url中"?"符后的字串
    const userId = decodeURIComponent(url.split('=')[1])
    this.init(userId)
    this.loading = false
    this.show = false
  },
  methods: {
    init (userId) {
      fetchWorkUser({ userId: userId }).then(res => {
        this.user = res.data
        this.buttonText = this.user.workFlag ? '下班' : '上班'
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      const { form: { validateFieldsAndScroll } } = this
      this.loading = true
      validateFieldsAndScroll((errors, values) => {
        if (errors) {
          this.loading = false
          return
        }

        const params = {
          userId: this.user.userId,
          workFlag: this.user.workFlag ? 0 : 1,
          password: values.password ? encryptPassword(values.password) : ''
        }
        updateUserWorkFlag(params).then(res => {
          this.loading = false
          this.init(this.user.userId)
          setTimeout(() => {
            this.$notification.success({
              message: '操作成功',
              description: this.user.realName + `，辛苦了`
            })
          }, 1000)
        })
      })
    }
  }

}
</script>

<style scoped>
  /*.fh-login {*/
  /*  !*width: 830px;*!*/
  /*  height: 435px;*/
  /*  position: fixed;*/
  /*  top: 50%;*/
  /*  left: 50%;*/
  /*  margin-top: -250px;*/
  /*  margin-left: -440px;*/
  /*  !*background: url('~@/assets/logn.png') no-repeat;*!*/
  /*}*/
  /*.fh-login .fh-login-left {*/
  /*  float: left;*/
  /*  width: 50%;*/
  /*}*/
  /*.fh-login .fh-login-left img {*/
  /*  margin: 132px auto 0;*/
  /*  display: block;*/
  /*}*/
  .fh-login-left h2 {
    margin-top: 65px;
    margin-left: 8%;
    padding-bottom: 20px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 600;
    text-align: center;
  }
 .login-title {
    font-size: 24px;
    color: #fff;
    padding: 15px 0px;
    /*border-bottom: 1px solid #ccc;*/
    text-align: center;
  }
  .fh-login .btn {
    display: inline-block;
    color: #FFF !important;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25) !important;
    border: 5px solid #FFF;
    border-radius: 0;
    box-shadow: none !important;
    -webkit-transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
    -o-transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
    transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
    cursor: pointer;
    vertical-align: middle;
    width: 100%;
    height: 52px;
    border: none;
    /*margin:30px;*/
    margin-top: 30px;
    background: rgb(82, 166, 212) !important;
    color: rgb(255, 255, 255);
    user-select: none;
  }
  .fh-login .login-input{
    border: none!important;
    outline: none!important;
    /*background-color: #fff!important;*/
    height: 42px!important;
    width: 100%!important;
    /*margin-left: 35px;*/
  }
  /*设置输入图标大小*/
  .ant-input-affix-wrapper{
    font-size: 24px;
  }
  .login-form{
    /*margin-left: 35px;*/
    /*margin-top: 35px;*/
    padding: 20px 35px;
  }
  /*调整图标位置*/
  .login-form .ant-input-affix-wrapper .ant-input-prefix {
    left: 9px !important;
  }
  .login-form .ant-input-affix-wrapper .ant-input:not(:first-child){
    padding-left: 38px;
  }
</style>