baozhida-logistics-app/pages/home/transferBox.vue

<template>
	<!-- 中转箱 -->
	<view>
		<u-navbar title="中转保温箱" autoBack placeholder></u-navbar>
		<view class="card_order_details">
			<view class="card_search">
				<view class="details_title">保温箱(转)<span class="line_title">*</span></view>
				<view class="card_form_item_selectil frameil" @click="incubatorChange(true)">
					<view class="title_input_selectil" :class="incubatorName ? '' : 'hsColor'">
						{{incubatorName || '选择保温箱'}}
					</view>
					<u-icon name="arrow-down" size="18px"></u-icon>
				</view>
			</view>
			<view class="card_search">
				<view class="details_title">保温箱(收)<span class="line_title">*</span></view>
				<view class="card_form_item_selectil frameil" @click="incubatorChange(false)">
					<view class="title_input_selectil" :class="transferIncubator ? '' : 'hsColor'">
						{{transferIncubator || '选择中转保温箱'}}
					</view>
					<u-icon name="arrow-down" size="18px"></u-icon>
				</view>
			</view>
		</view>
		<view class="card_btn">
			<u-button style="margin-bottom: 20rpx;" type="primary" @click="submit">提交</u-button>
		</view>
		<u-popup :show="incubatorShow" closeable @close="close">
			<view class="card_incubator">
				<view class="head_place">选择保温箱</view>
				<view class="card_search_il">
					<u-search placeholder="请输入保温箱名称" v-model="keyword" :showAction="false"
						@change="searchChange"></u-search>
				</view>
				<view style="display: flex;flex-direction: column;overflow-y: auto;max-height: 600rpx;"
					v-if="incubatorData.length > 0">
					<view class="card_title_item" :class="item.name == pitchName ? 'color_blue' : ''"
						v-for="(item,index) in incubatorData" :key="index" @click="incubatorClick(item)">
						{{item.name}}
					</view>
				</view>
				<view style="margin-bottom: 20px;" v-else>
					<u-empty mode="list" text="暂无保温箱" marginTop="50"></u-empty>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				incubatorShow: false,
				incubatorData: [],
				incubatorId: null,
				incubatorName: '',
				transferId: null,
				transferIncubator: '',
				pitchName: '',
				incubatorFlag: false,
			}
		},
		methods: {
			submit() {
				if (this.incubatorId) {
					if (this.transferId) {
						uni.showLoading();
						this.$api.post('/api/waybill/transfer', {
							OldCoolerBoxId: this.incubatorId,
							NewCoolerBoxId: this.transferId,
						}).then(res => {
							if (res.code == 200) {
								this.incubatorId = null
								this.incubatorName = ''
								this.transferId = null
								this.transferIncubator = ''
								uni.$u.toast(res.msg)
							} else {
								uni.$u.toast(res.data.msg)
							}
							uni.hideLoading();
						}).catch(() => {
							uni.hideLoading();
						})
					} else {
						uni.$u.toast('请选择接收保温箱')
					}
				} else {
					uni.$u.toast('请选择需要中转的保温箱')
				}
			},
			// 保温箱选择
			incubatorChange(event) {
				if (event) {
					this.pitchName = this.incubatorName
				} else {
					this.pitchName = this.transferIncubator
				}
				this.incubatorFlag = event
				this.incubatorShow = true
				this.$api.get('/api/cooler-box', {
					page: 1,
					pageSize: 999,
					isBind: true,
					name: this.keyword,
				}).then(res => {
					if (res.code == 200) {
						this.incubatorData = res.data.list
					}
				})
			},
			// 搜索
			searchChange() {
				this.incubatorData = []
				this.incubatorChange()
			},
			// 选择保温箱
			incubatorClick(event) {
				this.pitchName = event.name
				if (this.incubatorFlag) {
					this.incubatorId = event.id
					this.incubatorName = event.name
				} else {
					this.transferId = event.id
					this.transferIncubator = event.name
				}
				this.incubatorShow = false
			},
			close() {
				this.incubatorShow = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff !important;
	}

	.card_order_details {
		margin: 10rpx 30rpx 30rpx 30rpx;
	}

	.card_search {
		display: flex;
		align-items: center;
		margin: 20rpx 0rpx;
	}

	.details_title {
		position: relative;
		width: 160rpx;
		flex: none;
		color: #333;
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 10rpx;
		margin-right: 15rpx;
		padding-left: 15rpx;
	}

	.line_title {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		color: red;
	}

	.card_form_item_selectil {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: 6px 9px;
		height: 52rpx;
	}

	.title_input_selectil {
		font-size: 30rpx;
		// width: 100%;
	}

	.hsColor {
		color: rgb(192, 196, 204);
	}

	// 伪元素1rpx边框
	.frameil {
		position: relative; //重要
	}

	.frameil::after {
		position: absolute;
		content: '';
		border: 2rpx solid #dadbde;
		width: 200%;
		height: 200%;
		top: 0;
		left: 0;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		border-radius: 20rpx;
		/* 使伪元素不会阻止鼠标事件 */
	}

	.card_incubator {
		min-height: 600rpx;
		max-height: 900rpx;
	}

	.head_place {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
	}

	.card_search_il {
		margin: 20rpx;
	}

	.card_title_item {
		position: relative;
		padding: 30rpx;
		// border-bottom: 1rpx solid #dadbde;
	}

	.color_blue {
		color: #2979ff;
	}

	.card_title_item:before {
		content: " ";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		border-top: 1px solid #e7e6e4;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.card_btn {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
	}
</style>