uniProject/pages/admin/Jiazheng/kechengBind.vue

<template>
	<view class="phone-list-page kc-bind-page">
		<view class="phone-navBar-box border-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">{{pageTitle}}</text>
			<!-- 未绑定显示 -->
			<view class="bd-navbar-btn" v-if="bindType==1" @click="bdBtn"><icon class="bd-title-icon" />已绑定</view>
			<!-- 已绑定显示 -->
			<view class="bd-navbar-btn" v-if="bindType==2" @click="wbdBtn"><icon class="bd-title-icon" />未绑定</view>
			
			<!-- <uni-icons v-show="current ==0" class="nav-bar-right-icon bar-ml10" type="search" @click="searchBtn"
				size="20"></uni-icons>
			<uni-icons v-show="current ==1" style="opacity: 0;" class="nav-bar-right-icon bar-ml10" type="search"
				size="20"></uni-icons> -->
		</view>
		<v-tabs v-model="current" :tabs="tabs" :scroll="false" @change="changeTab" field="name"
			class="admin-tab-box"></v-tabs>
		<view v-if="bindType ==1" class="jiazheng-search-box">
			<view @click.stop="clickAlltype" class="select-item-box">
				<text class="select-text">{{leixing}}</text>
				<icon class="select-jt-default" />
			</view>
			<view>课程剩余数量：{{kechengNumber||0}}</view>
		</view>
		<view class="kc-bind-scroll-view scroll-top-border" v-if="bindType ==1">

			<uni-list class="admin-list-box">
				<uni-list-item v-for="item in list" class="admin-list-item-box">
					<template v-slot:body>
						<view @click="lookUserInfo(item)" class="kecheng-list-card">
							<img :src="item.pic">
							<view class="item-card-row">
								<view class="ks-item-top">
									<view class="kc-name">{{item.name}}</view>
								</view>
								<view class="ks-totalTm kc-fenlei">
									<icon class="phone-fenlei-icon" />分类：{{item.kcClassifyName}}
								</view>
								<view class="ks-totalTm kc-fenlei" v-if="item.leixing === 1 || item.leixing === 2">
									<icon class="phone-leixing-icon" />类型：{{ item.leixing === 1 ? 'A' : 'B' }}
								</view>
								<button class="kc-bind-btn phone-green-btn" type="default" size="mini"
									@click.stop="toAdd(item)">绑定</button>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view class="kc-notbind-scroll-view scroll-top-border" v-if="bindType ==2">
			<uni-list class="admin-list-box">
				<uni-list-item v-for="item in listYx" class="admin-list-item-box">
					<template v-slot:body>

						<view @click="lookUserInfo(item)" class="kecheng-list-card">
							<img :src="item.pic" v-if="item.pic">
							<view class="item-card-row">
								<view class="ks-item-top">
									<view class="kc-name">{{item.name}}</view>
								</view>
								<view class="ks-totalTm kc-fenlei" v-if="item.leixing === 1 || item.leixing === 2">
									<icon class="phone-leixing-icon" />类型：{{ item.leixing === 1 ? 'A' : 'B' }}
								</view>
								<!-- <view class="ks-totalTm kc-fenlei">
									<icon class="phone-fenlei-icon" />分类：{{item.kcClassifyName}}
								</view> -->
								<view class="bind-btn-row">
									<button type="default" size="mini" class="kc-bind-btn phone-green-btn"
										@click="toReset(item)">重置</button>
									<button type="default" size="mini" class="kc-bind-btn phone-white-btn"
										@click="toDelete(item)">删除</button>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<common-dialog ref="commonDialogRef" :title="deleteTitle" :content="deleteConcent"
			@confirm-btn="deleteQuerenBtn"></common-dialog>
		<kechengLeixingVue ref="kclxRef" @select="handleSelectLeixing" @reset="handleResetLeixing"></kechengLeixingVue>
		<searchVue ref="searchRef" @search-btn="handleSearchFromBtn"></searchVue>
	</view>
</template>

