jiliangxiaochengxu/pages/login.vue

<!-- @format -->

<template>
  <view class="normal-login-container">
    <view class="logo-content align-center justify-center flex">
      <text class="title" style="margin-top: 100rpx"
        >河北省计量业务应用平台</text
      >
    </view>
    <view
      class="tabs justify-center"
      style="padding-bottom: 10rpx; margin-top: 100rpx"
    >
      <u-tabs
        :itemStyle="{ width: '250rpx', marginBottom: '20rpx' }"
        :lineWidth="60"
        :lineHeight="3"
        :inactiveStyle="{ fontSize: '34rpx', color: 'black' }"
        :activeStyle="{ color: '#3c9cff', fontSize: '34rpx' }"
        :list="tabsList"
        @click="handleChangeTabs"
      ></u-tabs>
    </view>
    <view class="login-form-content">
      <view class="" v-if="activeTab == '用户名登录'">
        <view class="input-item flex align-center">
          <view class="iconfont icon-user icon"></view>
          <input
            v-model="loginForm.username"
            class="input"
            type="text"
            placeholder="用户名"
            maxlength="30"
          />
        </view>
        <view class="input-item flex align-center">
          <view class="iconfont icon-password icon"></view>
          <input
            v-model="loginForm.password"
            type="password"
            class="input"
            placeholder="密码"
            maxlength="20"
          />
        </view>
      </view>
      <view class="" v-else>
        <view class="input-item flex align-center">
          <u-icon class="iconfont icon" name="phone-fill" size="19"></u-icon>
          <input
            v-model="loginForm.username"
            class="input"
            type="text"
            placeholder="手机号"
            maxlength="30"
          />
        </view>
        <view class="input-item flex align-center">
          <u-icon class="iconfont icon" name="chat" size="19"></u-icon>
          <input
            v-model="loginForm.password"
            type="password"
            class="input"
            placeholder="验证码"
            maxlength="20"
          />
        </view>
      </view>

      <view class="action-btn">
        <u-button
          @click="handleLogin"
          class="login-btn"
          style="font-size: 17px"
          type="primary"
          shape="circle"
          >登录
        </u-button>
      </view>

      <view class="enroll">
        <view @click="handlePersonRegistered">个人注册</view>
        <view @click="handleCompaniesRegistration">企业注册</view>
      </view>

      <view style="margin-top: 60rpx">
        <u-divider text="微信登录" :hairline="true"></u-divider>

        <view>
          <uni-icons
            @click="showModal = true"
            type="weixin"
            size="35"
          ></uni-icons>
        </view>
      </view>
      <!-- <view class="reg text-center" v-if="register">
				<text class="text-grey1">没有账号？</text>
				<text @click="handleUserRegister" class="text-blue">立即注册</text>
			</view> -->
      <!-- <view class="xieyi text-center">
				<text class="text-grey1">登录即代表同意</text>
				<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
				<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
			</view> -->
    </view>
    <u-modal
      showCancelButton
      cancelText="取消"
      @cancel="showModal = false"
      @close="showModal = false"
      confirmText="确认"
      @confirm="handleWeixinLogin"
      :show="showModal"
      :title="'提示'"
      :content="content"
    ></u-modal>
  </view>
</template>

<script>
import { wxLogin } from "@/api/login";
export default {
  data() {
    return {
      content: "使用当前微信登录,如果微信没有绑定用户需要先去绑定。",
      showModal: false,
      activeTab: "用户名登录",
      tabsList: [
        {
          name: "用户名登录",
        },
        {
          name: "手机号登录",
        },
      ],
      codeUrl: "",
      captchaEnabled: true,
      // 用户注册开关
      register: false,
      globalConfig: getApp().globalData.config,
      loginForm: {
        username: "999901234567890HPG",
        password: "hpg123789",
        code: "",
        uuid: "",
      },
    };
  },
  created() {},
  methods: {
    //微信授权登录
    handleWeixinLogin() {
      uni.getProvider({
        service: "oauth",
        success: (res) => {
          if (~res.provider.indexOf("weixin")) {
            uni.login({
              provider: "weixin",
              success: (loginRes) => {
                wxLogin({
                  code: loginRes.code,
                }).then(({ data }) => {
                  uni.setStorageSync("unionId", data.unionId);
                  if (!data.token) {
                    uni.navigateTo({
                      url: `/pages/bindweixin?openid=${data.openid}&unionId=${data.unionId}`,
                      success: (res) => {},
                      fail: () => {},
                      complete: () => {},
                    });
                  } else {
                    this.$store
                      .dispatch("weixinLogin", data.token)
                      .then((res) => {
                        this.loginSuccess();
                      });
                  }
                });
              },
            });
          }
        },
      });
    },
    //个人注册
    handlePersonRegistered() {
      uni.navigateTo({
        url: "/pages/personRegistered/index",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    //企业注册
    handleCompaniesRegistration() {
      uni.navigateTo({
        url: "/pages/companiesRegistered/index",
        success: (res) => {},
        fail: () => {},
        complete: () => {},
      });
    },
    //tabs切换
    handleChangeTabs(row) {
      this.activeTab = row.name;
    },
    // 用户注册
    handleUserRegister() {
      this.$tab.redirectTo(`/pages/register`);
    },
    // 隐私协议
    handlePrivacy() {
      let site = this.globalConfig.appInfo.agreements[0];
      this.$tab.navigateTo(
        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },
    // 用户协议
    handleUserAgrement() {
      let site = this.globalConfig.appInfo.agreements[1];
      this.$tab.navigateTo(
        `/pages/common/webview/index?title=${site.title}&url=${site.url}`
      );
    },

    // 登录方法
    async handleLogin() {
      if (this.loginForm.username === "") {
        this.$modal.msgError("请输入您的账号");
      } else if (this.loginForm.password === "") {
        this.$modal.msgError("请输入您的密码");
      } else {
        this.$modal.loading("登录中，请耐心等待...");
        this.pwdLogin();
      }
    },
    // 密码登录
    async pwdLogin() {
      this.$store
        .dispatch("Login", this.loginForm)
        .then(() => {
          this.$modal.closeLoading();
          this.loginSuccess();
        })
        .catch(() => {});
    },
    // 登录成功后，处理函数
    loginSuccess(result) {
      // 设置用户信息
      this.$store.dispatch("GetInfo").then((res) => {
        this.$tab.reLaunch("/pages/index");
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.enroll {
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
  color: #3c9cff;
  font-size: 30rpx;
  font-weight: bold;
}

.normal-login-container {
  height: 100vh;
  width: 100%;
  background-image: url("../static/images/loginBg.png");
  background-size: cover;

  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 25%;

    image {
      border-radius: 4px;
    }

    .title {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
      font-weight: bold;

      margin-left: 10px;
      font-size: 50rpx;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 40rpx auto;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 10px;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: #999;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }
    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
    }

    .reg {
      margin-top: 15px;
    }

    .xieyi {
      color: #333;
      margin-top: 20px;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}

.tabs {
  display: flex;
  margin: 40rpx auto;
}
</style>