mes-app/pages/task/area-list.uvue

<template>
	<uni-navbar-lite :showLeft="true" title="巡检区域"></uni-navbar-lite>
    <view class="list-page">
        <!-- 任务信息栏 -->
        <view class="task-info-bar" v-if="taskInfo.planName != null">
            <view class="task-info-item">
                <text class="task-info-label">任务:</text>
                <text class="task-info-value">{{ taskInfo.planName }}</text>
            </view> 
            <view class="task-info-item" v-if="taskInfo.displayTime != null">
                <text class="task-info-label">时间:</text>
                <text class="task-info-value">{{ taskInfo.displayTime }}</text>
            </view> 
        </view>

        <!-- 列表内容 -->
        <common-list
            :dataList="dataList"
            :loading="loading"
            :refreshing="refreshing"
            :hasMore="hasMore"
            @refresh="handleRefresh"
            @loadMore="loadMore"
            @itemClick="handleView"
        >
            <template #default="{ item, index }">
                <view class="list-item">
                    <view class="item-container">
                        <view class="item-header">
							<text class="item-title">{{ (item as AreaCheckTaskDetail).locationName }}</text>
							<view class="task-badges"> 
							    <text class="status-tag" :class="getTaskStatusClass(item)">
									{{ getTaskStatusText((item as AreaCheckTaskDetail).taskStatus) }}
								</text>
							</view>
                        </view>
						<!-- <view class="info-row">
							<view class="info-label">
								<text class="text-gray">区域编号: {{ (item as AreaCheckTaskDetail).machineryCode }}</text>
							</view> 
						</view>
						<view class="info-row">
							<view class="info-label">
								<text class="text-gray">位置: {{ (item as AreaCheckTaskDetail).locationName }}</text>
							</view>
						</view> -->
						<view class="btn-group">
							<!-- 显示巡查按钮的逻辑：如果区域未完成巡查，则启用；已完成则禁用 -->
							<view
								v-if="(item as AreaCheckTaskDetail).taskStatus == '0'"
								class="btn-primary"
								@click.stop="handleItemClick(item,'patrol')"
							>
								<text class="btn-text">开始巡查</text>
							</view>
							<view
								v-else
								class="btn-primary"
								@click.stop="handleItemClick(item,'detail')"
							>
								<text class="btn-text">查看</text>
							</view>
						</view>
                    </view>
                </view>
            </template>
        </common-list>
    </view>
</template>

<script setup lang="uts">
import { ref, onBeforeUnmount, onMounted, reactive, onShow } from 'vue' 
import type { SysDictData } from '../../types/dict'
import {checkPermi, getUserInfo} from '../../utils/storage'
import { getTaskInfo, updateTaskInfo } from '../../api/task/list.uts'
import { getTaskDetails } from '../../api/task/detail.uts'
import { getDictDataByType } from '../../api/dict/index'

// 任务基础信息类型（参照GenTask实体类）
type TaskInfoForArea = {
  taskId: Number | null
  planId: Number | null
  planType: string | null
  planName: string | null
  taskDate: string | null
  startTime: string | null
  endTime: string | null
  subjects: string | null
  machineryTypeName: string | null
  machineryCode: string | null
  machineryName: string | null
  machineries: string | null
  locations: string | null
  operator: string | null
  operatorId: Number | null
  status: string | null
  taskDesc: string | null
  sourceType: string | null
  locationCount: Number
  machineryCount: Number
  createTime: string | null
  updateTime: string | null
  // 前端计算字段
  planTypeText: string | null
  statusText: string | null
  displayTime: string | null
  taskCount: string | null
  checkType: string | null
}

