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-start wrap">
					<view class="tag" v-for="(item,index) in tags" :key="index">{{item}}</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="navgetTo()">
					<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
				// },
				tags: [],
				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;
			
			uni.$on('refreshClientDetail', () => {
				this.mescroll.resetUpScroll()
				// this.getUserInfo()
			})
		},
		onShow() {
			console.log("onshow")
           this.getUserInfo()
			// this.getHome()
		},
		methods: {
			getUserInfo() {
				// var data={token:uni.getStorageSync('CompanyUserToken')}
				getInfo({
					userId: this.userId
				}).then(
					res => {
						if (res.code == 200) {
							this.user = res.data;
							this.getHome()
						} 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;
							this.tags = res.data.otherMedicalHistory?res.data.otherMedicalHistory.split('、') :[];
						} 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) {
				uni.showToast({
					icon: 'none',
					title: '暂无更多',
				});
				// 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;
					min-width: 112rpx;
					height: 56rpx;
					padding: 0 10rpx;
					margin-bottom: 10rpx;
					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>