新增片区经理页面
This commit is contained in:
weipengfei
parent
673c8d18c6
commit
0043effd95
322
subpkg/manager/manager.vue
Normal file
322
subpkg/manager/manager.vue
Normal file
@ -0,0 +1,322 @@
|
||||
<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('17685151643')">{{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(17685151643)">
|
||||
拨打电话
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :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:{
|
||||
loadingText: '努力加载中',
|
||||
loadmoreText: '轻轻上拉',
|
||||
nomoreText: '我也是有底线的~~',
|
||||
status: 'nomore'
|
||||
},
|
||||
areaManagerList:[]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
uni.setNavigationBarColor({
|
||||
frontColor: '#ffffff',
|
||||
backgroundColor: '#3175f9'
|
||||
})
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
this.loadAreaManager();
|
||||
},
|
||||
methods: {
|
||||
async loadAreaManager(){
|
||||
let res = await companyAreaManager();
|
||||
this.areaManagerList = res.data;
|
||||
},
|
||||
//拨打电话
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user