ToB企服应用市场:ToB评测及商务社交产业平台

标题: python后端结合uniapp与uview组件tabs，实现自定义导航按钮与小标签颜色控 [打印本页]

---

作者: 汕尾海湾    时间: 2024-6-11 09:20
标题: python后端结合uniapp与uview组件tabs，实现自定义导航按钮与小标签颜色控
实现效果（红框内）：

后端api如下：

1. @task_api.route('/user/task/states_list', methods=['POST', 'GET'])
2. @visitor_token_required
3. def task_states(user):
4.     name_list = ['待接单', '设计中', '交付中', '已完成', '全部']
5.     data = []
6.     color = ['#F04864', '#F04864', '#F04864', '#19be6b', '#19be6b']
7.     c_n = 0
8.     for i in name_list:
9.         item = {
10.             'name': i,
11.             'badge': {
12.                 'color': '#fff',
13.                 'bgColor': color[c_n],
14.                 'value': get_task_states_num(i, user, False)
15.             }
16.         }
17.         data.append(item)
18.         c_n += 1
19.     return reg_func(200, data, '查询成功')

复制代码

输出效果：

1. {
2.   "code": 200,
3.   "data": [
4.     {
5.       "badge": {
6.         "bgColor": "#F04864",
7.         "color": "#fff",
8.         "value": 0
9.       },
10.       "name": "待接单"
11.     },
12.     {
13.       "badge": {
14.         "bgColor": "#F04864",
15.         "color": "#fff",
16.         "value": 2
17.       },
18.       "name": "设计中"
19.     },
20.     {
21.       "badge": {
22.         "bgColor": "#F04864",
23.         "color": "#fff",
24.         "value": 11
25.       },
26.       "name": "交付中"
27.     },
28.     {
29.       "badge": {
30.         "bgColor": "#19be6b",
31.         "color": "#fff",
32.         "value": 22
33.       },
34.       "name": "已完成"
35.     },
36.     {
37.       "badge": {
38.         "bgColor": "#19be6b",
39.         "color": "#fff",
40.         "value": 38
41.       },
42.       "name": "全部"
43.     }
44.   ],
45.   "msg": "查询成功",
46.   "time": "2024-06-09 15:07:47"
47. }

复制代码

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

1. @task_api.route('/user/task/states_list', methods=['POST', 'GET'])
2. @visitor_token_required
3. 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 装饰器中获取到的颠末验证的用户信息。
  

函数内部逻辑

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

复制代码

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

遍历状态列表并天生数据

1. for i in name_list:
2.     item = {
3.         'name': i,
4.         'badge': {
5.             'color': '#fff',
6.             'bgColor': color[c_n],
7.             'value': get_task_states_num(i, user, False)
8.         }
9.     }
10.     data.append(item)
11.     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，用于下一个使命状态的颜色获取。
  

返回效果

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

复制代码

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

主要逻辑总结

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

代码的主要目的

这个路由用于返回用户使命的差别状态及其对应的使命数量，并为每个状态设置特定的颜色，便于前端展示。
uniapp代码如下：

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

复制代码

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

<u-tabs> 组件是一个标签页组件，通常用于在单个页面上显示多个标签，以实现内容的切换。这个组件有几个属性和变乱，用于配置和处理标签的活动。
属性解释

1. <u-tabs
2.     :list="states_list"
3.     lineWidth="50"
4.     @click="click_tabs"
5.     :scrollable="false"
6.     itemStyle="padding:20rpx 2rpx;">
7. </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 实例中的一个方法，用于处理点击变乱。
  

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

复制代码

点击标签时，这个方法会吸取一个参数，通常是被点击标签的索引或相关信息。
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协助完成

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4