province-uniapp-qinghai-gsq/queue-monitor/pages/carManager/carManager.vue

<template>
	<view class="content main">
		<app-header @back="back">
			车辆信息管理
		</app-header>
		<view class="btn" @click="reservation">
			<view class="res">
				<view class="icon"></view>
				<view class="title">
					<view class="zh">在线预约</view>
					<view class="en">Online Booking</view>
				</view>
				<view class="arrow"></view>
			</view>
		</view>
		<view class="btn" @click="scan">
			<view class="scan">
				<view class="icon"></view>
				<view class="title">
					<view class="zh">扫码登记</view>
					<view class="en">Scan Code Registrantion</view>
				</view>
				<view class="arrow"></view>
			</view>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import { HOME_INDEX, CAR_INDEX, MONITOR_INDEX, LIVE_INDEX } from '@/config/constants'
	import appHeader from '@/pages/components/header/header.vue'
	import tabbar from '@/pages/components/tabbar.vue'
	export default {
		components: {appHeader, tabbar},
		data() {
			return {
				
			}
		},
		methods: {
			back() {
				getApp().globalData.tabIndex = HOME_INDEX
				uni.redirectTo({
					url: '/pages/home/home'
				})
			},
			reservation() {
				uni.navigateTo({
					url: '/pages/reservation/reservation'
				})
			},
			scan() {
				// #ifdef APP
				uni.scanCode({
					scanType: ['qrCode'],
					success: (resp) => {
						console.log(resp);
						try {
							const r = JSON.parse(resp.result)
							if(r.type === 'registration') {
								uni.navigateTo({
									url: '/pages/registration/registration'
								})
							}else {
								throw '-1'
							}
						}catch(_) {
							uni.showToast({
								title: '无法识别二维码',
								icon: 'error'
							})
						}
					},
					fail: () => {
						uni.showToast({
							title: '无法获取摄像头',
							icon: 'error'
						})
					}
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/registration/registration'
				})
				// #endif
			},
		}
	}
</script>

<style lang="scss" scoped>
.main {
	background-color: #f0f1f2;
	height: 100vh;
	// .header {
	// 	background: url('~@/static/login-bg-top.jpg') no-repeat;
	// 	color: white;
	// 	height: 80px;
	// 	display: flex;
	// 	justify-content: center;
	// 	align-items: center;
	// 	font-size: 20px;
	// }
}
.btn {
	margin: 20px;
	.res {
		background-image: linear-gradient(to bottom, #e8eefe, #fff);
		min-height: 200px;
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.icon {
			background: url('~@/static/res-icon.png') no-repeat;
			background-size: 100% 100%;
			width: 80px;
			height: 80px;
		}
		.arrow {
			background: url('~@/static/res-arrow.png') no-repeat;
			background-size: 100% 100%;
			width: 30px;
			height: 30px;
		}
	}
	.scan {
		background-image: linear-gradient(to bottom, #e2f7f1, #fff);
		min-height: 200px;
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.icon {
			background: url('~@/static/scan-icon.png') no-repeat;
			background-size: 100% 100%;
			width: 80px;
			height: 80px;
		}
		.arrow {
			background: url('~@/static/scan-arrow.png') no-repeat;
			background-size: 100% 100%;
			width: 30px;
			height: 30px;
		}
	}
	
	.title {
		.zh {
			font-size: 30px;
		}
		.en {
			font-size: 10px;
			color: #bfc4cd;
		}
	}
	
	
	
}
</style>