dsn_android/pages/admin/port.vue

<template>
	<view class="portList">
		<view class="nav">
			<navigation-bar-view ref="nav"></navigation-bar-view>
		</view>
		<view class="header">
			<picker mode="selector" :range="cabinetTypeList" range-key="label" :value="cabinetTypeIndex" @change="changeCabinetType">
				<view class="title">
					<text>{{cabinetTypeIndex ? cabinetTypeList[cabinetTypeIndex].label: '端口类型'}}</text>
				</view>
			</picker>
			<picker mode="selector" :range="statusList" range-key="label" :value="statusIndex" @change="changeStatus">
				<view class="title">
					<text>{{statusIndex ? statusList[statusIndex].label: '端口状态'}}</text>
				</view>
			</picker>
			<picker mode="selector" :range="useStatusList" range-key="label" :value="useStatusIndex" @change="changeUseStatus">
				<view class="title">
					<text>{{useStatusIndex ? useStatusList[useStatusIndex].label: '使用状态'}}</text>
				</view>
			</picker>
		</view>
		<view style="height: 21.8vw"></view>
		<block v-for="(item, i) in list" :key="i">
			<view class="cell">
				<view class="top">
					<view class="order-sn">端口号：{{item.portSn}}</view>
					<view class="status">
						<text v-if="item.useStatus == 0">空闲中</text>
						<text v-if="item.useStatus == 1">使用中</text>
					</view>
				</view>
				<view class="center">
					<view class="message">柜子号：{{item.caseSn}}</view>
					<view class="message">
						<text>格口类型：</text>
						<text v-if="item.cabinetType == 1">小格子</text>
						<text v-if="item.cabinetType == 2">中格子</text>
						<text v-if="item.cabinetType == 3">大格子</text>
					</view>
					<view class="message">
						<text>柜子状态：{{item.payTime}}</text>
						<text v-if="item.status == 0">禁用</text>
						<text v-if="item.status == 1">启用</text>
						<text v-if="item.status == 2">冻结</text>
					</view>
				</view>
				<view class="bottom">
					<view class="btn" @click="knockOut(item)">清箱</view>
					<view class="btn" @click="handelDoor(item, 1)">开门</view>
					<view class="btn" @click="handelDoor(item, 0)">关门</view>
				</view>
			</view>
		</block>
		<view style="height: 3.3vw;"></view>
	</view>
</template>

<script>
	import navigationBarView from '../../components/navigationBarView.vue';
	export default {
		components: {
			navigationBarView
		},
		data() {
			return {
				list: [],
				params: {
					deviceSn: '',
					cabinetType: '',
					status: '',
					useStatus: ''
				},
				cabinetTypeList: [{
					label: '全部',
					value: ''
				}, {
					label: '小格子',
					value: 1
				}, {
					label: '中格子',
					value: 2
				}, {
					label: '大格子',
					value: 3
				}],
				cabinetTypeIndex: 0,
				statusList: [{
					label: '全部',
					value: ''
				}, {
					label: '禁用',
					value: 0
				}, {
					label: '启用',
					value: 1
				}, {
					label: '冻结',
					value: 2
				}],
				statusIndex: 0,
				useStatusList: [{
					label: '全部',
					value: ''
				}, {
					label: '空闲中',
					value: 0
				}, {
					label: '使用中',
					value: 1
				}],
				useStatusIndex: 0
			}
		},
		onLoad() {
			this.params.deviceSn = uni.getStorageSync('sn');
			this.getData()
		},

		methods: {
			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				this.$api.managerPortList(this.params).then(res => {
					this.list = res.data;
				})
			},

			changeCabinetType(e) {
				this.cabinetTypeIndex = e.detail.value;
				this.params.cabinetType = this.cabinetTypeList[e.detail.value].value;
				this.getData();
			},

			changeStatus(e) {
				this.statusIndex = e.detail.value;
				this.params.status = this.statusList[e.detail.value].value;
				this.getData();
			},
			changeUseStatus(e) {
				this.useStatusIndex = e.detail.value;
				this.params.useStatus = this.useStatusList[e.detail.value].value;
				this.getData();
			},

			knockOut(e) {
				const _ = this;
				uni.showModal({
					title: '提示',
					content: '请确认是否对这个端口清箱？',
					success: r => {
						if (r.confirm) {
							let sn = uni.getStorageSync('sn');
							_.$api.managerTranslateSys({
								deviceSn: sn,
								port: e.portSn
							}).then(res => {
								uni.showToast({
									title: '操作成功'
								})
								setTimeout(function() {
									_.getData()
								}, 3000)
							})
						}
					}
				})
			},

			handelDoor(e, witch) {
				const _ = this;
				uni.showModal({
					title: '提示',
					content: `请确认是否这个${witch ? '开启' : '关闭'}端口？`,
					success: r => {
						if (r.confirm) {
							let sn = uni.getStorageSync('sn');
							_.$api.managerOperationSys({
								deviceSn: sn,
								witch: witch,
								port: e.portSn
							}).then(res => {
								uni.showToast({
									title: '操作成功'
								})
								setTimeout(function() {
									_.getData()
								}, 3000)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.portList {
		min-height: 100vh;
		background-color: #eee;

		.nav {
			position: fixed;
			top: 0;
			left: 0;
			background: #FFF;
		}

		.header {
			position: fixed;
			top: 11.3vw;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100vw;
			height: 10.5vw;
			background-color: #FFFFFF;

			.title {
				display: flex;
				align-items: center;
				font-size: 3.5vw;
				color: #161920;
			}
		}

		.cell {
			padding: 0 3.3vw;
			border-radius: 1.6vw;
			background-color: #FFFFFF;
			margin: 3.3vw 4vw 0;

			.top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 10.7vw;
				border-bottom: .3vw solid #eee;

				.order-sn {
					color: #999999;
					font-size: 3.5vw;
				}

				.status {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 16vw;
					height: 5.6vw;
					border-radius: 5.6vw;
					background: linear-gradient(to right, #FEE704, #FDD001);
					font-size: 3.2vw;
				}
			}

			.center {
				padding-top: 4.5vw;
				padding-bottom: 4.5vw;

				.take-code {
					display: flex;
					align-items: center;
					margin-bottom: 4.4vw;
					font-weight: bold;
					line-height: 4vw;

					.label {
						font-size: 4vw;
					}

					.code {
						color: #FFB706;
						font-size: 4.8vw;
					}
				}

				.message {
					margin-bottom: 3.1vw;
					color: #666666;
					font-size: 3.5vw;
					line-height: 3.5vw;
				}
			}

			.bottom {
				display: flex;
				justify-content: flex-end;
				padding-bottom: 3.2vw;

				.btn {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 22.7vw;
					height: 8.3vw;
					border-radius: 8.3vw;
					border: .3vw solid #CCCCCC;
					color: #222222;
					font-size: 3.5vw;
					margin-left: 2vw;
				}
			}
		}
	}
</style>