zhgdyunapp/pages/projectEnd/laborManage/safetyEducationManage/personList.vue

<template>
	<view class="fullHeight bgWhite">
		<headers :showBack="true">
			<view class="headerName">
				参与培训的人员
			</view>
		</headers>
		<scroll-view scroll-y="true" class="pageContent">
			<view class="personContent">
				<view class="personItem" v-for="(item,index) in personList" :key="index">
					<image v-if="item.fieldAcquisitionUrl" :src="url_config+'image/'+item.fieldAcquisitionUrl"
						class="profile_photo"></image>
					<image v-else src="/static/profile_photo.png" class="profile_photo"></image>
					<view class="personInfo">
						<view class="name">
							{{item.workerName}}
						</view>
						<view class="teamName">
							{{item.teamName}}
						</view>
						<view class="small">
							{{item.sex==2?'女':'男'}} {{item.age}}
						</view>
					</view>
					<image src="/static/icon-delete.png" class="icon-delete" @click="deleteFn(index)"></image>
				</view>
				<view class="placeholderBox" v-show="personList.length==0">
					<image src="/static/noData.png" class="noDataImg"></image>
					<view class="text">
						暂无数据
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottomOperate">
			<view class="item left" @click="onQRCode">
				扫码添加
			</view>
			<view class="item" @click="searchPerson">
				手动添加
			</view>
		</view>
	</view>
</template>

<script>
	import headers from "@/components/headers/headers.vue";
	import {
		handleAuthScan
	} from "@/common/permissionTips"
	export default {
		components: {
			headers
		},
		data() {
			return {
				personList: [],
				selectArr: [],
				projectDetail: {},
				workerName: '',
				pageTitle: ''
			};
		},
		onShow() {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			// this.loadData()
			this.personList = JSON.parse(uni.getStorageSync('person'))
		},
		methods: {
			deleteFn(index) {
				this.personList.splice(index, 1)
				uni.setStorageSync('person', JSON.stringify(this.personList))
			},
			onQRCode() {
				let that = this;
				handleAuthScan().then(() => {
					uni.scanCode({
						scanType: ['qrCode'],
						success: function(res) {
							console.log('扫一扫得到的数据：' + res.result)
							if (res.result) {
								that.loadData(res.result)
							}
						}
					})
				})
			},
			loadData(resultId) {
				var that = this
				this.sendRequest({
					url: "xmgl/workerInfo/queryById",
					data: {
						projectSn: this.projectDetail.projectSn,
						id: resultId,
					},
					method: "POST",
					success(res) {
						console.log(res, res.result)
						if (res.code == 200) {
							if (res.result) {
								const findIndex = that.personList.findIndex(item => item.id == res.result.id);
								if (findIndex == -1) {
									that.personList.push(res.result)
									uni.setStorageSync('person', JSON.stringify(that.personList))
									uni.showToast({
										icon: 'none',
										title: '添加成功!'
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: '该人员已存在!'
									})
								}
							} else {
								uni.showToast({
									icon: 'none',
									title: '扫码添加失败，请手动添加!'
								})
							}
						}
					}
				})
			},
			searchPerson() {
				uni.navigateTo({
					url: '../../selectPerson/selectPerson2'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pageContent {
		height: calc(100% - 125px);
	}

	.personContent {
		padding: 15px;
	}

	.personItem {
		display: flex;
		align-items: center;
		box-shadow: 0px 4px 13px 0px rgba(212, 220, 236, 0.53);
		position: relative;
		margin-bottom: 5px;
		padding: 15px;
		border-radius: 8px;
		// padding: 0 15px;
		font-size: 15px;

		.teamName {
			font-size: 13px;
		}

		.small {
			font-size: 12px;
			opacity: 0.8;
		}

	}

	.profile_photo {
		width: 50px;
		height: 60px;
		margin-right: 10px;
	}

	.icon-delete {
		width: 14px;
		height: 15px;
		position: absolute;
		top: calc(50% - 7px);
		right: 15px;
	}

	.bottomOperate {
		position: fixed;
		bottom: 0;
		background-color: #f7f7f7;
		width: 100%;
		height: 44px;
		text-align: center;
		font-size: 15px;
		line-height: 44px;
		display: flex;

		.left {
			background-color: $uni-color-primary;
			color: white;
		}

		.item {
			flex: 1;
		}
	}
</style>