init

cloudroam

2025-07-17 f3ea52bf97e61f6917ccaab904817d74d9d4860c

 pages/login/login.vue

@@ -2,12 +2,12 @@
    <view class="login-page">
        <view class="top-bar">
            <text class="top-left">帮助</text>
            <text class="top-right" @click="skipLogin">跳过</text>
            <text class="top-right" @click="skipLogin">游客模式</text>
        </view>

        <view class="logo-container">
            <text class="app-name">影途</text>
            <text class="subtitle">登录后，体验更多功能</text>
            <text class="app-name">影游四方</text>
            <text class="subtitle">发现精彩电影世界</text>
        </view>

        <view class="phone-number">
@@ -18,16 +18,46 @@
            <!-- <up-button type="primary" class="login-btn" @click="quickLogin" shape="circle">一键登录</up-button> -->
            <!-- <up-button type="info" class="wechat-btn" @click="wechatLogin" icon="weixin-fill" iconColor="#00c800"
                text="微信登录" shape="circle"></up-button> -->
            <up-button v-if="wxUser.user" type="info" class="login-btn" @click="wechatLogin" icon="weixin-fill"
                iconColor="#00c800" text="微信登录" shape="circle"></up-button>
            <up-button v-else type="info" class="login-btn" open-type="getPhoneNumber"
                @getphonenumber="handleGetPhoneNumber" icon="weixin-fill" iconColor="#00c800" text="微信登录"
                shape="circle"></up-button>
          <up-button
              type="primary"
              class="guest-btn"
              @click="skipLogin"
              text="立即体验"
              shape="circle"
          ></up-button>
<!--            <up-button v-if="wxUser.user" type="info" class="login-btn" @click="wechatLogin" icon="weixin-fill"-->
<!--                iconColor="#00c800" text="微信登录" shape="circle"></up-button>-->
<!--            <up-button v-else type="info" class="login-btn" open-type="getPhoneNumber"-->
<!--                @getphonenumber="handleGetPhoneNumber" icon="weixin-fill" iconColor="#00c800" text="微信登录"-->
<!--                shape="circle"></up-button>-->
          <up-button
              v-if="wxUser && wxUser.user"
          type="primary"
          class="login-btn"
          @click="showWechatLoginConfirm"
          icon=""
          iconColor="#00c800"
          text="手机号快捷登录"
          shape="circle"
          custom-style="background: #ff2d4a; color: white;"
          ></up-button>
          <up-button
              v-else
              type="primary"
              class="login-btn"
              open-type="getPhoneNumber"
              @getphonenumber="handleGetPhoneNumber"
              icon=""
              iconColor="#00c800"
              text="手机号快捷登录"
              shape="circle"
              custom-style="background: #ff2d4a; color: white;"
          ></up-button>
        </view>

        <view class="other-login" @click="otherLogin">
            <text>其他登录方式 ></text>
        </view>
<!--        <view class="other-login" @click="otherLogin">-->
<!--            <text>其他登录方式 ></text>-->
<!--        </view>-->

        <view class="agreement">
            <view @click="toggleCheck">
@@ -61,41 +91,89 @@
    isChecked.value = !isChecked.value
}

const wxUser = ref<WxUser | null>(null)
const wxUser = ref<WxUser>({
  user: null,
  phoneNumber: '',
  purePhoneNumber: ''
});
// const wechatLogin = () => {
//     if (!isChecked.value) {
//         uni.showToast({ title: '请先同意协议', icon: 'none' });
//         return;
//     }
//     // 微信登录
//     uni.login({
//         "provider": "weixin",
//         "onlyAuthorize": true, // 微信登录仅请求授权认证
//         success: async function (event:any) {
//             const { code } = event
//             $message.showLoading();
//             const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
//             if (resp && resp.data) {
//                 // that.$forceUpdate()
//                 uni.reLaunch({
//                     url: '/pages/home/home'
//                 })
//             }
//             $message.hideLoading();
//         },
//         fail: function (err:any) {
//             // 登录授权失败
//             // err.code是错误码
//         }
//     })
//
//
// };
const wechatLogin = () => {
    if (!isChecked.value) {
        uni.showToast({ title: '请先同意协议', icon: 'none' });
        return;
    }
    // 微信登录
    uni.login({
        "provider": "weixin",
        "onlyAuthorize": true, // 微信登录仅请求授权认证
    provider: "weixin",
    onlyAuthorize: true,
        success: async function (event:any) {
            const { code } = event
            $message.showLoading();
            const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
            if (resp && resp.data) {
                // that.$forceUpdate()
                uni.reLaunch({
                    url: '/pages/home/home'
                })
      const { code } = event;
      const resp = await userStore.loginwx({
        code,
        phoneNumber: wxUser.value?.phoneNumber,
        purePhoneNumber: wxUser.value?.purePhoneNumber
      });

      if (resp?.data) {
        uni.reLaunch({ url: '/pages/home/home' });
            }
            $message.hideLoading();
        },
        fail: function (err:any) {
            // 登录授权失败
            // err.code是错误码
      console.error('登录失败:', err);
        }
    })


  });
};

