123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262 |
- <template>
- <view class="photo-container" :class="{'loaded': isPageLoaded}">
- <!-- 标题 -->
- <view class="photo-header">
- <text class="photo-title">拍摄照片</text>
- <text class="photo-subtitle">我们将用于身份核验,请正对摄像头</text>
- </view>
-
- <!-- 照片预览区域 -->
- <view class="photo-preview">
- <!-- 使用camera组件替代静态图片 -->
- <camera v-if="!photoSrc" device-position="front" flash="auto" class="camera" @error="handleCameraError"></camera>
- <image v-else class="preview-image" :src="photoSrc" mode="aspectFit"></image>
- <view class="face-outline"></view>
- </view>
-
- <!-- 拍照按钮 -->
- <button v-if="!photoSrc" class="capture-btn" @click="takePhoto">拍照</button>
- <view v-else class="btn-group">
- <button class="retry-btn" @click="retakePhoto">重新拍照</button>
- <button class="start-btn" @click="startInterview">开始面试</button>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- photoSrc: '', // 拍摄的照片路径
- isCameraReady: false,
- cameraContext: null,
- isPageLoaded: false // 添加页面加载状态标记
- }
- },
- onReady() {
- // 相机组件初始化完成后创建相机上下文
- this.cameraContext = uni.createCameraContext();
- // 设置页面已加载完成
- setTimeout(() => {
- this.isPageLoaded = true;
- }, 100);
- },
- methods: {
- // 处理相机错误
- handleCameraError(e) {
- console.error('相机错误:', e);
- uni.showToast({
- title: '相机初始化失败,请检查权限设置',
- icon: 'none'
- });
- },
-
- // 拍照方法
- takePhoto() {
- if (!this.cameraContext) {
- uni.showToast({
- title: '相机未就绪',
- icon: 'none'
- });
- return;
- }
-
- uni.showLoading({
- title: '拍照中...'
- });
-
- this.cameraContext.takePhoto({
- quality: 'high',
- success: (res) => {
- this.photoSrc = res.tempImagePath;
- uni.hideLoading();
- },
- fail: (err) => {
- console.error('拍照失败:', err);
- uni.hideLoading();
- uni.showToast({
- title: '拍照失败,请重试',
- icon: 'none'
- });
- }
- });
- },
-
- // 重新拍照
- retakePhoto() {
- this.photoSrc = '';
- },
-
- startInterview() {
- if (!this.photoSrc) {
- uni.showToast({
- title: '请先完成拍照',
- icon: 'none'
- });
- return;
- }
-
- uni.showLoading({
- title: '验证中...'
- });
-
- // 这里可以添加将照片上传到服务器进行身份验证的代码
- // 例如:this.uploadPhoto();
-
- setTimeout(() => {
- uni.hideLoading();
- uni.navigateTo({
- url: '/pages/camera/camera',
- fail: (err) => {
- console.error('页面跳转失败:', err);
- uni.showToast({
- title: '页面跳转失败',
- icon: 'none'
- });
- }
- });
- }, 1500);
- }
-
- // 上传照片方法(示例)
- /*
- uploadPhoto() {
- uni.uploadFile({
- url: 'https://your-api-endpoint.com/upload',
- filePath: this.photoSrc,
- name: 'photo',
- success: (res) => {
- const data = JSON.parse(res.data);
- if (data.success) {
- // 验证成功,继续流程
- } else {
- // 验证失败,提示用户
- uni.showToast({
- title: data.message || '验证失败,请重试',
- icon: 'none'
- });
- }
- },
- fail: (err) => {
- console.error('上传失败:', err);
- uni.showToast({
- title: '网络错误,请重试',
- icon: 'none'
- });
- }
- });
- }
- */
- }
- }
- </script>
- <style>
- .photo-container {
- display: flex;
- flex-direction: column;
- min-height: 100vh;
- background-color: #f5f7fa;
- padding: 30rpx;
- opacity: 0; /* 初始设置为不可见 */
- transition: opacity 0.3s ease; /* 添加过渡效果 */
- }
- .photo-container.loaded {
- opacity: 1; /* 加载完成后显示 */
- }
- .photo-header {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin-bottom: 40rpx;
- }
- .photo-title {
- font-size: 36rpx;
- font-weight: bold;
- color: #333;
- margin-bottom: 10rpx;
- }
- .photo-subtitle {
- font-size: 28rpx;
- color: #666;
- }
- .photo-preview {
- position: relative;
- width: 100%;
- height: 800rpx;
- background-color: #000;
- border-radius: 20rpx;
- overflow: hidden;
- margin-bottom: 40rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .preview-image {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .face-outline {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 400rpx;
- height: 500rpx;
- border: 4rpx dashed #fff;
- border-radius: 200rpx;
- pointer-events: none;
- }
- .camera {
- width: 100%;
- height: 100%;
- }
- .capture-btn {
- width: 100%;
- height: 90rpx;
- line-height: 90rpx;
- background-color: #6c5ce7;
- color: #fff;
- border-radius: 45rpx;
- font-size: 32rpx;
- margin-top: 60rpx;
- }
- .btn-group {
- display: flex;
- justify-content: space-between;
- width: 100%;
- margin-top: 60rpx;
- }
- .retry-btn {
- width: 45%;
- height: 90rpx;
- line-height: 90rpx;
- background-color: #fff;
- color: #6c5ce7;
- border: 1px solid #6c5ce7;
- border-radius: 45rpx;
- font-size: 32rpx;
- }
- .start-btn {
- width: 45%;
- height: 90rpx;
- line-height: 90rpx;
- background-color: #6c5ce7;
- color: #fff;
- border-radius: 45rpx;
- font-size: 32rpx;
- }
- </style>
|