group_lawyer_app/pages/mine/info/intro.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">
        <textarea 
          class="intro-textarea" 
          v-model="introValue" 
          placeholder="请输入账号简介" 
          maxlength="300"
          @input="handleInput"
          :auto-height="true"
        />
        <view class="char-count">{{ introValue.length }}/300</view>
      </view>
    </view>
  </view>
</template>

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

  export default {
    data() {
      return {
        introValue: '',
        originalIntro: '',
        statusBarHeight: 0,
        userId: null
      }
    },
    onLoad(options) {
      // 获取状态栏高度
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
      
      // 获取传入的简介和用户ID
      if (options.accountBlurb) {
        this.introValue = decodeURIComponent(options.accountBlurb)
        this.originalIntro = this.introValue
      }
      if (options.userId) {
        this.userId = options.userId
      }
    },
    computed: {
      navbarHeight() {
        // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(20rpx)
        return (this.statusBarHeight * 2) + 88 + 20
      },
      canConfirm() {
        // 与原始值不同时可以确认
        return this.introValue !== this.originalIntro
      }
    },
    methods: {
      handleInput(e) {
        this.introValue = e.detail.value
      },
      handleBack() {
        uni.navigateBack()
      },
      handleConfirm() {
        if (!this.canConfirm) {
          return
        }

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

        // 调用API更新简介
        const params = {
          id: this.userId || 1, // 如果没有传入userId，使用默认值1
          accountBlurb: this.introValue.trim()
        }

        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: #ffffff;
    border-radius: 16rpx;
    padding: 32rpx 30rpx;
    min-height: 500rpx;
    display: flex;
    flex-direction: column;
  }

  .intro-textarea {
    flex: 1;
    font-size: 32rpx;
    color: #000000;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: 100%;
    min-height: 400rpx;
    line-height: 1.6;
  }

  .char-count {
    position: absolute;
    bottom: 32rpx;
    right: 30rpx;
    font-size: 28rpx;
    color: #999999;
  }
</style>