factory_mp/pages/wf/index.vue

<template>
	<view class="wf-page">
		<!-- 顶部标签栏 -->
		<view class="wf-tabs-wrap">
			<view class="wf-tabs">
				<view v-for="(tab, idx) in items" :key="idx"
					class="wf-tab" :class="{active: current===idx}"
					@click="onClickItem({currentIndex:idx})">
					<text>{{tab}}</text>
					<view v-if="current===idx" class="wf-tab-bar"></view>
				</view>
			</view>
		</view>

		<!-- 工单列表 -->
		<view class="wf-list">
			<view v-for="(item, index) in tlist" :key="index" class="wf-card" @click="itemClick(item)" hover-class="wf-card-hover">
				<view class="wf-card-header">
					<text class="wf-card-title">{{item.title}}</text>
					<uni-tag :text="actStateEnum[item.act_state]?.text" :circle="true" size="small" :type="actStateEnum[item.act_state]?.type" :inverted="true"
					 style="font-weight: 500;"></uni-tag>
				</view>
				<view class="wf-card-body">
					<view class="wf-card-row">
						<text class="wf-card-label">工作流</text>
						<text class="wf-card-value">{{item.workflow_.name}}</text>
					</view>
					<view class="wf-card-row">
						<text class="wf-card-label">当前节点</text>
						<text class="wf-card-value">{{item.state_.name}}</text>
					</view>
					<view class="wf-card-row">
						<text class="wf-card-label">提交时间</text>
						<text class="wf-card-value">{{item.create_time}}</text>
					</view>
					<view class="wf-card-row">
						<text class="wf-card-label">最近更新</text>
						<text class="wf-card-value">{{item.update_time}}</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="tlist.length === 0 && status === 'noMore'" class="wf-empty">
				<text class="wf-empty-text">暂无工单</text>
			</view>

			<uni-load-more :status="status" />
		</view>

		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view style="height: 188rpx;"></view>
		</uni-popup>
	</view>
</template>

<script>
import {actStateEnum} from "@/utils/enum.js"
	export default {
		data() {
			return {
				actStateEnum,
				searchValue: '',
				current: 0,
				items_e: ['duty', 'owner', 'worked', 'all'],
				page: 1,
				pageSize: 20,
				items: ['待办', '我的', '已办', '抄送我'],
				tlist: [],
				status: 'more',
			}
		},
		onLoad(query) {
			this.current = this.items_e.indexOf(query.category)
		},
		onShow() {
			this.getTicket()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getTicket()
		},
		onReachBottom() {
			this.onReachBottom();
		},
		methods: {
			onReachBottom() {
				if (this.status === 'more') {
					this.page++;
					this.getTicket()
				}
			},
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.page = 1
					this.getTicket()
				}
			},
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			getTicket() {
				var that = this;
				that.status = 'loading';
				that.$api.getTicket({category: that.items_e[that.current], page: that.page, page_size: that.pageSize}).then(data=>{
					if(data.results.length < that.pageSize){
						that.status = 'noMore';
					}else{
						that.status = 'more';
					}
					if(that.page == 1){
						that.tlist = data.results;
						uni.pageScrollTo({
							scrollTop: 0, // 滚动到顶部
							duration: 300 // 滚动过渡时间（单位：毫秒）
						});
					}
					else{
						that.tlist = that.tlist.concat(data.results)
					}
					uni.stopPullDownRefresh()
				}).catch(e=>{uni.stopPullDownRefresh()})
			},
			openDg() {
				this.$refs.popup.open('top')
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			itemClick(row) {
				const viewPath = row.workflow_.view_path2?row.workflow_.view_path2:row.workflow_.view_path;
				const t_id = row.ticket_data.t_id;
				uni.navigateTo({
					url: `/pages${viewPath}?t_id=${t_id}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.wf-page {
	min-height: 100vh;
	background: #F5FAF7;
}

// ========== 标签栏 ==========
.wf-tabs-wrap {
	position: sticky;
	top: 0;
	z-index: 10;
	background: #fff;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.wf-tabs {
	display: flex;
	padding: 0 16rpx;
}

.wf-tab {
	flex: 1;
	text-align: center;
	padding: 26rpx 0;
	font-size: 28rpx;
	color: #74777F;
	position: relative;
	transition: color 0.3s;
	letter-spacing: 2rpx;
	&.active {
		color: #1F8C5E;
		font-weight: 700;
	}
}

.wf-tab-bar {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48rpx;
	height: 6rpx;
	background: linear-gradient(90deg, #2BA471, #2BA471);
	border-radius: 3rpx;
}

// ========== 工单卡片 ==========
.wf-list {
	padding: 20rpx 24rpx;
}

.wf-card {
	background: #fff;
	border-radius: 20rpx;
	padding: 28rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	border-left: 5rpx solid #2BA471;
}

.wf-card-hover {
	background: #E8F5EE;
	transform: scale(0.99);
}

.wf-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx solid #DCF0E4;
}

.wf-card-title {
	font-size: 30rpx;
	font-weight: 700;
	color: #191B23;
	flex: 1;
	margin-right: 16rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.wf-card-body {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.wf-card-row {
	display: flex;
	align-items: center;
}

.wf-card-label {
	font-size: 24rpx;
	color: #74777F;
	width: 140rpx;
	flex-shrink: 0;
}

.wf-card-value {
	font-size: 24rpx;
	color: #44474F;
	flex: 1;
}

.wf-empty {
	text-align: center;
	padding: 120rpx 0;
}

.wf-empty-text {
	font-size: 28rpx;
	color: #74777F;
}
</style>