fbySrcm_uniapp/pages/courseManage/vip/index.vue

<template>
	<view class="container">
		<view class="headbox">
			<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>
		<!-- 搜索选择弹窗/标签筛选 -->
		<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>
		<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>
	export default {
		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,
				queryParam: {
					typeIndex: 0,
				},
				mescroll:null,
				downOption: {
					auto:false//不要自动加载
				},
				upOption: {
					onScroll:false,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"已经到底了",
					empty: {
						icon:'/static/images/empty.png',
						tip: '暂无数据'
					}
				},
				dataList: [],
				invitePop: false,
				setTimeShow: false,
				time: "",
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: '数据统计'
			});
		},
		methods: {
			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() {
				
			},
			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
			},
		}
	}
</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;
	}
	.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 {
		padding: 10px;
		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;
	}
</style>