yizhizan-h5/pages/public/loginphone.vue

<template>
  <view class="container">
    <view class="wrapper">
      <!-- <view style="text-align: center;">
				<image src="../../static/logo.png" style="border-radius: 64upx;"></image>
			</view>
 -->
      <view class="input-content">
        <view class="item-label">手机号码</view>
        <view class="cu-form-group">
          <view class="input-box">
            <input
              type="number"
              :value="phone"
              placeholder="请输入手机号"
              maxlength="11"
              data-key="phone"
              @input="inputChange"
            />
          </view>
        </view>
        <view class="item-label">登录密码</view>
        <view class="cu-form-group">
          <view class="input-box">
            <input
              type="password"
              placeholder="请输入密码"
              maxlength="20"
              :value="password"
              data-key="password"
              @input="inputChange"
              @confirm="toLogin"
            />
          </view>
        </view>

        <view class="forgot-password">
          <view @click="forget">忘记密码</view>
        </view>
        <button class="confirm-btn" @click="toLogin">登录</button>

        <view style="margin-top: 32rpx; text-align: center">
          <view>
            <text class="register-section" @click="register()">注册</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      banners: [],
      invitation: "",
      loginName: "",
      sending: false,
      sendTime: "获取验证码",
      count: 60,
    };
  },
  onLoad() {},
  methods: {
    forget() {
      uni.navigateTo({
        url: "/pages/public/forgetPwd",
      });
    },
    register() {
      uni.navigateTo({
        url: "/pages/public/register",
      });
    },
    inputChange(e) {
      const key = e.currentTarget.dataset.key;
      this[key] = e.detail.value;
    },
    navBack() {
      uni.navigateBack();
    },

    toLogin() {
      this.$queue.loginClear();
      let openid = this.$queue.getData("openid");
      const { phone, password } = this;
      if (!phone) {
        this.$queue.showToast("请输入手机号");
      } else if (phone.length != 11) {
        this.$queue.showToast("请输入正确的手机号");
      } else if (!password) {
        this.$queue.showToast("请输入密码");
      } else {
        this.$queue.showLoading("正在登录中...");
        this.$Request
          .post("/app/Login/loginApp", {
            password: password,
            phone: phone,
            openId: this.$queue.getData("openid"),
          })
          .then((res) => {
            if (res.code == 0) {
              this.$queue.setData("userId", res.user.userId);
              this.$queue.setData("token", res.token);
              this.$queue.setData("phone", res.user.phone);
              this.$queue.setData("userName", res.user.userName);
              this.$queue.setData("avatar", res.user.avatar);
              this.$queue.setData("invitationCode", res.user.invitationCode);
              this.$queue.setData("inviterCode", res.user.inviterCode);
              this.getIsVip();
              uni.hideLoading();
              this.$queue.setData("userType", res.user.userType);
              //判断是否开启身份选择 是/否
              this.$Request.get("/app/common/type/339").then((rest) => {
                if (rest.code == 0) {
                  if (rest.data.value == "是") {
                    uni.reLaunch({
                      url: "/pages/public/selectIdentity/selectIdentity",
                    });
                  } else {
                    if (res.user.userType == 2) {
                      uni.reLaunch({
                        url: "/pages/my/index",
                      });
                    } else {
                      uni.reLaunch({
                        url: "/pages/my/index",
                      });
                    }
                  }
                } else {
                  if (res.user.userType == 2) {
                    uni.reLaunch({
                      url: "/pages/my/index",
                    });
                  } else {
                    uni.reLaunch({
                      url: "/pages/my/index",
                    });
                  }
                }
              });

              // uni.switchTab({
              // 	url: '/pages/my/index'
              // })
            } else {
              uni.hideLoading();
              this.$queue.showToast(res.msg);
            }
          });
      }
    },
    getIsVip() {
      this.$Request.get("/app/UserVip/isUserVip").then((res) => {
        if (res.code == 0) {
          // this.isVip = res.data
          console.log(res.data);
          this.$queue.setData("isVip", res.data);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .input-placeholder {
  color: #9ea1a8;
  font-family: DM Sans;
  font-size: 28rpx;
  font-weight: 400;
  text-align: left;
}
page {
  height: 100%;
  background: #fff;
}
.forgot-password {
  text-align: left;
  margin-top: 8rpx;
  color: rgba(102, 112, 133, 1);
  font-family: Inter;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 40rpx;
}
.item-label {
  color: rgba(18, 26, 44, 1);
  font-family: Roboto;
  font-size: 32rpx;
  font-weight: 400;
  line-height: 51.2rpx;
  letter-spacing: 0px;
  text-align: left;
  padding-bottom: 6rpx;
  margin-top: 32rpx;
}
.cu-form-group {
  box-sizing: border-box;
  border: 2rpx solid rgba(158, 161, 168, 1);
  border-radius: 24rpx;
  background: rgba(255, 255, 255, 1);
  padding: 8rpx 24rpx !important;
}
.bg {
  background-color: #ffffff;
}

.send-msg {
  border-radius: 30px;
  color: black;
  background: white;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
}

.container {
  top: 0;
  padding-top: 32upx;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff !important;
}

.wrapper {
  position: relative;
  z-index: 90;
  background: #ffffff;
  padding-bottom: 32upx;
}

.input-content {
  padding: 32rpx;
  box-sizing: border-box;
}

.confirm-btn {
  width: 100%;
  border-radius: 100rpx;
  margin-top: 32rpx;
  background: #016bf6;
  color: rgba(255, 255, 255, 1);
  font-family: DM Sans;
  font-size: 32rpx;
  font-weight: 400;

  &:after {
    border-radius: 60px;
  }
}
.register-section {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #016bf6;
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0%;
  text-align: right;
  text-decoration-line: underline;
}
</style>