jili2-ph/pages/order/worker.vue

<template>
	<view>
		<view class="container" style="margin-bottom: 100rpx;">
			<template v-for="(item,index) in list">
				<view v-if="wids.includes(item.id)" :key="index" class="worker-box1 cur" @click="selectWorker(item)">
					<image class="worker-box-img" :src="item.img" mode="aspectFit"></image>
					<view class="worker-box-name">{{item.name}}</view>
					<view v-if="item.count > 0" class="worker-box-desc">当前有{{item.count}}单</view>
					<view v-if="item.count == 0" class="worker-box-desc">当前空闲</view>
					<image class="worker-box-cur" src="../../images/select-worker.png" mode="aspectFit"></image>
				</view>
				<view v-if="!wids.includes(item.id)" class="worker-box1" @click="selectWorker(item)">
					<image class="worker-box-img" :src="item.img" mode="aspectFit"></image>
					<view class="worker-box-name">{{item.name}}</view>
					<view v-if="item.count > 0" class="worker-box-desc">当前有{{item.count}}单</view>
					<view v-if="item.count == 0" class="worker-box-desc">当前空闲</view>
					<image class="worker-box-cur" src="../../images/select-worker.png" mode="aspectFit"></image>
				</view>
			</template>
			
		</view>
		<view class="confirmBtn" @click="confirmBtn">确认选择</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				list: [],
				workers: [],
				wids: []
			}
		},
		onLoad() {
			var that = this;
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('acceptDataFromOpenerPage', function(data) {
				that.workers = data.workers;
				that.wids = [];
				that.workers.forEach((item) => {
					that.wids.push(item.id);
				});
			})
		},
		onShow() {
			var that = this;
			app.ajaxReadyCallback = res => {  //各个接口统一回调方法
				var apiname = res.data.apiname;
				console.log(res);
				if(apiname == 'worker'){
					that.list = res.data.data;
				}
			}
			
			this.getWorkerAll();
		},
		methods: {
			selectWorker(obj){
				if(this.wids.includes(obj.id)){ // 去除
					this.wids = this.wids.filter((item) => {
						return item != obj.id;
					});
					this.workers = this.workers.filter((item) => {
						return item.id != obj.id;
					})
				}else{ // 添加
					this.wids.push(obj.id);
					this.workers.push(obj);
				}
			},
			
			confirmBtn(){
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.emit('acceptDataFromOpenedPage', this.workers);
				uni.navigateBack({
				    delta: 1
				});
			},
			
			getWorkerAll(){
				if(this.flag == 1){
					return;
				}
				app.ajax({
					url: app.globalData.serverUrl + 'order/getWorkerAll',
					type: 'POST',
					apiname: 'worker',
				});
			},
			getUrlCode (name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
			},
		}
	}
</script>

<style lang="scss" scoped>
	.confirmBtn{
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		color: #FFFFFF;
		background-color: var(--themeColor);
		font-size: 34rpx;
		font-weight: bold;
	}
	.worker-box1{
		position: relative;
		width: 218rpx;
		height: 280rpx;
		margin-right: 15rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		border: 2rpx solid #FFFFFF;
		float: left;
		margin-bottom: 15rpx;
	}
	.worker-box1.cur{
		border: 2rpx solid #FF7576;
	}
	.worker-box1 .worker-box-cur{
		display: none;
		position: absolute;
		width: 66rpx;
		height: 68rpx;
		z-index: 100;
		top: -1rpx;
		right: -1rpx;
	}
	.worker-box1.cur .worker-box-cur{
		display: block;
	}
	.worker-box1 .worker-box-img{
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		margin-top: 25rpx;
		margin-bottom: 10rpx;
	}
	.worker-box1 .worker-box-name{
		width: 100%;
		height: auto;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
	}
	.worker-box1 .worker-box-desc{
		width: 100%;
		height: auto;
		font-size: 28rpx;
		color: #808080;
	}
	
</style>