hls_crm/pagesA/profile/mySet/keyFocus/keyFocus.vue

<template>
	<view>
		<!-- 客户信息 -->
		<view class="manage_con">
			<view class="clineInfo" v-for="(item,index) in list" :key="index">
				<view class="info_head">
					<view>{{item.name}}</view>
					<view></view>
				</view>
				<view class="info_main" @click="cost(item.id)">
					<view class="main_left"> 
						<view class="left_followUp">
							<view>下次跟进时间：</view>
							<view>{{item.next_time}}</view>
						</view>
						<view class="left_star">
							<view>客户星级：</view>
							<view>
								<u-rate :count="5" v-model="item.level" disabled active-color="#FFD049" inactive-color="#b2b2b2" :size="30" :gutter="10"></u-rate>
							</view>
						</view>
						<view class="left_foot">
							<view class="l_box">
								<span>{{item.follow? item.follow : '--'}}</span>
							</view>
						</view>
					</view>
					<view class="main_right">
						<image :src="item.owner_staff.img ? item.owner_staff.img : BASE_IMG_URL+'headImg.png'" mode="scaleToFill"></image>
						<view>{{item.owner_staff.name}}</view>
					</view>
				</view>
				<view class="info_footer">
					<view class="footer_content" @click="followClick(item.id,1)">
						<image :src="BASE_IMG_URL+'tj.png'" mode="scaleToFill"></image>
						<view>跟进</view>
					</view>
					<view class="footer_content" @click="linkmanClick(item.id)">
						<image :src="BASE_IMG_URL+'rq.png'" mode="scaleToFill"></image>
						<view>联系人</view> 
					</view>
					<view class="footer_content" @click="telClick(item.contacts)">
						<image :src="BASE_IMG_URL+'dh.png'" mode="scaleToFill"></image>
						<view>电话</view>
					</view>	
				</view>
			</view>
			<view style="height: 200rpx;"></view>
					<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
		</view>
	</view>
</template>

<script>
	import {customerSortDatas} from 'components/content/data/data.js';
	import { BASE_IMG_URL } from '@/util/api.js'
	import {customerPageJumps} from "@/pagesA/crm/crm_page_jumps.js";
	import { netGetKeyKehu } from '@/api/index.js'
	export default {
		mixins:[customerPageJumps],
		data() {
			return {
				sort: false,
				screen: false,
				date: '',
				show: false,
				sortData:customerSortDatas,
				screenData:[],
				description:'',
				telActions: [],
				queryObj:{},
				page:1,
				totalPage:1,
				limit:10,
				list:[],
				BASE_IMG_URL:BASE_IMG_URL,
			}
		},
		onLoad () {
			
		},
		onShow() {
			this.list = []
			this.page = 1
			this.totalPage = 1
			//获取客户 列表
			this.getList()
		},
		onReachBottom() {
			if(this.page >= this.totalPage){
				return
			}
			this.page ++
			this.getList()
		},
		methods: {
			queryData(params) {
				this.queryObj = params
				this.list = []
				this.page = 1
				this.getList()
			},
			//详情
			cost(id,type){
				uni.navigateTo({
					url: '/pages/index/groupCompany/groupCompany?id='+id+'&type=1'
				})
			},
			getList() {
				let params = {
					page:this.page,
					limit: this.limit
				}
				netGetKeyKehu(params).then(res=>{
					res = res.data
					this.list = this.list.concat(res.data)
					this.page = res.current_page
					this.totalPage = res.last_page
				})
			},
			sortClick(data) {
				this.sort = data;
				this.screen = false;
			},
			screenClick(data) {
				this.screen = data;
				this.sort = false;
			},
			switchover(value){
				this.screenData = value;
			},
			// 任务
			taskClick() {
				this.taskShow = true;
			},
			telClick(item) {
				// #ifdef MP-ALIPAY
				dd.showCallMenu({
				    phoneNumber: item.mobile, 
				    code: '+86'
				})
				// #endif
				// #ifndef MP-ALIPAY || APP-PLUS
				uni.makePhoneCall({
					phoneNumber: item.mobile
				})
				// #endif
				// #ifdef APP-PLUS
				plus.device.dial(item.mobile, true);
				// #endif
			},
			onCancel() {
				
				this.taskShow = false;
				this.telShow = false;
			},
		}
	}
</script>

<style lang="scss">
	.left_foot {
		padding-bottom: 20rpx;
		margin: 20rpx 0;
		.l_box {
			margin-right: 35rpx;
			float: left;
	
			span {
				background: $uni-text-color-opcity;
				padding: 5rpx 12rpx;
				font-size: 26rpx;
				color: $uni-text-color;
				border-radius: 5rpx;
			}
		}
	}
	.tj{
		
		    width: 80rpx;
		    height: 80rpx;
		    border-radius: 50%;
			
			
			position: fixed;
			    z-index: 1;
			    bottom: 180rpx;
			    right: 80rpx;
	}
	.clineInfo {
		// margin: 0 30rpx;
		background-color: #fff;
		padding: 30rpx 24rpx;
		margin-top: 20rpx;
		border-radius: 10rpx;
		.info_head {
			display: flex;
			justify-content: space-between;
		
			:first-child {
				font-size: 34rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.info_main {
			display: flex;
			justify-content: space-between;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #ededed;
			.main_left {
				.left_followUp {
					display: flex;
					padding: 20rpx 0;
					font-size: 30rpx;
					color: #666;
					margin: 20rpx 0;
				}

				.left_star {
					display: flex;
					padding-bottom: 20rpx;
					font-size: 30rpx;
					color: #666;
				}
			}

			.main_right {
				text-align: center;
				padding: 20rpx 20rpx 0 0;
						
				image {
					width: 129rpx;
					height: 129rpx;
					margin-bottom: 5rpx;
					border-radius: 50%;
				}
			}
		}

		.info_footer {
			display: flex;
			justify-content: space-around;
			padding-top: 30rpx;
			height: 80rpx;

			.footer_content {
				// width: 25%;
				line-height: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 15rpx;
				}
				.icon-iconmore-copy,
				.icon-follow {
					font-size: 22rpx;
				}

				.icon-follow,
				.icon-task,
				.icon-tel {
					margin-right: 5rpx;
				}

				.icon-iconmore-copy {
					margin-left: 5rpx;
					margin-top: 2rpx;
				}
			}
		}
	}

	.icon_creat {
		position: fixed;
		z-index: 1;
		bottom: 80rpx;
		right: 80rpx;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
</style>