ygoa_miniapp/components/ygoa/processList.vue

<template>
	<view class="content">
		<view @click="handleToDetail(process)" v-for="(process,index) in processes" :key="index">
			<uni-card :isFull="true" padding="10px 0">
				<uni-row>
					<uni-col :xs="4" :sm="2">
						<view class="icon_container">
							<text class="iconfont" :class="process.type"></text>
						</view>
					</uni-col>
					<uni-col :xs="20" :sm="22">

						<uni-card padding="0 10px 10px" :isFull="true" :border="false" :is-shadow="true">
							<template v-slot:title>
								<uni-row>
									<uni-col :xs="18" :sm="22">
										<view class="process_title">
											<text>{{ process.title }}</text>
										</view>
									</uni-col>
									<uni-col :xs="6" :sm="2">
										<uni-tag text="审批中" type="primary"></uni-tag>
									</uni-col>
								</uni-row>
							</template>
							<view class="process_contant">
								<uni-row>
									<uni-col :xs="8" :sm="7">请假天数:</uni-col>
									<uni-col :xs="15" :sm="16">{{ process.totalTime }}</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :xs="8" :sm="7">开始时间:</uni-col>
									<uni-col :xs="15" :sm="16">{{ process.startTime }}</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :xs="8" :sm="7">结束时间:</uni-col>
									<uni-col :xs="15" :sm="16">{{ process.endTime }}</uni-col>
								</uni-row>
							</view>
						</uni-card>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	// import { onLoad } from '@dcloudio/uni-app';
	// onLoad((options) => {
	// 	processes = options.processes
	// });
	const props = defineProps(['processes'])
	// let processes = reactive([])
	function handleToDetail(process : object) {
		console.log('process', process);
		console.log('process子组件');
	}
</script>

<style lang="scss">
	@import url("@/static/font/ygoa/iconfont.css");

	.iconfont {
		font-size: 3rem;
	}

	.content {
		.icon_container {
			margin: 50% 0;
		}

		.process_title {
			font-weight: bold;
			font-size: 1.2rem;
			margin-top: 10px;
		}
	}
</style>