| | |
|---|
| | | <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 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 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.deptName}} |
|---|
| | | </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", |
|---|
| | | 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; |
|---|
| | | } |
|---|
| | | 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: { |
|---|
| | | size: 99999 |
|---|
| | | }, |
|---|
| | | 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.realName.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%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .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; |
|---|
| | | } |
|---|
| | | } |
|---|
| | | .msg { |
|---|
| | | height: 72rpx; |
|---|
| | | line-height: 72rpx; |
|---|
| | | text-align: center; |
|---|
| | | color: #999; |
|---|
| | | } |
|---|
| | | </style> |
|---|
