342 lines
8.6 KiB
Vue
342 lines
8.6 KiB
Vue
<template>
|
|
<view class="">
|
|
<!-- <view class="head_box">
|
|
<u-search shape="round" placeholder="搜索任务状态、优先级、部门等" :showAction="false" style="margin-right: 26rpx;"></u-search>
|
|
<view class="btn">筛选</view>
|
|
</view> -->
|
|
<!-- 任务搜索框 -->
|
|
<view class="task_box">
|
|
<u-search shape="round" placeholder="搜索片区经理" :showAction="false"></u-search>
|
|
<!-- 筛选按钮 -->
|
|
<!-- <view>
|
|
<u-popup :show="show" @close="show=false" @open="show=true" mode="top"
|
|
overlayStyle="position: fixed;top:100rpx">
|
|
<view class="search_box">
|
|
<view class="">
|
|
<view class="first_order" v-for="item in orderData" :key="item.id" :class="item.id==typeid?'choose':''">
|
|
<text>{{item.first_order}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="second_order">
|
|
<view class="second" v-for="item in orderList" :key="item.id" @click="getInfo(item.info,item.id)">
|
|
{{item.info}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<view @click="show = true" class="screening" :class="show?'choose_style':''">筛选</view>
|
|
</view> -->
|
|
</view>
|
|
<view class="list">
|
|
<view class="item" v-for="item in areaManagerList" :key="item.id">
|
|
<view class="left">
|
|
<view class="top">
|
|
<!-- <image class="avatar" :src="item.avatar||'../../static/img/public/man.png'"></image> -->
|
|
<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.name}}</view>
|
|
<view class="mobile">
|
|
<uni-icons type="phone" color="#999999FF"></uni-icons>联系人-<text
|
|
@click="copyPhone(item.account)">{{item.account}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="circle"></view>
|
|
<view class="green">所属片区</view>
|
|
<view>{{item.city_name+item.area_name+item.street_name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<!-- <view class="top">
|
|
发消息
|
|
</view> -->
|
|
<view class="bottom" @click="callUp(item.account)">
|
|
拨打电话
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-empty v-if="loadConfig.status=='nomore'&& areaManagerList.length==0" text="没有片区经理"
|
|
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>
|
|
</template>
|
|
|
|
<script>
|
|
import { Toast } from '@/libs/uniApi.js'
|
|
import { companyAreaManager } from "@/api/company.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false,
|
|
loadConfig: {
|
|
page: 1,
|
|
limit: 15,
|
|
loadingText: '努力加载中',
|
|
loadmoreText: '轻轻上拉',
|
|
nomoreText: '我也是有底线的~~',
|
|
status: 'loadmore'
|
|
},
|
|
areaManagerList: []
|
|
}
|
|
},
|
|
onLoad() {},
|
|
onShow() {
|
|
this.loadAreaManager();
|
|
},
|
|
onReachBottom() {
|
|
this.loadAreaManager();
|
|
},
|
|
methods: {
|
|
async loadAreaManager() {
|
|
try {
|
|
if (this.loadConfig.status == "nomore") return;
|
|
this.loadConfig.status = "loading"
|
|
let res = await companyAreaManager({
|
|
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.areaManagerList = [...this.areaManagerList, ...res.data?.data]
|
|
} catch (e) {
|
|
this.loadConfig.status = "nomore"
|
|
}
|
|
},
|
|
//拨打电话
|
|
callUp(phone) {
|
|
uni.makePhoneCall({
|
|
phoneNumber: phone + "",
|
|
success: (e) => {
|
|
console.log(e);
|
|
},
|
|
fail: (e) => {
|
|
Toast('页面跳转失败,请检查是否开启权限')
|
|
}
|
|
});
|
|
},
|
|
//复制号码
|
|
copyPhone(str = "") {
|
|
uni.setClipboardData({
|
|
data: str + "",
|
|
success: (e) => {
|
|
Toast('号码已复制')
|
|
},
|
|
fail: (e) => {
|
|
Toast('复制失败')
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
uni.stopPullDownRefresh()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.task_box {
|
|
margin: 0 auto;
|
|
width: 750rpx;
|
|
height: 98rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 28rpx;
|
|
|
|
.screening {
|
|
margin-left: 10px;
|
|
width: 149rpx;
|
|
height: 63rpx;
|
|
line-height: 63rpx;
|
|
text-align: center;
|
|
background: #FFFFFF;
|
|
border-radius: 35rpx;
|
|
border: 2rpx solid #E6E5E5;
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.choose_style {
|
|
background-color: #3274F9;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
// 筛选按钮
|
|
.search_box {
|
|
width: 750rpx;
|
|
// height: 368rpx;
|
|
background: #FFFFFF;
|
|
display: flex;
|
|
|
|
.first_order {
|
|
width: 250rpx;
|
|
height: 73rpx;
|
|
text-align: center;
|
|
color: #666666;
|
|
font-size: 28rpx;
|
|
line-height: 73rpx;
|
|
background-color: #f5f5f5;
|
|
|
|
}
|
|
|
|
.choose {
|
|
background-color: #fff;
|
|
color: #3274F9;
|
|
}
|
|
|
|
.second_order {
|
|
text-align: center;
|
|
width: 500rpx;
|
|
|
|
.second {
|
|
line-height: 73rpx;
|
|
height: 73rpx;
|
|
border-bottom: 2rpx solid #E6E6E6;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.head_box {
|
|
width: 750rpx;
|
|
height: 98rpx;
|
|
box-sizing: border-box;
|
|
padding: 0 28rpx;
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
width: 149rpx;
|
|
height: 63rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 35rpx 35rpx 35rpx 35rpx;
|
|
opacity: 1;
|
|
border: 2rpx solid #E6E5E5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
margin: 21rpx 28rpx;
|
|
padding-bottom: 21rpx;
|
|
|
|
.item {
|
|
width: 694rpx;
|
|
// height: 201rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
|
opacity: 1;
|
|
margin-bottom: 21rpx;
|
|
box-sizing: border-box;
|
|
padding: 28rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.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;
|
|
height: 100%;
|
|
|
|
.name {
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
|
|
.mobile {
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.top,
|
|
.bottom {
|
|
width: 158rpx;
|
|
height: 53rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
|
opacity: 1;
|
|
border: 2rpx solid #3274F9;
|
|
color: #3274F9;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.bottom {
|
|
border: 2rpx solid #F9AA32;
|
|
color: #F9AA32;
|
|
margin-top: 18rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |