aquagreen_wechat_app/src/pages/sales/basicInfo.vue

<template>
  <view class="app-container pb-20">
    <TopBar title="基本信息" show-back />

    <view class="px-4 py-4 space-y-4">
      <!-- 头像区域 -->
      <uni-card :is-shadow="true">
        <view class="flex items-center py-2">
          <view class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mr-4">
            <text class="uni-icons uniui-person-filled text-blue-500 text-2xl"></text>
          </view>
          <view>
            <text class="text-lg font-semibold text-gray-800 block">{{ userInfo?.name || '-' }}</text>
            <text class="text-sm text-gray-500">{{ userInfo?.department || '销售部' }} · {{ roleText }}</text>
          </view>
        </view>
      </uni-card>

      <!-- 基本信息 -->
      <uni-card title="基本信息" icon="uniui-person-filled" :is-shadow="true">
        <uni-list border="false">
          <uni-list-item title="姓名" :note="userInfo?.name || '-'" />
          <uni-list-item title="工号" :note="userInfo?.id || '-'" />
          <uni-list-item title="部门" :note="userInfo?.department || '销售部'" />
          <uni-list-item title="职位" :note="roleText" />
          <uni-list-item title="电话" :note="maskedPhone" />
          <uni-list-item title="邮箱" :note="email" />
          <uni-list-item title="状态" :right-text="'在职'" right-color="#34c759" />
        </uni-list>
      </uni-card>

      <!-- 操作按钮 -->
      <view class="pt-2">
        <button
          class="w-full py-3 bg-blue-500 text-white rounded-xl font-medium flex items-center justify-center"
          @click="handleEdit"
        >
          <text class="uni-icons uniui-compose mr-2"></text>
          编辑信息
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import TopBar from '../../components/common/TopBar.vue'
import UniCard from '../../components/uni-card/uni-card.vue'
import UniList from '../../components/uni-list/uni-list.vue'
import UniListItem from '../../components/uni-list/uni-list-item.vue'
import { useAuthStore } from '../../stores/auth'

const authStore = useAuthStore()

const userInfo = computed(() => authStore.userInfo)

const roleText = computed(() => {
  const roleMap: Record<string, string> = {
    sales: '销售经理',
    dispatch: '调度员',
    construction: '施工员'
  }
  return roleMap[authStore.userRole] || '销售经理'
})

const maskedPhone = computed(() => {
  const phone = userInfo.value?.phone || ''
  if (phone.length === 11) {
    return phone.slice(0, 3) + '****' + phone.slice(7)
  }
  return phone || '-'
})

const email = computed(() => {
  const name = userInfo.value?.name || 'user'
  return `${name.toLowerCase()}@qingdaofu.com`
})

function handleEdit() {
  uni.showToast({ title: '编辑功能开发中', icon: 'none' })
}
</script>