group_lawyer_app/pages/mine/info/phone.vue

<template>
  <view class="container" :style="{paddingTop: navbarHeight + 'rpx'}">
    <!-- 顶部渐变背景 -->
    <view class="top-gradient"></view>

    <!-- 自定义导航栏 -->
    <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
      <view class="navbar-content">
        <view class="navbar-back" @click="handleBack">
          <view class="iconfont icon-right back-icon"></view>
        </view>
        <text class="navbar-title">手机号码</text>
        <view class="navbar-right" @click="handleConfirm">
          <text class="confirm-text" :class="{ disabled: !canConfirm }">确定</text>
        </view>
      </view>
    </view>

    <!-- 输入区域 -->
    <view class="input-container">
      <view class="input-wrapper">
        <input 
          class="phone-input" 
          v-model="phoneValue" 
          placeholder="请输入手机号码" 
          maxlength="11"
          type="number"
          @input="handleInput"
        />
        <view class="char-count">{{ phoneValue.length }}/11</view>
      </view>
    </view>
  </view>
</template>

<script>
  import { editLawyerUser } from "@/api/api"

  export default {
    data() {
      return {
        phoneValue: '',
        originalPhone: '',
        statusBarHeight: 0,
        userId: null
      }
    },
    onLoad(options) {
      // 获取状态栏高度
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
      
      // 获取传入的手机号码和用户ID
      if (options.phone) {
        this.phoneValue = decodeURIComponent(options.phone)
        this.originalPhone = this.phoneValue
      }
      if (options.userId) {
        this.userId = options.userId
      }
    },
    computed: {
      navbarHeight() {
        // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(20rpx)
        return (this.statusBarHeight * 2) + 88 + 20
      },
      canConfirm() {
        // 有输入且与原始值不同时可以确认
        return this.phoneValue.trim().length > 0 && this.phoneValue !== this.originalPhone
      }
    },
    methods: {
      handleInput(e) {
        this.phoneValue = e.detail.value
      },
      validatePhone(phone) {
        // 验证手机号码格式：11位数字，以1开头
        const phoneRegex = /^1[3-9]\d{9}$/
        return phoneRegex.test(phone)
      },
      handleBack() {
        uni.navigateBack()
      },
      handleConfirm() {
        if (!this.canConfirm) {
          return
        }

        const trimmedPhone = this.phoneValue.trim()
        if (trimmedPhone.length === 0) {
          uni.showToast({
            title: '请输入手机号码',
            icon: 'none'
          })
          return
        }

        // 验证手机号码格式
        if (!this.validatePhone(trimmedPhone)) {
          uni.showToast({
            title: '请输入正确的手机号码',
            icon: 'none'
          })
          return
        }

        // 显示加载提示
        uni.showLoading({
          title: '保存中...',
          mask: true
        })

        // 调用API更新手机号码
        const params = {
          id: this.userId || 1, // 如果没有传入userId，使用默认值1
          phone: trimmedPhone
        }

        editLawyerUser(params).then(response => {
          uni.hideLoading()
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
          // 延迟返回，让用户看到成功提示
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        }).catch(error => {
          uni.hideLoading()
          console.error('更新手机号码失败:', error)
          uni.showToast({
            title: error.message || '保存失败，请重试',
            icon: 'none'
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }

  .container {
    min-height: 100vh;
    padding: 0 30rpx 20rpx 30rpx;
    background-color: #f5f5f5;
    position: relative;

    // 顶部渐变背景
    .top-gradient {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 800rpx;
      background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.05) 50%, transparent 100%);
      z-index: 0;
      pointer-events: none;
    }

    // 自定义导航栏
    .custom-navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999;
      background-color: transparent;
      pointer-events: none;

      .navbar-content {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 88rpx;
        pointer-events: auto;
        position: relative;

        .navbar-back {
          position: absolute;
          left: 30rpx;
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .back-icon {
            font-size: 36rpx;
            color: #000000;
            transform: rotate(180deg);
          }
        }

        .navbar-title {
          font-size: 36rpx;
          font-weight: 500;
          color: #000000;
        }

        .navbar-right {
          position: absolute;
          right: 30rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;

          .confirm-text {
            font-size: 32rpx;
            color: #007AFF;
            font-weight: 400;

            &.disabled {
              color: #cccccc;
            }
          }
        }
      }
    }
  }

  // 输入区域
  .input-container {
    padding: 40rpx 0;
    margin-top: 20rpx;
  }

  .input-wrapper {
    position: relative;
    background-color: #f5f5f5;
    border-radius: 16rpx;
    padding: 32rpx 30rpx;
    min-height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .phone-input {
    flex: 1;
    font-size: 32rpx;
    color: #000000;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
  }

  .char-count {
    font-size: 28rpx;
    color: #999999;
    margin-left: 20rpx;
    white-space: nowrap;
  }
</style>