// 区域巡查任务明细类型
type AreaCheckTaskDetail = { 
  detailId: Number | null
  taskId: Number | null
  machineryRecordId: Number | null
  machineryId: Number | null
  machineryTypeName: string | null
  machineryCode: string | null
  machineryName: string | null
  subjectId: Number | null
  subjectCode: string | null
  subjectName: string | null
  locationRecordId: Number | null
  locationId: Number | null
  locationName: string | null
  locationCode: string | null
  sourceType: string | null
  orderNum: Number | null
  status: string | null
  imagesUrl: string | null
  videosUrl: string | null
  resultValue: string | null
  resultDesc: string | null
  remark: string | null
  attr1: string | null
  attr2: string | null
  attr3: Number | null
  attr4: Number | null
  // 任务状态字段
  taskStatus: string | null // 'completed' 表示已完成，其他值表示未完成
}

	// 区域清单数据
    const dataList = ref<AreaCheckTaskDetail[]>([])

    // 任务信息
    const taskInfo = ref<TaskInfoForArea>({
      taskId: null,
      planId: null,
      planType: null,
      planName: null,
      taskDate: null,
      startTime: null,
      endTime: null,
      subjects: null,
      machineryTypeName: null,
      machineryCode: null,
      machineryName: null,
      machineries: null,
      locations: null,
      operator: null,
      operatorId: null,
      status: null,
      taskDesc: null,
      sourceType: null,
      locationCount: 0,
      machineryCount: 0,
      createTime: null,
      updateTime: null,
      // 前端计算字段
      planTypeText: null,
      statusText: null,
      displayTime: null,
      taskCount: null,
      checkType: null
    })

    // 当前任务ID
    const currentTaskId = ref<string>('')
	const currentOpType = ref<string>('')
    const page = ref<number>(1)
    const pageSize: number = 10
    const hasMore = ref<boolean>(true)
    const loading = ref<boolean>(false)
    const refreshing = ref<boolean>(false)
    const total = ref<number>(0)
    
    const taskStatusDictList = ref<SysDictData[]>([]) // 任务状态字典列表
    const dictLoaded = ref<boolean>(false) // 字典加载状态
    
    // 不再需要地点巡查状态管理，使用taskStatus字段
    
    // 更新区域列表显示状态
    const updateAreaListDisplay = (): void => {
        // 重新渲染列表
        const newData = [...dataList.value];
        dataList.value = newData;
    }
	
	// 添加防重复刷新的标志
	const isRefreshing = ref<boolean>(false)
	// 添加刷新时间戳，用于防抖
	const lastRefreshTime = ref<number>(0)

	// 获取任务状态文本
	const getTaskStatusText = (taskStatus: string | null): string => {
		if (taskStatus == null || taskStatus.length == 0) return ''
		if (dictLoaded.value != true) {
			return taskStatus
		}
		const dictItem = taskStatusDictList.value.find((dict: SysDictData) => dict.dictValue == taskStatus)
		return dictItem != null && dictItem.dictLabel != null ? dictItem.dictLabel : taskStatus
	}
	
	// 获取任务状态字典列表
	const loadTaskStatusDictList = async (): Promise<void> => {
	    try {
	        const result = await getDictDataByType('dv_task_status')
	        const resultObj = result as UTSJSONObject

	        if (resultObj['code'] == 200) {
	            const data = resultObj['data'] as any[]
	            const dictData: SysDictData[] = []

	            if (data.length > 0) {
	                for (let i = 0; i < data.length; i++) {
	                    const item = data[i] as UTSJSONObject
	                    const dictItem: SysDictData = {
							dictValue: item['dictValue'] as string | null,
							dictLabel: item['dictLabel'] as string | null,
							dictCode: null,
							dictSort: null,
							dictType: null,
							cssClass: null,
							listClass: null,
							isDefault: null,
							status: null,
							default: null,
							createTime: null,
							remark: null
						}
	                    dictData.push(dictItem)
	                }
	            }

	            taskStatusDictList.value = dictData
	            dictLoaded.value = true
	        }
	    } catch (e: any) {
	        console.error('获取任务状态字典失败:', e.message)
	        dictLoaded.value = true
	    }
	}
	
	// 获取任务状态样式
	const getTaskStatusClass = (item: any | null): string => {
		if (item == null) return ''
		const areaItem = item as AreaCheckTaskDetail
		const taskStatus = areaItem.taskStatus
		if (taskStatus==null) return ''
		// 返回对应的任务状态类名
		return `taskStatus-${taskStatus}`
	}
	
	// 获取显示时间
	const getDisplayTime = (item: TaskInfoForArea): string | null => {
		if (item.taskDate == null || item.taskDate.length == 0) return null
		if (item.startTime != null && item.startTime.length > 0 && item.endTime != null && item.endTime.length > 0) {
			return `${item.taskDate} ${item.startTime}-${item.endTime}`
		}
		return item.taskDate
	}
	
	// 根据dataList中的taskStatus更新taskInfo的status
	const updateTaskInfoStatus = async (): Promise<void> => {
	    if (dataList.value.length == 0) return;
	    
	    let completedCount = 0;
	    for (let i = 0; i < dataList.value.length; i++) {
	        const item = dataList.value[i] as AreaCheckTaskDetail;
	        if (item.taskStatus == '2') {
	            completedCount++;
	        }
	    }
	    
	    let newStatus = '0';
	    // 全部完成
	    if (completedCount == dataList.value.length) {
	        newStatus = '2';
	    } 
	    // 部分完成
	    else if (completedCount > 0) {
	        newStatus = '1';
	    }
	    // 全部未完成
	    else {
	        newStatus = '0';
	    }
	    
	    // 只有状态发生变化时才调用接口更新
	    if (taskInfo.value.status != newStatus) {
	        taskInfo.value.status = newStatus;
	        
	        console.log(`任务状态更新: 总数${dataList.value.length}, 完成${completedCount}, 设置状态为${newStatus}`);
	        
	        // 调用后端接口更新任务状态
	        try {
	            const updateData: UTSJSONObject = {
	                'taskId': taskInfo.value.taskId,
	                'status': newStatus
	            } as UTSJSONObject;
	            
	            await updateTaskInfo(updateData);
	            console.log('任务状态已同步到后端');
	        } catch (error) {
	            console.error('更新任务状态失败:', error);
	            // 如果更新失败，可以考虑回滚状态或给出提示
	        }
	    }
	}
	
	// 加载真实数据
    const loadData = async (isRefresh: boolean | null, disablePullDown: boolean | null): Promise<void> => {
        const shouldRefresh = isRefresh != null ? isRefresh : false
        const shouldDisablePullDown = disablePullDown != null ? disablePullDown : false

        if (currentTaskId.value == null || currentTaskId.value.length == 0) {
            return
        }

        loading.value = true
        if (shouldRefresh && !shouldDisablePullDown) {
            page.value = 1
            refreshing.value = true
        } else if (shouldRefresh && shouldDisablePullDown) {
            page.value = 1
            refreshing.value = false
        } else {
            refreshing.value = false
        }

        try {
            // 获取区域清单数据
            const result = await getTaskDetails(currentTaskId.value)
            
            // 提取响应数据
            const resultObj = result as UTSJSONObject
            const code = resultObj['code'] as number
            const responseData = resultObj['rows'] as any[]
            const responseTotal = resultObj['total'] as number

            if (code == 200) {
                // 将 any[] 转换为 AreaCheckTaskDetail[]
                const newData: AreaCheckTaskDetail[] = []
                for (let i = 0; i < responseData.length; i++) {
                    const item = responseData[i] as UTSJSONObject
                    const areaItem: AreaCheckTaskDetail = {
                        detailId: item['detailId'] != null ? (item['detailId'] as Number) : null,
                        taskId: item['taskId'] != null ? (item['taskId'] as Number) : null,
                        machineryRecordId: item['machineryRecordId'] != null ? (item['machineryRecordId'] as Number) : null,
                        machineryId: item['machineryId'] != null ? (item['machineryId'] as Number) : null,
                        machineryTypeName: item['machineryTypeName'] as string | null,
                        machineryCode: item['machineryCode'] as string | null,
                        machineryName: item['machineryName'] as string | null,
                        subjectId: item['subjectId'] != null ? (item['subjectId'] as Number) : null,
                        subjectCode: item['subjectCode'] as string | null,
                        subjectName: item['subjectName'] as string | null,
                        locationRecordId: item['locationRecordId'] != null ? (item['locationRecordId'] as Number) : null,
                        locationId: item['locationId'] != null ? (item['locationId'] as Number) : null,
                        locationName: item['locationName'] as string | null,
                        locationCode: item['locationCode'] as string | null,
                        sourceType: item['sourceType'] as string | null,
                        orderNum: item['orderNum'] != null ? (item['orderNum'] as Number) : null,
                        status: item['status'] as string | null,
                        imagesUrl: item['imagesUrl'] as string | null,
                        videosUrl: item['videosUrl'] as string | null,
                        resultValue: item['resultValue'] as string | null,
                        resultDesc: item['resultDesc'] as string | null,
                        remark: item['remark'] as string | null,
                        attr1: item['attr1'] as string | null,
                        attr2: item['attr2'] as string | null,
                        attr3: item['attr3'] != null ? (item['attr3'] as Number) : null,
                        attr4: item['attr4'] != null ? (item['attr4'] as Number) : null,
                        // 任务状态字段
                        //taskStatus: item['taskStatus'] != null ? (item['taskStatus'] as string) : '0',
						taskStatus: item['taskStatus'] as string | null,
                    }
                    newData.push(areaItem)
                }
                
                if (shouldRefresh) {
                    dataList.value = newData
                } else {
                    dataList.value = [...dataList.value, ...newData]
                }

                total.value = responseTotal
                hasMore.value = dataList.value.length < responseTotal 
            } else {
                const msg = resultObj['msg'] as string | null
                uni.showToast({
                    title: msg ?? '加载失败',
                    icon: 'none'
                })
            }
        } catch (e: any) {
            uni.showToast({
                title: e.message ?? '加载失败',
                icon: 'none'
            })
        } finally {
            loading.value = false
            if (shouldRefresh) {
                refreshing.value = false
                setTimeout(() => {
                    isRefreshing.value = false
                }, 50)
            }
        }
    }
    
    // 加载任务基础信息
    const loadTaskInfo = async (): Promise<void> => {
        if (currentTaskId.value == null || currentTaskId.value.length == 0) {
            return
        }
        
        try {
            const result = await getTaskInfo(currentTaskId.value)
            
            // 提取响应数据
            const resultObj = result as UTSJSONObject
            const code = resultObj['code'] as number
            const taskData = resultObj['data'] as UTSJSONObject

            if (code == 200) {
                // 将返回的数据转换为TaskInfo类型
                const newTaskInfo: TaskInfoForArea = {
                    taskId: taskData['taskId'] != null ? (taskData['taskId'] as Number) : null,
                    planId: taskData['planId'] != null ? (taskData['planId'] as Number) : null,
                    planType: taskData['planType'] as string | null,
                    planName: taskData['planName'] as string | null,
                    taskDate: taskData['taskDate'] as string | null,
                    startTime: taskData['startTime'] as string | null,
                    endTime: taskData['endTime'] as string | null,
                    subjects: taskData['subjects'] as string | null,
                    machineryTypeName: taskData['machineryTypeName'] as string | null,
                    machineryCode: taskData['machineryCode'] as string | null,
                    machineryName: taskData['machineryName'] as string | null,
                    machineries: taskData['machineries'] as string | null,
                    locations: taskData['locations'] as string | null,
                    operator: taskData['operator'] as string | null,
                    operatorId: taskData['operatorId'] != null ? (taskData['operatorId'] as Number) : null,
                    status: taskData['status'] as string | null,
                    taskDesc: taskData['taskDesc'] as string | null,
                    sourceType: taskData['sourceType'] as string | null,
                    locationCount: taskData['locationCount'] != null ? (taskData['locationCount'] as Number) : 0,
                    machineryCount: taskData['machineryCount'] != null ? (taskData['machineryCount'] as Number) : 0,
                    createTime: taskData['createTime'] as string | null,
                    updateTime: taskData['updateTime'] as string | null,
                    // 前端计算字段初始化 
                    planTypeText: null,
                    statusText: null,
                    displayTime: null,
                    taskCount: null,
                    checkType: null
                }
                taskInfo.value = newTaskInfo
                
                // 计算前端显示字段  
                taskInfo.value.displayTime = getDisplayTime(taskInfo.value) 
            } else {
                const msg = resultObj['msg'] as string | null
                uni.showToast({
                    title: msg ?? '获取任务信息失败',
                    icon: 'none'
                })
            }
        } catch (e: any) {
            uni.showToast({
                title: e.message ?? '获取任务信息失败',
                icon: 'none'
            })
        }
    }
	
    // 下拉刷新
    const handleRefresh = async (): Promise<void> => {
        console.log("handleRefresh被触发") 

        const now = Date.now();
        if (now - lastRefreshTime.value < 1000) {
            refreshing.value = false;
            return;
        }
        lastRefreshTime.value = now;

        if (loading.value || isRefreshing.value) {
            refreshing.value = false;
            return;
        }
 
        isRefreshing.value = true;

        try {
            await loadData(true, false);
            // 刷新完成后检查并更新任务状态
            await updateTaskInfoStatus();
        } catch (error) {
            console.error('刷新失败:', error);
            refreshing.value = false;
            isRefreshing.value = false;
        }

        setTimeout(() => {
            isRefreshing.value = false
        }, 100)
    }
    
    // 加载更多
    const loadMore = (): void => {
        if (!hasMore.value || loading.value) {
            return
        }
        page.value++
        loadData(false, false)
    }

    // 搜索
    const handleSearch = (): void => {
        if (loading.value) {
            return;
        }

        if (isSearching.value) {
            return
        }

        isSearching.value = true
        page.value = 1
        loadData(true, true)

        setTimeout(() => {
            isSearching.value = false
        }, 100)
    }

	const handleSearchOnBlur = (): void => {
		handleSearch()
	} 

    // 点击列表项
    const handleItemClick = (item: any | null, action: string): void => {
        if (item == null) return
        const areaItem = item as AreaCheckTaskDetail
        
        if(action === 'patrol') {
            // 设置当前地点为巡查中状态
            /* areaPatrolStatus.value.set(areaItem.id.toString(), 'in-progress');
            updateAreaListDisplay(); */
            
            // 开始巡查地点
            uni.showModal({
                title: '开始巡查',
                //content: `即将开始巡查地点: ${areaItem.areaName} (${areaItem.areaCode})`,
                confirmText: '确定巡查',
                cancelText: '取消',
                success: (res) => {
                    if(res.confirm) {
                        // 模拟巡查过程
                        uni.showLoading({
                            title: '巡查中...'
                        });
                        
                        setTimeout(() => {
                            uni.hideLoading();
							
							// 跳转到巡查详情页面
							/* const areaName = areaItem.areaName != null ? areaItem.areaName : '';
							const areaCode = areaItem.areaCode != null ? areaItem.areaCode : '';
							const areaTypeText = areaItem.areaTypeText != null ? areaItem.areaTypeText : '';
							const location = areaItem.location != null ? areaItem.location : ''; */
							if(areaItem.detailId != null){
								uni.navigateTo({
								    url: `/pages/task/area-patrol?detailId=${areaItem.detailId}`
								});
							}else{
								uni.showToast({
									title: '缺少参数',
									icon: 'none'
								})
							}
							
							
                            // 模拟巡查完成
                            /* uni.showModal({
                                title: '巡查完成',
                                content: `地点: ${areaItem.areaName}\n巡查时间: ${new Date().toLocaleString()}\n巡查结果: 正常`,
                                showCancel: false,
                                confirmText: '确认',
                                success: () => {
                                    // 设置当前地点为已完成状态
                                    areaPatrolStatus.value.set(areaItem.id.toString(), 'completed');
                                    updateAreaListDisplay();
                                    
                                    
                                }
                            }); */
                        }, 500);
                    } /* else {
                        // 取消巡查，恢复状态
                        areaPatrolStatus.value.set(areaItem.id.toString(), 'pending');
                        updateAreaListDisplay();
                    } */
                }
            });
        }
		 if(action === 'detail') {
			 uni.navigateTo({
				 url: `/pages/task/area-patrol?detailId=${areaItem.detailId}&opType=view`
			 });
		 }
    }

	// 点击列表项查看详情
	const handleView = (item: any | null): void => {
	    /* if (item == null) return
	    const areaItem = item as AreaCheckTaskDetail
		uni.showToast({
		    title: `区域详情: ${areaItem.machineryName}`,
		    icon: 'none'
		}); */
	}
 
	onLoad((options: any) => {  
		const params = options as UTSJSONObject
		const taskId = params.get('taskId') as string | null
		const opType = params.get('opType') as string | null
		// 获取传递的任务ID
		if(opType != null){
			currentOpType.value = opType;
		}
		if (taskId != null) {
			currentTaskId.value = taskId
			// 并行加载字典、任务信息和区域清单
			Promise.all([
				loadTaskStatusDictList(),
				loadTaskInfo(),
				loadData(true, true)
			]).catch(error => {
				console.error('加载数据失败:', error)
			})
		} else {
			uni.showToast({
				title: '缺少任务ID参数',
				icon: 'none'
			})
		}
	})

    // 组件卸载前清理事件监听
    onBeforeUnmount(() => {
        refreshing.value = false
        loading.value = false
        isRefreshing.value = false 
    })
    
    // 页面卸载时设置返回标记
    onUnload(() => {
        // 设置标记通知index页面需要刷新
        uni.setStorageSync('needRefresh', true)
    })
	
	// 页面显示时强制重置加载状态
	onShow(() => { 
	    /* loading.value = false
	    refreshing.value = false
	    isRefreshing.value = false */
	
	    // 检查是否有来自子页面的刷新标记
	    const needRefresh = uni.getStorageSync('needRefresh')
	    if (needRefresh == true) {
	        // 清除标记
	        uni.removeStorageSync('needRefresh')
	        // 延迟一小段时间再执行刷新，避免状态冲突
			setTimeout(() => {
				loadData(true, false).then(() => {
					updateTaskInfoStatus()
				})
			}, 500)
	    }
	
	    // 延迟再重置一次确保生效
	    /* setTimeout(() => {
	        loading.value = false
	        refreshing.value = false
	        isRefreshing.value = false
	    }, 500) */
	})
