gjt_mini/pages/login/user-login/index.vue

<template>
  <view>
    <u--form
      labelPosition="left"
      :model="formData"
      ref="uForm"
      labelWidth="100"
      :rules="rules"
      class="loginForm"
    >
      <!-- 账号密码输入框 -->
      <view v-if="showAccountLogin">
        <view class="input-group">
          <u-form-item borderBottom>
            <u-input
              placeholder="请输入账号"
              v-model="formData.loginName"
              fontSize="30"
              border="none"
              :customStyle="{
                padding: '10rpx 30rpx',
                borderRadius: '16rpx',
              }"
            >
              <template #prefix>
                <image
                  src="/static/user.png"
                  style="width: 20px; height: 20px; margin-right: 8px"
                />
              </template>
            </u-input>
          </u-form-item>
        </view>

        <view class="input-group">
          <u-form-item borderBottom>
            <u-input
              placeholder="请输入密码"
              type="password"
              v-model="formData.pwd"
              fontSize="30"
              border="bottom"
              :customStyle="{
                padding: '10rpx 30rpx',
                borderRadius: '16rpx',
              }"
            >
              <template #prefix>
                <image
                  src="/static/pwd.png"
                  style="width: 20px; height: 20px; margin-right: 8px"
                />
              </template>
            </u-input>
          </u-form-item>
        </view>
      </view>

      <view class="login-btn">
        <!-- 微信一键登录按钮 -->
        <button
          v-if="!showAccountLogin"
          open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber"
          class="wexin-but"
        >
          微信一键登录
        </button>

        <!-- 账号密码登录按钮 -->
        <u-button
          v-if="showAccountLogin"
          @click="submit"
          color="#327C4E"
          :loading="loading"
          :disabled="loading"
          shape="circle"
          size="large"
          :customStyle="{
            height: '78rpx',
            fontSize: '32rpx',
            fontWeight: '500',
          }"
        >
          {{ `登 录` }}
        </u-button>

        <!-- 切换登录方式文字 -->
        <view class="switch-login" @tap="toggleLoginMethod">
          {{ showAccountLogin ? "微信快捷登录" : "切换账号登录" }}
        </view>
      </view>
    </u--form>
  </view>
</template>

<script>
import { setToken, setUser } from "@/utils/auth.js";
import en from "@/utils/key.js";
export default {
  options: {
    styleIsolation: "shared",
  },
  data() {
    return {
      loading: false,
      showAccountLogin: false, // 默认显示微信登录
      formData: {
        loginName: "",
        pwd: "",
      },
      rules: {
        loginName: [
          {
            required: true,
            message: "请输入账号",
            trigger: ["blur", "change"],
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
        ],
      },
    };
  },
  methods: {
    // 切换登录方式
    toggleLoginMethod() {
      this.showAccountLogin = !this.showAccountLogin;
    },
    getPhoneNumber(data) {
      if (!this.$parent.showAgreement) {
        uni.showToast({
          title: "请先勾选用户协议",
          icon: "none",
          duration: 1500,
        });
        return;
      }
      const _this = this;
      if (!data.detail.errno) {
        this.loading = true;
        wx.login({
          success: function (resp) {
            _this.$api.login
              .loginByPhoneForDriver({
                phoneCode: data.detail.code,
                sessionCode: resp.code,
              })
              .then((res) => {
                const result = res;
                _this.loading = false;
                setToken(result.token);
                _this.getUserMenu();
                setUser(result.userInfo);
                uni.switchTab({
                  url: "/pages/index/index",
                });
              })
              .catch((errors) => {
                _this.loading = false;
              });
          },
        });
      }
    },
    async getUserMenu() {
      await this.$api.login
        .getUserMenu()
        .then((res) => {
          this.$store.dispatch("setResources", res);
        })
        .catch((err) => {
          console.log("error");
        });
    },
    submit() {
      if (!this.$parent.showAgreement) {
        uni.showToast({
          title: "请先勾选用户协议",
          icon: "none",
          duration: 1500,
        });
        return;
      }
      this.$refs.uForm.validate().then(() => {
        const nPwd = en.encrypt(this.formData.pwd);
        this.loading = true;
        const _this = this;
        wx.login({
          success: function (resp) {
            _this.$api.login
              .loginUser({
                loginName: _this.formData.loginName,
                pwd: nPwd,
              })
              .then((res) => {
                const result = res;
                _this.loading = false;
                setToken(result.token);
                setUser(result.userInfo);
                _this.getUserMenu();
                setTimeout(() => {
                  uni.switchTab({
                    url: "/pages/map/index",
                  });
                }, 500);
              })
              .catch((errors) => {
                _this.loading = false;
              });
          },
        });
      });
    },
  },
  onReady() {
    try {
      this.$refs.uForm.setRules(this.rules);
    } catch (e) {}
  },
};
</script>

<style lang="less" scoped>
.loginForm {
  width: 100%;
}

.input-group {
  margin-bottom: 30rpx;
}

.login-btn {
  margin-top: 40rpx;
}

.wexin-but {
  width: 100%;
  height: 78rpx;
  //   background: linear-gradient(135deg, #2890e5 0%, #667eea 100%);
  color: white;
  font-size: 32rpx;
  //border-radius: 48rpx;
  //border: none;
  font-weight: 500;
  //box-shadow: 0 8rpx 24rpx rgba(40, 144, 229, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #327c4e;
  border-radius: 198rpx 198rpx 198rpx 198rpx;
  border: 2rpx solid rgba(255, 255, 255, 0.2);
}

.switch-login {
  margin-top: 30rpx;
  text-align: center;
  font-size: 28rpx;
  color: #327c4e;
  text-decoration: underline;
}

/deep/ .u-form-item {
  margin-bottom: 0;
}
</style>