RentWeAppFront/pages/login/login.vue

<template>
  <view class="login-page">
    
	<!-- 背景视频 -->
<video
  class="bg-video"
  src="/static/login.mp4"
  autoplay
  loop
  muted
  object-fit="cover"
  controls="false"
  show-center-play-btn="false"
  show-play-btn="false"
  show-fullscreen-btn="false"
  show-mute-btn="false"
  show-status-bar="false"
  enable-progress-gesture="false"
/>

    <!-- 遮罩层增强可读性 -->
   <view class="overlay"></view>
     <!-- 背景图 -->
       <!-- <image class="bg-img" :src="currentBg" :class="{ fade: isFading }" mode="aspectFill"></image> -->
    <!-- 内容层 -->
    <view class="login-content">
      <view class="title u-font-36 u-m-b-40">
        微信授权登录
      </view>

      <button 
        class="login-btn"
        open-type="getPhoneNumber"
        @getphonenumber="onGetPhone"
      >
        使用微信手机号授权登录
      </button>

      <view class="privacy-tip u-m-t-30 u-text-center">
        登录即同意
        <text class="link" @click="goPrivacy('user')">《用户协议》</text>
        及
        <text class="link" @click="goPrivacy('privacy')">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	  data() {
	    return {
	      bgImages: [
	       '/static/loginbg1.jpg',
		   '/static/loginbg2.jpg'
	      ],
		        currentIndex: 0,
		        currentBg: '/static/loginbg1.jpg',
		        timer: null
	    }
	  },
	   onLoad() {
	      this.startBgTimer();
	    },
	    onUnload() {
	      clearInterval(this.timer);
	    },
  methods: {
	  startBgTimer() {
	        this.timer = setInterval(() => {
	          this.currentIndex = (this.currentIndex + 1) % this.bgImages.length;
	          this.currentBg = this.bgImages[this.currentIndex];
	        }, 2000); // 每 4 秒切换一次
	      },
    onGetPhone(e) {
      const { code } = e.detail;
      if (!code) {
        this.$mytip.toast("授权失败");
        return;
      }
      this.doLogin(code);
    },
    async doLogin(code) {
      uni.showLoading({ title: "登录中...", mask: true });
      try {
        const authRes = await this.$u.get(`/api/weChatAuth?code=${code}`);
        if (!authRes.hasPhone) {
          this.showPhoneSelector(authRes.phoneList, authRes.openid);
          return;
        }
        await this.loginWithOpenId(authRes.openid);
      } catch (err) {
        this.$mytip.toast("登录失败");
        uni.switchTab({ url: '/pages/index/index' });
      }
    },
    showPhoneSelector(phoneList, openid) {
      this.$emit("choosePhone", { phoneList, openid });
    },
    async loginWithOpenId(openid) {
      const loginRes = await this.$u.post('/api/weChatLoginByOpenId', { openid });
      this.$u.vuex('vuex_token', loginRes.token);
      this.$u.vuex('vuex_user', loginRes.loginUser);
      uni.hideLoading();
      uni.switchTab({ url: '/pages/index/index' });
    },
    goPrivacy(type) {
      const url = type === 'user' 
        ? '/pages/privacy/userAgreement' 
        : '/pages/privacy/privacyPolicy';
      uni.navigateTo({ url });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  
    .bg-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: -1;
    }
  
    .overlay {
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background: rgba(0,0,0,0.3);
      z-index:0;
    }
	
  .bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: brightness(0.7) blur(2px);
    opacity: 1;
    transition: opacity 0.5s ease;
  }

  .bg-img.fade {
    opacity: 0;
  }
  .login-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    animation: floatBtn 2s ease-in-out infinite alternate;

    .title {
      color: #fff;
      font-weight: bold;
      text-align: center;
    }

    .login-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      font-size: 28rpx;
      color: #fff;
      border-radius: 40rpx;
      background: linear-gradient(90deg, #4CAF50, #07c160);
      box-shadow: 0 6rpx 12rpx rgba(0,0,0,0.25);
      text-align: center;
      margin-top: 20rpx;
    }

    .privacy-tip {
      font-size: 24rpx;
      color: #fff;
      margin-top: 20rpx;
      text-align: center;

      .link {
        color: #ffd700;
        text-decoration: underline;
        margin: 0 4rpx;
      }
    }
  }
}

@keyframes floatBtn {
  0% { transform: translate(-50%, -50%) translateY(0); }
  100% { transform: translate(-50%, -50%) translateY(-10rpx); }
}
</style>