ykz-wx/pages/feedback/index.vue

<template>
	<view class="switchRecord-container">
		<!--顶部导航栏-->
		<scroll-view class="scroll-view" scroll-x="true" @scroll="scroll">
			<view class="scroll-view-item" v-for="(tab,index) in tabBars" :key="tab.id" :id="tab.id" :class="navIndex==index ? 'activite' : ''" @tap="checkIndex(index)">
				{{tab.name}}
			</view> 
		</scroll-view>
		<!-- 内容 -->
		<swiper :current="navIndex" @change="tabChange" class="swiper_content">
			<swiper-item class="swiper_item">
				<FeedbackList :listArray="listArray" @click="onClick" />
			</swiper-item>
			<swiper-item class="swiper_item ">
				<FeedbackList :listArray="listArray"  @click="onClick"  />
			</swiper-item>
			<swiper-item class="swiper_item ">
				<FeedbackList :listArray="listArray"  @click="onClick"  />
			</swiper-item>
			<swiper-item class="swiper_item ">
				<FeedbackList :listArray="listArray"  @click="onClick"  />
			</swiper-item>
		</swiper>
		<!-- 新增 -->
		<view class="feedback-add-icon" @click="onClickAdd">
			<image class="add-icon" src="/static/image/add-icon.svg" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref,onMounted } from "vue"
	import * as link from '@/lib/link'
	import rest from '@/stores/rest'
	import { formatDate } from '@/lib/util'
	
	import FeedbackList from './FeedbackList.vue'
	
	const queryParams = ref({
		pageNo: 1,
		pageSize: 10,
		fkzt: '',
	})
	const scrollTop = ref(0)
	const navIndex = ref(0)
	const tabBars = ref([
		{
			name:'全部',
			id: 0
		},
		{
			name:'待受理',
			id: 1
		},
		{
			name:'受理中 ',
			id: 2
		},
		{
			name:'已办结 ',
			id: 3
		}
	])
	
	const scroll = (e: any) => {
		console.log("scroll",e); 
		scrollTop.value = e.detail.scrollTop; 
	};
	const checkIndex = (idx:number) => {
		if (navIndex.value !== idx){
			navIndex.value = idx;
			switch (idx) {
				case 0:
					queryParams.value.fkzt = ''
					break;
				case 1:
					queryParams.value.fkzt = '1'
					break;
				case 2:
					queryParams.value.fkzt = '2'
					break;
				case 3:
					queryParams.value.fkzt = '3'
					break;
			}
			getList()
		}
	}
	const tabChange = async(e:any) => {
		let _idx = e.detail.current
		checkIndex(_idx)
	}
	
	const listArray = ref([])
	const list = ref() //处方列表
	const total = ref(0)
	
	const getList = async () => {
		try {
			console.log("此时的",queryParams.value)
			// loaded.value = true;
			let res = await rest.get('/admin-api/zyyp/feedback/page', queryParams.value)
			let _list = res.list
	
	
			if (queryParams.value.pageNo === 1) {
				list.value = _list;
			} else {
				list.value = list.value.concat(_list);
			}
			getFormattedData(list.value)
			total.value = res.total
			if (res.total && queryParams.value.pageNo >= total.value / queryParams.value.pageSize) {
				status.value = "noMore"
			}
			
		} catch (e) {
		} finally {
		}
	}
	
	
	const titleArray = [
	  { title: '办件编号', key: 'id' },
	  { title: '登记时间', key: 'createTime' },
	];
	
	const getFormattedData = (listData) => {
	  const formattedData = listData.map(item => {
		const formattedItem = titleArray.map(titleItem => {
		  let value = item[titleItem.key];
		  if (titleItem.key === 'createTime') {
		    value = formatDate(item[titleItem.key], '{y}-{m}-{d} {h}:{i}:{s}');
		  }
		  return {
		    title: titleItem.title,
		    value: value
		  };
		});
		return { 
			...item, 
			title: '中医用药一件事反馈登记',
			formattedData: formattedItem ,
		};
	  });
	  listArray.value = formattedData;
	};
	
	
	const onClick = (e)=> {
		link.goBJDetails(e.id)
	}
	const onClickAdd = ()=> {
		link.goBJDetails()
	}
	
	// 页面每次加载
	onMounted(() => {
		getList()
	})
</script>


<style lang="scss">
.switchRecord-container {
  display: flex;
  background-color: #f2f2f2;
  flex-direction: column;
  height: calc(100vh - 120rpx);
  position: relative;

  .scroll-view {
    background-color: #fff;
    color: #3D3D3D;
    padding: 0 24rpx;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .scroll-view-item {
    display: inline-block;
    width: calc(100% / 4);
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 350;
    position: relative; /* 添加相对定位 */
    box-sizing: border-box; /* 确保边框在总宽度内计算 */

    &::after {
      content: '';
      display: inline-block;
      width: 50%; /* 默认宽度为50% */
      margin: 0 auto;
      position: absolute;
      bottom: 0;
      left: 25%; /* 使其居中 */
      height: 2rpx; /* 默认未选中的高度 */
      background: #fff; /* 默认未选中的颜色 */
      z-index: 1;
    }

    &.activite {
      color: #1E92F0;

      &::after {
        background: #1E92F0;
        height: 4rpx;
        width: 50%;
      }
    }
  }

  .swiper_content {
    background-color: #f2f2f2;
    flex: 1;
  }
  .feedback-add-icon {
	  position: absolute;
	  bottom: 300rpx;
	  right: 100rpx;
	  width: 120rpx;
	  height: 120rpx;
	  @include flex-center;
	  border-radius: 50%;
	  background-color: #fff;
	  box-shadow: 0px 4px 10px 0px rgba(216, 216, 216, 0.8),inset 0px 4px 10px 0px rgba(216, 216, 216, 0.3);
	  .add-icon {
		width: 60rpx;
		height: 60rpx;
	  }
  }
}
</style>