<template> <view class=""> <!-- <view class="personnel_list"> <view class="item" v-for="(item, index) in list" :key="item.id"> <view class="top"> <image class="avatar" src="../../static/img/public/record.png"></image> <view class="body"> <view>姓名:<text class="name">{{item.name}}</text></view> <view> 片区:<text class="name">{{(item.village_name||'')+(item.brigade_name||'')}}</text> </view> <view>电话:<text class="name">{{item.phone}}</text></view> </view> </view> <u-line color="#cccccc"></u-line> <view class="bottom"> <view>更新时间: {{item.update_time}}</view> <view class="right" v-if="showView"> <view class="update" @click="navTo(`/subpkg/updateArchives/updateArchives?id=${item.id}&task_id=${task_id}`)"> 更新 </view> <view class="look" @click="navTo('/subpkg/archivesDetail/archivesDetail?id='+item.id)"> 查看 </view> </view> </view> </view> <u-empty v-if="loadConfig.status=='nomore'&& list.length==0" text="没有档案" icon="/static/img/empty/list.png"> </u-empty> <u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" /> </view> --> <u-sticky bgColor="#0022C7" v-if="task_id>0&& !is_admin"> <u-tabs :list="tabLists" @click="changeCurrent" lineColor='white' :scrollable="false" lineWidth='40' inactiveStyle='color:white' activeStyle="color:white"></u-tabs> </u-sticky> <view class="personnel_list"> <view class="card" v-for="(item, index) in list" :key="item.id"> <view class="card_head"> <text style="font-size: 32rpx">最后更新: {{updateTime(item.update_time)}}</text> <text v-if="showView" @click="navTo(`/subpkg/updateArchives/updateArchives?id=${item.id}&task_id=${task_id}`)">更新档案</text> <text v-if="showView" @click="navTo('/subpkg/archivesDetail/archivesDetail?id='+item.id)">查看档案</text> </view> <view class="card_content"> <view class="right"> <view class=""> <text>人员姓名 :</text> <text> {{item.name}}</text> </view> <view class=""> <text>联系电话 :</text> <text>{{item.phone}}</text> </view> <view class=""> <text>所属片区 :</text> <text>{{(item.village_name||'')+(item.brigade_name||'')}}</text> </view> </view> <view class="left"> <view class="cir"> <u--image class="u_avatar" :showLoading="true" :src=" '../../static/img/company/DAGL.png'" width="112.28rpx" height="112.28rpx"></u--image> </view> </view> </view> </view> <!-- <block v-for="(item, index) in list" :key="item.id"> <view class="personnel_item" @click="navTo('/subpkg/archives/archives?id='+item.id)"> <view class="type" :class="item.is_contract?'type_blue':''"> <image v-if="item.is_contract" src="../../static/icons/ok_w.png"></image> <image v-else src="../../static/icons/err_w.png"></image> </view> <view class="top" style="margin-bottom: 28rpx;"> <view class="left"> <u--image class="u_avatar" :showLoading="true" :src="item.avatar||'../../static/img/public/man.png'" width="112.28rpx" height="112.28rpx" shape="circle"></u--image> </view> <view class="right"> <view class="info_top"> <view class="info_name">{{item.nickname}}</view> <text class="phone">电话:</text> <text class="tel">{{item.phone||item.account}}</text> </view> <view class="info_bottom"> <text class="item phone"> 分管片区: </text> <view class="item"> <view class="location"> <text>{{ (item.street_name||'')+(item.village_name||'')+(item.brigade_name||'') }}</text> </view> </view> </view> <view class="info_bottom"> <text class="item phone"> 所属公司: </text> <view class="item" v-if="item.company"> <view class="location"> {{item.company.company_name}} </view> </view> </view> </view> </view> <u-line color="#999999FF"></u-line> <view class="bottom" style="margin-top: 28rpx;float: right;"> <view class="look">{{'管理户数: '+item.informationg_count+" 户"}}</view> </view> </view> </block> --> <u-empty v-if="loadConfig.status == 'nomore' && list.length == 0" icon="/static/img/empty/data.png"></u-empty> <u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" /> </view> <mybtn text="信息登记" v-if="showView" @click="navTo('/subpkg/newArchives/newArchives')"></mybtn> </view> </template> <script> import { informationList } from "@/api/information.js"; import { taskInformationgist } from "@/api/task.js"; import { Toast } from "../../libs/uniApi"; export default { data() { return { user_id: -1, task_id: -1, is_admin: false, list: [], current: 0, tabLists: [{ name: '未更新', }, { name: '已更新' }], loadConfig: { page: 1, limit: 15, loadingText: '努力加载中', loadmoreText: '轻轻上拉', nomoreText: '我也是有底线的~~', status: 'loadmore' }, } }, onLoad(options) { // 判断是否包含小队长id if (options.id) this.user_id = options.id; else if (this.$store.state.app.userInfo.admin_id == 0) { //如果用户是小队长,将带上自己的id this.user_id = this.$store.state.app.userInfo.id; } else { // 判断是否为管理员 this.is_admin = true; } // 判断是否为任务 if (options.task_id) { this.task_id = options.task_id; uni.setNavigationBarTitle({ title: '任务:信息更新' }) } this.initLoad(); uni.$on('loadArchives', this.initLoad); }, onShow() { }, computed: { // 是否显示查看和更新按钮 showView() { return !this.$store.state.app.userInfo.admin_id && this.$store.state.app.userInfo.is_captain; } }, onReachBottom() { this.loadInformationList(); }, methods: { navTo(url) { if (url) { uni.showLoading({ title: '加载中', mask: true }) uni.navigateTo({ url: url, success() { uni.hideLoading() } }) } else Toast('暂未开放'); }, async initLoad() { console.log('更新'); this.loadConfig.page = 1; this.loadConfig.status = "loadmore"; this.list = []; await this.loadInformationList(); uni.stopPullDownRefresh(); }, async loadInformationList() { let that = this; if (this.loadConfig.status == "nomore") return; this.loadConfig.status = "loading" let res = {}; if (this.is_admin) { res = await taskInformationgist({ id: this.task_id }); } else { let params = { page: this.loadConfig.page, limit: this.loadConfig.limit, user_id: that.user_id, }; this.task_id > 0 ? params.is_update = this.current : null; res = await informationList(params); } this.loadConfig.status = "loadmore" if (res.data.length < this.loadConfig.limit) { this.loadConfig.status = "nomore" } else { this.loadConfig.page++; } this.list = [...this.list, ...res.data]; }, changeCurrent(e) { this.current = e.index; this.initLoad(); }, updateTime(e){ let str = ''; try{ if(!e>0)new Error(); str = e.split(' ')[0] }catch(e){ str = '无更新时间' } return str } }, onPullDownRefresh() { this.initLoad(); } } </script> <style lang="scss"> .new_btn { position: fixed; bottom: 28rpx; left: 50%; transform: translate(-50%); margin-top: 32rpx; // margin-bottom: 40rpx; width: 694rpx; height: 84rpx; background: $theme-oa-color; border-radius: 42rpx 42rpx 42rpx 42rpx; color: #fff; line-height: 80rpx; text-align: center; } .personnel_list { padding: 28rpx 0; margin-bottom: 130rpx; .card { margin: 0 auto; margin-bottom: 28rpx; width: 694rpx; background: #ffffff; border-radius: 30rpx; opacity: 1; overflow: hidden; // box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); .card_head { padding: 28rpx; background-color: $theme-oa-color; color: white; height: 100rpx; display: flex; justify-content: space-between; align-items: center; } .card_content { padding: 28rpx; display: flex; justify-content: space-between; .left { text-align: center; // padding: 15rpx 25rpx; padding-top: 20rpx; width: 160rpx; // background-color: $theme-oa-color; color: white; // border-radius: 40rpx; .cir { width: 120rpx; height: 120rpx; background-color: #ffffff; margin-left: 25rpx; // border-radius: 120rpx; position: relative; } } .right { display: flex; flex-direction: column; justify-content: space-between; view { text:nth-child(2) { margin-left: 20rpx; } } } } // .top { // display: flex; // justify-content: left; // // align-items: center; // .avatar { // width: 88rpx; // height: 88rpx; // border-radius: 50%; // margin-right: 18rpx; // } .u_avatar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } // .text { // display: flex; // justify-content: space-around; // flex-direction: column; // .name { // font-size: 32rpx; // font-weight: 500; // color: #333333; // } // .mobile { // color: #999999; // } // } // } // .bottom { // display: flex; // justify-content: space-between; // font-size: 25rpx; // font-weight: 400; // .left { // display: flex; // justify-content: left; // align-items: center; // margin-top: 20rpx; // .circle { // width: 11rpx; // height: 11rpx; // opacity: 1; // border: 2rpx solid #34A853; // margin-right: 10rpx; // border-radius: 50%; // } // .green { // font-weight: 400; // color: #34A853; // line-height: 0rpx; // margin-right: 18rpx; // -webkit-background-clip: text; // } // .b_l_text { // width: 360rpx; // overflow: hidden; // text-overflow: ellipsis; // white-space: nowrap; // } // } // .right { // color: #3274F9; // margin-top: 20rpx; // } // } } // .item { // margin: 0 auto; // width: 694rpx; // // height: 201rpx; // background: #FFFFFF; // border-radius: 14rpx 14rpx 14rpx 14rpx; // opacity: 1; // margin-bottom: 21rpx; // box-sizing: border-box; // padding: 28rpx; // font-size: 24.53rpx; // color: #999999FF; // .top { // display: flex; // align-items: center; // width: 100%; // .avatar { // width: 120rpx; // height: 120rpx; // margin-right: 18rpx; // margin-bottom: 12rpx; // } // .body { // flex: 1; // font-size: 28rpx; // color: #333; // font-weight: bold; // .name { // font-size: 28rpx; // color: #333; // font-weight: 500; // display: inline-block; // margin-left: 18rpx; // } // } // } // .bottom { // display: flex; // justify-content: space-between; // align-items: center; // margin-top: 20rpx; // font-size: 25rpx; // .right { // font-size: 28rpx; // display: flex; // .look { // color: $theme-oa-color; // } // .update { // color: #34A853; // margin-right: 38rpx; // } // } // } // } } </style>