cy_pda/pages/login/login.vue

<template>
  <view class="list">
    <u-form :model="dataForm" ref="uForm">
      <view class="image">
        <image class="image-logo" src="/static/logo.png"></image>
      </view>
      <view class="list-call">
        <u-icon class="u-icon" size="40" name="file-text" />
        <u-input class="u-input" v-model="dataForm.username" type="text" placeholder="请输入工号" @input="loadBranchList"
          placeholder-style="color:#999999" />
      </view>
      <view class="list-call">
        <u-icon class="u-icon" size="40" name="lock" />
        <u-input class="u-input" v-model="dataForm.password" type="password" :password-icon="true"
          placeholder-style="color:#999999" />
      </view>
      	<view class="list-call">
				<u-input v-model="dataForm.wareHouse" type="select" placeholder="请选择仓库" prop="wareHouse" class="u-input"
					placeholder-style="color:#000000" @click="wareShow = true" />
				<u-select :mask-close-able="false" :safe-area-inset-bottom="true" v-model="wareShow"
					mode="single-column" :list="wareHouseList" @confirm="confirm" />
			</view>
    </u-form>
    <view class="button" hover-class="button-hover" @click="submit()">
      <text>登 录</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        dataForm: {
          wareHouse: null,
          username: "",
          password: "",
          branchId: null
        },
        loadStatus: 'loadmore',
        loading: false,
        wareHouseList: [],
        wareShow: false, // 下拉选择器
      };
    },
	computed:{
		i18n(){
			return this.$t('login')
		}
	},
    onLoad() {
      //已经登录 跳转到首页
      if (this.vuex_token) {
        uni.reLaunch({
          url: "/pages/index/index",
        });
      }
    },
    methods: {
      loadBranchList(val) {
        this.wareHouseList = [];
        this.$u.api
          .getOptionBranchByUserName({
            userName: val,
          })
          .then((res) => {
            // console.log(res);
            let dataArry = res.data.baseBranchs;
            for (var i = 0; i < dataArry.length; i++) {
              var obj = {
                value: dataArry[i].id,
                label: dataArry[i].branchName,
              };
              this.wareHouseList.push(obj);
            }
          })
          .catch((e) => {
            this.$u.toast(e);
          });
      },
      confirm(e) {
        this.dataForm.wareHouse = e[0].label;
        this.dataForm.branchId = e[0].value
      },
      submit() {
        if (this.dataForm.username.length === 0) {
          this.$u.toast("请输入工号");
          return;
        }
        if (this.dataForm.password.length === 0) {
          this.$u.toast("请输入密码");
          return;
        }
        if (this.dataForm.wareHouse.length === 0) {
        	this.$u.toast("请选择仓库");
        	return;
        }

        // }

        // })
        //登录接口
        this.$u.api
          .login({
            username: this.dataForm.username,
            password: this.dataForm.password,
            branchId: this.dataForm.branchId
          })
          .then((res) => {
            const code = res.code;
            if (code !== 200) {
              this.$u.toast('登录失败');
            } else {
              this.$u.toast("恭喜您，登录成功！");
              // 登陆成功，存token
              this.$u.vuex("vuex_token", res.token);
              //查询用户详细信息并储存
              this.$u.api.getUserInfo().then((res) => {
                this.$u.vuex("vuex_user", res.user);
              });
              //跳转页面
              setTimeout(() => {
                uni.reLaunch({
                  url: "/pages/index/index",
                });
              }, 500);
            }
          })
          .catch((e) => {
            this.$u.toast(e);
          });
      },
    },
  }
</script>
<style lang="scss">
  @import "login.scss";
</style>