ylrz_scrm_company_h5/pages/courseManage/manage/lableSetup.vue

<template>
	<view class="column  hb bgf">
		<view class="align-center justify-between p20 bgf ">
			<view class="justify-start fs28 align-center">
				<u-icon name="bookmark-fill" color="#1677ff" size="28"></u-icon>
				<view>自定义标签</view>
			</view>
			<view class="fs28" @click="isShowSelectAll=!isShowSelectAll">
			{{isShowSelectAll?'取消多选':'多选'}}</view>
		</view>
		<view class="mtb20 mlr20" >
			<u-search placeholder="请输入标签  多个标签用 , 隔开" v-model="tagkeywords" :showAction="false" height="30px"
				@search='getcompanyTag' ></u-search>
		</view>
		<view class="column flex-1 scrolly plr20" >
			<scroll-view scroll-y="true" class="hb" :refresher-enabled="isEnabled" :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="justify-start " v-for="(item,index) in companylabel"
					:key="index">
					<u-checkbox-group @change="selectlist(index)">
						<u-checkbox :checked="item.checked" shape="circle" activeColor="#FF6C47" :name="true"
							label=" " labelColor="#333" v-if="isShowSelectAll"/>
					</u-checkbox-group>
					<view class="justify-start align-center ptb16 flex-1" 
					style="border-bottom: 2rpx solid #e7e7e7;" >
						<u-icon name="list" color="#666" size="24"></u-icon>
						<view class="fs28 ml12">{{item.tag}}</view>
					</view>
				</view>
				<u-loadmore :status="statusA" />
			</scroll-view>
		</view>
		<view class="h120"></view>
		<view class="footbtn">
			<view  v-if="isShowSelectAll" class="justify-between p20 bgf">
				<view class="align-center justify-between" v-if="isShowSelectAll">
					<u-checkbox-group @change="selectAll">
						<u-checkbox :checked="isSelectAll" shape="circle" activeColor="#FF6C47" 
						:name="true" label="全选" labelColor="#333" />
						<text class="fs24 base-color-9 ml12">已选 {{selectedCount}}
							个</text>
					</u-checkbox-group>
				</view>
				<view class="justify-center ">
					<button class="base-bg-red radius100 colorf h62 fs28 lh62 mlr10 plr60"
						@click="changeProhibit">删除</button>
				</view>
			</view>
			<view class='base-bg radius50 m20 p20 center colorf'
			 @click="addLable" v-else>新增标签</view>
		</view>
		<view>
			<u-modal :show="showlist" title="新增标签" @confirm="confirmchange"
			 :showCancelButton="true" @cancel="cancel" style="flex: 0;">
				<view class="slot-content">
					<u-input placeholder="请输入新增标签" v-model="addlable"></u-input>
				</view>
			</u-modal>
		</view>
		<u-loading-page :loading="viewload" iconSize="32" loadingColor="#3c9cff" fontSize="20"
		:loading-text="loadingtext" ></u-loading-page>
	</view>
</template>

