leromro-mini/pages/login.vue

<template>
  <view class="normal-login-container">
    <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="wave-container">
      <image src="/static/Vector 1@1x.png" mode="widthFix" class="wave-img"></image>
      <image src="/static/Vector 2@1x.png" mode="widthFix" class="wave-img"></image>
    </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)
  // open(); // Popup related, removed
})
</script>

<style lang="scss" scoped>
page {
  height: 100vh;
  width: 100%;
}

.normal-login-container {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background: linear-gradient(180deg, #ffa485 0%, #f6b053 100%);
  overflow: hidden;
}

.logo-content {
  margin-top: 177rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .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;
  }
}

.house-illustration {
  width: 560rpx;
  margin-top: 60rpx;
  margin-bottom: 40rpx;
}

.slogan-content {
  text-align: center;
  
  .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: 2;
  
  .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;
    }
  }
}

/* 波浪区域样式 */
.wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  overflow: hidden;
  z-index: 1;

  .wave-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &:first-child {
      opacity: 0.4;
      mix-blend-mode: multiply;
    }

    &:last-child {
      transform: translateY(20rpx);
    }
  }
}

</style>