# uni-app 模板语法修复 - :class 方法调用问题

## 问题描述

编译时遇到以下错误：

```
Module Error (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) 
  Errors compiling template:
  :class不支持 getStatusClass(task.taskStatus) 语法
```

## 问题原因

在 uni-app 的模板中，`:class` 不支持直接调用方法，例如：

```vue
<!-- ❌ 错误写法 -->
<view class="task-status" :class="getStatusClass(task.taskStatus)">
```

这是 uni-app 的语法限制，与标准 Vue.js 不同。

## 解决方案

将方法调用改为表达式拼接字符串的形式，使用三元运算符（条件表达式）来实现：

```vue
<!-- ✅ 正确写法 -->
<view class="task-status" :class="task.taskStatus === 'PENDING' ? 'status-pending' : task.taskStatus === 'DEPARTING' ? 'status-departing' : task.taskStatus === 'ARRIVED' ? 'status-arrived' : task.taskStatus === 'RETURNING' ? 'status-returning' : task.taskStatus === 'COMPLETED' ? 'status-completed' : task.taskStatus === 'CANCELLED' ? 'status-cancelled' : task.taskStatus === 'IN_PROGRESS' ? 'status-in-progress' : 'status-default'">
```

## 修改文件

### 1. app/pages/index.vue

**修改前：**
```vue
<view class="task-status" :class="getStatusClass(task.taskStatus)">
  {{ getStatusText(task.status) }}
</view>
```

**修改后：**
```vue
<view class="task-status" :class="task.taskStatus === 'PENDING' ? 'status-pending' : task.taskStatus === 'DEPARTING' ? 'status-departing' : task.taskStatus === 'ARRIVED' ? 'status-arrived' : task.taskStatus === 'RETURNING' ? 'status-returning' : task.taskStatus === 'COMPLETED' ? 'status-completed' : task.taskStatus === 'CANCELLED' ? 'status-cancelled' : task.taskStatus === 'IN_PROGRESS' ? 'status-in-progress' : 'status-default'">
  {{ getStatusText(task.status) }}
</view>
```

### 2. app/pages/task/index.vue

**修改前：**
```vue
<view class="task-status" :class="getStatusClass(task.taskStatus)">
  {{ getStatusText(task.taskStatus) }}
</view>
```

**修改后：**
```vue
<view class="task-status" :class="task.taskStatus === 'PENDING' ? 'status-pending' : task.taskStatus === 'DEPARTING' ? 'status-departing' : task.taskStatus === 'ARRIVED' ? 'status-arrived' : task.taskStatus === 'RETURNING' ? 'status-returning' : task.taskStatus === 'COMPLETED' ? 'status-completed' : task.taskStatus === 'CANCELLED' ? 'status-cancelled' : task.taskStatus === 'IN_PROGRESS' ? 'status-in-progress' : 'status-default'">
  {{ getStatusText(task.taskStatus) }}
</view>
```

### 3. app/pages/task/detail.vue

**修改前：**
```vue
<view class="value status" :class="taskDetail.taskStatus.toLowerCase()">
  {{ getStatusText(taskDetail.taskStatus) }}
</view>
```

**修改后：**
```vue
<view class="value status" :class="taskDetail.taskStatus === 'PENDING' ? 'pending' : taskDetail.taskStatus === 'DEPARTING' ? 'in_progress' : taskDetail.taskStatus === 'ARRIVED' ? 'in_progress' : taskDetail.taskStatus === 'RETURNING' ? 'in_progress' : taskDetail.taskStatus === 'IN_PROGRESS' ? 'in_progress' : taskDetail.taskStatus === 'COMPLETED' ? 'completed' : taskDetail.taskStatus === 'CANCELLED' ? 'cancelled' : ''">
  {{ getStatusText(taskDetail.taskStatus) }}
</view>
```

**说明：**
- `detail.vue` 中使用的是小写的状态类名（`pending`, `in_progress`, `completed`, `cancelled`）
- 将多个进行中的状态（`DEPARTING`, `ARRIVED`, `RETURNING`, `IN_PROGRESS`）都映射为 `in_progress` 类

## 状态类名映射

原 `getStatusClass` 方法的映射逻辑：

