179crm_user_app/pages_company/index.vue

<template>
	<view class="top-cont">
		<image class="bg" src="https://user.test.ylrztop.com/images/sales_management_top_bg.png" mode="widthFix"></image>
		<view :style="{height: statusBarHeight,background: bgColor }"></view>
		<u-navbar title="销售管理" titleStyle="font-weight: 500;" @rightClick="rightClick" :autoBack="true"
			:bg-color="bgColor">
		</u-navbar>
		<view class="content">
			<!-- <view class="user-info">
				<view class="left">
					<view class="name-phone">
						<view class="name">{{user.nickName}}</view>
						<view class="phone" v-if="user!=null">{{utils.parsePhone(user.phonenumber)}}</view>
					</view>
				</view>
				<view class="msg-box"  >
					 {{user.deptName}}
				</view>
			</view> -->
			<!-- 常用工具 -->
		<!-- 	<view class="used-tools">
				<view class="title">常用工具</view>
				<view class="tools-list">
					<view class="item" @click="toCreateOrder()">
						<image src="../static/images/order.png" mode=""></image>
						<text class="text">商品制单</text>
					</view>
					<view class="item" @click="toCreateCoupon()">
						<image src="../static/images/icon_coupon.png" mode=""></image>
						<text class="text">制单优惠券</text>
					</view>
					<view class="item" @click="toPay()">
						<image src="../static/images/money.png" mode=""></image>
						<text class="text">微信收款</text>
					</view>
					<view class="item" @click="alipay()">
						<image src="../static/images/money.png" mode=""></image>
						<text class="text">支付宝收款</text>
					</view>
					<view class="item" @click="toOrder()">
						<image src="../static/images/order.png" mode=""></image>
						<text class="text">我的订单</text>
					</view>
					<view class="item" @click="toPackage()">
						<image src="../static/images/package.png" mode=""></image>
						<text class="text">商品套餐</text>
					</view>
					<view class="item" @click="toCoupon()">
						<image src="../static/images/icon_coupon.png" mode=""></image>
						<text class="text">套餐优惠券</text>
					</view>
					 
				</view>
			</view> -->
			<view class="user-info2">
				<view class="left">
					<view class="head-img">
						<image :src="user.avatar==null?'../static/images/health/my_heads.png':user.avatar" mode="aspectFill"></image>
					</view>
					<view class="name-phone">
						<view class="align-end">
							<view class="name">{{user.nickName}}</view>
							<image class="w48 h48" src="../static/images/company/right_arrow_black_icon24.png" mode=""></image>
						</view>
						<view class="phone-box" v-if="user!=null">
							<image class="w32 h32" src="../static/images/company/phone_icon16.png" mode=""></image>
							<view class="phone">
								{{user.phonenumber}}
							</view>
						</view>
					</view>
				</view>
				<view class="msg-box">
					 {{user.deptName||''}}
				</view>
			</view>
			<view class="used-tools2">
				<view class="title">指标汇总</view>
				<view class="index-box">
					<view class="task">
						<view class="align-center" @click="navgetTo('/pages_company/todoList?type=0')">
							<image class="w48 h48" src="../static/images/company/appointed_task_icon.png" mode=""></image>
							<view class="box-title">指派任务</view>
							<image class="w24 h24" src="../static/images/company/right_arrow_right_icon.png" mode=""></image>
						</view>
						<view class="prop">{{(data[0].completionRate||0.00)+ "%"}}</view>
					</view>
					<view class="work">
						<view class="align-center" @click="navgetTo('/pages_company/todoList?type=1')">
							<image class="w48 h48" src="../static/images/company/work_item_icon.png" mode=""></image>
							<view class="box-title">工作事项</view>
						<image class="w24 h24" src="../static/images/company/right_arrow_right_icon.png" mode=""></image>
						</view>
						<view class="prop">{{(data[1].completionRate||0.00)+ "%"}}</view>
					</view>
				</view>
			</view>
			<view class="used-tools2">
				<view class="title">常用工具</view>
				<view class="tools-list">
					<view class="item" @click="navgetTo('/pages_user/user/userTui')">
						<image src="../static/images/company/my_promotion_icon.png" mode=""></image>
						<text class="text">我的推广</text>
					</view>
					<view class="item" @click="navgetTo('/pages_company/todoList')">
						<image src="../static/images/company/to_do_list_icon.png" mode=""></image>
						<text class="text">待办事项</text>
					</view>
					<view class="item" @click="toUser()">
						<image src="../static/images/company/customer_profile_icon.png" mode=""></image>
						<text class="text">客户档案</text>
					</view>
					<view class="item" @click="navgetTo('/pages_user/user/userTui')">
						<image src="../static/images/company/manager_examine_icon.png" mode=""></image>
						<text class="text">管理师考核</text>
					</view>
					<view class="item" @click="navgetTo('/pages_company/clientList')">
						<image src="../static/images/company/my_subordinate.png" mode=""></image>
						<text class="text">我的下级</text>
					</view>
					<view class="item" @click="navgetTo('/pages_company/complaintList')">
						<image src="../static/images/company/customer_complaints_icon.png" mode=""></image>
						<text class="text">客户投诉</text>
					</view>
					 
				</view>
			</view>
			<!-- 退出登录按钮 -->
			<view class="log-out" @click="logout">退出登录</view>
		</view>
		
	</view>
