uniProject/pages/admin/Jiazheng/kechengBind.vue

<template>
	<view class="admin-jiazheng-list">
		<view class="icon-title-navBar-box">
			<view @click="goUpPage" class="nav-bar-icon"></view>
			<text class="nav-bar-title">家政人员</text>
		</view>
		<v-tabs v-model="current" :tabs="tabs" :scroll="false" @change="changeTab" field="name"
			class="admin-tab-box"></v-tabs>
		<uni-list v-if="current ==0" class="jz-scroll-view">
			<uni-list-item v-for="item in list" class="jz-list-item-box">
				<template v-slot:body>
					<view class="card-head-row">
						<button type="default" class="phone-green-btn bz-tel-btn" @click.stop="toAdd(item)">添加</button>
					</view>
					<view @click="lookUserInfo(item)" class="card-body-row">
						<view class="card-img-box">
							<img :src="item.pic" v-if="item.pic">
							<icon class="phone-default-userImg" v-else></icon>
						</view>
						<view class="body-content-row">
							<view class="content-text-row">
								<view> {{item.name}}</view>
							</view>

						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<uni-list v-if="current ==1" class="jz-scroll-view">
			<uni-list-item v-for="item in listYx" class="jz-list-item-box">
				<template v-slot:body>
					<view class="card-head-row">
						<button type="default" class="phone-green-btn bz-tel-btn"
							@click.stop="toDelete(item)">删除</button>
					</view>
					<view @click="lookUserInfo(item)" class="card-body-row">
						<view class="card-img-box">
							<img :src="item.pic" v-if="item.pic">
							<icon class="phone-default-userImg" v-else></icon>
						</view>
						<view class="body-content-row">
							<view class="content-text-row">
								<view> {{item.name}}</view>
							</view>

						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<common-dialog ref="commonDialogRef" :title="deleteTitle" :content="deleteConcent"
			@confirm-btn="deleteQuerenBtn"></common-dialog>
	</view>
</template>

<script>
	import {
		ref
	} from "vue";
	import {
		kcSelectList,
		jiazhengKcList,
		jiazhengKcAdd,
		jiazhengKcDelete
	} from "@/api/jiazheng.js";
	import commonDialog from '@/components/dialog/commonDialog.vue';

	export default {
		data() {
			return {
				kcClassifyId: 0,
				id: '',
				current: 0,
				list: [],
				listYx: [],	
				 deleteTitle :'删除',
				 kcId :'',
				 deleteConcent :'你确定要执行这个操作吗',		
				tabs: [{
						id: 1,
						name: '未绑定课程',

					},
					{
						id: 2,
						name: '已绑定课程',

					},
				],
			}
		},
		components: {
			commonDialog,
		},
		onLoad(options) {
			this.id = options.id
			this.getList()
		},
		methods: {
			toAdd(data) {
				let req = {
					kcIds: [data.kcId],
					id: this.id
				}
				jiazhengKcAdd(req).then(res => {
					if (res.code == 0) {
						this.getList()
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
					} else {
						uni.showToast({
							title: '添加失败',
							icon: 'success'
						});
						return false
					}
				})
			},
			deleteQuerenBtn(){
				let req = {
					kcId: 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
				if (this.current == 0) {
					this.getList()
				} else {
					this.getYxList()
				}

				console.log('data', data);
			},
			goUpPage() {
				uni.redirectTo({
					url: "/pages/admin/Jiazheng/index"
				})
			},
			getList() {
				let req = {
					id: this.id,
					"kcClassifyId": this.kcClassifyId,
				}
				kcSelectList(req).then(res => {
					if (res.code == 0) {
						this.list = res.data
					} else {
						return false
					}
				})
			},
			getYxList() {
				let req = {
					id: this.id,
				}
				jiazhengKcList(req).then(res => {
					if (res.code == 0) {
						this.listYx = res.data
					} else {
						return false
					}
				})
			}
		}
	}
</script>