ylrz_scrm_company_h5/pages/courseManage/manage/userDataDetail.vue

<template>
	<view class="column flex-1 hb">
		<view class="justify-between align-center plr32 m20 base-bg 
		colorf ptb48 radius20">
			<view>账户可用余额</view>
			<view class="bold fs40">{{balanceuserDay.balance}}</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-around ptb20">
				<view :class="queryParam.type == index ? 'searchbox-item active':'searchbox-item'"
					v-for="(item,index) in typeOption" :key="index" @click="handleType(index)">{{item.label}}</view>
			</view>
		</view>
		<view style="z-index: 999;">
			<dropdownPanel :filterData='filterData' @onChange="onChange" @confirm="confirm" @reset="reset">
				<view v-if="searchbarNav == 0" class="justify-start wrap p20 ">
					<view class="warpbox ptb8 plr16 m10 radius12 base-bg-f8 base-color-6"
						:class="redid==item.id?'activebag':''" @click="selredbag(item)"
						v-for="(item,index) in redlist" :key="item.id">{{item.redPacketMoney}}</view>
				</view>
				<view v-if="searchbarNav == 1" class="justify-start wrap p20 ">
					<view class="warpbox ptb8 plr16 m10 radius12 base-bg-f8 base-color-6"
						:class="groupid==item.userId?'activebag':''" @click="selredgroup(item.userId)"
						v-for="(item,index) in grouplist" :key="item.userId">
						{{item.nickName}}
					</view>
				</view>
				<view v-if="searchbarNav == 2">
					<view class="p20 fs28 column flex-1 scrolly">
						<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>
					</view>
				</view>
				<view class="p20 fs28 column flex-1 hidden h100" v-if="searchbarNav == 3">
					<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="m20 plr32 ptb40 justify-between align-center base-bg-sure radius20"
			style="border: 2rpx solid #1773ff;">
			<view class="bold">发放金额</view>
			<view class="bold fs40">{{balanceuserDay.todayMoney}}</view>
		</view>
		<view class="column flex-1 scrolly">
			<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="bgf m20 p20 radius16" v-for="(item,index) in userlist" :key="index">
					<view class="justify-between align-center">
						<view class="justify-start align-center">
							<image :src="imgPath+'/app/manergevip/book.png'" class="w80 h80"></image>
							<view class="fs36 bold ml20">课程答题红包</view>
							<view class="fs28 ml8 base-color-6">归属</view>
						</view>
						<view class="base-color fs40 bold">{{item.amount}}</view>
					</view>
					<view class="justify-start mtb20">
						<u-avatar :src="item.avatar" size="50"></u-avatar>
						<view class="ml20">
							<view class="justify-start align-center">
								<text class="fs28 bold">{{item.nickName}}</text>
								<image class="w40 h40" :src="imgPath+'/app/images/copy_icon.png'" mode="aspectFill">
							</view>
							<view class="fs24 base-color-6">
								<text>--</text>
								<text class="ml20">{{item.fsUserCreatTime}} 注册</text>
							</view>
						</view>
					</view>
					<view class="base-bg-f8 radius16 p20">
						<view class="justify-start fs28 mb8">
							<view class="base-color-6 mr20">观看课程</view>
							<view>{{item.courseName}}</view>
						</view>
						<view class="justify-start fs28">
							<view class="base-color-6 mr20">领取时间</view>
							<view>{{item.createTime}}</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getCourseRedPacklist,
		getuserbalance,
		getredPrice,
		getgroupList,
		getFsCourseList,
		getCourseVdieoList
	} from "@/api/courseManage.js"
	import dropdownPanel from "@/components/dropdownPanel.vue"
	export default {
		components: {
			dropdownPanel
		},
		data() {
			return {
				list1: [{
					name: '发放记录'
				}],
				typeOption: [{
					label: '全部',
					value: 0
				}, {
					label: '今日',
					value: 1
				}, {
					label: '昨日',
					value: 2
				}, {
					label: '近七天',
					value: 3
				}, {
					label: '本月',
					value: 4
				}],
				queryParam: {
					type: 0
				},
				filterData: [{
						name: '答题红包',
						value: 0,
					},
					{
						name: '群管',
						value: 1,
					}, {
						name: '训练营-营期',
						value: 2,
					}, {
						name: '课程',
						value: 3,
					}
				],
				searchbarNav: 0,
				userlist: [],
				triggered: false,
				status: 'loadmore',
				isEnabled: true,
				pageNum: 1,
				pageSize: 5,
				startTime: '',
				endTime: '',
				todayday: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				balanceuserDay: [],
				user: [],
				redlist: [],
				redid: '',
				groupid: '',
				grouplist: [],
				courseid: '',
				courseids: '',
				courseOne: [],
				courseTwo: [],
				triggereds: false,
				statusA: 'loadmore',
				isEnableds: true,
				pageNums: 1,
				pageSizes: 5,
				redprice:''
			}
		},
		computed: {
		    imgPath() {
		      return this.$store.state.imgpath
		    }
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
			this.getuserList()
			this.getuserbalancelist()
		},
		methods: {
			pullDownRefreshs() {
				// 下拉
				this.triggereds = true; //下拉了状态为true
				setTimeout(() => {
					this.triggereds = false;
					uni.stopPullDownRefresh()
					this.pageNums = 1;
					this.getCourseListsmall('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottoms() {
				// status这个是加载状态
				console.log(111);
				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() {
				//获取课程列表
				const param = {
					companyId: this.user.companyId,
					companyUserId: this.user.userId,
					type: this.user.userType == '00' ? 0 : 1, // 0:经销商/1:群管
				}
				getFsCourseList(param).then(res => {
					if (res.code == 200) {
						this.courseOne = res.data
						// console.log(res)
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getCourseListsmall(type) {
				//获取小节目录
				const param = {
					courseId: this.courseid,
					pageNum: this.pageNums,
					pageSize: this.pageSizes, //
					status: ''
				}
				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 {

					}
				})
			},
			selredbag(item) {
				this.redid =item.id
				this.redprice=item.redPacketMoney
			},
			selredgroup(id) {
				this.groupid = id
			},
			getredlist() {
				//获取红包价格表
				const params = {
					companyId: this.user.companyId
				}
				getredPrice(params).then(res => {
					if (res.code == 200) {
						this.redlist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getgrouplist() {
				//获取群管列表
				const params = {
					companyId: this.user.companyId
				}
				getgroupList(params).then(res => {
					if (res.code == 200) {
						this.grouplist = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getuserbalancelist() {
				const params = {
					companyId: this.user.companyId,
					endTime: this.endTime,
					startTime: this.startTime,
				}
				getuserbalance(params).then(res => {
					if (res.code == 200) {
						this.balanceuserDay = res.data
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			pullDownRefresh() {
				// 下拉
				this.triggered = true; //下拉了状态为true
				setTimeout(() => {
					this.triggered = false;
					uni.stopPullDownRefresh()
					this.pageNum = 1;
					this.getuserList('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			reachBottom() {
				// status这个是加载状态
				console.log(111);
				if (this.status === 'loadmore') {
					this.status = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.pageNum++
						this.getuserList() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			getuserList(type) {
				const params = {
					companyId: this.user.companyId,
					companyUserId:this.groupid,
					redPacketId:this.redprice,
					courseId:this.courseid,
					videoId:this.courseids,
					endTime: this.endTime,
					startTime: this.startTime,
				}
				getCourseRedPacklist(params).then(res => {
					if (res.code == 200) {
						console.log(res)
						// refresh 下拉
						if (type == 'refresh') {
							this.userlist = res.data.list
						} else {
							// 加载更多 当前页和下一页合并
							this.userlist = [...this.userlist, ...res.data.list]
						}
						if (this.pageNum >= res.data.pages) {
							this.status = 'nomore'
						} else {
							this.status = 'loadmore'
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			clickTab(item) {
				// console.log('item', item);  
			},
			handleType(type) {
				console.log(type);
				this.queryParam.type = type
				this.userlist = []
				if (this.queryParam.type == 0) {
					this.endTime = ''
					this.startTime = ''
					this.getuserbalancelist()
					this.getuserList()
				} else if (this.queryParam.type == 1) {
					this.startTime = this.todayday + ' 00:00:00'
					this.endTime = this.todayday + ' 23:59:59'
					this.getuserbalancelist()
					this.getuserList()
				} else if (this.queryParam.type == 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.getuserbalancelist()
					this.getuserList()
					console.log(this.userlist)
				} else if (this.queryParam.type == 3) {
					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.getuserbalancelist()
					this.getuserList()
				} else {
					let today = new Date();
					let lastDayOfMonth = new Date(today.getFullYear(), today.getMonth() + 1, 0);

					this.startTime = uni.$u.timeFormat(this.todayday, 'yyyy-mm') + '-01' + " 00:00:00"
					this.endTime = uni.$u.timeFormat(lastDayOfMonth, 'yyyy-mm-dd') + " 23:59:59"
					this.getuserbalancelist()
					this.getuserList()
				}
			},
			onChange(index) {
				this.searchbarNav = index
				this.courseTwo=[]
				if (index == 0) {
					console.log(11)
					this.getredlist()
				} else if (index == 1) {
					this.getgrouplist()
				} else if (index == 2) {
					this.getCourseList()
				} else {
					if(this.courseid==''){
						uni.showToast({
							icon: 'none',
							title: '请先选择训练营-营期'
						})
					}else{
						this.getCourseListsmall()
					}
				}
			},
			confirm() {
				this.userlist=[]
				this.getuserList()
			},
			reset() {
				if(this.searchbarNav==0){
					this.redprice=''
					this.getuserList()
				}else if(this.searchbarNav==1){
					this.groupid=''
					this.getuserList()
				}else if(this.searchbarNav==1){
					this.courseid=''
					this.getuserList()
				}else{
					this.courseids=''
					this.getuserList()
				}
				console.log(this.searchbarNav)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.warpbox {
		width: fit-content;
	}

	.activebag {
		border: 2rpx solid #1773ff;
		background-color: #e7f2fe;
		color: #1677ff;
	}

	.searchbox {
		background-color: #fff;
		border-radius: 8rpx 8rpx 0 0;
		padding: 15px;

		&-item {
			height: 23px;
			line-height: 23px;
			width: fit-content;
			padding: 0 20rpx;
			background: #f5f5f5;
			text-align: center;
			border-radius: 5px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 12px;
			color: #888;
		}
	}

	.active {
		color: #fff !important;
		background-color: #1677ff !important;
	}

	:deep .navs .c-flex-center text {
		width: max-content;
	}

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