ylrz_scrm_company_h5/pages/courseManage/vip/index.vue

<template>
	<view class="container">
		<view class="headbox">
			<view style="padding: 10px 10px 0 10px;">
			<u-subsection class="subsection" :list="list" :current="current" bgColor="#e7f1fe" activeColor="#1677ff" :fontSize="15" :bold="false" @change="sectionChange"></u-subsection>
			<view style="margin-top: 10px;">
				<u-search placeholder="会员ID、昵称、姓名、手机" v-model="keyword" :showAction="false" height="30px"></u-search>
			</view>
			<view class="x-bc">
				<u-tabs :list="list2" :current='currentType' :lineWidth="40" lineColor="#1677ff" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="clickTypeTab"></u-tabs>
				<view class="participate-order x-f">
					<image src="@/static/images/order_icon2.png" mode="aspectFill" v-if="searchTypeIndex == 0 || searchTypeIndex == 2"></image>
					<image src="@/static/images/order_icon.png" mode="aspectFill" v-else></image>
					<picker @change="bindPickerChange" :value="searchTypeIndex" :range="typeArray">
						{{typeoption[searchTypeIndex]}}
					</picker>
				</view>
			</view>
			<view class="tagbox x-bc">
				<view class="tagbox-left x-f">
					<view class="x-f" @click="openPop('search')">{{array[queryParam.typeIndex].name}}<u-icon name="arrow-down-fill" color="#2979ff" size="11" style="margin: 0 3px;"></u-icon></view>
					<view class="tagbox-list x-f">
						<view class="tagbox-item x-f">未打标签</view>
						<view class="tagbox-item x-f">未打标签</view>
					</view>
				</view>
				<view class="tagbox-right x-f" @click="openPop('tag')">筛选<u-icon name="arrow-down" color="#1677ff" size="12"></u-icon></view>
			</view>
			</view>
			<view>
				<dropdownPanel :filterData='filterData' @onChange="onChange" @confirm="confirm" @reset="reset">
					<view v-if="filterData[searchbarNav].type == 'registerTime'">
						<view class="boxnav x-bc">
							<view class="boxnav-item" style="width: 25%;" v-for="(item,index) in filterData[searchbarNav].option" :key="index">
								<view class="boxnav-item-info one-t" :class="registerTimeIndex == index ? 'boxnav-active':''" @click="handleParamItem('registerTime',index)">{{item.label}}</view>
							</view>
							<view class="boxnav-item x-ac" style="width: 100%;" v-show="registerTimeIndex == 4">
								<view class="calendar-day x-c" @click="showCalendar = true">
									<u-icon name="calendar" color="#999" size="20"></u-icon>{{queryParam.startTime || '选择日期'}}</view>
								<view class="calendar-day x-c" @click="showCalendar = true">
									<u-icon name="calendar" color="#999" size="20"></u-icon>{{queryParam.endTime || '选择日期'}}</view>
							</view>
						</view>
					</view>
					<view v-if="filterData[searchbarNav].type == 'watchStatus'">
						<view class="boxnav x-bc">
							<view class="boxnav-item" v-for="(item,index) in filterData[searchbarNav].option" :key="index">
								<view class="boxnav-item-info one-t" :class="registerTimeIndex == index ? 'boxnav-active':''" @click="handleParamItem('registerTime',index)">{{item.label}}</view>
							</view>
						</view>
					</view>
					<view v-if="filterData[searchbarNav].type == 'nowatchStatus'">
						<view class="boxnav x-bc">
							<view class="boxnav-item" v-for="(item,index) in filterData[searchbarNav].option" :key="index">
								<view class="boxnav-item-info one-t" :class="registerTimeIndex == index ? 'boxnav-active':''" @click="handleParamItem('registerTime',index)">{{item.label}}</view>
							</view>
						</view>
					</view>
				</dropdownPanel>
			</view>
		</view>
		<u-calendar :show="showCalendar" :mode="mode" @confirm="confirmCalendar" @close="closeCalendar"></u-calendar>
		<!-- 搜索选择弹窗/标签筛选 -->
		<u-popup :show="showPop" :round="12" @close="closePop" class="model" :zIndex="10076">
			<view class="popbox">
				<view class="popbox-head">
					<u-icon class="close-circle" name="close-circle" color="#ccc" size="24" @click="closePop"></u-icon>
					{{popTitle}}
				</view>
				<view class="popbox-body">
					<view class="radiobox" v-show="popTitle == '搜索选择'">
						<label class="radiobox-item x-bc mbline" v-for="(item, index) in array" :key="item.value" @click="bindTypeChange(index)">
							<view>{{item.name}}</view>
							<radio :value="item.value" :checked="index === typeIndex" style="transform:scale(0.75)" />
						</label>
					</view>
					<view class="tagbox-list x-f">
						<view class="tagbox-item x-f" @click="chooseTag">未打标签</view>
						<view class="tagbox-item x-f tag-active">未打标签</view>
					</view>
				</view>
				<view class="popbox-footer x-bc">
					<button class="popbox-footer-btn" @click="resetPop" v-show="popTitle == '标签筛选'">重置</button>
					<button class="popbox-footer-btn" @click="closePop" v-show="popTitle == '搜索选择'">取消</button>
					<button class="popbox-footer-btn con-btn" @click="confirmPop">确定</button>
				</view>
			</view>
		</u-popup>
		<view class="userbox">
			<!-- <mescroll-body  bottom="0" ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback"> -->
				<view class="userlist">
					<vipUserItem></vipUserItem>
				</view>
			<!-- </mescroll-body> -->
		</view>
		<image class="invite-member" src="@/static/images/invite-member-icon.png" mode="aspectFill" @click="vipInvite"></image>
		<!-- 邀请弹窗 -->
		<u-popup :show="invitePop" :round="12" @close="invitePop = false" :zIndex="10074">
			<view class="popbox">
				<view class="popbox-head">
					<u-icon class="close-circle" name="close-circle" color="#ccc" size="24" @click="invitePop = false"></u-icon>
					分享方式
				</view>
				<view class="popbox-body">
					<view class="choosetitle x-bc">
						<view>选择标签</view>
						<view class="x-f" style="color:#1677ff;" @click="openPop('tag')">
							<u-icon name="plus" color="#1677ff" size="14" style="margin-right: 5px;"></u-icon>添加标签</view>
					</view>
					<view class="invitetip">选择标签，当会员注册成功后，即可自动打标签</view>
					<!-- <view class="tagbox-list x-f" style="margin-top: 10px;margin-left: 0px;">
						<view class="tagbox-item x-f" @click="chooseTag">未打标签</view>
						<view class="tagbox-item x-f tag-active">未打标签</view>
					</view> -->
					<view class="x-bc" style="margin-top: 30px;">
						<view class="sharePop-item y-f">
							<image src="@/static/images/poster_icon.png" mode="aspectFill"></image>
							<view style="font-weight: bold;margin-bottom: 4px;">生成海报</view>
							<view style="font-size: 12px;color: #888;">保存海报美观宣传</view>
						</view>
						<view class="sharePop-item y-f" @click="copyLink">
							<image src="@/static/images/link_icon.png" mode="aspectFill"></image>
							<view style="font-weight: bold;margin-bottom: 4px;">复制链接</view>
							<view style="font-size: 12px;color: #888;">生成链接一键复制</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 设置链接有效时长弹窗 -->
		<u-modal :show="setTimeShow"content='content' class="model" @confirm="confirmTime">
			<view class="setTimebox">
				<view class="timetip">不传默认以系统参数为准</view>
				<view class="x-f">
					<text style="margin-right: 20px;">链接有效时长(分钟)</text>
					<u-input
						fontSize="14px"
						placeholder="链接有效时长"
						border="none"
						v-model="time"
						maxlength="5"
					  ></u-input>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import vipUserItem from "../components/vipUserItem.vue"
	import dropdownPanel  from "../components/dropdownPanel.vue"
	export default {
		mixins: [MescrollMixin], 
		components: {
			vipUserItem,
			dropdownPanel
		},
		data() {
			return {
				list: [{name: '会员(0)'}, {name: '小黑屋(0)'}],
				current: 0,
				keyword: "",
				list2: [{
					name: '全部',
				}, {
					name: '今日新增',
				}, {
					name: '今日完播'
				}, {
					name: '未看过课'
				}],
				currentType: 0,
				activeStyle:{
					color: '#1677ff',
					fontSize: '14px',
					fontWeight: 'bold'
				},
				inactiveStyle:{
					fontSize: '14px'
				},
				searchTypeIndex: 0,
				typeArray: ['连续缺课天数多到少', '连续缺课天数少到多', '按注册时间晚到早','会员姓名0-9-A-Z'],
				typeoption: ['连续缺课', '连续缺课', '注册时间','会员姓名'],
				array: [{
					value: '0',
					name: '关联搜索',
				},{
					value: '1',
					name: '精准搜索'
				}],
				typeIndex: 0,
				popTitle: '搜索选择',
				showPop: false,
				filterData:[{
					name: '注册时间',
					value: 0,
					type: 'registerTime',
					option: [{
						label: '全部',
					},{
						label: '今天',
					},{
						label: '昨天',
					},{
						label: '近7天',
					},{
						label: '自定义',
					}]
				},{
					name: '看课状态',
					value: 1,
					type: 'watchStatus',
					option: [{
						label: '全部',
					},{
						label: '未看过课',
					},{
						label: '正常看课',
					},{
						label: '停止看课',
					}]
				},
				// {
				// 	name: '缺课状态',
				// 	value: 2,
				// 	type: 'nowatchStatus',
				// 	option: [{
				// 		label: '全部',
				// 	},{
				// 		label: '已缺课',
				// 	},{
				// 		label: '未缺课',
				// 	}]
				// },
				{
					name: '批量',
					value: 3,
					type: '',
					special: true
				}],
				searchbarNav: 0,
				registerTimeIndex: 0,
				showCalendar: false,
				mode: 'range',
				queryParam: {
					typeIndex: 0,
					startTime: '',
					endTime: ''
				},
				mescroll:null,
				downOption: {
					use:true,
					auto: false
				},
				upOption: {
					onScroll:false,
					use: true, // 是否启用上拉加载; 默认true
					auto: true,
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"已经到底了",
					empty: {
						icon:'https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
				dataList: [],
				invitePop: false,
				setTimeShow: false,
				time: "",
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '数据统计'
			});
		},
		methods: {
			onChange(index) {
				this.searchbarNav = index
			},
			confirm() {
				const type = this.filterData[this.searchbarNav].type
				if(type=='registerTime') {
					
				}
				// this.mescroll.resetUpScroll()
			},
			reset() {
				const type = this.filterData[this.searchbarNav].type
				if(type=='registerTime') {
					this.registerTimeIndex = ''
					this.queryParam.endTime = ''
					this.queryParam.startTime = ''
				}
			},
			handleParamItem(type,index) {
				if(type=='registerTime') {
					this.registerTimeIndex = index
				}
			},
			sectionChange(index) {
				this.current = index;
			},
			clickTypeTab(e) {
				this.currentType = e.index
			},
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.searchTypeIndex = e.detail.value
			},
			openPop(type) {
				this.popTitle = type == 'search' ? '搜索选择' : type == 'tag' ?'标签筛选' : ''
				this.typeIndex = this.queryParam.typeIndex
				this.showPop = true
			},
			closePop() {
				this.showPop = false
			},
			resetPop() {
				
			},
			closeCalendar() {
				this.showCalendar = false
			},
			confirmCalendar(e) {
				// this.startTime = e[0]
				// this.endTime =  e[e.length-1]
				this.showCalendar = false
				// this.getCount()
			},
			bindTypeChange(i) {
				this.typeIndex = i
			},
			confirmPop() {
				this.queryParam.typeIndex = this.typeIndex
				this.showPop = false
			},
			chooseTag() {
				
			},
			vipInvite() {
				this.invitePop = true
			},
			copyLink(){
				this.setTimeShow = true
			},
			confirmTime() {
				this.setTimeShow = false
				this.showShare = false
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data={
					courseId:this.courseId,
					status: '',
					pageNum: page.num,
					pageSize: page.size
				};
				uni.showLoading({
					title:"加载中..."
				})
				// getCourseVdieoList(data).then(res => {
				// 	uni.hideLoading()
				// 	if(res.code==200){
				// 		//设置列表数据
				// 		if (page.num == 1) {
				// 			that.dataList = res.data.list; 
							
				// 		} else {
				// 			that.dataList = that.dataList.concat(res.data.list);
							 
				// 		}
				// 		that.mescroll.endBySize(res.data.list.length, res.data.total);
						
				// 	}else{
				// 		uni.showToast({
				// 			icon:'none',
				// 			title: "请求失败",
				// 		});
				// 		that.dataList = null;
				// 		that.mescroll.endErr();
				// 	}
				// });
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.model .u-fade-enter-active {
			z-index: 10075 !important;
		}
	}
	.container {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #222222;
	}
	.boxnav {
		flex-wrap: wrap;
		padding: 0 0 0 10px;
		&-item {
			width: 50%;
			overflow: hidden;
		}
		&-item-info {
			border: 1px solid #f5f5f5;
			text-align: center;
			color: #222;
			background-color: #f5f5f5;
			border-radius: 3px;
			padding: 5px;
			margin: 0 10px 10px 0;
		}
		&-active {
			border: 1px solid #1677ff !important;
			color: #1677ff !important;
			background-color: #e7f1fe !important;
		}
	}
	.calendar-day {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 12px;
		color: #999;
		flex: 1;
		min-height: 30px;
		background-color: #f5f5f5;
		border-radius: 4px;
		margin: 0 10px 10px 0;
	}
	.setTimebox {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
	}
	.timetip {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #2979ff;
		text-align: center;
		margin-bottom: 5px;
	}
	.popbox{
		background-color: #fff;
		border-radius: 12px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 14px;
		color: #333;
		&-head {
			padding: 15px;
			font-weight: bold;
			font-size: 15px;
			text-align: center;
			position: relative;
		}
		.close-circle {
			position: absolute;
			right: 10px;
			top: 50%;
			transform: translateY(-50%);
		}
		&-body {
			padding: 10px 15px;
		}
		.radiobox {
			&-item{
				padding: 10px 0;
				border-bottom: 1px solid #f5f5f5;
				&:last-child {
					border-bottom: none;
				}
			}
		}
		&-footer {
			padding: 15px 0;
		}
		&-footer-btn {
			flex: 1;
			height: 44px;
			line-height: 44px;
			margin: 0 10px;
			border-radius: 50px;
			border: none;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			color: #333;
			&::after {
				border: none;
			}
		}
		.con-btn {
			background-color: #1677ff;
			color: #fff;
		}
		.choosetitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 15px;
			color: #333;
		}
		.invitetip {
			margin-top: 10px;
			background-color: #ebf5fb;
			color: #1677ff;
			padding: 5px 10px;
			border-radius: 5px;
		}
		.sharePop-item {
			padding: 0 10px;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 14px;
			display: inline-flex !important;
			image {
				height: 48px;
				width: 48px;
				margin-bottom: 10px;
			}
		}
	}
	.headbox {
		background-color: #fff;
		.subsection {
			height: 45px;
			padding: 4px;
		}
		.participate-order {
			font-size: 12px;
			image {
				width: 15px;
				height: 15px;
			}
		}
	}
	.tag-active {
		background-color: #ffeceb !important;
		color: #f93e3e !important;
		border: 1px solid #f93e3e !important;
	}
	.tagbox {
		padding: 10px 0;
		font-size: 12px;
		color: #1677ff;
		&-list {
			margin: 0 0 -6px 6px;
			flex-wrap: wrap;
		}
		&-item {
			height: 26px;
			padding: 0 8px;
			margin: 0 6px 6px 0;
			border-radius: 4px;
			background-color: #f5f5f5;
			color: #999;
			border: 1px solid #f5f5f5;
			box-sizing: border-box;
			font-size: 12px;
		}
	}
	.invite-member {
		height: 55px;
		width: 50px;
		position: fixed;
		bottom: 80px;
		right: 10px;
		cursor: pointer;
	}
	.userlist {
		padding: 24rpx;
	}
</style>