uni-zhihuikuangshan/pages/my/scan/scan.vue

<template>
	<view>
		<!-- 背景图 -->
		<view class="top">
			<image src="./icon/bg.png" mode="aspectFill"></image>
		</view>
		
		<view class="section_1">
			<view class="user">
				<view class="name">{{user.name}}</view>
				<view class="inner">
					<view class="text">工号：{{user.staff_num}}</view>
					<view class="text">部门：{{user.section}}</view>
				</view>
			</view>
			<view class="scan">
				<view style="width: 286rpx;padding-left: 24rpx;">
					<yz-qr :qrPath.sync="qrPath" :text="text" :size="size" :quality="quality" :colorDark="colorDark"
						:colorLight="colorLight"></yz-qr>
				</view>
			</view>
			
		</view>

		<view class="section_2">
			<view class="title">扫码记录</view>
			<view class="list" v-if="list.length > 0">
				<view class="line">
					<view class="time">时间</view>
					<view class="text">结果</view>
				</view>
				<view class="line" v-for="(item,index) in list" :key="index" v-if="index<8">
					<view class="time">{{item.created_at}}</view>
					<view class="text" v-if="item.type == 1">入矿</view>
					<view class="text" v-if="item.type == 2">堂食</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				scan_img: "",
				list: [],

				// 生成二维码
				qrPath: '',
				text: '',
				size: 143,
				quality: 'L',
				colorDark: '#000000',
				colorLight: '#ffffff'
			};
		},
		onLoad() {
			this.user = uni.getStorageSync('user')
			console.log(this.user)
			this.text = 'http://anstatic.nxmy.com:8011/assets/html/zhks-quankuang/yangchangwan/h5/#/pages/my/scan/scan_result/scan_result?staff_num=' +
					this.user.staff_num + '&section_fullname=' + this.user.section + '&name=' + this.user.name
			this.get_scan()
			console.log(this.scan_img)
		},
		methods: {
			get_scan() {
				this.$api.qr_code_userQrcodeInfo({

				}).then((res) => {
					console.log(res.data.data)
					this.scan_img = res.data.data.url
					this.list = res.data.data.record
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		z-index: -1;
		position: fixed;
		top: 1;
		left: 0;

		image {
			width: 750rpx;
			height: 746rpx;
		}
	}

	.section_1 {
		margin: 0 auto;
		width: 700rpx;
		height: 640rpx;
		background-image: url('./icon/section_1.png');
		background-size: cover;

		.user {
			padding-top: 90rpx;
			padding-bottom: 30rpx;

			.name {
				font-size: 42rpx;
				font-weight: 700;
				text-align: center;
				margin-bottom: 20rpx;
			}

			.inner {
				display: flex;
				justify-content: space-between;
				line-height: 40rpx;

				box-sizing: border-box;
				padding: 0 100rpx;

				.text {
					font-size: 28rpx;
					color: #666;
				}
			}
		}

		.scan {
			margin: 0 auto;
			width: 346rpx;
			height: 346rpx;
			background-image: url('./icon/scan_border.png');
			background-size: cover;
			box-sizing: border-box;
			// padding: 25rpx 30rpx;
			// padding-left: 24rpx;
			// padding-top: 30rpx;
			
			display: flex;
			align-items: center;
		}
	}

	.section_2 {
		margin: -26rpx auto 0;
		box-sizing: border-box;
		padding: 50rpx 20rpx;
		width: 650rpx;
		height: 640rpx;
		background-image: url('./icon/section_2.png');
		// background-size: cover;
		background-size: 100% 100%;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 700;
		}

		.list {
			.line:first-child {
				font-size: 30rpx;
				font-weight: 700;
				line-height: 80rpx;
			}

			.line {
				display: flex;
				justify-content: space-around;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				line-height: 50rpx;

				.time {
					width: 350rpx;
				}

				.text {
					width: 150rpx;
				}
			}
		}
	}
</style>