fbySrcm_uniapp/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="showa" :columns="columnsa" @cancel='showa=!showa' 
		@confirm='receiveB' keyName="tag"
		 ></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="justify-between mb20" style="flex-direction: row-reverse">
					<u-icon name="close-circle" color="#ccc" size="28" 
					@click="showvip=!showvip"></u-icon>
				</view>
				<view class="justify-start wrap">
					<view class="p16 mlr12" v-for="(item,index) in tagsuserlist" :key="index">
						<u-tag :text="item.nickName" :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>
	</view>
</template>

<script>
	import {
		getgroupList,
		changevipUser,
		getcompanyTaglist,
		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:[]
			}
		},
		onLoad(option) {
			this.groupid=option.id
			console.log(option)
		},
		mounted() {
			this.user = uni.getStorageSync("companyUserInfo") ? JSON.parse(uni.getStorageSync("companyUserInfo")) : {}
		},
		methods: {
			checkboxClick(name){
				console.log(name)
				this.tagsuserlist[name].checked = !this.tagsuserlist[name].checked
				console.log(this.tagsuser)
			},
			getuserid(){
				this.tagsuser = this.tagsuserlist.filter(item => item.checked)
				.map(v => v.nickName).join(',')
				this.usertagsid = 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(){
				const param={
					companyId:this.user.companyId,
					// companyUserId:this.groupid,
					tagIds:this.tagsid,
					companyUserId:this.userid
				}
				gettagsUser(param).then(res=>{
					if(res.code==200){
						this.tagsuserlist=res.data.map(item => {
							return {
								...item,
								checked: false,
							}
						})
						console.log(this.tagsuserlist)
					}
				})
			},
			changesomevip(){
				//更换部分会员归属
				const param={
					companyId:this.user.companyId,
					companyUserId:this.groupid,
					tagIds:this.tagsid,
					userId:this.usertagsid
				}
				changevipUser(param).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon: 'none',
							title: '更换会员归属成功'
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			changeall(){
				//更换全部会员
				const param={
					newCompanyUserId:this.userid,
					oldCompanyUserId:this.groupid
				}
				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.usertagsid==''){
						uni.showToast({
							icon: 'none',
							title: '请选择会员'
						})
					}else{
						this.changesomevip()
					}
				}
			},
			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.showa=true
				this.gettaglist()
			},
			changeuser(){
				this.showb=true
				this.getgrouplist()
			},
			gettaglist(){
				getcompanyTaglist().then(res=>{
					if(res.code==200){
						this.columnsa=[res.data]
					}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>
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>