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

<template>
	<view class="wrap">
		<view class="list">
			<view class='listitem'>
				<view class="code">核销码：{{code}}</view>
				<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 class="cancelcode" @click='cancelcode'>
			确认核销
		</view>
		<view class="logs">
			<view>
				<text>日期</text>
				<text>内容</text>
			</view>
			<block>
				<view>
					<text>2023-05-15</text>
					<text>xxx进行了邀请</text>
				</view>
				
			</block>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				code: ''
			}
		},
		onLoad(options) {
			this.code = options.code
		},
		methods: {
			cancelcode() {
				uni.showToast({
					icon: "none",
					title: '核销成功',
					duration: 3000
				})
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				}, 500)



			}
		}
	}
</script>

<style scoped>
	.wrap {
		padding: 30rpx
	}

	.cancelcode {
		width: 300rpx;
		height: 300rpx;
		border-radius: 200rpx;
		background-color: deepskyblue;
		line-height: 300rpx;
		color: #fff;
		font-size: 36rpx;
		box-shadow: 0 0 0px 4px lightskyblue;
		margin: 50rpx auto;
		text-align: center;
		margin-bottom:100rpx
	}

	.list {
		/* height:65vh; */
		margin-top: 20rpx
	}

	.code {
		border-bottom: 1px solid #ddd;
		padding-bottom: 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;
	}
	.logs{
		border:1px solid #ddd;
		border-bottom:none
	}
	.logs view:first-child{
		background-color: lightgrey;
	}
	.logs view text{
		display: inline-block;
		width:60%;
		border-bottom:1px solid #ddd;
		padding:10rpx
	}
	.logs view text:first-child{
		width:40%;
		border-right:1px solid #ddd
	}
</style>