ylrz_scrm_company_h5/pages/courseManage/manage/manageDetail.vue

<template>
	<view class="column flex-1 hb">
		<view class="header p20">
			<view class="justify-start align-center">
				<u-avatar :src="grouplist.avatar" size="50"></u-avatar>
				<view class="ml20">
					<view class="justify-start align-center ">
						<text class="fs32 bold mr8">{{grouplist.nickName}}</text>
						<image class="w40 h40" src="@/static/images/copy_icon.png" @click="copyId" mode="aspectFill">
					</view>
					<view class="fs24 base-color-9 mt10">备注：{{grouplist.remark ||'暂无'}}</view>
				</view>
			</view>
			<view class="ptb20 fs24 base-color-6">手机号码：{{grouplist.phonenumber||'暂无'}}</view>
		</view>
		<view class="bgf">
			<view class="centerV">
				<u-tabs :list="list1" @click="clickTab" lineColor='#1773ff' lineWidth='40'
					activeStyle="font-weight:bold"></u-tabs>
			</view>
			<view class="justify-between box-blue" v-show="showCont==1">
				<view class="base-bg-sure boxs">
					<view class="bold">会员总数</view>
					<view class="base-color fs28">
						<text class="fs40 bold">{{companyUserCount.userTotal}}</text>人
					</view>
				</view>
				<view class="base-bg-sure boxs">
					<view class="bold">今日新增会员</view>
					<view class="base-color fs28">
						<text class="fs40 bold">{{companyUserCount.todayNewUser}}</text>人
					</view>
				</view>
				<view class="base-bg-sure boxs">
					<view class="bold">会员红包数</view>
					<view class="base-color fs28"><text class="fs40 bold">{{companyUserCount.userRedPacketNum}}</text>个</view>
				</view>
				<view class="base-bg-sure boxs">
					<view class="bold">新会员红包金额</view>
					<view class="base-color fs28"><text class="fs40 bold">{{companyUserCount.todayUserRedPacketAmount}}</text>元</view>
				</view>
			</view>
			<dropdownPanel :filterData='filterData' @onChange="onChange" @confirm="confirm" @reset="reset">
				<view v-if="searchbarNav == 0">
					<view class="mb20" >
						<u-search placeholder="请输入标签  多个标签用 , 隔开" v-model="keywordC" :showAction="false" height="30px"
							@search='getcompanyTagC'></u-search>
					</view>
					<view class="p20 fs28 column flex-1 scrolly">
						<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnabledC"
							:refresher-triggered="triggeredC" refresher-background="rgba(0,0,0,0)"
							@refresherrefresh="pullDownRefreshC" @refresherrestore="triggeredC = false"
							:upper-threshold="100" :lower-threshold="100" @refresherabort="triggeredC = false"
							@scrolltolower="reachBottomC">
							<view v-for="(item,index) in courseOne" :key="item.index"
								:class="courseid==item.courseId?'actNav':''" class="m10 p10 center"
								style="border-bottom: 2rpx solid #eee;" @click="getCourseOne(item.courseId)">
								{{item.courseName}}
							</view>
						</scroll-view>
						<u-loadmore :status="statusC" />
					</view>
				</view>
				<view class="p20 fs28 column flex-1 hidden h100" v-if="searchbarNav == 1">
					<view class="mb20" >
						<u-search placeholder="请输入标签  多个标签用 , 隔开" v-model="keyword" :showAction="false" height="30px"
							@search='getcompanyTag'></u-search>
					</view>
					<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 v-for="(item,index) in courseTwo" :key="item.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="statusA" />
						<view class="ptb40"></view>
					</scroll-view>
				</view>
			</dropdownPanel>
		</view>
		<view class="column flex-1 scrolly" v-show="showCont==0">
			<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 class="m20 radius16 bgf p20" style="border: #3e9f59 solid 2rpx;"
					v-for="(item,index) in courselist" :key="index">
					<view class="justify-start align-center pb20" style="border-bottom: #eee solid 2rpx;">
						<view class="doingimg">
							<!-- <image src="../../../static/manergevip/book.png" class='w150 h90 radius16'></image> -->
							<image :src="item.thumbnail" class='w150 h90 radius16'></image>
							<view class="doing">进行中</view>
						</view>
						<view class="ml20">
							<view class="justify-start align-center">
								<view>{{item.courseName}}</view>
								<view class="justify-start align-center base-color">ID
									<image class="w40 h40" @click="copyCourseId(item.courseName)"
										src="@/static/images/copy_icon.png" mode="aspectFill">
								</view>
							</view>
							<view class="fs24 base-color-6 column">
								<text>{{item.title}}</text>
								<text></text>
							</view>
						</view>
					</view>
					<view class="justify-between fs28 mt20">
						<view class="flex-1">
							<view class="mb8 base-color-6">观看人数</view>
							<view>{{item.countVO.courseWatchNum}}</view>
						</view>
						<view class="flex-1">
							<view class="mb8 base-color-6">完播人数</view>
							<view>{{item.countVO.courseCompleteNum}}
								<text class="base-color-red ml16">完播率{{item.countVO.completeRate}}%</text>
							</view>
						</view>
					</view>
					<view class="justify-between fs28 mt20 pb20" style="border-bottom: #eee solid 2rpx;">
						<view class="flex-1">
							<view class="mb8 base-color-6">答题红包数</view>
							<view>{{item.countVO.redPacketNum}}</view>
						</view>
						<view class="flex-1">
							<view class="mb8 base-color-6">答题红包金额</view>
							<view>{{item.countVO.redPacketAmount}}元</view>
						</view>
					</view>
					<view class="justify-between mt20">
						<view class="flex-1">
							<view class="base-color-6 mb8 ">答题人数</view>
							<view>{{item.countVO.answerNum}}</view>
						</view>
						<view class="flex-1">
							<view class="base-color-6 mb8 ">正确人数</view>
							<view>{{item.countVO.answerRightNum}}</view>
						</view>
						<view class="flex-1">
							<!-- <view class="base-color-6 mb8 ">正确率</view>
							<view>{{item.answerRightRate.toFixed(2)||0}}%</view> -->
						</view>
					</view>
					<!-- <view class="centerV mt20">
						<view class="colorf base-bg ptb12 w400 radius80 center ">课程数据</view>
					</view> -->
				</view>
				<u-loadmore :status="status" />
				<view class="h90 "></view>
			</scroll-view>
		</view>
		<view class="column flex-1 scrolly " v-show="showCont==1"
			style="height: calc(100% - 100rpx);padding-bottom: 100rpx;">
			<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-f radius16 p30 flex-1">
							<view class="mb12 bold">营期</view>
							<view class="base-color">
								<text class="bold fs40">{{courseCount.courseNum}}</text>期
							</view>
						</view>
						<view class="base-bg-f radius16 p20 flex-1 mlr20">
							<view class="mb12 bold">课程数</view>
							<view class="base-color"><text class="bold fs40">{{courseCount.videoNum}}
								</text>课</view>
						</view>
						<view class="base-bg-f radius16 p20 flex-1">
							<view class="mb12 bold">参与会员</view>
							<view class="base-color"><text class="bold fs40">
									{{courseCount.courseUserNum}}</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-f radius16 p30 flex-1">
							<view class="mb12 bold">答题人数</view>
							<view class="base-color"><text class="bold fs40">
									{{courseCount.answerNum}}</text>人</view>
						</view>
						<view class="base-bg-f radius16 p20 flex-1 mlr20">
							<view class="mb12 bold">正确人数</view>
							<view class="base-color"><text class="bold fs40">
									{{courseCount.answerRightNum}}</text>人</view>
						</view>
						<view class="base-bg-f radius16 p20 flex-1">
							<view class="mb12 bold">正确率</view>
							<view class="base-color"><text class="bold fs40">
									{{courseCount.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-f radius16 p30 flex-1">
							<view class="mb12 bold">红包个数</view>
							<view class="base-color"><text class="bold fs40">
									{{courseCount.redPacketNum}}</text>个</view>
						</view>
						<view class="base-bg-f radius16 p20  mlr20 justify-start align-center">
							<image src="../../../static/images/redenvelope.png" class="w102 h102"></image>
							<view class="ml20">
								<view class="mb12 bold">答题红包金额</view>
								<view class="base-color">
									<text class="bold fs40">
										{{courseCount.redPacketAmount}}
									</text>元
								</view>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>
			<view class="h90 "></view>
		</view>
		<view class="foot-box justify-between bgf p20 align-center">
			<view class="fs28 base-color-6" @click="showmore=true">更多</view>
			<view class="base-color-red base-bg-false plr20 fs28 ptb8 radius40 bold" @click="changevipDetail()">更换会员归属
			</view>
		</view>
		<view>
			<u-popup :show="showmore" @close="closemore" @open="openmore" style="flex: 0;">
				<view class="column align-center">
					<view class="m20" v-for="(item,index) in morelist" :key="item.value" @click="nameMore(item)">
						{{item.name}}
					</view>
					<u-modal :show="showlist" :title="titlelist" @confirm="confirmchange">
						<view class="slot-content">
							<u-input :placeholder="contpl" v-model="changelist" v-if="selnum==1"></u-input>
							<u-input :placeholder="contpl" v-model="changephone" v-if="selnum==2" maxlength="11" ></u-input>
							<u-input :placeholder="contpl" v-model="changeremark" v-if="selnum==3"></u-input>
						</view>
					</u-modal>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import dropdownPanel from "@/components/dropdownPanel.vue"
	import {
		getFsCourseList,
		getCourseVdieoList,
		getmanagepopnum,
		getRecPacketCount,
		getmanagecourse,
		getcourseList,
		updategroupinfo,
		getGroupDetail
	} from "@/api/courseManage.js"
	export default {
		components: {
			dropdownPanel
		},
		data() {
			return {
				changeremark: '',
				changephone: '',
				list1: [{
					name: '课程分析'
				}, {
					name: '销售数据'
				}],
				filterData: [{
						name: '训练营-营期',
						value: 0,
					},
					{
						name: '课程',
						value: 1,
					},
				],
				searchbarNav: 0,
				showCont: 0,
				collapseValue: ['course', 'questions', 'redenvelope', 'live', 'funnel'], //
				showmore: false,
				morelist: [{
						name: '复制ID',
						value: 0,
						text: ''
					},
					{
						name: '改姓名',
						value: 1,
						text: '请输入姓名'
					},
					{
						name: '改手机号码',
						value: 2,
						text: '请输入手机号码'
					},
					{
						name: '改备注',
						value: 3,
						text: '请输入备注'
					}
				],
				showlist: false,
				titlelist: '',
				contpl: '',
				changelist: '',
				groupid: 0,
				courseid: '',
				courseids: '',
				courseOne: [],
				courseTwo: [],
				triggereds: false,
				statusA: 'loadmore',
				isEnableds: true,
				pageNums: 1,
				pageSizes: 5,
				redprice: '',
				companyUserCount: [],
				redbaglist: [],
				courseCount: [],
				answerlist: [],
				courselist: [],
				triggered: false,
				status: 'loadmore',
				isEnabled: true,
				pageNum: 1,
				pageSize: 3,
				grouplist: [],
				selnum: 0,
				keyword:'',
				triggeredC: false,
				statusC: 'loadmore',
				isEnabledC: true,
				pageNumC: 1,
				pageSizeC: 10,
				keywordC:'',
			}
		},
		onLoad(option) {
			this.groupid = option.id
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
			this.grouplist = uni.getStorageSync("grouplist")
			this.getvipcount()
			this.getcout()
			this.getcoursegroup()
			this.getgroupdetail()
		},
		methods: {
			getcompanyTagC(value){
				this.keywordC=value
				this.getCourseList()
			},
			pullDownRefreshC() {
				// 下拉
				this.triggeredC = true; //下拉了状态为true
				setTimeout(() => {
					this.triggeredC = false;
					uni.stopPullDownRefresh()
					this.pageNumC = 1;
					this.getCourseList('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottomC() {
				// status这个是加载状态
				if (this.statusC === 'loadmore') {
					this.statusC = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNumC++
						this.getCourseList() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			getcompanyTag(value){
				this.keyword=value
				this.getCourseListsmall()
			},
			copyId() {
				uni.setClipboardData({
					data: String(this.grouplist.nickName),
					success: () => {
						uni.showToast({
							title: '用户昵称复制成功',
							icon: 'none',
							duration: 2000
						});
						this.showmore = false
					},
				})
			},
			copyCourseId(id) {
				console.log(id)
				uni.setClipboardData({
					data: String(id),
					success: () => {
						uni.showToast({
							title: '课程标题复制成功',
							icon: 'none',
							duration: 2000
						});
					},
				})
			},
			getgroupdetail() {
				const param = {
					companyUserId : this.groupid
				}
				getGroupDetail(param).then(res => {
					this.grouplist = res.data
				})
			},
			updatagroup() {
				console.log(Number(this.groupid))
				const param = {
					nickName: this.changelist,
					phoneNumber: this.changephone,
					remark: this.changeremark,
					userId: this.groupid
				}
				updategroupinfo(param).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: "修改成功"
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			pullDownRefresh() {
				// 下拉
				this.triggered = true; //下拉了状态为true
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					this.getcoursegroup('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottom() {
				// status这个是加载状态
				if (this.status === 'loadmore') {
					this.status = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						this.getcoursegroup() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			getcoursegroup(type) {
				const param = {
					companyUserId: this.groupid,
					courseId: this.courseid,
					videoId: this.courseids,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
				}
				getcourseList(param).then(res => {
					console.log(res)
					if (res.code == 200) {
						// refresh 下拉
						if (type == 'refresh') {
							this.courselist = res.data.list
						} else {
							// 加载更多 当前页和下一页合并
							this.courselist = [...this.courselist, ...res.data.list]
						}
						if (this.pageNum >= res.data.pages) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getcout() {
				const param = {
					companyUserId: this.groupid,
					courseId: this.courseid,
					videoId: this.courseids,
				}
				this.getCourselist(param)
			},
			getCourselist(param) {
				getmanagecourse(param).then(res => {
					if (res.code == 200) {
						this.courseCount = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg,
						});
					}
				})
			},
			getvipcount() {
				//获取会员总数
				const param = {
					companyUserId: this.groupid,
				}
				getmanagepopnum(param).then(res => {
					if (res.code == 200) {
						this.companyUserCount=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.getCourseListsmall('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottoms() {
				// status这个是加载状态
				if (this.statusA === 'loadmore') {
					this.statusA = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNums++
						this.getCourseListsmall() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			getCourseOne(id) {
				this.courseid = id
			},
			getCourseTwo(id) {
				this.courseids = id
			},
			getCourseList(type) {
				this.courseOne=[]
				//获取课程列表
				const param = {
					keyword:this.keywordC,
					pageNum: this.pageNumC,
					pageSize: this.pageSizeC, 
				}
				getFsCourseList(param).then(res => {
					if (res.code == 200) {
						// this.courseOne = res.data.list
						// console.log(res)
						if (type == 'refresh') {
							this.courseOne = res.data.list
						} else {
							// 加载更多 当前页和下一页合并
							this.courseOne = [...this.courseOne, ...res.data.list]
						}
						if (res.data.isLastPage) {
							this.statusC = 'nomore'
						} else {
							this.statusC = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getCourseListsmall(type) {
				//获取小节目录
				const param = {
					courseId: this.courseid,
					pageNum: this.pageNums,
					pageSize: this.pageSizes, 
					keyword:this.keyword
				}
				getCourseVdieoList(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.pageNums >= res.data.pages) {
							this.statusA = 'nomore'
						} else {
							this.statusA = 'loadmore'
						}
					} else {

					}
				})
			},
			clickTab(e) {
				this.showCont = e.index
				this.$nextTick(() => {
					this.$refs?.collapseRef?.init()
				})
				this.courseid=''
				this.courseids=''
				this.keyword=''
				this.getvipcount()
				this.getcout()
				this.getcoursegroup()
				console.log(e.index)
			},
			onChange(index) {
				this.searchbarNav = index

				if (index == 0) {
					this.getCourseList()
				} else {
					this.getCourseListsmall()
				}
			},
			confirm() {
				this.getcout()
				this.getredbaglist()
				this.courselist = []
				this.getcoursegroup()
			},
			reset() {
				if (this.searchbarNav == 0) {
					this.courseid = ''
					this.getcout()
					// this.getredbaglist()
					this.courselist = []
					this.getcoursegroup()
				} else {
					this.courseids = ''
					this.getcout()
					// this.getredbaglist()
					this.courselist = []
					this.getcoursegroup()
				}
			},
			changeCollapse(e) {
				this.collapseValue = e.filter(item => item.status == 'open').map(it => it.name)
				console.log(e.filter(item => item.status == 'open').map(it => it.name))
			},
			closemore() {
				this.showmore = false
			},
			openmore() {

			},
			nameMore(item) {
				this.titlelist = item.name
				this.contpl = item.text
				this.selnum = item.value
				if (item.value == 0) {
					this.copyId()
				} else if (item.value == 1) {
					this.changelist = this.grouplist.nickName
					this.showlist = true
				} else if (item.value == 2) {
					console.log(this.grouplist.phonenumber)
					this.changephone = this.grouplist.phonenumber
					this.showlist = true
				} else {
					this.changeremark = this.grouplist.remark
					this.showlist = true
				}
			},
			confirmchange() {
				this.updatagroup()
				this.showlist = false
				setTimeout(() => {
					this.showmore = false
					this.getgroupdetail()
				}, 200)
			},
			changevipDetail() {
				uni.navigateTo({
					url: '/pages/courseManage/manage/changeVip?id=' + this.groupid
				})
			}
		}
	}
</script>

<style lang="scss">
	.header {
		background: linear-gradient(to right, rgba(218, 233, 255, 1), rgba(225, 225, 253, 1));
	}

	.doingimg {
		position: relative;

	}

	.doing {
		border-radius: 12rpx 0 12rpx 0;
		background-color: #3e9f59;
		color: #fff;
		width: fit-content;
		padding: 0 20rpx;
		font-size: 24rpx;
		position: absolute;
		top: 3rpx;
	}

	.box-blue {
		flex-wrap: wrap;
		padding: 20rpx;

		.boxs {
			width: 48%;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 20rpx 0;
			padding-left: 32rpx;
			font-size: 28rpx;
		}
	}

	.foot-box {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

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