ylrz_scrm_company_h5/pages/courseManage/manage/changeVip.vue

<template>
	<view class="column flex-1 hb">
		<view class="p20 justify-between" > 
			<view class="column base-bg-f8 p20 mr20 top-item" v-for="(item,index) in list" :key="index"
			style="width: 50%;" @click="change(index)" :class="active==index?'top-itemActive':''">
				<text class="fs28 bold mb4">{{item.name}}</text>
				<text class="fs24 base-color-6">{{item.text}}</text>
			</view>
		</view>
		<view class="pl20 " v-if="active==0">
			<view class="mb20 fs28">选择接收销售</view>
			<view class="base-bg-f8 p10 justify-between align-center mr20 pl20">
				<text class="mr20">接收销售</text>
				<u-input placeholder="请选择接收销售" @focus="selsome" border="none"
				v-model="username"></u-input>
			</view>
			<view class='fs24 mtb12 base-color base-bg-sure mr20 pl20 ptb4'>
				如更换全部会员，则包含小黑屋会员</view>
				
		</view>
		<view v-else class="pl20 ">
			<view class="mb20 fs28">选择会员</view>
			<view class="base-bg-f8 p10 justify-between align-center mr20 pl20">
				<text class="mr20">标签</text>
				<u-input placeholder="请选择标签" border="none" @focus='changelabel'
				v-model="usertag"></u-input>
			</view>
			<view class="base-bg-f8 p10 justify-between align-center mr20 pl20 mt20">
				<text class="mr20">选择会员</text>
				<u-input placeholder="请选择会员" border="none" @focus='changelabelvip'
				v-model="tagsuser"></u-input>
			</view>
			<view class="mb20 fs28 mt20">选择接收销售</view>
			<view class="base-bg-f8 p10 justify-between align-center mr20 pl20">
				<text class="mr20">接收销售</text>
				<u-input placeholder="请选择接收销售" border="none" @focus='changeuser'
				v-model="username"></u-input>
			</view>
		</view>
		<view class="foot-box justify-around">
			<!-- <view class="box" style="border: 2rpx solid #eee;">取消</view> -->
			<view class="box base-bg-blue colorf" @click="sure">确定</view>
		</view>
		<u-picker :show="show" :columns="columns" @cancel='show=!show' 
		@confirm='receiveA' keyName="nickName"
		></u-picker>
		<u-picker :show="showb" :columns="columnsb" @cancel='showb=!showb' 
		@confirm='receiveC' keyName="nickName"
		></u-picker>
		<u-popup :show="showvip" @close="close" @open="open" >
			<view class="p20 h400">
				<view class="mb20" style="text-align: center;">
					<view style="display: inline-block; ">选择会员</view>
					<u-icon name="close-circle" color="#ccc" size="28"
					@click="showvip=!showvip" style="display: inline-block;float: right;"></u-icon>
				</view>
				<view class="justify-start wrap">
					<view class="p16 mlr12" v-for="(item,index) in tagsuserlist" :key="index">
						<u-tag :text="item.userName" :plain="!item.checked" type="primary" :name="index"
								@click="checkboxClick">
						</u-tag>
					</view>
				</view>
				<view class="centerV">
					<view @click="getuserid" class="surebtn">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="showPop" :round="12" @close="closePop" class="model" :zIndex="10076" style="flex: 0;">
			<view class="popbox">
				<view class="popbox-head">
					<u-icon class="close-circle" name="close-circle" color="#ccc" size="24" @click="showPop=!showPop"></u-icon>
					标签筛选
				</view>
				<view class="popbox-body">
					<view class="mb20" >
						<u-search placeholder="请输入标签  多个标签用 , 隔开" v-model="tagkeywords" :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 class="tagbox-list x-f" style="white-space: nowrap;flex-wrap: wrap;">
							<view class="tagbox-item x-f tag-active" v-if="columnsa.length<=0">暂无标签</view>
							<view class="mlr10 mb10" v-for="(item,index) in columnsa" :key='item.tagId'>
									<u-tag :text="item.tag" :plain="!item.checked" :name="index"
										@click="chooseTag(index)"></u-tag>
							</view>
						</view>
						<view class="center fs24 mt20">
							<text class="mr20" @click="getTagpage('last')">上一页</text>
							<text class="base-color-red">{{pagetag.pageNum}}/{{pagetag.pages}}</text>
							<text class="ml20" @click="getTagpage('next')">下一页</text>
						</view>
					</scroll-view>
				</view>
				<view class="popbox-footer x-bc">
					<button class="popbox-footer-btn" @click="resetPop" >重置</button>
					<button class="popbox-footer-btn con-btn" @click="confirmPop">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getgroupList,
		getallTags,
		changevipUserAll,
		gettagsUser,
	} from "@/api/courseManage.js"
	export default {
		data() {
			return {
				list:[{
					name:'更换全部会员归属',
					text:'一键更换全部会员归属'
				},{
					name:'更换部分会员归属',
					text:'通过筛选，定位会员更换归属'
				}],
				active:0,
				show:false,
				columns:[],
				columnsa:[],
				columnsb:[],
				border:false,
				groupList:[],
				showa:false,
				showb:false,
				userid:0,
				username:'',
				usertag:'',
				tagsid:'',
				showvip:false,
				groupid:0,
				tagsuser:'',
				tagsuserlist:[],
				user:[],
				usertagsid:[],
				showPop:false,
				tagkeywords:'',
				tagpageNum:1,
				tagpageSize:10,
				triggereds:false,
				statusA: 'loadmore',
				isEnableds: true,
				pagetag:[],
				ids:[]
			}
		},
		onLoad(option) {
			this.groupid=option.id
			console.log(option)
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
		},
		methods: {
			resetPop(){
				this.tagkeywords=''
				this.usertag=''
				this.tagpageNum=1
				this.gettaglist()
			},
			getcompanyTag(value){
				this.tagkeywords=value
				this.tagpageNum=1
				this.gettaglist()
			},
			confirmPop() {
				// this.queryParam.typeIndex = this.typeIndex
				this.showPop = false
				this.usertag = this.columnsa.filter(item => item.checked).map(v => v.tag).join(',')
				this.tagsid = this.columnsa.filter(item => item.checked).map(v => v.tagId).join(',')
				this.ids= this.columnsa.filter(item => item.checked).map(v => v.tagId)
				//filtter(过滤)  筛选所有checked==true的  然后map返回每一项的id
				// if (this.idx.length == 0) {
				// 	this.showCompanytag = this.companytag
				// }
			},
			chooseTag(i) {
				this.columnsa[i].checked = !this.columnsa[i].checked
			},
			getTagpage(type){
				//标签页数选择
				if(type=='last'){
					if(this.tagpageNum>=2){
						this.tagpageNum--
						this.gettaglist()
					}else{
						uni.showToast({
							title: '已经是第一页',
							icon: 'none',
							duration: 1000
						}); 
					}
				}else{
					if(this.tagpageNum<this.pagetag.pages){
						this.tagpageNum++
						this.gettaglist()
					}else{
						uni.showToast({
							title: '已经是最后一页',
							icon: 'none',
							duration: 1000
						}); 
					}
				}
			},
			//标签展示下拉
			pullDownRefreshs() {
				// 下拉
				this.triggereds = true; //下拉了状态为true
				setTimeout(() => {
					this.triggereds = false;
					uni.stopPullDownRefresh()
					this.tagpageNum = 1;
					this.gettaglist('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			closePop(){
				this.showPop=!this.showPop
				console.log(123)
			},
			checkboxClick(name){
				this.tagsuserlist[name].checked = !this.tagsuserlist[name].checked
			},
			getuserid(){
				this.tagsuser = this.tagsuserlist.filter(item => item.checked)
				.map(v => v.userName).join(',')
				this.ids = this.tagsuserlist.filter(item => item.checked)
				.map(v => v.userId)
				this.showvip=!this.showvip
			},
			close(){
				this.showvip=!this.showvip
			},
			open(){
				
			},
			changelabelvip(){
				if(this.tagsid==''){
					uni.showToast({
						icon: 'none',
						title: "请先选择标签"
					})
				}else{
					this.showvip=!this.showvip
					this.gettagUserlist()
				}
			},
			gettagUserlist(){
				console.log(this.tagsid)
				const param={
					tagId:this.tagsid,
				}
				gettagsUser(param).then(res=>{
					if(res.code==200){
						this.tagsuserlist=res.data.map(item => {
							return {
								...item,
								checked: false,
							}
						})
						console.log(this.tagsuserlist)
					}
				})
			},
			changeall(){
				//更换会员归属
				const param={
					from:this.groupid,
					to:this.userid,
					type:this.active,
					ids:this.ids
				}
				changevipUserAll(param).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon: 'none',
							title: '更换会员归属成功'
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			sure(){
				if(this.active==0){
					if(this.userid==''){
						uni.showToast({
							icon: 'none',
							title: '请选择接收销售'
						})
					}else{
						this.changeall()
					}
				}else{
					if(this.tagsid==''){
						uni.showToast({
							icon: 'none',
							title: '请选择标签'
						})
					}else if(this.ids==''){
						uni.showToast({
							icon: 'none',
							title: '请选择会员'
						})
					}else if(this.userid==''){
						uni.showToast({
							icon: 'none',
							title: '请选择接收销售'
						})
					}else{
						this.changeall()
					}
				}
			},
			receiveC(e){
				this.username=e.value[0].nickName
				this.userid=e.value[0].userId
				this.showb=!this.showb
			},
			receiveB(e){
				this.tagsid=e.value[0].tagId
				this.usertag=e.value[0].tag
				this.showa=!this.showa
			},
			receiveA(e){
				this.username=e.value[0].nickName
				this.userid=e.value[0].userId
				this.show=!this.show
			},
			change(index){
				this.active=index
			},
			selsome(){
				console.log(12)
				this.show=true
				this.getgrouplist()
			},
			changelabel(){
				this.tagsuser=''
				this.showPop=true
				this.gettaglist()
			},
			changeuser(){
				this.showb=true
				this.getgrouplist()
			},
			gettaglist(type){
				//获取标签列表
				const data={
					pageNum:this.tagpageNum,
					pageSize:this.tagpageSize,
					keyword:this.tagkeywords
				}
				getallTags(data).then(res=>{
					if(res.code==200){
						const dataList = res.data.list.map(item => {
							return {
								...item,
								checked: false,
							}
						})
						if (type == 'refresh') {
							this.columnsa = dataList
						}else {
							// this.columnsa = [...this.columnsa, ...dataList]
							this.columnsa = dataList
						}
						if (res.data.isLastPage) {
							this.statusA = 'nomore'
						} else {
							this.statusA = 'loadmore'
						}
						this.pagetag=res.data
						this.changetag = this.columnsa
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getgrouplist(){
				//获取销售列表
				getgroupList().then(res=>{
					if(res.code==200){
						this.columns=[res.data]
						this.columnsb=[res.data]
						console.log(this.columns)
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.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 10px;
		}
	
		.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;
			}
		}
	}
page{
	background-color: #fff;
}
.top-itemActive{
	color: #1773ff;
	border-bottom: 4rpx solid #1773ff;
	background-color: rgba(232,242,254,1);
	text{
		color: #1773ff !important;
	}
}
.foot-box{
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 20rpx;
}
.box{
	width:70%;
	text-align: center;
	padding: 16rpx 0;
	border-radius: 50rpx;
	font-size: 28rpx;
}
.box-list{
	width: fit-content;
	background-color: #eee;
	border-radius: 10rpx;
	font-size: 28rpx;
}
.surebtn{
	position: absolute;
	bottom: 0;
	margin-bottom: 20rpx;
	background-color: #1773ff;
	color: #fff;
	width: 80%;
	text-align: center;
	padding: 10rpx 0;
	border-radius: 30rpx;
}
</style>