jsy-app/pages/irrigation/index.vue

<template>

	<!-- 顶部导航栏 -->
	<custom-nav-bar :left="false" leftText="" @leftClick="" title="轮灌">
		<template v-slot:right>
			<view class="fixed">
				<view align="right" class="iconfont icon-jia1 icon"></view>
			</view>
		</template>
	</custom-nav-bar>
	<!-- 选项卡 -->
	<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
		activeColor="#39ac4f"></uni-segmented-control>
	<view class="content">
		<view v-show="current === 0">
			<view class="card">
				<uni-collapse>
					<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true">
						<template v-slot:title>
							<view class="cards-title">
								<view>
									<view class="text">任务名称：006</view>
								</view>
								<view class="title-r">
									<uni-tag class="bg-green" :circle="true" text="轮灌中" />
								</view>
							</view>
						</template>
						<view class="content">
							<view class="cards-content">
								<view class="txt-list" @click="taskdetails" >
									<view class="left">
										<view><text>轮灌方案：</text><text>全设备</text></view>
										<view><text>起始值：</text><text>外部程曦</text></view>
										<view><text>开始时间：</text><text>2025-01-05&nbsp;&nbsp;10:11</text></view>
										<view><text>结束时间：</text><text>2025-01-05&nbsp;&nbsp;10:11</text></view>
										<view><text>是否调压：</text><text>是</text></view>
									</view>
									<view class="right">
										<view class="iconfont icon-you">
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="card">
				<uni-collapse>
					<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
						<template v-slot:title>
							<view class="cards-title">
								<view>
									<view class="text">任务名称：006</view>
								</view>
								<view class="title-r">
									<uni-tag class="bg-orange" :circle="true" text="暂停" />
								</view>
							</view>
						</template>
						<view class="content">
							<view class="cards-content">
								<view class="txt-list">
									<view class="left">
										<view><text>轮灌方案：</text><text>全设备</text></view>
										<view><text>起始值：</text><text>外部程曦</text></view>
										<view><text>开始时间：</text><text>2025-01-05&nbsp;&nbsp;10:11</text></view>
										<view><text>结束时间：</text><text>2025-01-05&nbsp;&nbsp;10:11</text></view>
										<view><text>是否调压：</text><text>是</text></view>
									</view>
									<view class="right">
										<view class="iconfont icon-you">
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="card">
				<uni-collapse>
					<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
						<template v-slot:title>
							<view class="cards-title">
								<view>
									<view class="text">任务名称：006</view>
								</view>
								<view class="title-r">
									<uni-tag class="bg-red" :circle="true" text="终止" />
								</view>
							</view>
						</template>
						<view class="content">
							<view class="cards-content">
								<view class="txt-list">
									<view class="left">
										<view><text>轮灌方案：</text><text>全设备</text></view>
										<view><text>起始组：</text><text>外部程曦</text></view>
										<view><text>开始时间：</text><text>2025-01-05&nbsp;&nbsp;10:11</text></view>
										<view><text>结束时间：</text><text>2025-01-05&nbsp;&nbsp;10:11</text></view>
										<view><text>是否调压：</text><text>是</text></view>
									</view>
									<view class="right">
										<view class="iconfont icon-you">
										</view>
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>
		<view v-show="current === 1">
			<view class="card">
				<uni-collapse>
					<uni-collapse-item title-border="none" :border="false" :show-arrow="false" :open="true">
						<template v-slot:title>
							<view class="cards-title">
								<view>
									<view class="text">方案名称：006</view>
								</view>

							</view>
						</template>
						<view class="content">
							<view class="cards-content">
								<view class="txt-list">
									<view class="left">
										<view><text>轮灌组数量：</text><text>5</text></view>
										<view><text>压力：</text><text>0.2</text></view>
									</view>
									<view class="left">
										<view><text>总时长：</text><text>10</text></view>
									</view>
									<view class="right">
										<view class="iconfont icon-you">
										</view>
									</view>
								</view>
								<view class="card-font">
									<u-button type="success" size="mini" text="启用" />
									<u-button type="success" size="mini" text="编辑" />
									<u-button type="success" size="mini" text="禁用" />
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="card">
				<uni-collapse>
					<uni-collapse-item title-border="none" :border="false" :show-arrow="false">
						<template v-slot:title>
							<view class="cards-title">
								<view>
									<view class="text">方案名称：006</view>
								</view>

							</view>
						</template>
						<view class="content">
							<view class="cards-content">
								<view class="txt-list">
									<view class="left">
										<view><text>轮灌组数量：</text><text>5</text></view>
										<view><text>压力：</text><text>0.2</text></view>
									</view>
									<view class="left">
										<view><text>总时长：</text><text>10</text></view>
									</view>
									<view class="right">
										<view class="iconfont icon-you">
										</view>
									</view>
								</view>
								<view class="card-font">
									<u-button class="bg-red" type="success" size="mini" text="禁用" />
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {

				items: ['轮灌详情', '轮灌方案'],
				current: 0
			};
		},

		methods: {

			onClickItem(e) {
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			// 页面跳转
			taskdetails() {
				uni.navigateTo({
					url: '/pages/irrigation/details/taskdetails'
				});
			}
		},

	};
</script>

<style lang="scss" scoped>
	// 选项卡
	.segmented-control {
		background-color: #fff;
	}

	.segmented-control__item--text {
		font-weight: bold;
	}

	::v-deep .segmented-control__text {
		font-size: 16px;
	}

	
</style>