jp-commuter-ds/pages/buytickets/upload.vue

<template>
	<view  >
		<car-common :login="true" mytitle="上传照片" ref="common"></car-common>
			<view class="upload">
				<h4>确认本人操作</h4>
				<view class="upload-img">
					<img src="static/img/face1.png" alt="" v-if="!imgBase64">
					<img :src="imgBase64" v-if="imgBase64" />
				</view>
				<p>1.为了确保您的乘车信息的安全和真实性，我们需要对您进行人脸信息的匹配</p>
				<p>2.请您本人亲自完成，请将脸部置于提示框内，并按提示</p>
				<view class="upload-step">
					<view class="upload-step-item">
						<img src="static/img/icon-face-1.png" alt="">
						<span>摘下遮挡物</span>
					</view>
					<view class="upload-step-item">
						<img src="static/img/icon-face-2.png" alt="">
						<span>正对手机</span>
					</view>
					<view class="upload-step-item">
						<img src="static/img/icon-face-3.png" alt="">
						<span>光线充足</span>
					</view>
				</view>
			</view>
			<view class="upload-button">
				<u-button type="primary" shape="circle" @click="uploadPic">上传照片</u-button>
			</view>
	
		
		
	</view>
</template>

<script>
	import api from './upload.js'
	export default api;
</script>

<style scoped lang="scss">
	 
	.upload {
		padding: 100rpx 50rpx;

		h4 {
			text-align: center;
			font-size: 36rpx;
		}

		p {
			color: #909090;
			margin-bottom: 20rpx;
		}

		.upload-img {
			height: 220px;
			width: 176px;
			margin: 40rpx auto;

			img {
				width: 100%;
				height: 100%;
			}
		}

		.upload-step {
			display: flex;
			justify-content: space-between;
			padding: 10px 0;

			.upload-step-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				img {
					height: 60px;
					width: 60px;
				}

				span {
					margin-top: 10rpx;
					font-size: 14px;
				}
			}
		}
	}

	.upload-button {
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		right: 30rpx;
	}
</style>