</script>

<style lang="scss">
    .list-page {
        flex: 1;
        background-color: #e8f0f9;
    }

    .task-info-bar {
        padding: 20rpx 30rpx;
        background-color: #d7eafe;
        border-bottom: 1rpx solid #ccc;
    }

    .task-info-item {
        flex-direction: row;
        align-items: center;
        margin-bottom: 10rpx;
    }

    .task-info-label {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
        margin-right: 10rpx;
    }

    .task-info-value {
        font-size: 28rpx;
        color: #666;
    }

    .list-item {
        margin: 12rpx 30rpx;
        background-color: #ffffff;
        border-radius: 16rpx;
    }

    .item-container {
        padding: 30rpx;
    }

    .item-header {
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 16rpx;
        justify-content: space-between; /* 主轴两端对齐 */
        min-height: 55rpx;

        .item-title {
            font-size: 30rpx;
            color: #333333;
            font-weight: bold;
            flex-wrap: wrap;
            flex: 0 1 75%;
            min-width: 0;
        }
        
        .task-badges {
          display: flex;
          flex-direction: row;
          align-items: center;
          gap: 10rpx; /* 添加间距 */
        }
    }
    
    .info-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .info-label {
        font-size: 26rpx;
        color: #666;
      }

      .info-value {
        font-size: 26rpx;
      }
    }

	.btn-group {
	  flex-direction: row;
	  align-items: center;
	  justify-content: flex-end;
	  margin-top: 20rpx;
	}

	.btn-primary {
		z-index: 999;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
		background-color: #165DFF;
		line-height: 45rpx;
		color: #ffffff;
		.btn-text{
			color: #ffffff;
			font-size: 24rpx;
			padding: 5px 15px;
		}
	}
	
	.btn-disabled {
		z-index: 999;
		border-radius: 10rpx;
		font-size: 24rpx;
		margin-left: 20rpx;
		background-color: #ccc;
		line-height: 45rpx;
		color: #999;
		.btn-text{
			color: #999;
			font-size: 24rpx;
			padding: 5px 15px;
		}
	}

.status-tag {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	white-space: nowrap;
	border: 1rpx solid;
	text-align: center;
}

/* 任务状态样式 */
.taskStatus-0 {
	background-color: #FDF6EC;
	color: #E6A23C;
	border-color: #faecd8;
}

.taskStatus-1 {
	background-color: #EBF5FF;
	color: #409EFF;
	border-color: #d8ebff;
}

.taskStatus-2 {
	background-color: #F0F9EB;
	color: #67C23A;
	border-color: #c2e7b0;
}

/* 保持其他原有样式 */
.text-gray{
  font-size: 26rpx;
  color: #666;
}

.scroll-view_H {
	width: 100%;
	flex-direction: row;
}

.scroll-view-item_H {
  justify-content: center;
  align-items: center;

  .status-txt{
	padding: 8px 12px;
	text-align: center;
	margin-right: 12rpx;
	border-radius: 36rpx;
	background-color: #fff;
	font-size: 28rpx;
  }
  .stauts-sel{
	background-color: #007AFF;
	color: #fff;
  }
}
</style>