智慧保安互联网APP
shuishen
2021-07-30 54543fa1ab25da239e8c49710644c7c9876b601c
Merge branch 'master' of http://s16s652780.51mypc.cn:49896/r/zhba_app
3 files modified
1 files added
516 ■■■■ changed files
pages.json 5 ●●●●● patch | view | raw | blame | history
pages/securityStaff/exhibition - 副本.vue 180 ●●●●● patch | view | raw | blame | history
pages/securityStaff/exhibition.vue 279 ●●●●● patch | view | raw | blame | history
pages/securityStaff/information.vue 52 ●●●●● patch | view | raw | blame | history
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",
pages/securityStaff/exhibition - 副本.vue
New file
@@ -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>
pages/securityStaff/exhibition.vue
@@ -1,32 +1,31 @@
<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>
@@ -34,123 +33,171 @@
    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() {
        },
        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.getCompany();
        },
        methods: {
            getDataList() {
                var d = []
            getCompany() {
                var that = this;
                uni.request({
                    url: this.$store.state.piAPI + '/blade-user/page',
                    method: 'get',
                    url: this.$store.state.piAPI + "/blade-user/page",
                    method: "get",
                    data: {
                    },
                    success: (res) => {
                        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",
                            })
                        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';
                                }
                            }
                        }
                        this.outDataList = d;
                        console.log(d)
                        setTimeout(() => {
                            this.securityStaffList = this.outDataList;
                            this.loading = false;
                        }, 1000)
                    }
                })
                });
            },
            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];
            goDetail(item) {
                uni.navigateTo({
                    url: `../securityStaff/information?data=${JSON.stringify(data)}`
                })
                    url: `../securityStaff/information?data=${JSON.stringify(item)}`
                });
            },
            changeSearch() {
                if (this.searchName == '') {
                    this.securityStaffList = this.outDataList;
            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';
                    }
                }
            }
        },
        mounted() {
            this.getDataList();
        }
    }
    };
</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>
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>
@@ -118,16 +121,17 @@
        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,
@@ -152,25 +156,39 @@
                    
                    uni.request({
                        url: url,
                        method: 'get',
                        data: data,
                        method:'get',
                        success: (res) => {
                            var d = res.data.data;
                            var a = []
                            // for(var k = 1 ;k < 30; k++){
                                a.push(...d)
                            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();
@@ -221,11 +239,11 @@
        .certificatesnj {
            background-image: url(../../static/images/salf/bazbj.png);
            background-size:100%;
            background-size: 100%;
        }
        .certificates {
            .img {
                position: absolute;
                top: 3rem;