ylrz_scrm_company_h5/pages/courseManage/vip/ManageDetail.vue

<template>
	<view>
		<view class="topBgline plr20">
			<view class="justify-between p30 bgcolf radius12 align-center">
				<view class="justify-start align-center">
					<u-avatar :src='detailUser.avatar'></u-avatar>
					<view class="ml16">
						<view class="bold fs28">{{detailUser.nickname}}</view>
						<view class="fs24 base-color-3">注册时间：{{detailUser.createTime}}</view>
					</view>
				</view>
				<view class="fs24  ptb8 plr12 base-bg-orange colorf radius12"
				@click="toactdetail" v-if="imgname=='蜂巢快药'">查看行动轨迹</view>
			</view>
		</view>
		<view class="plr20 ptb32 justify-around bgf">
			<view v-for="(item,index) in typeOption" :key="item.value" class='fs24 base-color-3 ptb4 plr20 radius4'
				@click="tabActive(item)" :class="tabindex==index?'actsel':'notact'">{{item.label}}</view>
		</view>
		<view class="bgf pb40">
			<u-collapse :border='false' :value='collapseValue' @change="changeCollapse">
				<!-- #ifdef MP-WEIXIN -->
				<u-collapse-item name="course" title="看课统计">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<u-collapse-item name="course">
						<text slot="title" class="bold">看课统计</text>
						<!-- #endif -->
					<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">{{answerlist.watchTimes}}</text>次</view>
						</view>
						<view class="livebox justify-between">
							<view class="base-color-3">完播次数</view>
							<view class="base-color fs24"><text class="fs32 bold">{{answerlist.completeWatchCount}}</text>次</view>
						</view>
					</view>
				</u-collapse-item>
				<!-- #ifdef MP-WEIXIN -->
				<u-collapse-item name="questions" title="答题统计">
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<u-collapse-item name="questions">
						<text slot="title" class="bold">答题统计</text>
						<!-- #endif -->
					<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.answerTime}}</text>次
							</view>
						</view>
						<view class="liveboxs ">
							<view class="base-color-3">正确次数</view>
							<view class="base-color fs24">
								<text class="fs32 bold">{{answerlist.answerRightTime}}</text>次
							</view>
						</view>
						<view class="liveboxs ">
							<view class="base-color-3">答题红包数</view>
							<view class="base-color fs24">
								<text class="fs32 bold">{{answerlist.answerRedPacketTime}}</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="imgPath+'/app/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.answerRedPacketAmount==0?'00.00':answerlist.answerRedPacketAmount}}</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.status==1?'bgf':'base-bg-red'">
				<u-icon name="close-circle" :color="this.detailUser.status==1?'#ee0a25':'#fff'" size="22" ></u-icon>
				<view class=" ml12" :class="this.detailUser.status==1?'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>
		<u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="20"
		:loading-text="loadingtext" ></u-loading-page>
	</view>
</template>

<script>
	import {
		getanswerlist,
		Addblacklist,
		removebalcklist
	} from "@/api/courseManage.js";
	export default {
		data() {
			return {
				viewload:true,
				loadingtext:"数据加载中...",
				typeOption: [{
					label: '全部',
					value: 0
				}, {
					label: '今天',
					value: 1
				}, {
					label: '昨天',
					value: 2
				}, {
					label: '前天',
					value: 3
				}, {
					label: '近七天',
					value: 4
				}],
				tabindex: 0,
				collapseValue: ['course', 'questions', 'redenvelope'],
				detailUser: [],
				user: [],
				answerlist:[],
				answerText:'禁用',
				userId:[],
				id:'',
				dateTag:''
			}
		},
		computed: {
		    imgPath() {
		      return this.$store.state.imgpath
		    },
			imgname() {
			  return this.$store.state.logoname
			}
		},
		onShow() {
			this.getAnswerlists()
			this.detailUser =uni.getStorageSync('detailUser')
			if(this.detailUser.status==0){
				this.answerText='取消禁用'
			}
		},
		mounted() {
			
		},
		onLoad(option) {
			this.id=option.id
		},
		methods: {
			toactdetail(){
				uni.navigateTo({
					url:"/pages_manage/actDetail?id="+this.id
				})
			},
			tabActive(item) {
				this.tabindex = item.value
				if(item.value==0){
					this.dateTag=''
				}else{
					this.dateTag=item.label
				}
				console.log(item.label)
				this.getAnswerlists()
			},
			changeCollapse(e) {
				this.collapseValue = e.filter(item => item.status == 'open').map(it => it.name)
			},
			getAnswerlists() {
				const params = {
					dateTag:this.dateTag,
					userId: this.id
				}
				getanswerlist(params).then(res => {
					if (res.code == 200) {
						this.viewload=false
						this.answerlist=res.data
						console.log(this.answerlist)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			disableUser(){
				if(this.detailUser.status==1){
					this.addblack()
					this.detailUser.status=0
					this.answerText='已禁用'
				}else{
					this.deleteblack()
					this.detailUser.status==1
					this.answerText='禁用'
				}
			},
			addblack(){
				//添加到黑名单
				this.userId[0]=this.detailUser.userId
				const params={
					array: this.userId
				}
				Addblacklist(this.userId).then(res=>{
					if(res.code==200){
						console.log(res)
						uni.showToast({
							icon: 'none',
							title: '用户成功被禁用'
						})
						setTimeout(()=>{
							console.log(1232)
							uni.navigateBack({
								data:1
							})
						},500)
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			deleteblack(){
				//移除黑名单
				this.userId[0]=this.detailUser.userId
				removebalcklist(this.userId).then(res=>{
					if(res.code){
						uni.showToast({
							icon: 'none',
							title: '用户成功取消禁用'
						})
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/customer/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>