aquagreen_wechat_app/src/subPackages/pages-customer/customerDetail.vue

<template>
  <view class="app-container detail-page pb-24">
    <TopBar title="客户详情" show-back />

    <view v-if="loading" class="py-20 text-center">
      <text class="text-gray-400">加载中...</text>
    </view>

    <view v-else-if="!customer" class="px-4 py-6">
      <EmptyState text="客户不存在" />
    </view>

    <view v-else class="px-4 py-4 gap-y-4">
      <!-- 基本信息 -->
      <view class="card p-4">
        <view class="flex items-center justify-between mb-4">
          <view class="flex-1 min-w-0 mr-3">
            <text class="text-lg font-bold text-gray-800 truncate">{{ customer.customerName }}</text>
            <text v-if="customer.createTime" class="text-xs text-gray-400 block mt-1">
              创建于 {{ formatDate(customer.createTime, 'YYYY-MM-DD') }}
            </text>
          </view>
          <view
            class="status-pill px-2.5 py-0.5 rounded-full text-xs flex-shrink-0"
            :style="{ backgroundColor: statusBg(customer.status), color: statusColor(customer.status) }"
          >
            {{ statusText(customer.status) }}
          </view>
        </view>

        <view class="flex items-center justify-between py-3 border-t border-gray-100">
          <view class="flex items-center">
            <text class="uni-icons uniui-person-filled text-primary mr-2"></text>
            <text class="text-sm text-gray-500">联系人</text>
          </view>
          <text class="text-sm text-gray-800">{{ customer.contactName || '-' }}</text>
        </view>
        <view class="flex items-center justify-between py-3 border-t border-gray-100">
          <view class="flex items-center">
            <text class="uni-icons uniui-phone-filled text-primary mr-2"></text>
            <text class="text-sm text-gray-500">联系电话</text>
          </view>
          <view class="flex items-center" @click="callPhone(customer.phone)">
            <text class="text-sm text-primary">{{ customer.phone || '-' }}</text>
            <text v-if="customer.phone" class="uni-icons uniui-arrowright text-gray-400 ml-1"></text>
          </view>
        </view>
      </view>

      <!-- 地址信息 -->
      <view class="card p-4">
        <view class="detail-section-title">
          <text class="uni-icons uniui-location-filled text-primary mr-2"></text>
          <text>地址信息</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">省市区</text>
          <text class="detail-value text-right flex-1">{{ region || '-' }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">街道</text>
          <text class="detail-value text-right flex-1">{{ customer.street || '-' }}</text>
        </view>
        <view class="detail-row">
          <text class="detail-label">详细地址</text>
          <text class="detail-value text-right flex-1">{{ customer.detailAddress || '-' }}</text>
        </view>
        <view v-if="customer.latitude || customer.longitude" class="detail-row">
          <text class="detail-label">经纬度</text>
          <text class="detail-value text-right flex-1">{{ customer.latitude || '-' }}, {{ customer.longitude || '-' }}</text>
        </view>
      </view>

      <!-- 备注 -->
      <view v-if="customer.remark" class="card p-4">
        <view class="detail-section-title">
          <text class="uni-icons uniui-compose text-primary mr-2"></text>
          <text>备注</text>
        </view>
        <text class="text-sm text-gray-600">{{ customer.remark }}</text>
      </view>

      <!-- 关联数据提示 -->
      <view class="card p-4">
        <view class="detail-section-title">
          <text class="uni-icons uniui-info-filled text-primary mr-2"></text>
          <text>关联项目 / 任务</text>
        </view>
        <text class="text-xs text-gray-400">后端暂未提供按客户筛选的接口，待补充后展示</text>
      </view>

      <!-- 操作按钮 -->
      <view class="px-4 pt-2 pb-6 flex gap-3">
        <button
          class="flex-1 py-4 btn-ghost rounded-2xl text-base font-semibold flex items-center justify-center"
          @click="goToEdit"
        >
          <text class="uni-icons uniui-compose mr-2"></text>
          编辑
        </button>
        <button
          class="flex-1 py-4 btn-danger-ghost rounded-2xl text-base font-semibold flex items-center justify-center"
          @click="onDelete"
        >
          <text class="uni-icons uniui-trash mr-2"></text>
          删除
        </button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import type { Customer } from '../../types'
import { getCustomerDetail, deleteCustomer } from '../../api/customer'
import {
  formatDate,
  getCustomerStatusText,
  getCustomerStatusColor,
  getCustomerStatusBgColor
} from '../../utils'
import TopBar from '../../components/common/TopBar.vue'
import EmptyState from '../../components/common/EmptyState.vue'

const customer = ref<Customer | null>(null)
const loading = ref(true)
const customerId = ref<number | string>('')

const statusText = getCustomerStatusText
const statusColor = getCustomerStatusColor
const statusBg = getCustomerStatusBgColor

const region = computed(() => {
  if (!customer.value) return ''
  const parts = [customer.value.province, customer.value.city, customer.value.district].filter(Boolean)
  return parts.join('')
})

function callPhone(phone?: string) {
  if (!phone) return
  uni.makePhoneCall({ phoneNumber: phone })
}

function goToEdit() {
  uni.navigateTo({ url: `/subPackages/pages-customer/customerForm?id=${customerId.value}` })
}

function onDelete() {
  uni.showModal({
    title: '确认删除',
    content: '删除后无法恢复，是否继续？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await deleteCustomer(customerId.value)
          uni.showToast({ title: '已删除', icon: 'success' })
          setTimeout(() => uni.navigateBack(), 800)
        } catch (e) {
          uni.showToast({ title: '删除失败', icon: 'none' })
        }
      }
    }
  })
}

async function loadDetail(id: number | string) {
  loading.value = true
  try {
    customer.value = await getCustomerDetail(id)
  } catch (e) {
    customer.value = null
  } finally {
    loading.value = false
  }
}

onLoad((options) => {
  const id = options?.id
  if (id) {
    customerId.value = id
    loadDetail(id)
  } else {
    loading.value = false
  }
})
</script>

<style scoped>
.detail-page {
  background-color: #f6fbf9;
}

.card {
  border-radius: 20px;
  margin-bottom: 0;
  border: 1px solid rgba(164, 216, 152, 0.28);
  box-shadow: 0 14px 34px -18px rgba(54, 143, 111, 0.35);
}

.detail-section-title {
  padding: 0;
  border-bottom: none;
  margin-bottom: 12px;
}
.text-primary {
  color: #368f6f;
}

.status-pill {
  font-weight: 500;
}

.btn-ghost {
  background-color: #ffffff;
  border: 1px solid #368f6f;
  color: #368f6f;
}
.btn-ghost:active {
  background-color: rgba(164, 216, 152, 0.12);
}
.btn-danger-ghost {
  background-color: #ffffff;
  border: 1px solid #fca5a5;
  color: #ef4444;
}
.btn-danger-ghost:active {
  background-color: #fef2f2;
}
</style>