```javascript
getStatusClass(status) {
  const statusClassMap = {
    'PENDING': 'status-pending',        // 待处理
    'DEPARTING': 'status-departing',    // 出发中
    'ARRIVED': 'status-arrived',        // 已到达
    'RETURNING': 'status-returning',    // 返程中
    'COMPLETED': 'status-completed',    // 已完成
    'CANCELLED': 'status-cancelled',    // 已取消
    'IN_PROGRESS': 'status-in-progress' // 处理中
  }
  return statusClassMap[status] || 'status-default'
}
```

现在直接在模板中使用三元表达式实现相同的映射逻辑。

## uni-app 模板语法限制

### 不支持的语法

1. **方法调用** ❌
   ```vue
   :class="getStatusClass(task.taskStatus)"
   ```

2. **复杂表达式** ❌
   ```vue
   :style="{ color: getColor(item.type) }"
   ```

### 支持的语法

1. **简单属性访问** ✅
   ```vue
   :class="task.statusClass"
   ```

2. **三元运算符** ✅
   ```vue
   :class="task.status === 'PENDING' ? 'status-pending' : 'status-default'"
   ```

3. **数组/对象字面量** ✅
   ```vue
   :class="[task.baseClass, task.statusClass]"
   :class="{ 'active': task.isActive, 'disabled': task.isDisabled }"
   ```

4. **计算属性** ✅
   ```vue
   :class="taskStatusClass"
   
   // 在 computed 中定义
   computed: {
     taskStatusClass() {
       return this.getStatusClass(this.task.taskStatus)
     }
   }
   ```

## 替代方案比较

### 方案1：三元运算符（已采用）

**优点：**
- 无需修改 script 部分
- 逻辑直观，在模板中可见

**缺点：**
- 表达式较长，代码冗余
- 多个状态时可读性稍差

### 方案2：计算属性

```vue
<template>
  <view class="task-status" :class="statusClass">
</template>

<script>
export default {
  computed: {
    statusClass() {
      return this.getStatusClass(this.task.taskStatus)
    }
  }
}
</script>
```

**优点：**
- 模板更简洁
- 逻辑封装在 script 中

**缺点：**
- 需要为列表中每个项目定义计算属性
- 在 `v-for` 中使用时复杂度较高

### 方案3：预处理数据

```javascript
loadTasks() {
  listTask(this.queryParams).then(response => {
    this.taskList = response.rows.map(task => ({
      ...task,
      statusClass: this.getStatusClass(task.taskStatus)
    }))
  })
}
```

**优点：**
- 模板最简洁
- 性能最好（预计算一次）

**缺点：**
- 需要在数据加载时处理
- 增加了数据对象的字段

## 最佳实践

### 对于列表渲染（推荐方案1或3）

```vue
<!-- 方案1：三元运算符 -->
<view v-for="task in taskList" :key="task.id">
  <view :class="task.status === 'PENDING' ? 'status-pending' : 'status-default'">
  </view>
</view>

<!-- 方案3：预处理数据 -->
<view v-for="task in taskList" :key="task.id">
  <view :class="task.statusClass">
  </view>
</view>
```

### 对于单个元素（推荐方案2）

```vue
<!-- 方案2：计算属性 -->
<template>
  <view :class="taskStatusClass">
</template>

<script>
export default {
  computed: {
    taskStatusClass() {
      return this.getStatusClass(this.currentTask.taskStatus)
    }
  }
}
</script>
```

## 注意事项

1. **保留方法定义**
   - 虽然模板中不能直接调用 `getStatusClass` 方法
   - 但该方法仍可用于其他场景（如预处理数据）
   - 建议保留在代码中

2. **表达式长度**
   - uni-app 对模板表达式有长度限制
   - 过长的表达式可能导致编译警告
   - 建议使用预处理数据方案

3. **性能考虑**
   - 三元运算符在每次渲染时都会计算
   - 大列表建议使用预处理方案
   - 计算属性会缓存结果

## 相关文档

- [uni-app 模板语法限制](https://uniapp.dcloud.net.cn/tutorial/vue-api.html#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95)
- [Vue 条件渲染](https://cn.vuejs.org/guide/essentials/conditional.html)
- [Vue Class 与 Style 绑定](https://cn.vuejs.org/guide/essentials/class-and-style.html)

## 更新日志

- **2025-01-25**: 修复 `:class` 方法调用语法错误
  - 文件: `app/pages/index.vue` (第57行)
  - 文件: `app/pages/task/index.vue` (第115行)
  - 文件: `app/pages/task/detail.vue` (第22行)
  - 方法: 将方法调用改为三元表达式
  - 原因: uni-app 模板不支持方法调用和 `.toLowerCase()` 等字符串方法