front-end/mallApp/src/components/wangCg.vue

<template>
  <view class="login-overlay" v-if="loginStyle == 0">
    <view class="login-modal">
      <!-- 背景装饰 -->
      <view class="bg-decoration">
        <view class="circle circle-1"></view>
        <view class="circle circle-2"></view>
      </view>
      
      <!-- 主要内容 -->
      <view class="content-wrapper">
        <!-- 图标区域 -->
        <view class="icon-section">
          <view class="login-icon">
            <text class="icon-text">🔐</text>
          </view>
        </view>
        
        <!-- 文字区域 -->
        <view class="text-section">
          <view class="title">请先登录</view>
          <view class="subtitle">登录后享受更多功能</view>
        </view>
        
        <!-- 按钮区域 -->
        <view class="button-section">
          <button class="login-btn" open-type="getPhoneNumber" @getphonenumber="getWxMobile">
            <text class="btn-text">手机号一键登录</text>
          </button>
        </view>
        
        <!-- 说明文字 -->
        <view class="notice-section">
          <text class="notice-text">为了更好提供服务，需要获取您的手机号，如不接受，你可以拒绝使用，点右上角关闭此小程序</text>
        </view>


      </view>
    </view>
  </view>
</template>

<script>
import { getWxPhone } from "@/api/mini"
import { create } from "@/api/user"
import store from '@/store'

export default {
  props: {
    loginStyle: {
      type: Number,
      default: 0,
    }
  },
  data() {
    return {
      form: {
        mobile: ""
      }
    };
  },
  methods: {
    getWxMobile(e) {
      let that = this
      if (e.detail.errMsg === "getPhoneNumber:ok") {
        let currentMiniOpenId = uni.getStorageSync('miniOpenId')
        getWxPhone({ iv: e.detail.iv, encryptedData: e.detail.encryptedData, miniOpenId: currentMiniOpenId }).then(subRes => {
            if(subRes.data && subRes.data.hasNoOpenId && subRes.data.hasNoOpenId == 1){
              uni.showModal({
                title: '提示',
                content: '网络异常，请重试一次',
                success: function (res) {
                  if (res.confirm) {
                    console.log('用户点击确定')
                  }
                }
              })
              return false
            }
            this.form.mobile = subRes.data.mobile
            that.confirmFn()
        })
      } else {
        this.$msg("获取手机失败");
      }
    },
    confirmFn() {
      let currentMiniOpenId = uni.getStorageSync('miniOpenId')
      let that = this
      create({miniOpenId: currentMiniOpenId, ...this.form}).then(res => {
        if(res.code == 1){
          uni.setStorageSync('token', res.data.token)
          if(res.data.user && !that.$util.isEmpty(res.data.user)){
            store.commit('setLoginInfo', res.data.user)
            that.$msg('登录成功')
            // 登录成功后触发事件通知父组件
            this.$emit('loginSuccess', res.data.user)
          }
        }
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.login-overlay {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-modal {
  position: relative;
  width: 550upx;
  max-width: 95vw;
  background: #ffffff;
  border-radius: 24upx;
  box-shadow: 0 20upx 60upx rgba(0, 0, 0, 0.3);
  overflow: hidden;
  animation: modalShow 0.3s ease-out;
}

@keyframes modalShow {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(50upx);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

// 背景装饰
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    animation: float 4s ease-in-out infinite;
    
    &.circle-1 {
      width: 80upx;
      height: 80upx;
      top: 20%;
      right: 10%;
      animation-delay: 0s;
    }
    
    &.circle-2 {
      width: 60upx;
      height: 60upx;
      bottom: 30%;
      left: 10%;
      animation-delay: 2s;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(90deg);
  }
}

.content-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 60upx 40upx;
}

// 图标区域
.icon-section {
  margin-bottom: 40upx;
  
  .login-icon {
    width: 100upx;
    height: 100upx;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 2upx solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8upx 32upx rgba(0, 0, 0, 0.1);
    
    .icon-text {
      font-size: 70upx;
    }
  }
}

// 文字区域
.text-section {
  margin-bottom: 50upx;
  
  .title {
    font-size: 50upx;
    font-weight: 600;
    color: #333333;
    margin-bottom: 16upx;
    text-shadow: none;
  }
  
  .subtitle {
    font-size: 36upx;
    color: #666666;
    line-height: 1.4;
    text-shadow: none;
  }
}

// 按钮区域
.button-section {
  margin-bottom: 30upx;
  
  .login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 88upx;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    border-radius: 44upx;
    box-shadow: 0 8upx 24upx rgba(238, 90, 36, 0.4);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    
    &:active {
      transform: translateY(2upx);
      box-shadow: 0 4upx 12upx rgba(238, 90, 36, 0.4);
    }
    
    &::after {
      border: none;
    }
    
    .btn-icon {
      font-size: 32upx;
      margin-right: 12upx;
    }
    
    .btn-text {
      font-size: 40upx;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: 1upx;
    }
  }
}

// 说明文字区域
.notice-section {
  .notice-text {
    font-size: 28upx;
    color: #999999;
    line-height: 1.5;
    text-align: center;
    text-shadow: none;
  }
}

// 响应式适配
@media (max-width: 750upx) {
  .login-modal {
    width: 580upx;
  }
  
  .content-wrapper {
    padding: 50upx 30upx;
  }
  
  .icon-section .login-icon {
    width: 80upx;
    height: 80upx;
    
    .icon-text {
      font-size: 56upx;
    }
  }
  
  .text-section .title {
    font-size: 42upx;
  }
  
  .text-section .subtitle {
    font-size: 34upx;
  }
  
  .button-section .login-btn {
    height: 80upx;
    
    .btn-text {
      font-size: 38upx;
    }
  }
}
</style>