labsop_mcs/frontend_weixin/src/views/login.vue

<template>
  <div style="text-align:center">
    <img src="../assets/images/logo.png"
         style="width: 200px;" />
    <!-- <x-header style="background-color:#1AAD19;" title="账号绑定" :left-options="{showBack: false}"> -->
    <!-- </x-header> -->
    <!-- <div class="side-nav" >
      <h3 style="text-align:center">
       <span>账号绑定</span>
      </h3>
     </div> -->
    <div style="margin-top:50px">
      <x-input title="账号"
               placeholder="请输入账号"
               v-model="model.username"></x-input>
      <x-input type="password"
               title="密码"
               placeholder="请输入账号密码"
               v-model="model.password"></x-input>
    </div>
    <!-- <div style="margin-top:30px">
      <x-button type="primary" style="width:300px;background-color:#7D9EC0" action-type="button" @click.native="handleLogin" >登录</x-button>
     </div  > -->
    <box gap="10px 10px">
      <x-button type="primary"
                style="width:300px;background-color:#7D9EC0"
                @click.native="handleLogin">登录</x-button>
    </box>
    <div style="margin-top:150px">
      <load-more :show-loading="false"
                 :tip="'Copyright © 2019 DASHOO'"
                 background-color="#fbf9fe"></load-more>
    </div>
    <div style="text-align:center;font-size:13px;color:red;">{{errmessage}}</div>
  </div>
  <!-- <group style="margin-top:-20px;">
      <x-input placeholder="账号" type="text" v-model="model.username"></x-input>
      <x-input placeholder="密码" type="password" v-model="model.password"></x-input>
    </group>
    <box gap="10px 10px">
    <x-button type="primary"  @click.native="handleLogin">登录</x-button>
    </box>
    <div style="text-align:center;font-size:13px;color:red;">{{errmessage}}</div>
  </div> -->
</template>

<script>
import { XInput, Group, XButton, Cell, Box, XHeader } from 'vux'
import store from 'store'
export default {
  name: 'login',
  components: {
    XInput,
    XButton,
    Group,
    Cell,
    Box,
    XHeader
  },
  data () {
    const model = {
      username: '',
      password: '',
      openid: ''
    }
    return {
      model: model,
      errmessage: ''
    }
  },
  mounted () {
    // 开发
    // let openid = 'oZ2X-weExJP7jTGlhknsxAnf12r4'
    // let nick = 'All%20is%20Well'
    // 线上
    let openid = this.$route.query.openid
    let nick = this.$route.query.nick
    if (openid && openid !== '') {
      this.model.openid = openid
      store.set('ygopenid', this.model.openid)
      store.set('ygnick', nick)
    } else {
      this.model.openid = store.get('ygopenid')
    }
  },
  methods: {
    handleLogin () {
      console.info('[Login] 发送登录请求', this.model)

      this.$store.dispatch('createToken', this.model)
        .then(token => {
          this.$router.push('/')
          this.errmessage = ''
        })
        .catch(err => {
          this.errmessage = '出现异常，请稍后再试！'
          switch (err.response && err.response.status) {
            case 401:
              this.errmessage = '用户名或密码错误！'
              break
            case 403:
              this.errmessage = '访问出错，禁止访问！'
              break
            case 500:
              this.errmessage = '服务器内部异常，请稍后再试！'
              break
          }
        })
    }
  }
}
</script>
<style type="text/css">
.vux-demo-header-box {
  color: red;
}
</style>