<template>
	<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
  <view class="container">
    <!-- 顶部导航栏 -->
<!--    <view class="header">-->
<!--      <view class="back-icon" @click="goBack">-->
<!--        <image class="icon" :src="require('@/static/images/icons/back.png')" mode="aspectFit"></image>-->
<!--      </view>-->
<!--      <text class="title">更换手机号</text>-->
<!--    </view>-->

    <!-- 主要内容区域 -->
    <view class="content">
      <!-- 手机图标区域 -->
      <view class="phone-icon-wrapper">
        <view class="circle-bg"></view>
        <image class="phone-icon" :src="require('@/static/images/my/phone.png')" mode="aspectFit"></image>
      </view>

      <!-- 手机号信息 -->
      <view class="phone-info">
        <text class="label">已绑定手机号</text>
        <text class="phone-number">{{currentPhone}}</text>
      </view>

      <!-- 提示信息 -->
      <view class="tips">
        <view class="tip-item">
          <text class="number">1.</text>
          <text class="text">更换后将使用新的手机号登录</text>
        </view>
        <view class="tip-item">
          <text class="number">2.</text>
          <text class="text">原手机号记录全部转移至新手机号</text>
        </view>
      </view>

      <!-- 更换按钮 -->
      <button class="change-btn" @click="handleChangePhone">更换手机号</button>
    </view>
  </view>
</template>

<script>
	
	import {
		getUserProfile
	} from "@/api/system/user"
export default {
  data() {
    return { 
		fontValue:uni.getStorageSync('fontSize') || 8,
		currentPhone: ''
    }
  },
	onLoad() {
		this.getUserInfo()
	},
  methods: {
		getUserInfo() {
			getUserProfile({'userId':uni.getStorageSync('userId'),"sourceType":7}).then(res => {
				this.currentPhone = res.data.mobile
			})
		},
    goBack() {
      uni.navigateBack()
    },
    handleChangePhone() {
      uni.navigateTo({
        url: '/pages/mine/me/updatePhone'
      })
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #fff;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  background: #fff;
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  padding-top: 44px;
  z-index: 100;

  .back-icon {
    padding: 20rpx;
    margin-left: -20rpx;

    .icon {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .title {
    flex: 1;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #333;
    margin-right: 60rpx;
  }
}

.content {
  padding: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone-icon-wrapper {
  margin-top: 20px;
  position: relative;
  width: 400rpx;
  height: 400rpx;
  margin-bottom: 48rpx;

  //.circle-bg {
  //  position: absolute;
  //  top: 0;
  //  left: 0;
  //  width: 100%;
  //  height: 100%;
  //  border-radius: 50%;
  //  background: radial-gradient(circle, rgba(255,129,38,0.1) 0%, rgba(255,129,38,0.05) 50%, rgba(255,129,38,0) 100%);
  //}

  .phone-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400rpx;
    height: 400rpx;
    color: #FF8126;
  }
}

.phone-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 48rpx;

  .label {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 16rpx;
  }

  .phone-number {
    font-size: 40rpx;
    color: #333;
    font-weight: 500;
  }
}

.tips {
  width: 100%;
  margin-bottom: 80rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .tip-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;
    width: 80%;  /* 控制提示文本的宽度，可以根据需要调整 */

    &:last-child {
      margin-bottom: 0;
    }

    .number {
      font-size: 28rpx;
      color: #999;
      margin-right: 8rpx;
    }

    .text {
      font-size: 28rpx;
      color: #999;
      flex: 1;
    }
  }
}

.change-btn {
  width: 100%;
  height: 72rpx;
  background: #FF8126;
  color: #fff;
  font-size: 28rpx;
  font-weight: 500;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;

  &:active {
    opacity: 0.9;
  }
}
</style>