</template>

<script>
	import {getUserInfo,getQrImg,queryCateStatis} from '@/api/companyUser'
	export default {
		data() {
			return {
				statusBarHeight:'',
				top:0,
				// user:{
				// 	nickName:'健康管家小左',
				// 	phonenumber:'13996660261',
				// 	deptName:'测试企业',
				// 	avatar:null
				// },
				 user:null,
				 data:null,
			};
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top = this.top / 30;
				return 'rgba(11,179,242, ' + top + ')';
			},
		},
		onLoad() {
			console.log("onload")
		},
		onShow() {
			console.log("onshow")
			this.getUserInfo()
			this.queryCateStatis()
			// this.queryCateStatis(1)
		},
		methods: {
			// navgetTo(url){
			// 	uni.navigateTo({
			// 		url:url
			// 	})
			// },
			alipay(){
				// var url="http://alipay.yjf.runtzh.com/#/?companyId="+this.user.companyId+"&companyUserId="+this.user.userId
				// uni.setClipboardData({
				// 	data:url,
				// 	success:()=>{
				// 		uni.showToast({
				// 			title:'收款地址已复制到剪切板',
				// 			icon:'none'
				// 		})
						
				// 	}
				// });
				
				uni.navigateTo({
					url:'/pages_company/alipayImg'
				})
			},
			toUser(){
				// uni.navigateTo({
				// 	url:'/pages_company/clientList?companyId='+this.user.companyId+"&companyUserId="+this.user.userId
				// })
				
				uni.navigateTo({
					url:'/pages_company/doc?companyId='+this.user.companyId+"&companyUserId="+this.user.userId
				})
			},
			//客户档案
			toCard(){
				uni.navigateTo({
					url:'/pages_company/card?cardId='+this.user.cardId
				})
			},
			toCreateOrder(){
				uni.navigateTo({
					url:'/pages_company/order/productList'
				})
			},
			toPay(){
				uni.navigateTo({
					url:'/pages_user/user/pay?companyId='+this.user.companyId+"&companyUserId="+this.user.userId
				})
			},
			toOrder(){
				uni.navigateTo({
					url:'/pages_company/storeOrder?companyId='+this.user.companyId+"&companyUserId="+this.user.userId
				})
			},
			toPackage(){
				uni.navigateTo({
					url:'/pages_company/storeProductPackage?companyId='+this.user.companyId+"&companyUserId="+this.user.userId
				})
			},
			toCoupon(){
				uni.navigateTo({
					url:'/pages_company/coupon'
				})
			},
			toCreateCoupon(){
				uni.navigateTo({
					url:'/pages_company/order/coupon'
				})
			},
			toCreateOrderCoupon(){
				uni.navigateTo({
					url:'/pages_company/order/coupon'
				})
			},
			queryCateStatis(e){
				queryCateStatis().then(
					res => {
						if(res.code==200){
							  this.data=res.data;
						}
						else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getUserInfo(){
				var data={token:uni.getStorageSync('CompanyUserToken')}
				getUserInfo(data).then(
					res => {
						if(res.code==200){
							  this.user=res.data;
						}
						else if(res.code==403){
							uni.setStorageSync('CompanyUserToken',null);
							uni.navigateBack({
								delta:-1
							})			
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			logout(){
			 	uni.showModal({
			 		title:"提示",
			 		content:"确认退出登录吗?",
			 		showCancel:true,
			 		cancelText:'取消',
			 		confirmText:'确定',
			 		success:res=>{
			 			if(res.confirm){
			 				uni.setStorageSync('CompanyUserToken',null);
			 				uni.navigateBack({
			 					delta:-1
			 				})							
			 			}else{
			 			}
			 		}
			 	})
			 },
			 
			// 跳转页面
			navgetTo(url) {
				this.utils.isLogin().then(res => {
					if(res){
						uni.navigateTo({
							url: url
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 380rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.content{
		padding-top: calc(var(--status-bar-height) + 140rpx) !important;
		margin: 20upx 0upx;
		padding:20upx;
		// .user-info{
		// 	padding: 30upx;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-between;
		// 	.left{
		// 		position: relative;
		// 		display: flex;
		// 		.head-img{
		// 			width: 120upx;
		// 			height: 120upx;
		// 			border-radius: 50%;
		// 			overflow: hidden;
		// 			margin-right: 30upx;
		// 			border: 4upx solid #FFFFFF;
		// 			box-shadow: 0px 5px 15px 2px rgba(0,0,0,0.1);
		// 			image{
		// 				width: 100%;
		// 				height: 100%;
		// 			}
		// 		}
		// 		.name-phone{
		// 			padding-top: 15upx;
		// 			.name{
		// 				font-size: 36upx;
		// 				font-family: PingFang SC;
		// 				font-weight: bold;
		// 				color: #111111;
		// 				line-height: 1;
		// 			}
		// 			.phone{
		// 				font-size: 28upx;
		// 				font-family: PingFang SC;
		// 				font-weight: 500;
		// 				color: #666666;
		// 				line-height: 1;
		// 				margin-top: 30upx;
		// 			}
		// 		}
		// 	}
		// 	.msg-box{
		// 		padding: 5rpx 15upx;
		// 		height: 30upx;
		// 		line-height: 30upx;
		// 		font-size: 22upx;
		// 		font-family: PingFang SC;
		// 		font-weight: 500;
		// 		color: #FFFFFF;
		// 		border-radius: 8rpx;
		// 		background-color: #0bb3f2;
		// 	}
		// }
		// .used-tools{
		// 	box-sizing: border-box;
		// 	background: #FFFFFF;
		// 	border-radius: 16upx;
		// 	padding: 40upx 30upx;
			
		// 	.title{
		// 		font-size: 32upx;
		// 		font-family: PingFang SC;
		// 		font-weight: bold;
		// 		color: #222222;
		// 		line-height: 1;
		// 	}
		// 	.tools-list{
		// 		margin-top: 50upx;
		// 		display: flex;
		// 		flex-wrap: wrap;
		// 		width: 100%;
		// 		.item{
		// 			box-sizing: border-box;
		// 			width: 25%;
		// 			display: flex;
		// 			flex-direction: column;
		// 			align-items: center;
		// 			justify-content: center;
		// 			margin-bottom: 50upx;
		// 			position: relative;
		// 			image{
		// 				width: 44upx;
		// 				height: 44upx;
		// 			}
		// 			.text{
		// 				font-size: 24upx;
		// 				font-family: PingFang SC;
		// 				font-weight: 500;
		// 				color: #111111;
		// 				line-height: 1;
		// 				margin-top: 20upx;
		// 			}
		// 			.contact-btn{
		// 				display: inline-block;
		// 				position: absolute;
		// 				top: 0;
		// 				left: 0;
		// 				width: 100%;
		// 				height: 100%;
		// 				opacity: 0;
		// 			}
		// 		}
		// 	}
		// }
		.user-info2{
			// padding: 30upx;
			margin-bottom: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.left{
				position: relative;
				display: flex;
				.head-img{
					width: 128upx;
					height: 128upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 30upx;
					border: 4upx solid #FFFFFF;
					box-shadow: 0px 5px 15px 2px rgba(0,0,0,0.1);
					image{
						width: 100%;
						height: 100%;
					}
				}
				.name-phone{
					// padding-top: 15upx;
					display: flex;
					flex-direction: column;
					justify-content:center;
					.name{
						font-size: 40upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
						// line-height: 1;
					}
					.phone-box{
						width: 220rpx;
						height: 48rpx;
						background: #008FD3;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 14rpx;
						.phone{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 36rpx;
							margin-left: 6rpx;
						}
					}
					
				}
			}
			.msg-box{
				width: 144rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				background: linear-gradient( 90deg, #FEA501 0%, #FECB8A 100%);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				border: 1rpx solid #FEDDB9;
			}
		}
		.used-tools2{
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 40upx 30upx;
			margin-bottom: 20rpx;
			.title{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #222222;
				line-height: 1;
			}
			.tools-list{
				margin-top: 50upx;
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				.item{
					box-sizing: border-box;
					width: 25%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 50upx;
					position: relative;
					image{
						width: 48upx;
						height: 48upx;
					}
					.text{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #111111;
						line-height: 1;
						margin-top: 20upx;
					}
					.contact-btn{
						display: inline-block;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
					}
				}
			}
			.index-box{
				margin-top: 30rpx;
				display: flex;
				    align-items: center;
				    justify-content: space-between;
				.box-title{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #626468;
					margin: 0 14rpx;
				}
				.prop{
					font-family: Roboto Slab;
					font-weight: 500;
					font-size: 48rpx;
					color: #222426;
				}
				.task{
					width: 311rpx;
					height: 142rpx;
					background: #EBF8FF;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					    flex-direction: column;
					    justify-content: center;
					    align-items: center;
				}
				.work{
					width: 311rpx;
					height: 142rpx;
					background: #FFF3DE;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					    flex-direction: column;
					    justify-content: center;
					    align-items: center;
				}
			}
		}
		.log-out{
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
			background: #FFFFFF;
			border-radius: 16upx;
			margin-top: 20upx;
		}
	}
</style>