group_lawyer_app/pages/mine/info/index.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-placeholder"></view>
      </view>
    </view>

    <!-- 第一个卡片：基本信息 -->
    <view class="info-card">
      <view class="info-item" @click="handleAvatar">
        <view class="item-label">头像</view>
        <view class="item-value">
          <image v-if="user.avatar" :src="user.avatar" class="avatar-img" mode="aspectFill"></image>
          <view v-else class="avatar-placeholder">
            <view class="iconfont icon-people"></view>
          </view>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" @click="handleEdit('name')">
        <view class="item-label">姓名</view>
        <view class="item-value">
          <text class="value-text">{{ user.nickName || user.userName || '未设置' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" @click="handleEdit('intro')">
        <view class="item-label">简介</view>
        <view class="item-value">
          <text class="value-text placeholder">{{ user.intro || '添加一条简介' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" @click="handleEdit('phone')">
        <view class="item-label">手机号码</view>
        <view class="item-value">
          <text class="value-text">{{ user.phonenumber || '未设置' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item">
        <view class="item-label">接单状态</view>
        <view class="item-value">
          <text class="status-text" :class="{ active: orderStatus }">{{ orderStatus ? '接单中' : '暂停接单' }}</text>
          <switch :checked="orderStatus" @change="handleOrderStatusChange" color="#007AFF" />
        </view>
      </view>
    </view>

    <!-- 第二个卡片：专业和财务信息 -->
    <view class="info-card">
      <view class="info-item" @click="handleEdit('practiceTime')">
        <view class="item-label">从业时间</view>
        <view class="item-value">
          <text class="value-text">{{ user.practiceTime || '未设置' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" @click="handleEdit('professionalField')">
        <view class="item-label">专业领域</view>
        <view class="item-value">
          <text class="value-text">{{ user.professionalField || '未设置' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" @click="handleEdit('legalScenarios')">
        <view class="item-label">法律场景</view>
        <view class="item-value">
          <text class="value-text">{{ user.legalScenarios || '未设置' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" @click="handleEdit('lawFirm')">
        <view class="item-label">所属律所</view>
        <view class="item-value">
          <text class="value-text">{{ user.lawFirm || '未设置' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" @click="handleEdit('receivingAccount')">
        <view class="item-label">收款账户</view>
        <view class="item-value">
          <text class="value-text">{{ user.receivingAccount || '未设置' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
      <view class="info-divider"></view>
      <view class="info-item" @click="handleEdit('address')">
        <view class="item-label">联系地址</view>
        <view class="item-value">
          <text class="value-text">{{ user.address || '未设置' }}</text>
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
    </view>

    <!-- 第三个卡片：账号管理 -->
    <view class="info-card">
      <view class="info-item" @click="handleDeregister">
        <view class="item-label">注销账号</view>
        <view class="item-value">
          <view class="iconfont icon-right arrow-icon"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { getLawyerInfo, editLawyerUser } from "@/api/api"
  import upload from '@/utils/upload'
  import config from '@/config'

  export default {
    data() {
      return {
        user: {},
        orderStatus: true,
        statusBarHeight: 0
      }
    },
    onLoad() {
      // 获取状态栏高度
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
      this.getLawyerInfoData()
    },
    computed: {
      navbarHeight() {
        // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(20rpx)
        return (this.statusBarHeight * 2) + 88 + 20
      }
    },
    methods: {
      getLawyerInfoData() {
        getLawyerInfo({ lawyerId: 1 }).then(response => {
          // 处理返回的律师信息
          if (response.data) {
            // 合并律师信息到 user 对象
            this.user = { ...this.user, ...response.data }
            // 如果有接单状态字段，使用它
            if (response.data.orderStatus !== undefined) {
              this.orderStatus = response.data.orderStatus
            }
          }
        }).catch(error => {
          console.error('获取律师信息失败:', error)
        })
      },
      handleAvatar() {
        const _this = this
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album'],
          success: function(res) {
            const tempFilePath = res.tempFilePaths[0]
            // 显示上传中提示
            uni.showLoading({
              title: '上传中...',
              mask: true
            })
            
            // 使用原本的上传方法
            // upload({
            //   url: '/file/upload',
            //   name: 'avatarfile',
            //   filePath: tempFilePath
            // }).then(uploadRes => {
            //   // 上传成功后，获取图片URL
            //   let headImg = ''
            //   if (uploadRes.url) {
            //     headImg = uploadRes.url
            //   } else if (uploadRes.fileName) {
            //     headImg = config.baseUrl + uploadRes.fileName
            //   } else if (uploadRes.data && uploadRes.data.url) {
            //     headImg = uploadRes.data.url.startsWith('http') ? uploadRes.data.url : config.baseUrl + uploadRes.data.url
            //   } else if (uploadRes.data) {
            //     headImg = typeof uploadRes.data === 'string' ? uploadRes.data : uploadRes.data.url || uploadRes.data.imgUrl || ''
            //   }
              
            //   if (!headImg) {
            //     throw new Error('获取图片URL失败')
            //   }
              
            //   // 调用保存接口
            //   return editLawyerUser({
            //     id: 1,
            //     headImg: headImg
            //   }).then(saveRes => {
            //     // 更新本地头像显示
            //     if (saveRes.data && saveRes.data.headImg) {
            //       _this.user.avatar = saveRes.data.headImg
            //       _this.user.headImg = saveRes.data.headImg
            //     } else {
            //       // 如果返回数据中没有headImg，使用上传返回的URL
            //       _this.user.avatar = headImg
            //       _this.user.headImg = headImg
            //     }
            //     return saveRes
            //   })
            // }).then(saveRes => {
            //   uni.hideLoading()
            //   _this.$modal.msgSuccess('头像上传成功')
            //   // 刷新数据
            //   _this.getLawyerInfoData()
            // }).catch(error => {
            //   uni.hideLoading()
            //   console.error('上传失败:', error)
            //   _this.$modal.msgError('头像上传失败，请重试')
            // })
          },
          fail: function(err) {
            console.error('选择图片失败:', err)
            _this.$modal.msgError('选择图片失败')
          }
        })
      },
      handleEdit(field) {
        // 跳转到编辑页面或显示编辑弹窗
        this.$tab.navigateTo('/pages/mine/info/edit')
      },
      handleOrderStatusChange(e) {
        this.orderStatus = e.detail.value
        // 这里可以调用API更新接单状态
        // updateOrderStatus(this.orderStatus)
      },
      handleDeregister() {
        this.$modal.confirm('确定要注销账号吗？注销后将无法恢复。').then(() => {
          // 调用注销账号API
          this.$modal.showToast('注销账号功能开发中')
        })
      },
      handleBack() {
        uni.navigateBack()
      }
    }
  }
</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-placeholder {
          position: absolute;
          right: 30rpx;
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
  }

  .info-card {
    background-color: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);

    .info-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 30rpx;
      min-height: 100rpx;

      .item-label {
        font-size: 32rpx;
        color: #000000;
        font-weight: 400;
      }

      .item-value {
        display: flex;
        align-items: center;
        flex: 1;
        justify-content: flex-end;

        .avatar-img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }

        .avatar-placeholder {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          background-color: #e0e0e0;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 20rpx;

          .iconfont {
            font-size: 40rpx;
            color: #999999;
          }
        }

        .value-text {
          font-size: 32rpx;
          color: #000000;
          margin-right: 20rpx;

          &.placeholder {
            color: #999999;
          }
        }

        .status-text {
          font-size: 32rpx;
          color: #999999;
          margin-right: 20rpx;

          &.active {
            color: #007AFF;
          }
        }

        .arrow-icon {
          font-size: 28rpx;
          color: #cccccc;
        }
      }
    }

    .info-divider {
      height: 1rpx;
      background-color: #f0f0f0;
      margin: 0 30rpx;
    }
  }
</style>