RentWeAppFront/pages/login/login.vue

<template>
    <view class="login-container">
      <!-- 顶部状态栏 -->
      <view class="status-bar">
		  <u-icon
		    :name="btn.icon"
		    :color="btn.color || '#333'"
		    :size="btn.size || 40"
		  ></u-icon>
	  </view>
      
      <!-- 主体内容区 -->
      <view class="content">
        <!-- 标题区域 -->
        <view class="title">登录</view>
        
        <!-- 登录插图区域 -->
        <view class="illustration">
          <image src="/static/login/bg.png" mode="aspectFit"></image>
        </view>
        
        <!-- 登录按钮 -->
        <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="onGetPhone">
          使用微信授权登录
        </button>
        
        <!-- 用户类型选择 -->
        <view class="user-type" shape="square">
          <u-radio-group v-model="loginType" active-color="#EA414A" shape="square" >
				<u-radio name="person" >个人</u-radio>
				<u-radio name="company" >企业</u-radio>
			</u-radio-group>
        </view>
        
        <!-- 协议提示 -->
       <view class="agreement">
         登录即同意
         <text class="link">《用户协议》</text>
         及
         <text class="link">《隐私政策》</text>
       </view>
      </view>
    </view>
</template>


<script>
export default {
  data() {
    return {
	  designWidth: 750,
	  screenWidth: 0,
	  scale: 1,
      bgImages: [
        '/static/loginbg1.jpg',
        '/static/loginbg2.jpg'
      ],
      currentIndex: 0,
      currentBg: '/static/login/bg.png',
      isFading: false,
      timer: null,
	  loginType:"person"
    }
  },

  onLoad() {
    // this.startBgTimer();
	wx.getWindowInfo({
	    success: (res) => {
	      this.screenWidth = res.windowWidth
	      this.scale = this.screenWidth / this.designWidth
	    }
	  })
  },

  onUnload() {
    clearInterval(this.timer);
  },
computed: {
  // title 样式
  titleStyle() {
    const s = this.scale;
    return {
      width: `${93 * s}rpx`,
      height: `${45 * s}rpx`,
      fontSize: `${48 * s}rpx`,
      lineHeight: `${40 * s}rpx`,
      fontWeight: 500,
      color: '#222222',
      fontFamily: 'Noto Sans S Chinese',
      textAlign: 'center'
    }
  },
  headerStyle() {
    const s = this.scale;
    return {
     marginTop: `${214 * s}rpx`,
     flex: 1,
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'center',   // 水平居中
     justifyContent: 'flex-start' // 从顶部开始
    }
  },
  // cover 样式
  coverStyle() {
    const s = this.scale;
    return {
      width: `${428 * s}rpx`,
      height: `${608 * s}rpx`
    }
  }
},
  methods: {
    /** 背景切换定时器 */
    startBgTimer() {
      this.timer = setInterval(() => {
        this.isFading = true;

        setTimeout(() => {
          this.currentIndex = (this.currentIndex + 1) % this.bgImages.length;
          this.currentBg = this.bgImages[this.currentIndex];
          this.isFading = false;
        }, 500);
      }, 4000);
    },

    /** 微信手机号授权 */
    onGetPhone(e) {
      const { code } = e.detail;

      if (!code) {
        this.$mytip.toast("授权失败");
        return;
      }
      this.doLogin(code);
    },

    /** 执行登录逻辑 */
    async doLogin(phoneGetCode) {
      uni.showLoading({ title: "登录中...", mask: true });
      
      try {
        // 微信登录
        const loginRes = await new Promise((resolve, reject) => {
          uni.login({
            provider: 'weixin',
            success: resolve,
            fail: reject
          });
        });
    
        // 调用后端登录接口
        const authRes = await this.$u.post(`/login/weChatLogin`, {
    	phoneGetCode: phoneGetCode,
    	loginCode: loginRes.code
       });
   
        // 保存token
        this.$u.vuex('vuex_token', authRes.data);
        uni.hideLoading();
		
	    console.log(this.loginType)
		uni.setStorageSync('indexParam', {
		  loginType: this.loginType
		})
        // 跳转首页
        uni.switchTab({
          url: '/pages/index/index'
        });
    
      } catch (err) {
        uni.hideLoading();
        this.$mytip.toast("登录失败");
        console.error('Login failed:', err);
      }
    },
    /** 触发手机号选择（子组件 → 父组件） */
    showPhoneSelector(phoneList, openid) {
      this.$emit("choosePhone", { phoneList, openid });
    },
    /** 查看协议 */
    goPrivacy(type) {
      const url = type === 'user'
        ? '/pages/privacy/userAgreement'
        : '/pages/privacy/privacyPolicy';

      uni.navigateTo({ url });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  
  .status-bar {
    margin-top: 7.56%;
    height: var(--status-bar-height);
  }
  
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100vh - var(--status-bar-height));
	margin-top: 12.8%;
  }
  
  .title {
    height: 45rpx;
    font-family: Noto Sans S Chinese;
    font-weight: 500;
    font-size: 48rpx;
    color: #222222;
    line-height: 40rpx;
  }
  
  .illustration {
    width: 100%;
    height: 44.6%;
	padding-left: 21.47%;
	padding-right: 21.47%;
    margin-bottom: 6%;
    overflow: hidden;
  }
  
  .illustration image {
    width: 100%;
    height: 100%;
  }
  
  .login-btn {
    width: 78.6%;
    height: 7.12%;
    background: linear-gradient(90deg, #FF2F31 0%, #FF9379 100%);
    border-radius: 49rpx;
    font-family: Noto Sans S Chinese;
    font-weight: 400;
    font-size: 36rpx;
    color: #FFFFFF;
	 display: flex;
	align-items: center;
	justify-content: center;
    margin-bottom: 40rpx;
  }
  
  .user-type {
    display: flex;
    justify-content: center;
    gap: 40rpx;
    margin-bottom: 20rpx;
  }
  
  .agreement {
	font-family: Noto Sans S Chinese;
	font-weight: 400;
	font-size: 30rpx;
	color: #CECECE;
	align-items: center;
	margin-top: 6.24%;
  }
  .link{
	  color: #334254;
  }
}



/* 响应式适配 */
@media (max-width: 320rpx) {
  .title { font-size: 42rpx; margin-bottom: 100rpx; }
  .illustration { height: 360rpx; }
  .login-btn { height: 80rpx; font-size: 30rpx; }
}
</style>