xlcs/xlcs-user/pages/loginh5/loginh5.vue

<template>
  <view class="wrap">
    <view class="content">
      <view class="title">欢迎登录小鹿超市</view>
    </view>
    <view class="buttom">
      <view class="loginType">
        <view class="accountLogin item">
          <input v-model="username" class="input" placeholder="请输入账号" type="text"/>
          <input v-model="password" class="input" placeholder="请输入密码" type="password"/>
          <button :disabled="isLogin" class="loginBtn" @click="loginWithAccount">
            账号密码登录
          </button>
        </view>
      </view>
      <view class="hint">
        登录代表同意
        <text class="link">小鹿超市用户协议、隐私政策，</text>
        并授权使用您的小鹿超市账号信息（如昵称、头像、收获地址）以便您统一管理
      </view>
      <view class="buttons">
        <button class="otherBtn" @click="goToRegister">注册</button>
        <!-- 添加空白间距 -->
        <div style="width: 20px; display: inline-block;"></div>
        <button class="otherBtn" @click="goToWechatLogin">微信登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      username: '',
      password: ''
    };
  },
  methods: {
    async loginWithAccount() {
      this.isLogin = true;
      // 做账号密码登录逻辑，替换以下代码为实际的登录操作
      try {
        // 假设这里进行了账号密码登录，并获取到了 token
        const result = await this.$u.api.getAccountLogin({
          phone: this.username,
          password: this.password
        });
        console.log(result, result.token, "<<<")
        // 将token值进行本地缓存存储
        uni.setStorage({
          key: 'token',
          data: result.token,
          success: async () => {
            // 更新用户信息
            // await this.$u.api.postUpdateUser({
            //   sex,
            //   photoUrl,
            //   nickName
            // });
            // 路由跳转至首页
            uni.reLaunch({
              url: '/pages/index/index',
            });
          }
        });
      } catch (error) {
        console.error('登录失败:', error);
      } finally {
        this.isLogin = false;
      }
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/register/register',
      });
    },
    goToWechatLogin() {
      uni.navigateTo({
        url: '/pages/login/login',
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 样式略有修改以适应账号密码登录的布局
.wrap {
  font-size: 28rpx;

  .content {
    width: 600rpx;
    margin: 80rpx auto 0;

    .title {
      text-align: left;
      font-size: 60rpx;
      font-weight: 500;
      margin-bottom: 100rpx;
    }
  }

  .otherBtn {
    width: 240rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    background-color: #ccc;
    color: #fff;
    font-size: 24rpx;
    border: none;
    border-radius: 10rpx;
    cursor: pointer;
    background-color: #1aad19; // 更改微信登录按钮的背景颜色
  }

  .buttom {
    .loginType {
      display: flex;
      justify-content: center;
      padding: 20rpx;

      .accountLogin {
        display: flex;
        flex-direction: column;
        align-items: center;

        .input {
          width: 400rpx;
          height: 80rpx;
          margin-bottom: 20rpx;
          padding: 0 20rpx;
          font-size: 28rpx;
          border: 1px solid #ccc;
          border-radius: 10rpx;
        }

        .loginBtn {
          width: 400rpx;
          height: 80rpx;
          line-height: 80rpx;
          text-align: center;
          background-color: rgb(83, 194, 64);
          color: #fff;
          font-size: 28rpx;
          border: none;
          border-radius: 10rpx;
          cursor: pointer;
        }
      }
    }

    .hint {
      padding: 20rpx 40rpx;
      font-size: 24rpx;
      color: #666;

      .link {
        color: rgb(83, 194, 64);
      }
    }
  }
}
</style>