xiangqinxiangmu/LiangZhiYUMao/components/butlogin.vue

<template>
	<view>
		<uni-popup ref="popup" type="bottom" :mask-click="false" >
		<view class="zheshow" >
			<view class="cen_ter">
				<view class="box_At">
					<view class="box_At_text">获取您的手机号</view>
					<view class="box_At_co">获取手机号信息，主要用于完善个人资料，向用户提供更好使用体验</view>
					<view class="Brn_S">
						<button class="btn_btns" @click="colse">取消</button>
						<button  class="btn" open-type="getPhoneNumber" @getphonenumber="btns" >
							登录
						</button>
					</view>
				</view>
			</view>
		</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		props:['zheshow'],
		data() {
			return {
				on_zheshows:false,
				zheshow1:false
			}
		},
		watch:{
			zheshow() {
				this.$refs.popup.open('bottom')
			},
		},
		methods: { 	
			colse(){this.$refs.popup.close()},
			btns(e){
				
				// 用户拒绝授权
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
					uni.showToast({title:'已取消授权登录',icon:'none'})
					this.$refs.popup.close()
					return
				}
				
				// 微信返回其他错误（如 errorCode: -10000 系统错误）
				if (e.detail.errMsg && e.detail.errMsg.includes('fail')) {
					
					// 开发环境提示：继续登录但使用默认手机号
					uni.showModal({
						title: '提示',
						content: '获取手机号失败（开发环境可忽略）\n是否继续登录？',
						success: (res) => {
							if (res.confirm) {
								// 用户选择继续，使用空code（后端会使用mock手机号）
								this.proceedLogin(null)
							} else {
								this.$refs.popup.close()
							}
						}
					})
					return
				}
				
				// 成功获取到code，继续登录
				this.proceedLogin(e.detail.code)
			},
			
			// 执行登录流程
			proceedLogin(code) {
				// 将微信返回的手机号 code 一并传递给父组件
				this.$parent.loset({
					code: code || 'mock_dev_code' // 如果没有code，使用mock
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zheshow{
		 width: 100%;height: 100%;background-color: rgba(0,0,0,0.3);position: fixed;top: 0;left: 0;
		 display: flex;align-items: center;align-items: flex-end;
		.mast{margin-top: 6rpx;}
		.Brn_S{width: 100%;height: 100rpx;display: flex;align-items: center;justify-content: space-around;margin: 20rpx 0;}
		.btn_btns, .btn{width: 45%;max-width: 300rpx;height: 80rpx;display: flex;align-items: center;
		 justify-content: center; border-radius: 10rpx;font-size: 30rpx;margin: 0 !important;box-sizing: border-box;}
		.btn_btns{background-color:  #fafafa;color: #39B54A;}
		.btn{background-color: #39B54A;color: #FFFFFF;}
		.imgs{position: absolute;right: 6%;width: 32rpx;height: 32rpx;}
		.img{width: 90rpx;height: 90rpx;border-radius: 50%;margin-left: 80rpx;image{width: 100%;height: 100%;border-radius: 50%;}}
		.cen_ter{
			width: 100%;min-height: 300rpx;border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;
			display: flex;align-items: center;justify-content: center;
			.box_At{width: 90%;padding: 40rpx 0;display: flex;flex-direction: column;.box_At_text{font-weight: bold;font-size: 30rpx}
			.box_At_co{font-size: 28rpx;color: #ababab;margin-top: 24rpx;}
			}}
	}
	button {
		border-radius: 10rpx;height: 80rpx !important;padding-left: 0!important ;
		padding-right: 0!important ;font-family: PingFang SC !important;
	}
	button:after {
	    top: 0;left: 0; border: 1px solid rgba(0,0,0,0) !important; -webkit-transform: scale(.5);
		transform: scale(.5); -webkit-transform-origin: 0 0; transform-origin: 0 0; box-sizing: border-box; border-radius: 10px;
	}	
</style>