179crm_user_app/pages_company/clientDetail.vue

<template>
		<view class="content">
			<view class="user-info2">
				<view class="align-center justify-between">
				<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="name">{{user.username||'微信用户'}}</view>
						<view class="phone-box" v-if="user!=null">
							<image class="w32 h32" src="../static/images/company/address_icon.png" mode=""></image>
							<view class="address">
								{{user.city||'-'}}
							</view>
							<view class="phone">
								{{user.phone?utils.parsePhone(user.phone):'-'}}
							</view>
						</view>
					</view>
				</view>
					<image class="w80 h80" src="../static/images/company/phone_icon.png" mode=""></image>
				</view>
				<view class="tag-box">
					<view class="align-center justify-between mb32">
						<view class="title">他的标签</view>
						<view class="title2">编辑标签</view>
					</view>
					<view class="align-center">
						<view class="tag">高血压</view>
						<view class="tag">高血压</view>
						<view class="add-tag">
							<image class="w24 h24" src="../static/images/company/add_blue_icon.png" mode=""></image>
							<view>添加标签</view>
						</view>
					</view>
				</view>
				<view class="demands">
					<view class="title">健康诉求</view>
					<view class="text">{{user.problemsToSolve||'-'}}</view>
				</view>
				
			</view>
			<view class="used-tools2">
				<view class="title">管理</view>
				<view class="tools-list">
					<view class="item" @click="toHealth()">
						<image src="../static/images/company/health_records_icon.png" mode=""></image>
						<text class="text">健康档案</text>
					</view>
					<view class="item" @click="toReport()">
						<image src="../static/images/company/physical_examination_icon.png" mode=""></image>
						<text class="text">体检信息</text>
					</view>
					<view class="item" @click="toRecord()">
						<image src="../static/images/company/execution_record_icon.png" mode=""></image>
						<text class="text">执行记录</text>
					</view>
					<view class="item" @click="navgetTo()">
						<image src="../static/images/company/return_records_icon.png" mode=""></image>
						<text class="text">回访记录</text>
					</view>
					<view class="item" @click="toOrder()">
						<image src="../static/images/company/consumables_mall_icon.png" mode=""></image>
						<text class="text">购买信息</text>
					</view>
					 <view class="item" @click="toData()">
					 	<image src="../static/images/company/comparison_indicators_icon.png" mode=""></image>
					 	<text class="text">指标对比</text>
					 </view>
					 <view class="item" @click="navgetTo()">
					 	<image src="../static/images/company/evaluation_record_icon.png" mode=""></image>
					 	<text class="text">测评记录</text>
					 </view>
					 <view class="item" @click="navgetTo()">
					 	<image src="../static/images/company/follow_up_records_icon.png" mode=""></image>
					 	<text class="text">跟进记录</text>
					 </view>
				</view>
			</view>
			<view class="used-tools2">
				<view class="title">备注信息</view>
				<view class="tools-list">
					<view class="remark">暂无</view>
				</view>
		     </view>
		</view>
</template>

<script>
	import {getUserInfo,getQrImg} from '@/api/companyUser'
	import {getInfo,homeInfo} from '@/api/health.js'
	export default {
		data() {
			return {
				statusBarHeight:'',
				top:0,
				// user:{
				// 	nickName:'健康管家小左',
				// 	phonenumber:'13996660261',
				// 	deptName:'测试企业',
				// 	avatar:null
				// },
				 user:null,
				 info:null
			};
		},
		computed: {
			// 计算属性的 getter
			bgColor: function() {
				var top = this.top / 30;
				return 'rgba(11,179,242, ' + top + ')';
			},
		},
		onLoad(options) {
			this.userId=options.userId;
			this.companyId=options.companyId;
			this.companyUserId=options.companyUserId;
			this.getUserInfo()
		},
		onShow() {
			console.log("onshow")
			
			// this.getHome()
		},
		methods: {
			getUserInfo(){
				// var data={token:uni.getStorageSync('CompanyUserToken')}
				getInfo({userId:this.userId}).then(
					res => {
						if(res.code==200){
							  this.user=res.data;
						}else{
							uni.showToast({
								icon:'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			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'
				})
			},
			toHealth(){
				
				uni.navigateTo({
					url:'/pages_company/addDoc?userId='+this.userId+"&companyUserId="+this.companyUserId
				})
			},
			toReport(){
				
				uni.navigateTo({
					url:'/pages_user/user/reportList?userId='+this.userId+"&companyUserId="+this.companyUserId
				})
			},
			toRecord(){
				
				uni.navigateTo({
					url:'/pages_company/executionRecord?userId='+this.userId+"&companyUserId="+this.companyUserId
				})
			},
			toData(){
				
				uni.navigateTo({
					url:'/pages_user/user/dataAnalysis?userId='+this.userId+"&companyUserId="+this.companyUserId
				})
			},
			
			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/buyOrder?userId='+this.user.userId+"&companyUserId="+this.companyUserId
				})
			},
			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'
				})
			},
			
			getHome(){
				// var data={token:uni.getStorageSync('CompanyUserToken')}
				homeInfo({userId:this.userId}).then(
					res => {
						if(res.code==200){
							  this.info=res.data;
						}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+'?companyId='+this.companyId+"&companyUserId="+this.companyUserId
					// 	})
					// }
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		height: 380rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.content{
		padding:20upx;
		background: linear-gradient( 180deg, #008FD3 0%, #EFF3F7 24%, #EFF3F7 100%);
		height: 100vh;
		    box-sizing: border-box;
			padding-top: 32rpx;
		.user-info2{
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 16upx;
			padding: 40upx 30upx;
			margin-bottom: 20rpx;
			.left{
				position: relative;
				display: flex;
				.head-img{
					width: 112upx;
					height: 112upx;
					border-radius: 50%;
					overflow: hidden;
					margin-right: 30upx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.name-phone{
					// padding-top: 15upx;
					display: flex;
					flex-direction: column;
					justify-content:center;
					.name{
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
						// line-height: 1;
					}
					.phone-box{
						display: flex;
						align-items: center;
						margin-top: 14rpx;
						.phone{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #626468;
							line-height: 36rpx;
						}
						.address{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #626468;
							margin-left:8rpx;
							margin-right: 30rpx;
						}
					}
					
				}
			}
			.tag-box{
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				border-bottom: 1rpx solid #ECECEC;
				.title{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #222426;
				}
				.title2{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #626468;
				}
				.tag{
					margin-right: 16rpx;
					width: 112rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					background: #F0FAFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 24rpx;
					color: #008FD3;
				}
				.add-tag{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 1rpx solid #008FD3;
					font-size: 22rpx;
					color: #008FD3;
					image{
						margin-right: 8rpx;
					}
				}
			}
			.demands{
				.title{
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #222426;
					padding:28rpx 0;
				}
				.text{
					font-weight: 400;
					font-size: 28rpx;
					color: #898E91;
				}
			}
			.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: 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;
					}
				}
				.remark{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #898E91;
					text-align: left;
				}
			}
			.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>