<template>
	<view class="bindphone-page">
		<!-- 返回按钮 -->
		<view class="nav-back" @click="back">
			<text class="back-icon">‹</text>
		</view>
		
		<!-- 页面标题 -->
		<view class="nav-title">绑定手机号</view>
		
		<!-- 占位区域，背景图已包含Logo和欢迎语 -->
		<view class="logo-section"></view>
		
		<!-- 底部绑定区域 -->
		<view class="bindphone-bottom">
			<!-- 小程序授权手机号按钮 -->
			<button class="bind-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				绑定手机号
			</button>
			
			<!-- 跳过按钮 -->
			<view class="skip-btn" @click="back()">取消</view>
		</view>
	</view>
</template>

<script>
import { bindMobileByWx } from '@/common/server/auth.js';

export default {
	data() {
		return {}
	},
	methods: {
		back() {
			let that = this;
			uni.navigateBack({
				fail: function() {
					that.$customRouter.navigateTo('/pages/user/index', {}, 'reLaunch');
				}
			});
		},
		
		async getPhoneNumber(e) {
			if (!e.detail.code) {
				return uni.showToast({ title: '授权失败，请重试', icon: 'none' });
			}
			
			let that = this;
			uni.login({
				async success(res) {
					uni.checkSession({
						async success() {
							try {
								const result = await bindMobileByWx(e.detail.code);
								if (result.status == 1) {
									if (result.data?.token) {
										uni.setStorageSync('token', result.data.token);
									}
									uni.showToast({
										title: '绑定成功~',
										icon: 'success',
										success() {
											setTimeout(() => {
												uni.navigateBack({
													fail: function() {
														that.$customRouter.navigateTo('/pages/user/index', {}, 'reLaunch');
													}
												});
											}, 1000);
										}
									});
								} else {
									uni.showToast({ title: result.msg || '绑定失败', icon: 'none' });
								}
							} catch (error) {
								uni.showToast({ title: '绑定失败，请重试', icon: 'none' });
							}
						}
					});
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
	.bindphone-page {
		min-height: 100vh;
		background: url('https://youdas-1308826010.cos.ap-shanghai.myqcloud.com/static/web/static/common/bj.png') no-repeat center top / 100% auto;
		background-color: #FFFFFF;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	
	.nav-back {
		position: absolute;
		top: 88rpx;
		left: 32rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.back-icon {
			font-size: 40rpx;
			color: #333;
		}
	}
	
	.nav-title {
		position: absolute;
		top: 88rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 34rpx;
		color: #333;
		font-weight: 500;
	}
	
	.logo-section {
		flex: 1;
	}
	
	.bindphone-bottom {
		padding: 0 48rpx 80rpx;
		
		.bind-btn {
			width: 100%;
			height: 96rpx;
			background: #03D8F4;
			border-radius: 48rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			
			&::after {
				border: none;
			}
		}
		
		.skip-btn {
			margin-top: 32rpx;
			text-align: center;
			font-size: 28rpx;
			color: #999;
		}
	}
</style>
