zkcommon_course/pages_manage/dataDetails.vue

<template>
	<view class="column flex-1 hb">
		<view>
			<dropdownPanel :filterData='filterData' @onChange="onChange" @confirm="confirm" @reset="reset">
				<view class="column flex-1 hb hidden">
					<view v-if="searchbarNav == 0">
						<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnableds"
							:refresher-triggered="triggereds" refresher-background="rgba(0,0,0,0)"
							@refresherrefresh="pullDownRefreshs" @refresherrestore="triggereds = false"
							:upper-threshold="100" :lower-threshold="100" @refresherabort="triggereds = false"
							@scrolltolower="reachBottoms">
							<view class="p20 fs28 column flex-1 scrolly">
								<view v-for="(items,index) in courseOne" :key="items" :class="courseid==items.periodId?'actNav':''" 
									 class="m10 p10 center" style="border-bottom: 2rpx solid #eee;" @click="getCourseOne(items.periodId)">
										{{items.periodName}}
								</view>
							</view>
							<u-loadmore :status="statusA" />
						</scroll-view>
					</view>
					<view v-else class="p20 fs28 column flex-1 hidden">
						<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnabled"
							:refresher-triggered="triggered" refresher-background="rgba(0,0,0,0)"
							@refresherrefresh="pullDownRefresh" @refresherrestore="triggered = false"
							:upper-threshold="100" :lower-threshold="100" @refresherabort="triggered = false"
							@scrolltolower="reachBottom">
							<view v-for="(item,index) in courseTwo" :key="index"
								:class="courseids==item.videoId?'actNav':''" class="m10 p10 center"
								style="border-bottom: 2rpx solid #eee;" @click="getCourseTwo(item.videoId)">
								{{item.title}}
							</view>
							<u-loadmore :status="status" />
							<view class="ptb40"></view>
						</scroll-view>
					</view>
				</view>
			</dropdownPanel>
		</view>
		<view class="bgf m20 radius8 column flex-1 scrolly" style="max-height: 100%;">
			<view class="column flex-1 scrolly">
				<u-collapse ref="collapseRef" :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 fs32">课程统计</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-around ">
							<view class="base-bg-f8 radius16 p30 flex-1">
								<view class="mb12 bold">营期</view>
								<view class="base-color"><text class="bold fs40">
										{{courselist.courseNum}}</text>期</view>
							</view>
							<view class="base-bg-f8 radius16 p20 flex-1 mlr20">
								<view class="mb12 bold">课程数</view>
								<view class="base-color"><text class="bold fs40">
										{{courselist.videoNum}}</text>课</view>
							</view>
							<view class="base-bg-f8 radius16 p20 flex-1">
								<view class="mb12 bold">参与会员</view>
								<view class="base-color"><text class="bold fs40">
										{{courselist.courseUserNum}}</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 fs32">看课统计</text>
							<!-- #endif -->
						<text slot="value"
							class="base-color fs24">{{collapseValue.includes('questions')?'收回':'展开'}}</text>
						<view slot="right-icon">
							<u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
						</view>
						<view class="justify-around ">
							<view class="base-bg-f8 radius16 p30 flex-1">
								<view class="mb12 bold">观看人数</view>
								<view class="base-color"><text class="bold fs40">{{courselist.courseWatchNum}}</text>人</view>
							</view>
							<view class="base-bg-f8 radius16 p20 flex-1 mlr20">
								<view class="mb12 bold">完播人数</view>
								<view class="base-color"><text class="bold fs40">{{courselist.courseCompleteNum}}</text>人</view>
							</view>
							<view class="base-bg-f8 radius16 p20 flex-1">
								<view class="mb12 bold">完播率</view>
								<view class="base-color"><text class="bold fs40">{{courselist.courseCompleteRate}}</text>%</view>
							</view>
						</view>
					</u-collapse-item>
					<!-- #ifdef MP-WEIXIN -->
					<u-collapse-item name="redenvelope" title="答题统计">
					<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<u-collapse-item name="redenvelope">
							<text slot="title" class="bold fs32">答题统计</text>
							<!-- #endif -->
						<text slot="value"
							class="base-color fs24">{{collapseValue.includes('redenvelope')?'收回':'展开'}}</text>
						<view slot="right-icon">
							<u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
						</view>
						<view class="justify-around ">
							<view class="base-bg-f8 radius16 p30 flex-1">
								<view class="mb12 bold">答题人数</view>
								<view class="base-color"><text class="bold fs40">
										{{courselist.answerNum}}</text>人</view>
							</view>
							<view class="base-bg-f8 radius16 p20 flex-1 mlr20">
								<view class="mb12 bold">正确人数</view>
								<view class="base-color"><text class="bold fs40">
										{{courselist.answerRightNum}}</text>人</view>
							</view>
							<view class="base-bg-f8 radius16 p20 flex-1">
								<view class="mb12 bold">正确率</view>
								<view class="base-color"><text class="bold fs40">
										{{courselist.answerRightRate}}</text>%</view>
							</view>
						</view>
					</u-collapse-item>
					<!-- #ifdef MP-WEIXIN -->
					<u-collapse-item name="live" title="红包统计">
					<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<u-collapse-item name="live">
							<text slot="title" class="bold fs32">红包统计</text>
							<!-- #endif -->
						<text slot="value" class="base-color fs24">{{collapseValue.includes('live')?'收回':'展开'}}</text>
						<view slot="right-icon">
							<u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
						</view>
						<view class="justify-around ">
							<view class="base-bg-f8 radius16 p30 flex-1">
								<view class="mb12 bold">红包个数</view>
								<view class="base-color"><text class="bold fs40">
										{{courselist.redPacketNum}}</text>个</view>
							</view>
							<view class="base-bg-f8 radius16 p20  mlr20 justify-start align-center">
								<image :src="imgPath+'/app/images/redenvelope.png'" class="w102 h102"></image>
								<view class="ml20">
									<view class="mb12 bold">答题红包金额</view>
									<view class="base-color">
										<text class="bold fs40">{{courselist.redPacketAmount}}</text>元
									</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
					<!-- #ifdef MP-WEIXIN -->
					<u-collapse-item name="funnel" title="转化漏斗图" v-if="!ratelistState">
					<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<u-collapse-item name="funnel" v-if="!ratelistState">
							<text slot="title" class="bold fs32">转化漏斗图</text>
							<!-- #endif -->
						<text slot="value" class="base-color fs24">{{collapseValue.includes('funnel')?'收回':'展开'}}</text>
						<view slot="right-icon">
							<u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
						</view>
						<view v-show="!ratelistState">
							<funnelChart :getratelist="getrateimg" />
						</view>
						<view v-show="ratelistState" class="center">暂无数据</view>
					</u-collapse-item>
					<!-- #ifdef MP-WEIXIN -->
					<u-collapse-item name="rank" title="排行榜">
					<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<u-collapse-item name="rank">
							<text slot="title" class="bold fs32">排行榜</text>
							<!-- #endif -->
						<text slot="value" class="base-color fs24">{{collapseValue.includes('rank')?'收回':'展开'}}</text>
						<view slot="right-icon">
							<u-icon name="arrow-right" color="#1677ff" size="12"></u-icon>
						</view>
						<view class="flex-1">
							<!-- <view class="mt40">
								<view class="justify-between align-center">
									<view class="base-color-3 bold fs32">群管排行榜</view>
									<view class="justify-start" @click="ordergroup(1)" v-if="orderGroup=='asc'">
										<u-icon name="list-dot" size="20"></u-icon>
										<view>按正序(前20名)</view>
									</view>
									<view class="justify-start" @click="ordergroup(0)" v-else>
										<u-icon name="list-dot" size="20"></u-icon>
										<view>按倒序(后20名)</view>
									</view>
								</view>
								<view class="centerV">
									<u-tabs :list="list1" @click="clickTab" lineColor='#1773ff' lineWidth='40'
										activeStyle="font-weight:bold"></u-tabs>
								</view>
								<view class="justify-start align-center mtb28" v-for="(items,index) in rankListA"
									:key="index">
									<u-avatar :src="items.avatar" size="40"></u-avatar>
									<view class="flex-1 ml20">
										<view class="justify-between mb16">
											<view class="base-color-3 single-line-ellipsis">{{items.userName}}</view>
											<view v-if="activeA==1">{{items.completeRate}}%</view>
											<view v-else>{{items.answerRightRate}}%</view>
										</view>
										<u-line-progress :percentage="activeA==1?items.completeRate:items.answerRightRate" activeColor='#ed0922' />
									</view>
								</view>
								<view v-if="rankListA.length==0" class="center mtb32">暂无数据</view>
							</view> -->
							<view class="mt60 column flex-1">
								<view class="justify-between align-center">
									<view class="base-color-3 bold fs32">课程排行榜</view>
									<view class="justify-start" @click="ordergroupB(1)" v-if="orderGroupB=='asc'">
										<u-icon name="list-dot" size="20"></u-icon>
										<view>按正序(前20名)</view>
									</view>
									<view class="justify-start" @click="ordergroupB(0)" v-else>
										<u-icon name="list-dot" size="20"></u-icon>
										<view>按倒序(后20名)</view>
									</view>
								</view>
								<view class="centerV">
									<u-tabs :list="list1" @click="clickTabB" lineColor='#1773ff' lineWidth='40'
										activeStyle="font-weight:bold"></u-tabs>
								</view>
								<view class="justify-start align-center" style="height: fit-content;" v-for="(item,index) in rankListB" :key="index">
									<view class="flex-1 ml20">
										<view class="justify-between mb16">
											<view class="base-color-3 single-line-ellipsis">{{item.videoName}}</view>
											<view v-if="activeB==1">{{item.completeRate}}%</view>
											<view v-else>{{item.answerRightRate}}%</view>
										</view>
										<u-line-progress :percentage="activeB==1?item.completeRate:item.answerRightRate" activeColor='#ed0922' />
									</view>
								</view>
								<view v-if="rankListB.length==0" class="center mtb32">暂无数据</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="20"
		:loading-text="loadingtext"></u-loading-page>
	</view>
