Files
MBTI_wang/miniprogram/pages/index/camera.wxml
2026-03-20 18:38:59 +08:00

70 lines
2.8 KiB
Plaintext

<!--pages/index/camera.wxml - 拍照页面-->
<view class="container" wx:if="{{!reviewMode}}">
<view class="progress-section">
<view class="progress-info">
<text class="step-text">步骤 {{photoIndex + 1}}/3</text>
<text class="photo-count">{{photos.length}}/3 张照片已完成</text>
</view>
<view class="progress-bars">
<view class="progress-bar {{photos.length >= 1 ? 'completed' : 'pending'}}"></view>
<view class="progress-bar {{photos.length >= 2 ? 'completed' : 'pending'}}"></view>
<view class="progress-bar {{photos.length >= 3 ? 'completed' : 'pending'}}"></view>
</view>
<view class="instruction-card">
<view class="instruction-content">
<view class="step-number">{{photoIndex + 1}}</view>
<view class="instruction-text">
<text class="angle-text">{{guideText}}</text>
<text class="tip-text">请保持自然表情,确保光线充足</text>
</view>
</view>
</view>
</view>
<view class="camera-container">
<view wx:if="{{photos.length < 3}}" class="camera-preview">
<camera
class="camera"
device-position="front"
flash="off"
binderror="onCameraError"
></camera>
</view>
<view wx:else class="photos-preview">
<view class="photo-item" wx:for="{{photos}}" wx:key="index">
<image class="photo-image" src="{{item}}" mode="aspectFill"></image>
<view class="photo-label">{{index === 0 ? '正面' : (index === 1 ? '左侧' : '右侧')}}</view>
</view>
</view>
</view>
<view class="button-container">
<view wx:if="{{photos.length < 3}}" class="capture-actions">
<view class="capture-button" bindtap="takePhoto">
<text class="button-text">拍摄{{guideText}}照片</text>
</view>
<view class="album-button" bindtap="goToUpload">
<text class="album-button-text">从相册选择</text>
</view>
</view>
<view wx:else class="action-buttons">
<view class="action-button secondary" bindtap="retakeAll">
<text class="action-button-text">重新拍摄</text>
</view>
<view class="action-button primary" bindtap="completeCapture">
<text class="action-button-text">立即{{aiAnalysisText || '分析'}}</text>
</view>
</view>
</view>
<!-- 手机号授权入口:仅在未授权时显示,就地弹出微信系统手机号授权 -->
<view class="phone-auth-section" wx:if="{{needPhoneAuth}}">
<text class="phone-auth-tip">为保障服务与联系,请先授权手机号。</text>
<button class="phone-auth-btn" open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">
授权手机号后开始查看报告
</button>
</view>
</view>