From f2eb32997b3b398948f3a4f71d24254f4edfeb9a Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 29 Jul 2021 09:06:25 +0800
Subject: [PATCH] 保安管理

---
 pages/securityStaff/exhibition.vue           |  158 +++++++++++++++++++
 pages/home/home.vue                          |   25 ++
 components/securityStaffs/securityStaffs.vue |   38 ++++
 vue.config.js                                |   21 ++
 pages.json                                   |   22 ++
 pages/securityStaff/information.vue          |  122 +++++++++++++++
 pages/securityStaff/certificates.vue         |   12 +
 pages/securityStaff/employer.vue             |   12 +
 pages/securityStaff/data.js                  |   65 ++++++++
 9 files changed, 467 insertions(+), 8 deletions(-)

diff --git a/components/securityStaffs/securityStaffs.vue b/components/securityStaffs/securityStaffs.vue
new file mode 100644
index 0000000..1b793fa
--- /dev/null
+++ b/components/securityStaffs/securityStaffs.vue
@@ -0,0 +1,38 @@
+<template>
+	<view class="securityStaffs">
+		<view class="container u-skeleton">
+			<view style="margin: 20px 0">
+				<view v-for="(item,key,index) in datas" :key="index" class="lists">
+					<!--u-skeleton-rect 绘制矩形-->
+					<text class="u-skeleton-rect">{{key}}:{{item}}</text>
+				</view>
+			</view>
+		</view>
+		<!--引用组件-->
+		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "securityStaffs",
+		props: ['datas'],
+		data() {
+			return {
+				loading: true,
+			};
+		},
+		watch:{
+			datas(){
+				console.log(this.datas);
+				this.loading = false;
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+.container {
+		padding: 20rpx 60rpx;
+	}
+</style>
diff --git a/pages.json b/pages.json
index 657c29c..c19098e 100644
--- a/pages.json
+++ b/pages.json
@@ -68,7 +68,27 @@
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
-		},  {
+		}, 
+		
+		{
+			"path": "pages/securityStaff/exhibition",
+			"style": {
+				"navigationBarTitleText": "展示",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},{
+			"path": "pages/securityStaff/information",
+			"style": {
+				"navigationBarTitleText": "详细信息",
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
+			}
+		},
+		
+		
+		
+		{
 			"path": "pages/company/company",
 			"style": {
 				"navigationBarTitleText": "服务单位",
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 27e251b..5fea7a3 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -66,10 +66,14 @@
 		<view class="service-box">
 			<u-grid :col="4" :border="false">
 				<u-grid-item bg-color="transparent" v-for="(item, index) in serviceButton" :key="index" @click="goBusinessPage(item.url,index)">
-					<navigator url="" hover-class="none" class="service-item">
+					<!-- <navigator url="" hover-class="none" class="service-item">
 						<image :src="item.img" mode="widthFix" class="img"></image>
 						<view class="name">{{ item.name }}</view>
-					</navigator>
+					</navigator> -->
+					<view url="" hover-class="none" class="service-item">
+						<image :src="item.img" mode="widthFix" class="img"></image>
+						<view class="name">{{ item.name }}</view>
+					</view>
 				</u-grid-item>
 				<u-grid-item bg-color="transparent" key="8">
 					<navigator url="/pages/service/service" hover-class="none" class="service-item">
@@ -180,10 +184,19 @@
 			},
 			//页面跳转
 			goBusinessPage(url,index){
-				console.log(url)
-				uni.navigateTo({
-					url:url
-				})
+				// console.log(url,index)
+				if(index == 1){
+					console.log(index)
+					uni.navigateTo({
+						url:'../securityStaff/exhibition'
+					})
+					return;
+					
+				}
+				// console.log(index)
+				// uni.navigateTo({
+				// 	url:url
+				// })
 			},
 			handleFocus() {
 				this.focus = !this.focus;
diff --git a/pages/securityStaff/certificates.vue b/pages/securityStaff/certificates.vue
new file mode 100644
index 0000000..65e3856
--- /dev/null
+++ b/pages/securityStaff/certificates.vue
@@ -0,0 +1,12 @@
+<template>
+	<view class="certificates">
+		证件
+		
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
diff --git a/pages/securityStaff/data.js b/pages/securityStaff/data.js
new file mode 100644
index 0000000..77ba1c6
--- /dev/null
+++ b/pages/securityStaff/data.js
@@ -0,0 +1,65 @@
+export var data = [{
+	name: '原俊袆',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '钟日健',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '唐子玉',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '曾杭',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '刘运贵',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '唐子玉',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '曾杭',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '刘运贵',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '原俊袆',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '钟日健',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '唐子玉',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '曾杭',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '刘运贵',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '唐子玉',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '曾杭',
+	age: 18,
+	obj: '适普科技'
+}, {
+	name: '刘运贵',
+	age: 18,
+	obj: '适普科技'
+}]
diff --git a/pages/securityStaff/employer.vue b/pages/securityStaff/employer.vue
new file mode 100644
index 0000000..ededfbc
--- /dev/null
+++ b/pages/securityStaff/employer.vue
@@ -0,0 +1,12 @@
+<template>
+	<view class="employer">
+		从业单位
+		
+	</view>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>
diff --git a/pages/securityStaff/exhibition.vue b/pages/securityStaff/exhibition.vue
new file mode 100644
index 0000000..be6832e
--- /dev/null
+++ b/pages/securityStaff/exhibition.vue
@@ -0,0 +1,158 @@
+<template>
+	<view class="exhibition">
+		<view style="height: 44px;width: 100%;">
+
+		</view>
+		<view class="head">
+			<u-navbar :is-fixed="true" :border-bottom="false" :is-back="true" title="" :back-icon-color="'#fff'"
+				:background="{ background: '#0BB9C8' }">
+				<view class="search-input">
+					<u-search height="50" placeholder="请输入保安员名字查询" @custom="customSearch" @change="changeSearch"
+						:show-action="true" v-model="searchName" :animation="true" :margin="'80rpx'"
+						:action-style="{ color: '#fff' }"></u-search>
+				</view>
+			</u-navbar>
+			<view class="head-bg"></view>
+		</view>
+		<view class="container u-skeleton">
+			<view v-for="(item,key,index) in securityStaffList" :key="index" class="lists">
+				<!--u-skeleton-rect 绘制矩形-->
+				<text class="u-skeleton-fillet lie" style="padding-top: 10px;">姓名:{{item.name}}</text>
+				<text class="u-skeleton-rect lie">性别:{{item.age}}</text>
+				<text class="u-skeleton-rect lie">公司:{{item.obj}}</text>
+				<text class="u-skeleton-rect lie but" @click="goToInformation(index)">点击查看详情</text>
+			</view>
+
+		</view>
+		<!--引用组件-->
+		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
+		<!-- <securityStaffs v-for="(item,index) in securityStaffList" :key="index" :datas="item">{{msg}}</securityStaffs> -->
+	</view>
+</template>
+
+<script>
+	import {
+		data
+	} from './data.js'
+	import axios from 'axios'
+	export default {
+		data() {
+			return {
+				outDataList: [],
+				securityStaffList: [{
+					name: '暂无',
+					age: '暂无'
+				}],
+				searchName: '',
+				loading: true,
+			}
+		},
+		computed: {
+			msg() {
+				return this.securityStaffList[0] == 'null' ? '暂无数据' : '';
+			}
+		},
+		methods: {
+			getDataList() {
+				var d = []
+				axios({
+					url: 'http://192.168.0.108:81/blade-user/page',
+					method: 'get',
+				}).then(res => {
+					console.log(res.data.data.records);
+					var b = res.data.data.records;
+					for (var k in b) {
+						d.push({
+							name: b[k].realName,
+							age: b[k].sexName,
+							obj: b[k].deptName,
+							honor: '扶老奶奶过马路',
+							punishment: '不看红绿灯',
+							imgSrc:b[k].avatar
+						})
+					}
+					this.outDataList = d;
+					console.log(d)
+					setTimeout(() => {
+
+						this.securityStaffList = this.outDataList;
+						this.loading = false;
+					}, 1000)
+
+				})
+				// this.outDataList = data;
+
+
+			},
+			customSearch() {
+				if (this.searchName == '') {
+					return;
+				}
+				this.loading = true;
+				this.securityStaffList = [];
+				console.log(this.searchName);
+				var d = this.outDataList,
+					a = [];
+				for (var k in d) {
+					if (d[k].name.indexOf(this.searchName) != -1) {
+						a.push(d[k]);
+					}
+				}
+				this.securityStaffList = a;
+				this.loading = false;
+
+			},
+			goToInformation(index) {
+				var data = this.securityStaffList[index];
+				uni.navigateTo({
+					url: `../securityStaff/information?data=${JSON.stringify(data)}`
+				})
+			},
+			changeSearch() {
+				if (this.searchName == '') {
+					this.securityStaffList = this.outDataList;
+				}
+			}
+		},
+		mounted() {
+			this.getDataList();
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.exhibition {
+		background-color: #f7f7f7;
+		min-height: 100vh;
+		overflow: hidden;
+	}
+
+	.head {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 10;
+	}
+
+	.container {
+		width: 95%;
+		margin: 0 auto;
+		// position: relative;
+
+		.lists {
+			background-color: #fff;
+			width: 100%;
+			height: 130px;
+
+			.lie {
+				display: block;
+				margin: 10px 10px;
+			}
+
+			.but {
+				position: relative;
+				left: 70%;
+			}
+		}
+	}
+</style>
diff --git a/pages/securityStaff/information.vue b/pages/securityStaff/information.vue
new file mode 100644
index 0000000..6d22a4d
--- /dev/null
+++ b/pages/securityStaff/information.vue
@@ -0,0 +1,122 @@
+<template>
+	<view class="information">
+		<view class="head">
+			<u-navbar :is-fixed="true" :border-bottom="false" :is-back="true" title="" :back-icon-color="'#fff'"
+				:background="{ background: '#0BB9C8' }">
+				<!-- <view class="search-input">
+					<u-search height="50" placeholder="请输入保安员名字查询" @custom="customSearch" @change="changeSearch"
+						:show-action="true" v-model="searchName" :animation="true" :margin="'80rpx'"
+						:action-style="{ color: '#fff' }"></u-search>
+				</view> -->
+			</u-navbar>
+			<view class="head-bg"></view>
+		</view>
+		<view class="bodys">
+			<view class="once">
+				照片:
+				<!-- <image :src="datalist.imgSrc" mode=""></image> -->
+				<u-image class="img" width="150rpx" height="150rpx" :src="datalist.imgSrc">
+					<view slot="error" style="font-size: 24rpx;">暂无图片</view>
+				</u-image>
+			</view>
+			<view class="once">
+				姓名: {{datalist.name}}
+			</view>
+			<view class="once">
+				性别: {{datalist.age}}
+			</view>
+
+			<view class="once">
+				公司: {{datalist.obj}}
+			</view>
+			<view class="once">
+				荣誉: {{datalist.honor}}
+			</view>
+			<view class="once">
+				违规: {{datalist.punishment}}
+				<!-- <view class="title">
+					违规:
+				</view>
+				<textarea name="" id=""  disabled="disabled" :placeholder="datalist.punishment"></textarea> -->
+			</view>
+			<view class="once">
+				<u-button class="ubut" type="success" @click="openCertificates" size="medium" :ripple="true"
+					ripple-bg-color="#fff">查看证件</u-button>
+			</view>
+		</view>
+		<u-popup v-model="show" mode="bottom" length="30%" border-radius="10">
+			<view>证件详情</view>
+		</u-popup>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				datalist: {
+					name: '原俊袆',
+					age: '男',
+					obj: '适普科技',
+					honor: '扶老奶奶过马路',
+					punishment: '不看红绿灯',
+					imgSrc: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"
+				},
+				show: false
+			}
+		},
+		methods: {
+			openCertificates() {
+				this.show = true;
+			}
+		},
+		mounted() {
+			if (this.$route.query.data != undefined) {
+				this.datalist = JSON.parse(this.$route.query.data);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.information {
+		background-color: #f7f7f7;
+		min-height: 100vh;
+		overflow: hidden;
+
+		.bodys {
+			width: 100%;
+			margin: 0 auto;
+
+			.once {
+				width: 100%;
+				height: auto;
+				background-color: #fff;
+				line-height: 44px;
+				padding: 0 2.5% 0 2.5%;
+			}
+
+			.img {
+				display: inline-block;
+				position: relative;
+				top: 10px;
+			}
+
+			.once:not(:nth-child(1)) {
+				margin: 10px 0 10px 0;
+			}
+
+			.once:nth-child(6),
+			.once:nth-child(5) {
+				height: 88px;
+			}
+			.once:nth-child(7){
+				background-color: transparent;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+	}
+</style>
diff --git a/vue.config.js b/vue.config.js
index 91b7bf7..2721b03 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -4,5 +4,24 @@
 		devServer: {
 			disableHostCheck: true
 		}
-	}
+	},
+	// devServer: {
+	//     port: 1888,
+	//     // disableHostCheck: true,
+	//     proxy: {
+	//       '/api': {
+	//         //本地服务接口地址
+	//         // target: 'http://localhost',
+	//         // target: 'http://192.168.0.114:81',//钟W
+	//         target: 'http://192.168.0.109:81',//tangW
+	//         // target: 'http://192.168.0.104:80',//唐N
+	//         //远程演示服务地址,可用于直接启动项目
+	//         // target: 'https://saber.bladex.vip/api',
+	//         ws: true,
+	//         pathRewrite: {
+	//           '^/api': '/'
+	//         }
+	//       }
+	//     }
+	//   }
 }

--
Gitblit v1.9.3