298 lines
9.0 KiB
Vue
298 lines
9.0 KiB
Vue
<template>
|
||
<view class="personnel">
|
||
<!-- <button class="new_btn">创建</button> -->
|
||
<view class="personnel_list">
|
||
<block v-for="(item, index) in userList" :key="item.id">
|
||
<view class="personnel_item">
|
||
<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>
|
||
<text>{{item.is_contract?'已签约':'未签约'}}</text>
|
||
</view>
|
||
<view class="top">
|
||
<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.name}}</view>
|
||
<view>{{item.company}}</view>
|
||
</view>
|
||
<view class="info_bottom">
|
||
<view class="item phone">
|
||
<uni-icons type="phone" color="#999999FF"></uni-icons>
|
||
{{item.phone}}
|
||
</view>
|
||
<view class="item">
|
||
<uni-icons type="location" color="#999999FF"></uni-icons>
|
||
<view class="location">{{item.city_name+item.area_name+item.street_name}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center">
|
||
<view class="top" v-for="(role, roleIndex) in item.roles" :key="roleIndex">
|
||
{{role}}
|
||
<!-- <text class="green">管理人</text> -->
|
||
</view>
|
||
<view class="bottom">
|
||
<view><image :src="item.qualification.id_card?'../../static/icons/ok.png':'../../static/icons/err.png'"></image>身份证</view>
|
||
<view><image :src="item.qualification.car_card?'../../static/icons/ok.png':'../../static/icons/err.png'"></image>驾驶证</view>
|
||
<view><image :src="item.qualification.bank_account?'../../static/icons/ok.png':'../../static/icons/err.png'"></image>银行卡</view>
|
||
</view>
|
||
</view>
|
||
<u-line color="#999999FF"></u-line>
|
||
<view class="bottom" style="margin-top: 28rpx;">
|
||
<button class="look" @click="navTo('/subpkg/personnelDetails/personnelDetails?id='+item.id)">查看</button>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
|
||
<!-- <view class="personnel_item">
|
||
<view class="type type_blue">
|
||
<image src="../../static/icons/ok_w.png"></image>
|
||
<text>已签约</text>
|
||
</view>
|
||
<view class="top">
|
||
<view class="left">
|
||
<u--image class="u_avatar" :showLoading="true" src="../../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">人员名称</view>
|
||
<view>隶属乡镇公司名称</view>
|
||
</view>
|
||
<view class="info_bottom">
|
||
<view class="item phone">
|
||
<uni-icons type="phone" color="#999999FF"></uni-icons>
|
||
13546841564
|
||
</view>
|
||
<view class="item">
|
||
<uni-icons type="location" color="#999999FF"></uni-icons>
|
||
通滩镇
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="center">
|
||
<view class="top">小组服务团队：<text class="green">管理人</text></view>
|
||
<view class="bottom">
|
||
<view><image src="../../static/icons/ok.png"></image>身份证</view>
|
||
<view><image src="../../static/icons/ok.png"></image>驾驶证</view>
|
||
<view><image src="../../static/icons/err.png"></image>银行卡</view>
|
||
</view>
|
||
</view>
|
||
<u-line color="#999999FF"></u-line>
|
||
<view class="bottom" style="margin-top: 28rpx;">
|
||
<button class="look" @click="navTo('/subpkg/personnelDetails/personnelDetails')">查看</button>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { Toast } from '@/libs/uniApi.js'
|
||
import {companyUser} from "@/api/company.js"
|
||
export default {
|
||
onReady() {
|
||
uni.setNavigationBarColor({
|
||
frontColor: '#ffffff',
|
||
backgroundColor: '#3175f9'
|
||
})
|
||
},
|
||
data() {
|
||
return {
|
||
loadConfig:{
|
||
page: 1,
|
||
limit: 15,
|
||
loadingText: '努力加载中',
|
||
loadmoreText: '轻轻上拉',
|
||
nomoreText: '我也是有底线的~~',
|
||
status: 'loadmore'
|
||
},
|
||
userList: []
|
||
}
|
||
},
|
||
onLoad() {},
|
||
onShow() {
|
||
this.loadUserList()
|
||
},
|
||
methods: {
|
||
navTo(url) {
|
||
url ?
|
||
uni.navigateTo({
|
||
url: url,
|
||
}) : Toast('暂未开放')
|
||
},
|
||
async loadUserList(){
|
||
let that = this;
|
||
if(this.loadConfig.status=="nomore")return;
|
||
this.loadConfig.status="loading"
|
||
let res = await companyUser({
|
||
page: this.loadConfig.page,
|
||
limit: this.loadConfig.limit
|
||
})
|
||
this.loadConfig.status="loadmore"
|
||
if(res.data.data.length<this.loadConfig.limit){
|
||
this.loadConfig.status="nomore"
|
||
}else {
|
||
this.loadConfig.page++;
|
||
}
|
||
this.userList = [...this.userList, ...res.data?.data]
|
||
}
|
||
},
|
||
onPullDownRefresh() {
|
||
uni.stopPullDownRefresh()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.personnel{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.new_btn{
|
||
margin-top: 32rpx;
|
||
margin-bottom: 40rpx;
|
||
width: 694rpx;
|
||
height: 84rpx;
|
||
background: #3274F9;
|
||
border-radius: 42rpx 42rpx 42rpx 42rpx;
|
||
color: #fff;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
}
|
||
.personnel_list{
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-top: 32rpx;
|
||
.personnel_item{
|
||
width: 694rpx;
|
||
// height: 407rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
margin-bottom: 32rpx;
|
||
overflow: hidden;
|
||
position: relative;
|
||
padding: 28rpx;
|
||
.type{
|
||
width: 137rpx;
|
||
height: 53rpx;
|
||
background-color: #F02828;
|
||
border-radius: 0rpx 14rpx 0rpx 14rpx;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
line-height: 35rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
image{
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
margin-right: 9rpx;
|
||
}
|
||
}
|
||
.type_blue{
|
||
background-color: #3274f9;
|
||
}
|
||
.top{
|
||
// background-color: #3274F9;
|
||
display: flex;
|
||
.right{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
margin-left: 28rpx;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
overflow: hidden;
|
||
color: #999999;
|
||
.info_top{
|
||
display: flex;
|
||
align-items: flex-end;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #3274F9;
|
||
.info_name{
|
||
font-size: 32rpx;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
margin-right: 18rpx;
|
||
}
|
||
}
|
||
.info_bottom{
|
||
display: flex;
|
||
.item{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.phone{
|
||
margin-right: 28rpx;
|
||
}
|
||
.location{
|
||
width: 250rpx;
|
||
white-space: nowrap; /* 不换行 */
|
||
overflow: hidden; /* 将超出文本隐藏 */
|
||
text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.center{
|
||
padding: 28rpx 0;
|
||
.top{
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #666666FF;
|
||
margin-bottom: 20rpx;
|
||
.green{
|
||
color: #34A853FF;
|
||
}
|
||
.yellow{
|
||
color: #F9AA32FF;
|
||
}
|
||
}
|
||
.bottom{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
font-size: 25rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
image{
|
||
width: 18rpx;
|
||
height: 18rpx;
|
||
margin-right: 9rpx;
|
||
}
|
||
}
|
||
}
|
||
.bottom{
|
||
display: flex;
|
||
justify-content: right;
|
||
.look{
|
||
width: 158rpx;
|
||
height: 53rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
opacity: 1;
|
||
border: 2rpx solid #3274F9;
|
||
font-size: 28rpx;
|
||
font-weight: 400;
|
||
color: #3274F9;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|