python后端结合uniapp与uview组件tabs，实现自定义导航按钮与小标签颜色控制

实现效果（红框内）：

后端api如下：

@task_api.route('/user/task/states_list', methods=['POST', 'GET'])
@visitor_token_required
def task_states(user):
    name_list = ['待接单', '设计中', '交付中', '已完成', '全部']
    data = []
    color = ['#F04864', '#F04864', '#F04864', '#19be6b', '#19be6b']
    c_n = 0
    for i in name_list:
        item = {
            'name': i,
            'badge': {
                'color': '#fff',
                'bgColor': color[c_n],
                'value': get_task_states_num(i, user, False)
            }
        }
        data.append(item)
        c_n += 1
    return reg_func(200, data, '查询成功')

输出结果：

{
  "code": 200,
  "data": [
    {
      "badge": {
        "bgColor": "#F04864",
        "color": "#fff",
        "value": 0
      },
      "name": "待接单"
    },
    {
      "badge": {
        "bgColor": "#F04864",
        "color": "#fff",
        "value": 2
      },
      "name": "设计中"
    },
    {
      "badge": {
        "bgColor": "#F04864",
        "color": "#fff",
        "value": 11
      },
      "name": "交付中"
    },
    {
      "badge": {
        "bgColor": "#19be6b",
        "color": "#fff",
        "value": 22
      },
      "name": "已完成"
    },
    {
      "badge": {
        "bgColor": "#19be6b",
        "color": "#fff",
        "value": 38
      },
      "name": "全部"
    }
  ],
  "msg": "查询成功",
  "time": "2024-06-09 15:07:47"
}

这段代码定义了一个 Flask 路由，处理用户任务状态的获取。下面是对这段代码的详细解释：

路由定义和装饰器

@task_api.route('/user/task/states_list', methods=['POST', 'GET'])
@visitor_token_required
def task_states(user):

• @task_api.route('/user/task/states_list', methods=['POST', 'GET'])：这是一个路由装饰器，用来定义访问该函数的 URL 和方法。在这里，定义了一个访问路径 /user/task/states_list，支持 POST 和 GET 两种请求方法。
• @visitor_token_required：这是一个自定义的装饰器，用来验证访问该路由的用户是否拥有合法的访问权限。通常，这个装饰器会检查用户的令牌(token)，确保用户是经过认证的。
• def task_states(user)：定义了一个名为 task_states 的函数，并且 user 是一个参数。user 参数一般是从 @visitor_token_required 装饰器中获取到的经过验证的用户信息。

函数内部逻辑

name_list = ['待接单', '设计中', '交付中', '已完成', '全部']
data = []
color = ['#F04864', '#F04864', '#F04864', '#19be6b', '#19be6b']
c_n = 0

• name_list：这是一个任务状态的列表，包含了可能的任务状态名称，如“待接单”、“设计中”、“交付中”、“已完成”和“全部”。
• data：这是一个空列表，稍后将用来存储每个任务状态对应的数据信息。
• color：这是一个颜色代码列表，每个任务状态对应一个背景颜色，用于标识任务状态的颜色。
• c_n：这是一个计数器变量，用来遍历 color 列表的索引。

遍历状态列表并生成数据

for i in name_list:
    item = {
        'name': i,
        'badge': {
            'color': '#fff',
            'bgColor': color[c_n],
            'value': get_task_states_num(i, user, False)
        }
    }
    data.append(item)
    c_n += 1

• for i in name_list：遍历 name_list 列表中的每一个状态名称。
• item：定义一个字典，存储当前任务状态的详细信息，包括状态名称 name 和一个徽章 badge。
  • name：任务状态名称。
  • badge：一个包含颜色和数值信息的字典。
    • color：徽章上的文本颜色，这里固定为白色 #fff。
    • bgColor：徽章的背景颜色，从 color 列表中按顺序获取。
    • value：调用 get_task_states_num 函数获取对应任务状态的数量，这个函数可能会查询数据库或其他数据源来获取 user 用户对应状态 i 的任务数量。
