From d83e6dd06df3c848f7c40078c6205662bddc7c1b Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 30 Jul 2021 17:52:04 +0800
Subject: [PATCH] 样式改
---
pages/securityStaff/exhibition.vue | 307 +++++++++++++++++-------------
pages/securityStaff/exhibition - 副本.vue | 180 ++++++++++++++++++
pages.json | 5
pages/securityStaff/information.vue | 76 ++++--
4 files changed, 407 insertions(+), 161 deletions(-)
diff --git a/pages.json b/pages.json
index 2ffaf71..60558e5 100644
--- a/pages.json
+++ b/pages.json
@@ -84,9 +84,10 @@
{
"path": "pages/securityStaff/exhibition",
"style": {
- "navigationBarTitleText": "展示",
+ "navigationBarTitleText": "服务单位",
"enablePullDownRefresh": false,
- "navigationStyle": "custom"
+ "navigationBarBackgroundColor": "#0BB9C8",
+ "navigationBarTextStyle": "white"
}
}, {
"path": "pages/securityStaff/information",
diff --git "a/pages/securityStaff/exhibition - \345\211\257\346\234\254.vue" "b/pages/securityStaff/exhibition - \345\211\257\346\234\254.vue"
new file mode 100644
index 0000000..6040d24
--- /dev/null
+++ "b/pages/securityStaff/exhibition - \345\211\257\346\234\254.vue"
@@ -0,0 +1,180 @@
+<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 lie1" style="padding-top: 10px;">姓名：{{item.name}}</text>
+ <text class="u-skeleton-rect lie lie2">公司：{{item.obj}}</text>
+ <text class="u-skeleton-rect lie lie3">地区：{{item.address}}</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: this.$store.state.piAPI + '/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,
+ cardid: b[k].cardid,
+ baoanzheng: "赣06284538",
+ address: b[k].address
+ })
+ }
+ 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%;
+ }
+
+ .lie1 {
+ height: 2.5rem;
+ border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
+ padding-left: 1rem;
+ font-size: 0.95rem;
+ line-height: 1.25rem;
+ font-weight: 600;
+ }
+
+ .lie2 {
+ border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
+ padding-left: 1rem;
+ }
+
+ .lie3 {
+ border-bottom: 1px solid rgba($color: #000000, $alpha: .1);
+ padding-left: 1rem;
+ }
+ }
+ }
+</style>
diff --git a/pages/securityStaff/exhibition.vue b/pages/securityStaff/exhibition.vue
index da9a2d4..badd8cc 100644
--- a/pages/securityStaff/exhibition.vue
+++ b/pages/securityStaff/exhibition.vue
@@ -1,160 +1,203 @@
<template>
- <view class="exhibition">
- <view style="height: 44px;width: 100%;">
+ <view class="container">
+ <u-search v-model='keyValue' placeholder='请输入公司名称' shape="round" class="u-search" input-align="center" height="70"
+ @search='searchValue' @custom='searchValue' @clear='clearValue' @change='changeValue'></u-search>
- </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 v-if="newsList.length > 0">
+ <view class="inTmain" v-for="(item,index) in newsList">
+ <u-card :title="item.realName" @click="goDetail(item)">
+ <view class="" slot="body">
+ <view>
+ <view style="margin-bottom: 10px;" class="u-body-item-title u-line-1">公司：{{item.deptId}}
+ </view>
+ </view>
+ <view>
+ <view class="u-body-item-title u-line-1">地区：{{item.address}}</view>
+ </view>
+ </view>
+ <view class="" slot="foot">
+ </u-icon>电话：{{item.phone}}</view>
+ </u-card>
</view>
-
+ <u-loadmore class='msg' :status="status" />
</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 class="msg" v-else>
+ 暂无数据
+ </view>
+
</view>
</template>
<script>
- import {
- data
- } from './data.js'
- import axios from 'axios'
export default {
data() {
return {
- outDataList: [],
- securityStaffList: [{
- name: '暂无',
- age: '暂无'
- }],
- searchName: '',
- loading: true,
- }
+ dataList: [],
+ newsList: [],
+ status: 'loadmore',
+ keyValue: '',
+ pagelist: 0,
+ };
},
- computed: {
- msg() {
- return this.securityStaffList[0] == 'null' ? '暂无数据' : '';
- }
+ onLoad() {
+
},
- methods: {
- getDataList() {
- var d = []
- axios({
- url: this.$store.state.piAPI + '/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,
- cardid:b[k].cardid,
- baoanzheng: "赣06284538",
- })
- }
- 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;
- }
+ onReachBottom() {
+ var that = this;
+ if (that.dataList.length - 1 == that.pagelist) {
+ this.status = 'nomore';
+ return;
}
+ // 后续将改为与后端联动
+ this.status = 'loading';
+ setTimeout(() => {
+ for (var i = 0; i < 5; i++) {
+
+ if (that.pagelist <= that.dataList.length - 1) {
+
+ that.newsList.push(that.dataList[that.pagelist])
+
+ if (that.pagelist <= that.dataList.length - 2) {
+
+ that.pagelist += 1
+
+ if (that.dataList.length - 1 == that.pagelist) {
+ that.newsList.push(that.dataList[that.pagelist])
+ }
+
+ }
+
+ }
+
+ }
+ }, 2000);
},
mounted() {
- this.getDataList();
+ this.getCompany();
+ },
+ methods: {
+ getCompany() {
+ var that = this;
+ uni.request({
+ url: this.$store.state.piAPI + "/blade-user/page",
+ method: "get",
+ data: {
+
+ },
+ success: (res) => {
+ var resdata = res.data.data.records;
+ that.dataList = resdata;
+
+ for (var i = 0; i < 5; i++) {
+
+ if (that.pagelist <= that.dataList.length - 1) {
+
+ that.newsList.push(that.dataList[that.pagelist])
+
+ if (that.pagelist <= that.dataList.length - 2) {
+ that.pagelist += 1
+
+ if (that.dataList.length - 1 == that.pagelist) {
+ that.newsList.push(that.dataList[that.pagelist])
+ }
+
+ } else {
+
+ that.status = 'nomore';
+
+ }
+
+ }
+
+ }
+
+ }
+ });
+ },
+ goDetail(item) {
+ uni.navigateTo({
+ url: `../securityStaff/information?data=${JSON.stringify(item)}`
+ });
+ },
+ searchValue(value) {
+ var that = this;
+ var str = value.replace(/\s*/g, "");
+ if (str == '') {
+ return
+ } else {
+ that.newsList = [];
+ that.dataList.forEach(item => {
+ if (item.enterprisename.indexOf(str) != -1) {
+ that.newsList.push(item)
+ }
+ })
+ that.status = 'nomore';
+ }
+ },
+ clearValue() {
+ this.keyValue = ''
+ this.newsList = [];
+ for (var i = 0; i < this.pagelist; i++) {
+ this.newsList.push(this.dataList[i])
+ }
+
+ if (this.dataList.length - 1 == this.pagelist) {
+ this.newsList.push(this.dataList[this.pagelist])
+ this.status = 'nomore';
+ } else if (this.pagelist < this.dataList.length - 1) {
+ this.status = 'loadmore';
+ }
+ },
+ changeValue(value) {
+ if (value == '') {
+ this.newsList = [];
+ for (var i = 0; i < this.pagelist; i++) {
+ this.newsList.push(this.dataList[i])
+ }
+ if (this.dataList.length - 1 == this.pagelist) {
+ this.newsList.push(this.dataList[this.pagelist])
+ this.status = 'nomore';
+ } else if (this.pagelist < this.dataList.length - 1) {
+ this.status = 'loadmore';
+ }
+ }
+ }
+
}
- }
+ };
</script>
-<style lang="scss" scoped>
- .exhibition {
- background-color: #f7f7f7;
- min-height: 100vh;
- overflow: hidden;
+<style lang="scss">
+ .u-card-wrap {
+ background-color: $u-bg-color;
+ padding: 1px;
}
- .head {
- position: fixed;
- top: 0;
- left: 0;
- z-index: 10;
+ .u-body-item {
+ font-size: 32rpx;
+ color: #333;
+ padding: 20rpx 10rpx;
}
- .container {
- width: 95%;
- margin: 0 auto;
- // position: relative;
+ .u-body-item image {
+ width: 120rpx;
+ flex: 0 0 120rpx;
+ height: 120rpx;
+ border-radius: 8rpx;
+ margin-left: 12rpx;
+ }
- .lists {
- background-color: #fff;
- width: 100%;
- height: 130px;
+ .u-search {
+ padding: 20rpx 30rpx 0 30rpx;
+ }
- .lie {
- display: block;
- margin: 10px 10px;
- }
+ .inTmain {}
- .but {
- position: relative;
- left: 70%;
- }
- }
+ .msg {
+ height: 72rpx;
+ line-height: 72rpx;
+ text-align: center;
+ color: #999;
}
</style>
diff --git a/pages/securityStaff/information.vue b/pages/securityStaff/information.vue
index f215c22..4413001 100644
--- a/pages/securityStaff/information.vue
+++ b/pages/securityStaff/information.vue
@@ -15,17 +15,19 @@
<view class="once">
照片：
<!-- <image :src="datalist.imgSrc" mode=""></image> -->
- <u-image class="img" width="150rpx" height="150rpx" :src="datalist.imgSrc">
+ <u-image class="img" width="150rpx" height="150rpx" :src="datalist.avatar">
<view slot="error" style="font-size: 24rpx;">暂无图片</view>
</u-image>
</view>
<view class="once">
- 姓名： {{datalist.name}}
+ 姓名： {{datalist.realName}}
</view>
- <view class="once">
+ <!-- <view class="once">
性别： {{datalist.age}}
+ </view> -->
+ <view class="once">
+ 组织： {{datalist.politicaloutlook}}
</view>
-
<view class="once">
公司： {{datalist.obj}}
</view>
@@ -54,26 +56,27 @@
保安员证
</view>
<view class="once">
- 姓名： <view class="o-once"> {{datalist.name}}</view>
+ 姓名： <view class="o-once"> {{datalist.realName}}</view>
</view>
<view class="once">
- 性别：<view class="o-once"> {{datalist.age}}</view>
+ 性别：<view class="o-once"> {{datalist.cardid}}</view>
</view>
- <view class="once" >
+ <view class="once">
编号：<view class="o-once"> {{datalist.baoanzheng}}</view>
</view>
<view class="once" style="margin-bottom: 1rem;">
发证机关：<view class="o-once" style="margin-right: 1rem;"> {{datalist.fzobj}}</view>
发证日期：<view class="o-once">{{datalist.fztime}}</view>
</view>
- <u-image class="img" width="150rpx" height="150rpx" :src="datalist.imgSrc">
+ <u-image class="img" width="150rpx" height="150rpx" :src="datalist.avatar">
<view slot="error" style="font-size: 1rem;">暂无图片</view>
</u-image>
</view>
</u-popup>
<u-popup v-model="showc" mode="bottom" border-radius="10">
<view class="">
- <u-empty text="没有数据" :color="'#0BB9C8'" :icon-color="'#0BB9C8'" mode="list" :show="cylist.length == 0"></u-empty>
+ <u-empty text="没有数据" :color="'#0BB9C8'" :icon-color="'#0BB9C8'" mode="list" :show="cylist.length == 0">
+ </u-empty>
</view>
<view class="Congye">
<u-time-line>
@@ -114,21 +117,21 @@
</template>
<script>
- import axios from "axios"
export default {
data() {
return {
datalist: {
- name: '原俊袆',
+ realName: '原俊袆',
age: '男',
obj: '适普科技',
honor: '扶老奶奶过马路',
punishment: '不看红绿灯',
- imgSrc: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
+ avatar: "https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png",
cardid: 342,
baoanzheng: "赣06284538",
fzobj: '南昌市公安局',
- fztime: "2014.04.20"
+ fztime: "2014.04.20",
+ politicaloutlook: '党员'
},
showi: false,
showc: false,
@@ -150,23 +153,42 @@
cardid: this.datalist.cardid
},
that = this;
- axios({
- url: url,
- params: data
- }).then(res => {
- var d = res.data.data;
- var a = []
- // for(var k = 1 ;k < 30; k++){
- a.push(...d)
- // }
- console.log(d);
- that.cylist = a;
- })
+
+ uni.request({
+ url: url,
+ data: data,
+ method:'get',
+ success: (res) => {
+ var d = res.data.data;
+ var a = []
+ // for(var k = 1 ;k < 30; k++){
+ a.push(...d)
+ // }
+ console.log(d);
+ that.cylist = a;
+ }
+
+ })
+
+
+ // axios({
+ // url: url,
+ // params: data
+ // }).then(res => {
+ // var d = res.data.data;
+ // var a = []
+ // // for(var k = 1 ;k < 30; k++){
+ // a.push(...d)
+ // // }
+ // console.log(d);
+ // that.cylist = a;
+ // })
}
},
mounted() {
if (this.$route.query.data != undefined) {
this.datalist = JSON.parse(this.$route.query.data);
+ console.log(this.datalist)
}
this.getcongye();
@@ -217,11 +239,11 @@
.certificatesnj {
background-image: url(../../static/images/salf/bazbj.png);
- background-size:100%;
+ background-size: 100%;
}
.certificates {
-
+
.img {
position: absolute;
top: 3rem;
--
Gitblit v1.9.3