patrol-cancel-h5/pages/index/index.vue

<template>
	<view class="wrap">
		<u-modal :show="show" title='核销码' showCancelButton @confirm='tocancel'@cancel='closeshow'>
			<view class="slot-content">
				 <u--input
				    placeholder="请输入核销码"
				    border="surround"
				    v-model="code"
				  ></u--input>
			</view>
		</u-modal>
		<view class="scancode">
			<view class="scan" @click="toscan">
				扫码核销
			</view>
			<view class="code" @click="show=true">
				核验码核销
			</view>
		</view>
		<view class="tips">提示：扫描访客的二维码或输入核销码进行核销</view>

		<view>
			<view class="listtitle">
				<text>今日待核销访客</text>
				<text @click='tolist'>访客列表</text>
			</view>
			<view class="list">
				<view class='listitem'>
					<view>
						<text>2023-05-15</text>
						<text class="textr">待核销</text>
					</view>
					<view>
						拜访时间：09:00
					</view>
					<view>
						<text>拜访人：张三</text>
						<text>拜访事由：开会</text>
					</view>
					<view>
						单位信息：苏州朗业网络科技有限公司
					</view>
					<view>
						<text>受访人：李四</text>
						<text>受访科室：信息科</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				code:''
			}
		},
		onLoad() {
		},
		methods: {
			toscan(){
				uni.navigateTo({
					url:'/pages/index/scancode'
				})
			},
			tolist(){
				uni.navigateTo({
					url:'/pages/index/list'
				})
			},
			tocancel(){
				if(this.code!=''){
					uni.navigateTo({
						url:'/pages/index/cancel?code='+this.code
					})
					this.closeshow()
				}else{
					uni.showToast({
						title:'请输入核销码',
						duration:2000,
						icon:'none'
					})
				}
			},
			closeshow(){
				this.show = false
				this.code=''
			}
			
		}
	}
</script>

<style scoped>
	.wrap{
		height:90vh;
		min-height: 90vh;
		padding:30rpx;
	}
	.scancode{
		display: flex;
		justify-content: space-between;
	}
	.scan {
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		background-color: deepskyblue;
		line-height: 200rpx;
		color: #fff;
		font-size: 36rpx;
		box-shadow: 0 0 0px 4px lightskyblue;
		margin: 30rpx auto;
		text-align: center;
	}
	.code{
		width: 200rpx;
		height: 200rpx;
		border-radius: 200rpx;
		background-color: darkgreen;
		line-height: 200rpx;
		color: #fff;
		font-size: 36rpx;
		box-shadow: 0 0 0px 4px lightgreen;
		margin: 30rpx auto;
		text-align: center;
	}
	.tips{
		font-size:40rpx;
		margin:30rpx 0
	}
	.listtitle{
		font-size:40rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom:30rpx
	}
	.listtitle text+text{
		color:deepskyblue
	}
	.list{
		/* height:65vh; */
		margin-top:20rpx
	}
	.listitem{
		padding:20rpx;
		background-color: #fff;
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
		margin-bottom:30rpx
	}
	.listitem view{
		display: flex;
		justify-content: space-between;
		margin-bottom:10rpx
	}
	.listitem view text{
		width:50%;
		text-align: left;
	}
	.listitem view text.textr{
		text-align: right;
	}
</style>