<script>
	import {
		ref
	} from "vue";
	import {
		kcSelectList,
		jiazhengKcList,
		jiazhengKcAdd,
		jiazhengKcDelete,
		getAdminClassify,
		kechengReset,
		chaxunNumberKecheng
	} from "@/api/jiazheng.js";
	import commonDialog from '@/components/dialog/commonDialog.vue';
	import kechengLeixingVue from "./common/kechengLeixing.vue";
		import {toast} from "@/utils/common";
	import searchVue from "./common/search2.vue";
	import {
		debounce
	} from "@/utils/common";
	export default {
		data() {
			return {
				bindType:1,// 未绑定1  已绑定2
				kcLx:1,// 课程类型
				pageTitle:'未绑定课程',
				leixing: '全部类型',
				leixingList: [],
				selectClassify: null,
				kcClassifyId: 0,
				id: '',
				kechengNumber: '',
				addFlag: false,
				name: '',
				current: 0,
				list: [],
				listYx: [],
				deleteTitle: '删除',
				kcId: '',
				deleteConcent: '你确定要执行这个操作吗',
				tabs: [{
						id: 1,
						name: '课程类型A',

					},
					{
						id: 2,
						name: '课程类型B',

					},
				],
			}
		},
		components: {
			commonDialog,
			kechengLeixingVue,
			searchVue
		},
		onLoad(options) {
			this.id = options.id
			this.getList()
			this.getKechengClassify()
			this.chaxunNumber()
		},
		methods: {
			// 绑定
			bdBtn(){
				this.pageTitle = '已绑定课程';
				this.bindType = 2;
				this.getYxList()
			},
			//未绑定
			wbdBtn(){
				this.pageTitle = '未绑定课程'
				this.bindType = 1;
				this.chaxunNumber()
				this.getList()
			},
			chaxunNumber() {
				chaxunNumberKecheng({
					id: this.id
				}).then(res => {
					if (res.code == 0) {
						this.kechengNumber = res.data
						this.addFlag = this.kechengNumber > 0;
					} else {
						uni.showToast({
							title: '失败'
						});
						return false
					}
				})
			},
			toReset(data) {
				let req = {
					kcId: data.kcId,
					id: this.id
				}
				kechengReset(req).then(res => {
					if (res.code == 0) {
						this.getList()
						uni.showToast({
							title: '成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '失败'

						});
						return false
					}
				})
			},
			searchBtn() {
				this.$refs.searchRef.handleShow()
			},

			handleSearchFromBtn(textD) {
				this.name = textD;
				this.getList()
			},
			handleResetLeixing() {
				this.selectClassify = null;
				this.leixing = '全部类型';
				this.getList()
			},
			handleSelectLeixing(item) {
				this.leixing = item.lable;
				this.selectClassify = item;
				this.getList()
			},
			clickAlltype() {
				this.$refs.kclxRef.showPopup({
					data: this.leixingList
				})
			},
			getKechengClassify() {
				getAdminClassify().then(res => {
					res.data.children.forEach(item => {
						item.checked = false;
					})
					this.leixingList = res.data.children || [];
				})
			},
			toAdd(data) {
				if (!this.addFlag) {

					toast('课程剩余数量不足')
					return false
				}
				debounce(
					this.jzAdd(data), 500)

			},

			jzAdd(data) {
				let req = {
					kcIds: [data.kcId],
					id: this.id
				}
				jiazhengKcAdd(req).then(res => {
					if (res.code == 0) {
						this.getList()
						this.chaxunNumber()
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '添加失败',
							icon: 'success'
						});
						return false
					}
				})
			},
			deleteQuerenBtn() {
				let req = {
					kcIds: [this.kcId],
					id: this.id
				}
				jiazhengKcDelete(req).then(res => {
					if (res.code == 0) {
						this.getYxList()
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '删除失败',
							icon: 'success'
						});
						return false
					}
				})
			},
			toDelete(data) {
				this.kcId = data.kcId
				this.$refs.commonDialogRef.handleShow();
			},
			changeTab(data) {
			    this.current = data;
			    this.kcLx = data + 1; 
				 console.log(this.kcLx,'this.kcLx')
			    console.log(this.bindType,'this.bindType')
			    if(this.bindType == 1){
			        this.getList(); // 未绑定列表
			        this.chaxunNumber()
			    } else {
					this.getYxList(); // 已绑定列表
					
			    }
			},
			goUpPage() {
				uni.redirectTo({
					url: "/pages/admin/Jiazheng/index"
				})
			},
			getList() {
				let req = {
					id: this.id,
					"kcClassifyId": this.selectClassify && this.selectClassify.id || 0,
					name: this.name,
					leixing:this.kcLx,
				}
				kcSelectList(req).then(res => {
					if (res.code == 0) {
						this.list = res.data
					} else {
						return false
					}
				})
			},
			getYxList() {
				let req = {
					id: this.id,
					leixing:this.kcLx,
				}
				jiazhengKcList(req).then(res => {
					if (res.code == 0) {
						this.listYx = res.data
					} else {
						return false
					}
				})
			}
		}
	}
</script>