FE-lab-xcx/pages/views/sceneInspect/sceneInspect.vue

<!-- 现场检查 -->
<template>
	<view class="sceneInspect">
		<scroll-view scroll-y @scrolltolower="scrollGet" class="info-max-box">
			<view class="college">
				<picker @change="collegeChange" :value="collegeIndex" :range="collegeArray" :range-key="'deptName'">
					<view class="college-l">{{queryParams.deptName?queryParams.deptName:'请选择学院单位'}}</view>
				</picker>
				<img class="college-r" @click="resetQuery" :src="imagesUrl('commonality/icon_aqjc_ss.png')">
			</view>
			<view class="memorandum">
				<view>备忘录</view>
				<view>08-26 08:36
					<img :src="imagesUrl('commonality/icon_wd_gd@1x.png')">
				</view>
			</view>
			<view class="memorandum">
				<view>备忘录</view>
				<view style="color: #0183FA;">2</view>
			</view>
			<uni-swipe-action>
				<uni-swipe-action-item :right-options="options" @click="onClick" @change="swipeChange"
					v-for="(item,index) in dataList">
					<view class="list-li">
						<img class="list-li-l" :src="imagesUrl('safetyCheck/icon_xcjc_ld@1x.png')">
						<view class="list-li-r">
							<view>{{item.name}}</view>
							<view>{{item.time}}</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</scroll-view>
	</view>

</template>

<script>
	import {
		config
	} from '@/api/request/config.js'
	import {
		systemDeptDropList,
	} from '@/pages/api/index.js'
	export default {
		name: "sceneInspect",
		components: {

		},
		data() {
			return {
				baseUrl: config.base_url,
				pageType: 0,
				collegeArray: [],
				collegeIndex: 0,
				// 查询参数
				queryParams: {
					page: 1,
					pageSize: 10,
					deptId: '',
					deptName: '',
				},
				dataList: [{
						name: '楼栋名称房间号',
						time: '2024-08-26 09:33',
					},
					{
						name: '楼栋名称房间号',
						time: '2024-08-26 09:33',
					},
				],
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#0183fa'
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#FD5C5C'
					}
				}]
			}
		},
		onLoad(option) {


		},
		onShow() {

		},
		mounted() {
			this.systemDeptDropList();
		},
		methods: {
			//滚动事件
			scrollGet() {},
			collegeChange(e) {
				let self = this;
				self.collegeArray.forEach(function(item, index) {
					if (index == e.detail.value) {
						console.log(item)
						self.$set(self.queryParams, 'deptId', item.deptId)
						self.$set(self.queryParams, 'deptName', item.deptName)
					}
				})
			},
			resetQuery() {
				this.$set(this.queryParams, 'deptId', '')
				this.$set(this.queryParams, 'deptName', '')
			},
			onClick(e) {
				uni.showToast({
					title: `点击了${e.position === 'left' ? '左侧' : '右侧'} ${e.content.text}按钮`,
					icon: 'none'
				});
				//点击选项按钮时触发事件	
				//e = {content,index} ，content（点击内容）、index（下标）、position (位置信息)
			},
			swipeChange(e) {
				//组件打开或关闭时触发	
				// left:左侧 ，right：右侧，none：关闭
			},
			//获取院系
			async systemDeptDropList() {
				const {
					data
				} = await systemDeptDropList({
					deptName: '',
					level: 2,
					deptType: 1
				});
				if (data.code == 200) {
					this.collegeArray = data.data
				}
			},

		}
	}
</script>

<style lang="stylus" scoped>
	.sceneInspect {
		height: 100%;
		display flex;
		box-sizing: border-box;

		.college {
			width: 750rpx;
			height: 80rpx;
			background: #FFFFFF;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 20rpx;

			.college-l {
				font-size: 30rpx;
				color: #333333;
				line-height: 80rpx;
				text-align: left;
			}

			.college-r {
				width: 30rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}
		}

		.memorandum {
			width: 750rpx;
			height: 80rpx;
			background: #FFFFFF;
			border-bottom: 1rpx solid #E0E0E0;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>view:nth-of-type(1) {
				font-size: 28rpx;
				color: #333333;
				line-height: 39rpx;
				text-align: left;
			}

			>view:nth-of-type(2) {
				font-size: 28rpx;
				color: #666666;
				line-height: 39rpx;
				text-align: left;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				>img {
					width: 24rpx;
					height: 24rpx;
					margin-left: 12rpx;
				}
			}
		}

		.list-li {
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-bottom: 1rpx solid #E0E0E0;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.list-li-l {
				width: 60rpx;
				height: 60rpx;
				margin-right: 24rpx;
			}

			.list-li-r {
				>view:nth-of-type(1) {
					font-size: 28rpx;
					color: #333333;
					line-height: 39rpx;
					text-align: left;
				}

				>view:nth-of-type(2) {
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
					text-align: left;
					margin-top: 6rpx;
				}
			}
		}
	}
</style>