</template>

<script>
	import {
		getFsCourseList,
		getvideolist,
		getshopCoursenum,
		getcourseRates,
		getGroupRanklist,
		getCourseRanklist
	} from "@/api/manageCompany.js"
	import dropdownPanel from "@/pages_manage/components/dropdownPanel.vue"
	import funnelChart from "@/pages_manage/components/chart.vue"
	export default {
		components: {
			dropdownPanel,
			funnelChart,
		},
		data() {
			return {
				viewload:true,
				loadingtext:"数据加载中...",
				activeTab: 0,
				showCalendar: false,
				user: {},
				filterData: [{
						name: '训练营-营期',
						value: 1,
					},
					{
						name: '课程',
						value: 2,
					}
				],
				searchbarNav: 0,
				collapseValue: ['course', 'questions', 'redenvelope', 'live', 'funnel', 'rank'],
				courseOne: [],
				courseTwo: [],
				courseid: '',
				courseids: '',
				triggered: false,
				status: 'loadmore',
				isEnabled: true,
				pageNum: 1,
				pageSize: 10,
				courselist: [],
				answerlist: [],
				getrateimg: {},
				list1: [{
					name: '按完播率',
				}, {
					name: '按正确率'
				}],
				orderGroup: 'asc',
				orderGroupB: 'asc',
				rankListA: {},
				rankListB: {},
				activeA: 1,
				activeB: 1,
				triggereds: false,
				statusA: 'loadmore',
				isEnableds: true,
				pageNums: 1,
				pageSizes: 10,
				ratelistState:false
			}
		},
		computed: {
		    imgPath() {
		      return this.$store.state.imgpath
		    }
		},
		async mounted() {
			// this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
			this.getCoursestatistics()
			this.getrateList()
			this.getrankgroup()
			await this.getrankCourse()
			this.$nextTick(() => {
				setTimeout(()=>{
					this.$refs?.collapseRef?.init()
					if(this.courselist!=[]||this.courselist){
						this.viewload=false
					}
				},1000)
			})
		},
		methods: {
			ordergroup(item) {
				if (item == 0) {
					this.orderGroup = 'asc'
					this.getrankgroup()
				} else {
					this.orderGroup = 'desc'
					this.getrankgroup()
				}
			},
			ordergroupB(item) {
				if (item == 0) {
					this.orderGroupB = 'asc'
					this.getrankCourse()
				} else {
					this.orderGroupB = 'desc'
					this.getrankCourse()
				}
			},
			getrankCourse() {
				//获取课程排行
				// console.log(this.orderGroupB)
				const params = {
					companyId: this.user.companyId,
					endTime: '',
					startTime: '',
					periodId: this.courseid,
					videoId: this.courseids,
					order: this.orderGroupB,
					type: this.activeB, // 0:经销商/1:群管
				}
				getCourseRanklist(params).then(res => {
					if (res.code == 200) {
						// console.log(res)
						this.rankListB = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getrankgroup() {
				//获取群管排行
				const params = {
					companyId: this.user.companyId,
					periodId: this.courseid,
					videoId: this.courseids,
					order: this.orderGroup,
					type: this.activeA, // 0:经销商/1:群管
				}
				getGroupRanklist(params).then(res => {
					if (res.code == 200) {
						// console.log(res)
						this.rankListA = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getrateList() {
				//获取漏斗图
				const params = {
					periodId: this.courseid,
					videoId: this.courseids,
				}
				getcourseRates(params).then(res => {
					if (res.code == 200) {
						this.ratelistState = res.data.every(item => item.value === 0);
						this.getrateimg = res
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getCoursestatistics() {
				//课程统计
				const params = {
					periodId: this.courseid,
					videoId:this.courseids,
				}
				getshopCoursenum(params).then(res => {
					if (res.code == 200) {
						// console.log(res)
						this.courselist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})

			},
			pullDownRefreshs() {
				// 下拉
				this.triggereds = true; //下拉了状态为true
				setTimeout(() => {
					this.triggereds = false;
					uni.stopPullDownRefresh()
					this.pageNums = 1;
					this.getCourseList('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottoms() {
				// status这个是加载状态
				console.log(111);
				if (this.statusA === 'loadmore') {
					this.statusA = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNums++
						this.getCourseList() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			pullDownRefresh() {
				// 下拉
				this.triggered = true; //下拉了状态为true
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					this.getCourseListsmall('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottom() {
				// status这个是加载状态
				console.log(111);
				if (this.status === 'loadmore') {
					this.status = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						this.getCourseListsmall() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			getCourseOne(id) {
				this.courseid = id
				
			},
			getCourseTwo(id) {
				this.courseids = id
			},
			getCourseList(type) {
				this.courseOne=[]
				const param = {
					pageNum: this.pageNums,
					pageSize: this.pageSizes,
				}
				getFsCourseList(param).then(res => {
					if (res.code == 200) {
						if (type == 'refresh') {
							this.courseOne = res.data.list
						} else {
							// 加载更多 当前页和下一页合并
							this.courseOne = [...this.courseOne, ...res.data.list]
						}
						if (res.data.isLastPage) {
							this.statusA = 'nomore'
						} else {
							this.statusA = 'loadmore'
						}
						console.log(this.courseOne);
						// this.courseOne
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getCourseListsmall(type) {
				const param = {
					periodId: this.courseid,
					pageNum: this.pageNum,
					pageSize: this.pageSize, //
				}
				getvideolist(param).then(res => {
					if (res.code == 200) {
						// refresh 下拉
						if (type == 'refresh') {
							this.courseTwo = res.data.list
						} else {
							// 加载更多 当前页和下一页合并
							this.courseTwo = [...this.courseTwo, ...res.data.list]
						}
						if (this.pageNum >= res.data.pages) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					} else {

					}
				})
			},
			changeCollapse(e) {
				this.collapseValue = e.filter(item => item.status == 'open').map(it => it.name)
			},
			handleNav(type) {
				this.activeTab = type
			},
			onChange(index) {
				this.searchbarNav = index
				if (index == 0) {
					this.getCourseList()
				} else {
					this.pageNum = 1
					if (this.courseid == 0) {
						uni.showToast({
							icon: 'none',
							title: "请先选择训练营-营期"
						})
					} else {
						this.getCourseListsmall('refresh')
					}
				}
			},
			confirm() {
				this.getCoursestatistics()
				this.getrateList()
				this.getrankgroup()
				this.getrankCourse()
			},
			reset() {
				console.log(this.searchbarNav)
				if (this.searchbarNav == 0) {
					this.courseid = ''
				} else {
					this.courseids = ''
				}
				this.getCoursestatistics()
				this.getrateList()
				this.getrankgroup()
				this.getrankCourse()
			},
			clickTab(item) {
				this.activeA = item.index + 1
				this.getrankgroup()
				console.log(this.activeA)
			},
			clickTabB(item) {
				this.activeB = item.index + 1
				this.getrankCourse()
				console.log(this.activeA)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.headnav {
		padding: 15px 12px;
		margin: 0 -10px -10px 0;
		box-sizing: border-box;
		background-color: #fff;

		image {
			height: 60px;
			width: 50px;
			position: absolute;
			z-index: 0;
			bottom: 0;
			right: 0;
			display: none;
		}

		&-item {
			flex: 1;
			font-size: 16px;
			padding: 10px;
			border-radius: 10px;
			background: #f8f8f8;
			margin: 0 10px 10px 0;
			position: relative;
			z-index: 1;
			overflow: hidden;
			color: #555;
		}

		&-active {
			background-color: rgb(231, 241, 255) !important;

			.headnav-num {
				color: #1677ff !important;
			}

			image {
				display: block !important;
			}
		}

		&-num {
			font-family: DIN, DIN;
			font-weight: bold;
			font-size: 25px;
			margin: 5px 0;
		}
	}

	.actNav {
		color: #1677ff !important;
		background-color: #e7f2fe;
	}
</style>