ylrz_his_scrm_company_qw/pages/user/customerDetail.vue

<template>
	<view>
		<view class="topBgline plr20">
			<view class="justify-start p30 bgcolf radius12">
				<u-avatar :src='detailUser.avatar'></u-avatar>
				<view class="ml16">
					<view class="bold fs28">{{detailUser.name}}</view>
					<view class="fs24 base-color-3">备注：{{detailUser.remark}}</view>
				</view>
			</view>
		</view>
		<view class="bgf p20">
			<view>会员资料</view>
			<view class="justify-between">
				<view class="justify-start align-center fs24 mt20 widthpath" >
					<view class="base-color-6 mr40">性别</view>
					<view>{{moreInfo.sex?moreInfo.sex:'未知'}}</view>
				</view>
				<view class="justify-start align-center fs24 mt20 widthpath" >
					<view class="base-color-6 mr40">年龄</view>
					<view>{{moreInfo.age?moreInfo.age:'未知'}}</view>
				</view>
			</view>
			<view class="justify-start align-center fs24 mtb20">
				<view class="base-color-6 mr40">行为习惯</view>
				<view>{{moreInfo.habits?moreInfo.habits:'无'}}</view>
			</view>
			<view class="justify-start align-center fs24">
				<view class="base-color-6 mr40">患病时间</view>
				<view>{{moreInfo.illnessTime?moreInfo.illnessTime:'无'}}</view>
			</view>
			<view class="justify-start align-center fs24 mt20" >
				<view class="base-color-6 mr40">身体状态</view>
				<view>{{moreInfo.body?moreInfo.mebodydicine:'无'}}</view>
			</view>
			<view class="justify-start align-center fs24 mt20" >
				<view class="base-color-6 mr40">家人的疾病</view>
				<view>{{moreInfo.familyDisease?moreInfo.familyDisease:'无'}}</view>
			</view>
			<view class="justify-between align-center">
				<view class="justify-start align-center fs24 mt20 widthpath">
					<view class="base-color-6 mr40">是否线下就诊</view>
					<view>{{moreInfo.isLine?'已线下就诊':'无'}}</view>
				</view>
				<view class="justify-start align-center fs24 mt20 widthpath" >
					<view class="base-color-6 mr40 ">体质</view>
					<view>{{moreInfo.constitution?moreInfo.constitution:'无'}}</view>
				</view>
			</view>
			<view class="justify-start align-center fs24 mt20" >
				<view class="base-color-6 mr40">使用药品</view>
				<view>{{moreInfo.medicine?moreInfo.medicine:'无'}}</view>
			</view>
			<view class="justify-start align-center fs24 mt20" >
				<view class="base-color-6 mr40">咨询产品</view>
				<view>{{moreInfo.consultProduct?moreInfo.consultProduct:'无'}}</view>
			</view>
			<view class="justify-start align-center fs24 mt20" >
				<view class="base-color-6 mr40">是否已经购买产品</view>
				<view>{{moreInfo.isBuy?'已购买':'无'}}</view>
			</view>
		</view>
		<view class="center bgf fs28">看课记录</view>
		<view class="bgf p20">
			<view class="justify-start ">
				<view v-for="(item,index) in titname" :key="index" class="justify-start align-center ml28">
					<view :style="{ backgroundColor: statusColors[index] || '#CCCCCC' }" 
					class="w24 h24 radius4"></view>
					<view class="fs24 mr6 ml10">{{item}}</view>
				</view>
			</view>
			<view class="fs24 mt20 base-color-6" >近{{typestate==0?'7':'30'}}天看课记录</view>
			<view class="justify-between mt20">
				<view class="justify-start align-center mt12 " style="width: 80%;flex-wrap: wrap">
					<view class="w54 h54 mr20 radius4 mb12" v-for="(item,index) in answerlist" :key="index"
					>
						<view class="fs24 base-color-6">{{item.date.slice(-2)}}</view>
						<view :style="{ backgroundColor: statusColors[item.logType] || '#CCCCCC' }" 
						class="w30 h30 radius4"></view>
					</view>
				</view>
				<view class="u-border lh45 plr20 fs24 radius40 base-color-3 h50"
				 @click="todetail">{{typestate==0?'详情':'收起'}}</view>
			</view>
			<view class="pt120"></view>
		</view>
		<view class="justify-around botfun bgf">
			<view class="justify-start align-center bottom-btns base-bg" 
			@click="navTo('/pages/user/courseManage?externalUserId='+externalUserId)" >
				<view class="colorf ml12">课程管理</view>
			</view>
			<view class="justify-start align-center bottom-btns base-bg" 
			@click="navTo('/pages/user/UrgeClasses?externalUserId='+externalUserId)">
				<view class="colorf ml12" >催课管理</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getcustomerlist,
		getcustomer
	} from "@/api/user.js";
	export default {
		data() {
			return {
				typeOption: [{
					label: '全部',
					value: 0
				}, {
					label: '今天',
					value: 1
				}, {
					label: '昨天',
					value: 2
				}, {
					label: '前天',
					value: 3
				}, {
					label: '近七天',
					value: 4
				}],
				tabindex: 0,
				detailUser: [],
				user: [],
				answerlist:[],
				answerText:'禁用',
				userId:[],
				id:'',
				dateTag:'',
				externalUserId:'',
				qwUserId:'',
				startTime:"",
				endTime:'',
				todayday: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				moreInfo:{},
				statusColors: {
					0: '#909399',
					1: '#0bc6ff',
					2: '#67c23a',
					3: '#f55a4f',
					4: '#ffd700',
				  },
				titname:['未看课','看课中','完课','待看课','看课中断',],
				statelist:[
				{  status: 4 },
				{  status: 1 },
				{  status: 2 },
				{  status: 5 },
				{  status: 3 },
				{  status: 5 },
				{  status: 3 },
				  ],
				typestate:0
			}
		},
		onShow() {
			this.getuser()
			// this.detailUser =uni.getStorageSync('detailUser')
			// if(this.detailUser.status==0){
			// 	this.answerText='取消禁用'
			// }
			this.qwUserId=uni.getStorageSync('qwUserId')
			this.$nextTick(()=>{
				setTimeout(()=>{
					this.getAnswerlists()
				},200)
			})
		},
		mounted() {
			
		},
		onLoad(option) {
			// this.id=option.id
			// this.corpId=options.corpId;
			// uni.setStorageSync("corpId",this.corpId);
		},
		methods: {
			todetail(){
				if(this.typestate==0){
					this.typestate=1
				}else{
					this.typestate=0
				}
				this.getAnswerlists()
			},
			getuser(){
				const data={
					qwExternalContactId:50
				}
				getcustomer(data).then(res=>{
					if (res.code == 200) {
						this.detailUser=res.data
						this.moreInfo=res.moreInfo
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getAnswerlists() {
				const params = {
					type:this.typestate,
					qwExternalContactId:50
				}
				getcustomerlist(params).then(res => {
					if (res.code == 200) {
						this.answerlist=res.data.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			navTo(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.widthpath {
		width: 50%;
	}

	.topBgline {
		background: linear-gradient(to right, rgba(225, 238, 255, 1), rgba(223, 224, 254, 1));
		padding-top: 40rpx;
	}

	.bgcolf {
		background: rgba(255, 255, 255, 0.4);
	}

	.actsel {
		background-color: #1773ff;
		color: #fff;
		transition: background-color 0.4s ease-in-out;
	}

	.notact {
		background-color: #f8f8f8;
	}

	.livebox {
		width: calc(50% - 10rpx);
		background-color: #f8f8f8;
		padding: 20rpx 10rpx;
		border-radius: 12rpx;
	}

	.liveboxs {
		width: calc(33% - 10rpx);
		background-color: #f8f8f8;
		padding: 20rpx 10rpx;
		border-radius: 12rpx;
	}

	.bottom-btns {
		padding: 10rpx 40rpx;
		border-radius: 50rpx;
	}

	.botfun {
		position: fixed;
		width: 100%;
		bottom: 0rpx;
		padding: 20rpx 0;
	}
</style>