onShow(() => {
    console.log('页面显示')
    getOpenId()
// onShow(() => {
//     console.log('页面显示')
//     getOpenId()
// });

const showWechatLoginConfirm = () => {
  if (!isChecked.value) {
    uni.showToast({ title: '请先同意协议', icon: 'none' });
    return;
  }

  uni.showModal({
    title: '授权提示',
    content: '需要使用手机号登录才能获得完整服务？',
    confirmText: '确认登录',
    cancelText: '暂不需要',
    success: (res) => {
      if (res.confirm) {
        wechatLogin();
      }
    }
});
};


const getOpenId = () => {
    uni.login({
        "provider": "weixin",
@@ -148,13 +226,19 @@
            }
        })
        if (code == 0) {
            
            // 获取手机号码后，实现微信登录
            const phoneNumber = data.phone_info.phoneNumber;
            const purePhoneNumber = data.phone_info.purePhoneNumber;
            wxUser.value.phoneNumber = phoneNumber
            wxUser.value.purePhoneNumber = purePhoneNumber
            handleWechatClick()
          wxUser.value = {
            ...wxUser.value,
            phoneNumber: data.phone_info.phoneNumber,
            purePhoneNumber: data.phone_info.purePhoneNumber,
            user: {} // 确保user不为null
          };
          wechatLogin();
            // // 获取手机号码后，实现微信登录
            // const phoneNumber = data.phone_info.phoneNumber;
            // const purePhoneNumber = data.phone_info.purePhoneNumber;
            // wxUser.value.phoneNumber = phoneNumber
            // wxUser.value.purePhoneNumber = purePhoneNumber
            // handleWechatClick()
        } else {

        }
@@ -163,31 +247,52 @@
    }
}

// const handleWechatClick = () => {
//     uni.login({
//         "provider": "weixin",
//         "onlyAuthorize": true, // 微信登录仅请求授权认证
//         success: async function (event: any) {
//             const { code } = event
//             $message.showLoading();
//             console.log("获取到的微信用户信息是：", wxUser.value)
//             const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
//             if (resp && resp.data) {
//                 // $forceUpdate()
//                 uni.reLaunch({
//                     url: '/pages/home/home'
//                 })
//             }
//             $message.hideLoading();
//         },
//         fail: function (err: any) {
//             // 登录授权失败
//             // err.code是错误码
//         }
//     })
// }

const handleWechatClick = () => {
    uni.login({
        "provider": "weixin",
        "onlyAuthorize": true, // 微信登录仅请求授权认证
    provider: "weixin",
    onlyAuthorize: true,
        success: async function (event: any) {
            const { code } = event
            $message.showLoading();
            console.log("获取到的微信用户信息是：", wxUser.value)
            const resp = await userStore.loginwx({ code, phoneNumber: wxUser.value.phoneNumber, purePhoneNumber: wxUser.value.purePhoneNumber })
            if (resp && resp.data) {
                // $forceUpdate()
                uni.reLaunch({
                    url: '/pages/home/home'
                })
      const resp = await userStore.loginwx({
        code: event.code,
        phoneNumber: wxUser.value?.phoneNumber,
        purePhoneNumber: wxUser.value?.purePhoneNumber
      });

      if (resp?.data) {
        uni.reLaunch({ url: '/pages/home/home' });
            }
            $message.hideLoading();
        },
        fail: function (err: any) {
            // 登录授权失败
            // err.code是错误码
      console.error('登录失败:', err);
        }
    })
}


  });
};

const otherLogin = () => {
    // 跳转到其他登录方式页面
@@ -195,7 +300,8 @@
};

const skipLogin = () => {
    uni.switchTab({ url: '/pages/home/index' });
    // uni.switchTab({ url: '/pages/home/home' });gai
  uni.reLaunch({ url: '/pages/home/home' });
};


@@ -262,6 +368,18 @@
            background-color: #1c1c1e;
            color: #fff;
        }

       .guest-btn {
        background-color: #ff2d4a;
        border: none;
        color: #fff;
        margin-bottom: 20rpx;
      }

       .login-btn {
        background-color: #1c1c1e;
        color: #fff;
      }
    }

    .other-login {