<script>
	import {
		getallTags,
		addCompanyLabel,
		deleteCompanyLabel
	} from "@/api/courseManage.js"
	export default {
		data() {
			return {
				viewload:true,
				loadingtext:"数据加载中...",
				isShowSelectAll:false,
				showlist:false,
				addlable:'',
				companylabel:[],
				isSelectAll:false,
				isSelected:false,
				selectedCount:0,
				selectidAll:[],
				tagpageNum:1,
				tagpageSize:13,
				tagkeywords:'',
				statusA:"nomore",
				triggereds:false,
				isEnabled:true
			}
		},
		mounted() {
			this.getcompanylabel()
		},
		watch:{
			selectedCount(oldVal,newVal){
				return oldVal
				console.log('message changed from', oldVal, 'to', newVal)
			}
		},
		methods: {
			getcompanyTag(value){
				this.companylabel=[]
				this.tagkeywords = value
				this.tagpageNum=1
				this.getcompanylabel()
			},
			reachBottoms() {
				// status这个是加载状态
				console.log(111);
				if (this.statusA === 'loadmore') {
					this.statusA = 'loading'
					uni.showNavigationBarLoading()
					setTimeout(() => {
						this.tagpageNum++
						this.getcompanylabel() //触底  不穿执行else
						uni.hideNavigationBarLoading()
					}, 1000);
				}
			},
			//标签展示下拉
			pullDownRefreshs() {
				// 下拉
				this.triggereds = true; //下拉了状态为true
				setTimeout(() => {
					this.triggereds = false;
					uni.stopPullDownRefresh()
					this.tagpageNum = 1;
					this.getcompanylabel('refresh') //触底  不穿执行else
					// 请求接口里面需要判断是不是最后一页   是最后一页 status赋值为‘loadmore’没有更多了
					// 请求接口
				}, 1000)
			},
			changeProhibit(){
				const alltag=this.selectidAll.join(',')
				console.log(this.selectidAll)
				//删除标签
				if(this.selectidAll==''){
					uni.showToast({
						icon: 'none',
						title: '请选择标签'
					})
					return
				}
				const params={
					tagIds:alltag
				}
				console.log(this.selectidAll)
				deleteCompanyLabel(alltag).then(res=>{
					if(res.code==200){
						this.companylabel=[]
						this.tagpageNum=1
						this.selectidAll=[]
						uni.showToast({
							icon: 'none',
							title: '标签删除成功'
						})
						this.getcompanylabel()
					}else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getcompanylabel(type ){
				this.tagkeywords =this.tagkeywords.replace(/，/g,',')
				const data ={
					pageNum:this.tagpageNum,
					pageSize:this.tagpageSize,
					keyword:this.tagkeywords
				}
				getallTags(data).then(res=>{
					if(res.code==200){
						this.viewload=false
						const dataList = res.data.list.map(item => {
							return {
								...item,
								checked: false,
							}
						})
						if (type == 'refresh') {
							this.companylabel = dataList
						}else {
							this.companylabel = [...this.companylabel, ...dataList]
						}
						if (res.data.isLastPage) {
							this.statusA = 'nomore'
						} else {
							this.statusA = 'loadmore'
						}
					}else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			addcompanySingle(){
				const params={
					tag:this.addlable
				}
				addCompanyLabel(params).then(res=>{
					if(res.code==200){
						this.tagpageNum=1
						this.companylabel=[]
						this.addlable=''
						uni.showToast({
							icon: 'none',
							title: '标签添加成功'
						})
						this.getcompanylabel()
					}else {
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			addLable(){
				this.showlist=!this.showlist
			},
			selectlist(i){
				// 单选 /反选
				let arr = {
					...this.companylabel[i],
					checked: !this.companylabel[i].checked
				}
				this.$set(this.companylabel, i, arr)
				const seletnum = this.companylabel.filter(item => item.checked).map(item => item.tagId)
				this.selectidAll = this.companylabel.filter(item => item.checked).map(item => item.tagId)
				this.selectedCount=seletnum.length
				this.isSelectAll = this.companylabel.every(item => item.checked)
				if (this.isSelectAll) {
					this.companylabel = this.companylabel.map(item => {
						return {
							...item,
							checked: this.isSelectAll
						}
					})
				}
			},
			selectAll(){
				// 全选
				this.isSelectAll = !this.isSelectAll
				console.log(this.isSelectAll)
				this.companylabel = this.companylabel.map(item => {
					// 每一项的 checked为 全选的状态
					return {
						...item,
						checked: this.isSelectAll
					}
				})
				const seletnum = this.companylabel.filter(item => item.checked).map(item => item.tagId)
				this.selectedCount=seletnum.length
				console.log(this.companylabel)
			},
			confirmchange(){
				if(this.addlable==''){
					uni.showToast({
						icon: 'none',
						title: "请输入标签"
					})
				}else{
					this.addcompanySingle()
					this.showlist=!this.showlist
				}
			},
			cancel(){
				this.showlist=!this.showlist
			}
		}
	}
</script>

<style lang="scss">
.footbtn{
	position: fixed;
	bottom: 0;
	width: 100%;
	background-color: #fff;
}
</style>