buddhism/pages/login/login.vue

<template>
	<view class="page">
		<u-navbar :is-back="false" :title="titleTxt" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='36' >
			
		</u-navbar>
		<view class="imgbox">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uGPwljIaEppyKAT1iQaW" mode=""></image>
		</view>
		<button class="button"  @click="getPhoneNumber"   >
			授权登录
		</button>
		<view class="tip">
			<image src="https://api.ccttiot.com/smartmeter/img/static/u4LEl3cUFgF9uN30ESnF" mode=""></image>
			我已同意并阅读《服务条款》《法律条款及隐私政策》
		</view>
	</view>
</template>

<script>
import { navigateToPage } from "../../utils/router.js";
import { wxLogin } from "../../api/auth/auth.js";
import { forceHideLoading, AutoLoadingManager } from "../../utils/loading-manager.js";

	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				titleTxt:"登录",
				chooseType:true,
				usertype:'',
				login:false
			}
		},
		onLoad() {
			// 初始化页面loading管理器
			this.pageLoading = new AutoLoadingManager()
		},
		onUnload() {
			// 页面卸载时清除loading
			forceHideLoading();
			if (this.pageLoading) {
				this.pageLoading.destroy()
			}
		},
		methods: {
			userType(num){
				this.chooseType=false
				this.login=true
				if(num===1){
					this.usertype='01'
				}else{
					this.usertype='00'
				}
			},
			getPhoneNumber() {
			    let that = this;
          uni.login({
            success(res) {
              if (res.code) {
                console.log('登录！', res);
                let data = {
                  loginCode: res.code,
                  appId:1,
                };
                
                // 显示页面loading
                if (that.pageLoading) {
                  that.pageLoading.show('登录中...')
                }
                
                wxLogin(data).then((res) => {
                  // 确保清除loading
                  if (that.pageLoading) {
                    that.pageLoading.hide()
                  }
                  forceHideLoading();
                  
                  if (res.code == 200) {
                    console.log(res,'resres');
                    uni.setStorageSync('token', res.token);
                    // 显示成功提示
                    uni.showToast({
                      title: '登录成功',
                      icon: 'success',
                      duration: 1500
                    });
                    // 延迟跳转，让用户看到成功提示
                    setTimeout(() => {
                    that.ceshi()
                    }, 1500);
                  } else {
                    // 处理业务逻辑错误
                    uni.showToast({
                      title: res.msg || '登录失败',
                      icon: 'none'
                    });
                  }
                }).catch((error) => {
                  // 确保清除loading
                  if (that.pageLoading) {
                    that.pageLoading.hide()
                  }
                  forceHideLoading();
                  
                  console.error('登录失败:', error);
                  uni.showToast({
                    title: '登录失败',
                    icon: 'none'
                  });
                });
              }
            },
            fail(err) {
              console.error('微信登录失败:', err);
              uni.showToast({
                title: '微信登录失败',
                icon: 'none'
              });
            }
          });
			},
      async ceshi() {
        // 确保清除loading状态
        if (this.pageLoading) {
          this.pageLoading.hide()
        }
        forceHideLoading();
        
        // 使用路由仓库跳转到首页
        navigateToPage('index');
      },
		}
	}
</script>

<style lang="scss" >
	page{
		background: #FFFFFF;
	}
	.page {
		position: relative; /* 添加相对定位 */
	}

	.imgbox {
		margin:102rpx auto ;
		width: 730rpx;
		height: 422rpx;
		z-index: 0;

		image {
			width: 730rpx;
			height: 422rpx;
		}
	}
	.button{
		margin-top: 200rpx;
		width: 586rpx;
		height: 90rpx;
		background: #4C97E7;
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	.tip{
		margin-top:128rpx ;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 20rpx;
		color: #979797;
		image{
			width: 26rpx;
			height: 26rpx;
		}
	}

	
</style>