wanzai_school_app/pages/track/track.vue

<template>
	<view class="container">
		<!-- 顶部筛选区域 -->
		<view class="search">
			<view class="search_box" :class="{ active: item.value === activeIndex }" v-for="item in searchList" :key="item.value" @click="changeIndex(item.value)">
				{{ item.text }}
			</view>
		</view>

		<!-- 地图区域 -->
		<view class="map">
			<MapContainer />
		</view>

		<!-- 轨迹区域 -->
		<view class="track">
			<view class="track_title">全天状态</view>

			<!-- 步骤条区域 -->
			<uv-steps activeColor="#1E7DFB" direction="column" dot :current="list.length" v-if="list.length">
				<uv-steps-item v-for="item in list" :key="item.id" :customStyle="customStyle">
					<template v-slot:title>
						<view class="track_time">
							{{ item.type }}
						</view>
					</template>
					<template v-slot:desc>
						<view class="track_desc">地点：{{ item.location }}</view>
						<view class="track_desc">时间：{{ item.dateTime }}</view>
						<view class="track_desc" v-if="item.image">
							图片：
							<img class="img" mode="aspectFill" :src="item.image" @click="previewImage(item.image)" />
						</view>
					</template>
				</uv-steps-item>
			</uv-steps>

			<NoData v-else />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import MapContainer from '@/components/MapContainer.vue'
import NoData from '@/components/noData.vue'
import { myRequest } from '@/utils/api.js'
import { previewImage } from '@/utils/previewImage.js'

onLoad((options) => {
	currentId.value = options.id
	getData()
})

const currentId = ref()

// 筛选区域当前索引
const activeIndex = ref(0)

// 筛选区域数组
const searchList = ref([
	{
		value: 0,
		text: '今天'
	},
	{
		value: 1,
		text: '昨天'
	},
	{
		value: 2,
		text: '前天'
	}
])

// 学生轨迹数组
const list = ref([])

// 步骤条样式
const customStyle = {
	marginBottom: '30rpx'
}

const getData = async () => {
	const res = await myRequest({
		url: '/wanzai/api/smartFaceDiscern/track',
		data: {
			id: currentId.value,
			dateTime: activeIndex.value
		}
	})
	// console.log(res)
	if (res.code == 200) {
		list.value = res.data
	}
}

// 切换筛选时间时的函数
const changeIndex = (v) => {
	activeIndex.value = v
	getData()
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f1f6fe;

	// 顶部筛选区域样式
	.search {
		display: flex;
		justify-content: space-evenly;
		margin: 30rpx 0;
		height: 65rpx;

		.search_box {
			display: flex;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			width: 195rpx;
			height: 65rpx;
			font-size: 28rpx;
			border-radius: 72rpx;
			background-color: #fff;
		}

		.active {
			color: #1e7dfb;
			border: 1rpx solid #1e7dfb;
		}
	}
	// 地图区域样式
	.map {
		width: 750rpx;
		height: 469rpx;
	}
	// 轨迹区域样式
	.track {
		padding: 0 20rpx 20rpx 20rpx;

		.track_title {
			margin: 30rpx 0;
			font-size: 32rpx;
			font-weight: bold;
		}

		.track_time {
			font-size: 28rpx;
			font-weight: bold;
		}

		.track_desc {
			display: flex;
			margin-top: 10rpx;
			color: #808080;
			font-size: 24rpx;

			.img {
				width: 100rpx;
				height: 160rpx;
			}
		}
	}
}
</style>