• data.append(item)：将构造好的 item 添加到 data 列表中。
• c_n += 1：计数器 c_n 加 1，用于下一个任务状态的颜色获取。

返回结果

return reg_func(200, data, '查询成功')

• reg_func：这是一个自定义函数，用来格式化 API 的返回结果。
  • 200：表示 HTTP 状态码 200，通常表示请求成功。
  • data：传入的任务状态列表数据。
  • '查询成功'：消息，表示查询操作成功。

主要逻辑总结

• 验证用户身份。
• 生成一个任务状态列表，每个状态包含状态名称、颜色和对应任务数量。
• 返回生成的任务状态列表数据。

代码的主要目的

这个路由用于返回用户任务的不同状态及其对应的任务数量，并为每个状态设置特定的颜色，便于前端展示。

uniapp代码如下：

<u-tabs :list="states_list" lineWidth="50" @click="click_tabs" :scrollable="false"
					itemStyle="padding:20rpx 2rpx;"></u-tabs>

这段代码是一个 Vue.js 模板中的组件调用，具体使用了一个自定义的 组件来显示标签页。下面是对这段代码的详细解释：

组件

组件是一个标签页组件，通常用于在单个页面上显示多个标签，以实现内容的切换。这个组件有几个属性和事件，用于配置和处理标签的行为。

属性解释

<u-tabs 
    :list="states_list" 
    lineWidth="50" 
    @click="click_tabs" 
    :scrollable="false"
    itemStyle="padding:20rpx 2rpx;">
</u-tabs>

1. :list="states_list"

• :list：这是一个绑定属性，通常用于将数据传递给子组件。在 Vue 中，前缀 : 表示属性值是一个 JavaScript 表达式。
• states_list：这是一个 Vue 实例中的数据属性，它包含了用于生成标签的数据列表。例如，states_list 可能是一个对象数组，每个对象表示一个标签。

每个对象可以包含标签名称和对应的值或其他属性，具体内容取决于 u-tabs 组件的实现。

2. lineWidth="50"

• lineWidth：这是一个定义标签下方线条宽度的属性，单位一般是像素 (px)。
• 50：设置线条宽度为 50 像素。

3. @click="click_tabs"

• @click：这是一个事件绑定，表示当用户点击某个标签时，会触发 click_tabs 方法。
• click_tabs：这是 Vue 实例中的一个方法，用于处理点击事件。

methods: {
    click_tabs(tabIndex) {
        console.log("标签点击事件，标签索引:", tabIndex);
        // 根据 tabIndex 处理标签点击后的逻辑
    }
}

点击标签时，这个方法会接收一个参数，通常是被点击标签的索引或相关信息。

4. :scrollable="false"

• :scrollable：这是一个布尔属性，控制标签是否可以滚动。在 Vue 中，前缀 : 表示属性值是一个 JavaScript 表达式。
• false：设置标签不可滚动，即标签不会超出容器的宽度。

5. itemStyle="padding:20rpx 2rpx"

• itemStyle：这是一个内联样式属性，直接应用于每个标签项。
• "padding:20rpx 2rpx"：定义了每个标签的内边距，20rpx 表示上下内边距为 20 像素，2rpx 表示左右内边距为 2 像素。rpx 是一种响应式像素单位，常用于小程序开发中，可以根据屏幕宽度自适应调整。

组件的功能

• 显示 states_list 中定义的标签，每个标签可以是一个不同的任务状态。
• 标签的下方线条宽度为 50 像素。
• 用户点击标签时，触发 click_tabs 方法进行处理。
• 标签项不可滚动，标签内容宽度受限于容器宽度。
• 每个标签项有固定的内边距，控制标签的显示样式。

应用场景

这种组件通常用于用户界面中的导航或内容切换，例如在一个任务管理系统中，用于切换显示不同状态的任务列表。

代码解释由chatGPT协助完成