OfficeApp/subpkg/captain/captain.vue
weipengfei 253fa0a543 优化
2023-08-03 14:05:16 +08:00

181 lines
4.3 KiB
Vue

<template>
<view class="page">
<view class="card" v-for="item in list" :key="item.id" @click="navTo('/subpkg/archives/archives?id='+item.id)">
<view class="top">
<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 class="text">
<view class="name">{{item.nickname}}</view>
<view class="mobile">
<uni-icons type="phone" color="#999999FF"></uni-icons>联系方式-<text>{{item.account}}</text>
</view>
</view>
</view>
<view class="bottom">
<view class="left">
<view class="circle"></view>
<view class="green">片区</view>
<view class="b_l_text">{{item.area_name+item.street_name}}</view>
</view>
<view class="right">{{'管理户数: '+item.informationg_count+" 户"}}</view>
</view>
</view>
<u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText"
:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
</view>
</template>
<script>
import { companyUser } from "@/api/company.js"
import { Toast } from '@/libs/uniApi.js'
export default {
data() {
return {
list: [],
loadConfig: {
page: 1,
limit: 15,
lastpage: '',
loadingText: '努力加载中',
loadmoreText: '轻轻上拉',
nomoreText: '我也是有底线的~~',
status: 'loadmore'
},
}
},
onLoad() {
this.initLoad()
},
onShow() {},
onReachBottom() {
this.loadList();
},
methods: {
navTo(url) {
url ?
uni.navigateTo({
url: url,
}) : Toast('暂未开放')
},
initLoad() {
this.loadConfig.page = 1;
this.loadConfig.status = "loadmore";
this.list = [];
this.loadList();
},
async loadList() {
if (this.loadConfig.status == "nomore") return;
this.loadConfig.status = "loading";
let res = await companyUser({
page: this.loadConfig.page,
limit: this.loadConfig.limit,
company_id: this.$store.state.app.userInfo.company_id,
is_captain: 1
})
this.loadConfig.status = "loadmore"
if (res.data.data.length < this.loadConfig.limit) {
this.loadConfig.status = "nomore"
} else {
this.loadConfig.page++;
}
this.list = [...this.list, ...res.data.data];
},
},
onPullDownRefresh() {
uni.stopPullDownRefresh()
}
}
</script>
<style lang="scss">
.page {
padding-top: 28rpx;
}
.card {
margin: 0 auto;
margin-bottom: 28rpx;
padding: 28rpx;
width: 694rpx;
height: 221rpx;
background: #FFFFFF;
border-radius: 14rpx 14rpx 14rpx 14rpx;
opacity: 1;
.top {
display: flex;
justify-content: left;
// align-items: center;
.avatar {
width: 88rpx;
height: 88rpx;
border-radius: 50%;
margin-right: 18rpx;
}
.u_avatar {
margin-right: 18rpx;
}
.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;
}
}
}
</style>