leromro-mini/pages/login.vue

<template>
  <view class="normal-login-container">
    <view class="wave-container">
      <image
        src="/static/login 13780@1x.png"
        mode="widthFix"
        class="wave-img"
      ></image>
    </view>

    <view class="logo-content">
      <image :src="imagePath" mode="aspectFit" class="logo-image"></image>
      <text class="title">金邻助家</text>
    </view>

    <image
      src="/static/13779@1x.png"
      mode="widthFix"
      class="house-illustration"
    ></image>

    <view class="slogan-content">
      <text class="slogan-text">着力打造全国居家服务行业标准</text>
      <text class="slogan-text">和建立综合信用评价体系</text>
    </view>

    <view class="actions-container">
      <up-button
        custom-style="{ 'background-color': '#623F34', 'color': '#FFFFFF', 'border-radius': '25px', 'height': '50px', 'line-height': '50px', 'fontSize': '18px' }"
        class="login-button"
        @click="handleLogin"
        >微信授权登录</up-button
      >
      <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>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router' // 根据实际情况选择路由库
import store from '@/store'

const imagePath = '/static/9efd1.png' // Path to the logo image (red tree)

// 获取全局配置
// const globalConfig = getApp().globalData.config;
const register = ref(false) // 用户注册开关
const loginForm = reactive({
  username: '',
  password: '',
  code: '',
  uuid: '',
})

// const codeUrl = ref(""); // Not used in the new design
// const captchaEnabled = ref(true); // Not used in the new design

const router = useRouter()

// 用户注册 - assuming this might be needed later, keeping it
const handleUserRegister = () => {
  router.push('/pages/register') // 替换为实际的路由跳转逻辑
}

// 隐私协议
const handlePrivacy = () => {
  uni.navigateTo({
    url: '/pages_home/pages/login/index',
  })
}

// 用户协议
const handleUserAgrement = () => {
  uni.navigateTo({
    url: '/pages_home/pages/login/user',
  })
}

// 登录方法
const handleLogin = async () => {
  uni.showLoading({
    title: '登录中，请耐心等待...',
  }) // 使用uni-app的loading方法替代$modal.loading
  // 获取服务商信息
  uni.getProvider({
    service: 'oauth',
    success: (res) => {
      console.log(res)
    },
  })

  // 获取code
  uni.login({
    provider: 'weixin',
    success: (res) => {
      if (res.code == 500) {
        uni.showLoading({
          title: '系统暂未开发，敬请期待',
        })
      } else if (res.code == 400) {
        uni.showLoading({
          title: '系统暂未开放',
        })
      }
      loginForm.code = res.code
      // 获取用户信息
      uni.getUserInfo({
        success: (res) => {
          console.log('用户信息', res)
        },
      })

      pwdLogin()

      uni.hideLoading()
    },
  })
}

// 密码登录
const pwdLogin = async () => {
  if (!store) {
    console.error('Store is not defined')
    return
  }
  store.dispatch('Login', loginForm).then(() => {
    // uni.hideLoading(); // 关闭加载提示
    loginSuccess()
  })
}

// 登录成功后，处理函数
const loginSuccess = () => {
  store.dispatch('GetInfo').then((res) => {
    console.log(store.state.user.userOrWorker, '>>>>99')
    if (store.state.user.userOrWorker == 0) {
      uni.reLaunch({
        url: '/pages/UserSelection',
      })
      return
    }
    uni.setStorageSync('userType', store.state.user.userOrWorker)
    uni.switchTab({
      url: '/pages/index',
    })
  })
}

// 页面加载时
onMounted(() => {
  uni.setStorageSync('userType', 0)
  // 设置状态栏为透明
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: 'rgba(0,0,0,0)',
    animation: {
      duration: 0,
      timingFunc: 'easeIn'
    }
  })
})
</script>

<style lang="scss" scoped>
.wave-container{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  .wave-img{
    width: 100%;
    height: 100%;
  }
}

.normal-login-container {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: var(--status-bar-height);
  box-sizing: border-box;
}

.logo-content {
  margin-top: calc(100rpx + var(--status-bar-height));
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;

  .logo-image {
    width: 90rpx;
    height: 90rpx;
    margin-bottom: 20rpx;
  }

  .title {
    font-family: PingFang SC;
    font-size: 38rpx;
    font-weight: 600;
    line-height: 38rpx;
    color: #ffffff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
}

.house-illustration {
  width: 560rpx;
  margin-top: 60rpx;
  margin-bottom: 40rpx;
  position: relative;
  z-index: 1;
}

.slogan-content {
  text-align: center;
  position: relative;
  z-index: 1;

  .slogan-text {
    font-size: 28rpx;
    color: #593931;
    line-height: 38rpx;
    display: block;
  }
}

.actions-container {
  width: 100%;
  padding: 0 80rpx;
  position: absolute;
  bottom: 80rpx;
  left: 0;
  z-index: 1;

  .login-button {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx !important;
    background-color: #623f34 !important;
    color: #ffffff !important;
    font-size: 32rpx !important;
    font-weight: 400;
  }

  .xieyi {
    margin-top: 24rpx;
    text-align: center;

    .text-grey1 {
      font-size: 24rpx;
      color: #333333;
    }

    .text-blue {
      font-size: 24rpx;
      color: #1a88ff;
      margin: 0 4rpx;
    }
  }
}

</style>