ylrz_scrm_company_h5/pages/courseManage/vip/ManageDetail.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.nickName?detailUser.nickName:detailUser.phone}}</view>
					<view class="fs24 base-color-3">注册时间：{{detailUser.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="plr20 ptb32 justify-around">
			<view v-for="(item,index) in typeOption" :key="item.value" class='fs24 base-color-3 ptb4 plr20 radius4'
				@click="tabActive(index)" :class="tabindex==index?'actsel':'notact'">{{item.label}}</view>
		</view>
		<view>
			<u-collapse :border='false' :value='collapseValue' @change="changeCollapse">
				<!-- <u-collapse-item name="course">
					<text slot="title" >直播统计</text>
					<text slot="value" class="base-color fs24">{{collapseValue.includes('course')?'收回':'展开'}}</text>
					<view slot="right-icon">
						<u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
					</view>
					<view class="justify-between">
						<view class="justify-between livebox">
							<view class="base-color-3">观看次数</view>
							<view class="base-color fs24"><text class="fs32 bold">0</text>次</view>
						</view>
						<view class="livebox justify-between">
							<view class="base-color-3">完播次数</view>
							<view class="base-color fs24"><text class="fs32 bold">0</text>次</view>
						</view>
					</view>
				</u-collapse-item> -->
				<u-collapse-item name="course">
					<text slot="title">答题统计</text>
					<text slot="value" class="base-color fs24">{{collapseValue.includes('course')?'收回':'展开'}}</text>
					<view slot="right-icon">
						<u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
					</view>
					<view class="justify-between">
						<view class=" liveboxs">
							<view class="base-color-3">答题次数</view>
							<view class="base-color fs24">
								<text class="fs32 bold">{{answerlist.answerCount}}</text>次
							</view>
						</view>
						<view class="liveboxs ">
							<view class="base-color-3">正确次数</view>
							<view class="base-color fs24">
								<text class="fs32 bold">{{answerlist.rightCount}}</text>次
							</view>
						</view>
						<view class="liveboxs ">
							<view class="base-color-3">答题红包数</view>
							<view class="base-color fs24">
								<text class="fs32 bold">{{answerlist.redSize}}</text>次
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<view class="justify-start align-center base-bg-f8 mlr30 radius12 plr20 ptb20">
				<u-image src="@/static/manergevip/book.png" width="30" height="30"></u-image>
				<view class="ml20">
					<view class="base-color-3">答题红包金额</view>
					<view class="base-color fs24"><text class="fs32 bold mr4">
					{{answerlist.totalAmount==0?'00.00':answerlist.totalAmount}}</text>元</view>
				</view>
			</view>
		</view>
		<view class="justify-center botfun">
			<view class="justify-start align-center bottom-btns" style="border: 2rpx solid #ee0a25;"
			@click="disableUser" :class="this.detailUser.isBlack==0?'':'base-bg-red'">
				<u-icon name="close-circle" :color="this.detailUser.isBlack==0?'#ee0a25':'#fff'" size="22" ></u-icon>
				<view class=" ml12" :class="this.detailUser.isBlack==0?'base-color-red':'colorf'">{{answerText}}</view>
			</view>
			<!-- <view class="justify-start align-center bottom-btns" style="border: 2rpx solid #1677ff;">
				<u-icon name="pushpin" color="#1677ff" size="22"></u-icon>
				<view class="base-color">会员分组</view>
			</view>
			<view class="justify-start align-center base-bg bottom-btns">
				<u-icon name="rmb-circle" color="#fff" size="22"></u-icon>
				<view class="colorf">新会员奖励</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		getanswerlist,
		Addblacklist,
		removebalcklist
	} from "@/api/courseManage.js";
	export default {
		data() {
			return {
				typeOption: [{
					label: '全部',
					value: 0
				}, {
					label: '今天',
					value: 1
				}, {
					label: '昨天',
					value: 2
				}, {
					label: '前天',
					value: 3
				}, {
					label: '近七天',
					value: 4
				}],
				tabindex: 0,
				collapseValue: ['course', 'questions', 'redenvelope'],
				detailUser: [],
				user: [],
				todayday: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				startTime: '',
				endTime: '',
				answerlist:[],
				answerText:'禁用',
				userId:[]
			}
		},
		
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
			this.detailUser = uni.getStorageSync('detailUser')
			console.log(this.detailUser)
			this.getAnswerlists()
		},
		methods: {
			tabActive(index) {
				console.log(index)
				this.tabindex = index
				if(index==0){
					this.startTime=''
					 this.endTime=''
					 this.getAnswerlists()
				}else if(index==1){
					this.startTime = this.todayday + ' 00:00:00'
					this.endTime = this.todayday + ' 23:59:59'
					this.getAnswerlists()
				}else if(index==2){
					let yesterday = new Date();
					yesterday.setDate(yesterday.getDate() - 1);
					this.startTime = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd') + ' 00:00:00'
					this.endTime = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd') + ' 23:59:59'
					this.getAnswerlists()
				}else if(index==3){
					let yesterday = new Date();
					yesterday.setDate(yesterday.getDate() - 2);
					this.startTime = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd') + ' 00:00:00'
					this.endTime = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd') + ' 23:59:59'
					this.getAnswerlists()
				}else{
					let yesterday = new Date();
					yesterday.setDate(yesterday.getDate() - 6);
					this.startTime = uni.$u.timeFormat(yesterday, 'yyyy-mm-dd') + ' 00:00:00'
					this.endTime = this.todayday + ' 23:59:59'
					this.getAnswerlists()
				}
			},
			changeCollapse(e) {
				this.collapseValue = e.filter(item => item.status == 'open').map(it => it.name)
			},
			getAnswerlists() {
				const params = {
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					type: this.user.userType == '00' ? 0 : 1, // 0:经销商/1:群管
					courseId: this.tabindex,
					startTime: this.startTime,
					endTime: this.endTime,
					userId: this.detailUser.userId
				}
				getanswerlist(params).then(res => {
					if (res.code == 200) {
						this.answerlist=res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			disableUser(){
				if(this.detailUser.isBlack==0){
					this.addblack()
					this.detailUser.isBlack=1
					this.answerText='已禁用'
				}else{
					this.deleteblack()
					this.detailUser.isBlack=0
					this.answerText='禁用'
				}
			},
			addblack(){
				//添加到黑名单
				this.userId[0]=this.detailUser.userId
				const params={
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					id:'',
					userId: this.userId
				}
				Addblacklist(params).then(res=>{
					if(res.code==200){
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: '用户成功被禁用'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/courseManage/index'
							})
						},500)
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			deleteblack(){
				//移除黑名单
				const params={
					userId:this.detailUser.userId
				}
				removebalcklist(params).then(res=>{
					if(res.code){
						uni.showToast({
							icon: 'none',
							title: '用户成功取消禁用'
						})
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/courseManage/index'
							})
						},500)
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.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;
		bottom: 32rpx;
		right: 32rpx;
	}
</style>