Files
miniprogram-1/miniprogram/pages/assessment/assessment.wxml
2025-12-21 21:18:57 +08:00

120 lines
6.9 KiB
Plaintext

<!-- assessment.wxml - 评估页面 -->
<view class="assessment-container">
<view class="loading-container" wx:if="{{!imagePath}}">
<t-skeleton row-col="{{[{ size: '400rpx', borderRadius: '24rpx' }, 1, 1, 1]}}" loading></t-skeleton>
</view>
<view class="image-section" style="height: {{imageSectionHeight}}px;" bindtap="handleImagePreview">
<view class="bg-image-wrap {{introStarted ? 'intro-image' : ''}}" style="transform: translateY(-{{imageTranslateY}}px); scale:{{imageScale}};">
<image wx:if="{{imagePath}}" class="bg-image" src="{{imagePath}}" mode="{{imageMode}}" bindload="onImageLoaded" />
</view>
</view>
<view class="sentence-section {{introStarted ? 'intro-sentence' : ''}}" style="min-height: {{sentenceMinHeight}}px; margin-top: {{sentenceMarginTop}}px; transform: translateY({{dragSentenceTranslateY}}px);" bindtouchstart="onSentenceTouchStart" bindtouchmove="onSentenceTouchMove" bindtouchend="onSentenceTouchEnd">
<view class="sentence-handle"></view>
<view class="sentence-container">
<view class="sentence-content">
<view class="sentence-wrapper {{selectedSentenceIndex === index ? 'selected' : ''}}" wx:for="{{processedSentences}}" wx:key="index" data-index="{{index}}" bindtap="handleSentenceSelect">
<view class="sentence-content-wrapper">
<view class="word-wrapper" wx:for="{{item.words}}" wx:for-item="word" wx:for-index="windex" wx:key="windex" style="{{windex === 0 ? 'text-transform: capitalize;' : ''}}">
<span class="sentence-text" data-word="{{word}}" data-index="{{index}}" catchtap="handleWordClick">
{{word}}
</span>
<span wx:if="{{transDisplayMode === 'en_ipa' && item.ipas && item.ipas[windex]}}" class="sentence-ipa">
{{item.ipas[windex]}}
</span>
<span wx:else class="sentence-ipa"></span>
</view>
</view>
<view wx:if="{{transDisplayMode === 'en_zh'}}" class="word-zh">
<span>{{item.zh}}</span>
</view>
</view>
<view class="sentence-tips">上述内容由AI生成</view>
</view>
</view>
</view>
<view class="highlight-area {{overlayVisible ? 'show' : ''}}" catchtouchstart="noop" catchtouchmove="noop" catchtouchend="noop">
<view wx:for="{{highlightWords}}" wx:key="index"
class="overlay-word {{highlightShow ? 'show' : ''}} {{highlightZoom ? 'zoom' : ''}}"
style="left: {{item.left}}px; top: {{item.top}}px; width: {{item.width}}px; height: {{item.height}}px; {{item.transform ? ('transform: ' + item.transform) : ''}}">
<!-- <view class="overlay-text {{analizing ? 'loading-shimmer' : ''}}" style="animation-delay: {{index * 200}}ms;">{{item.text}}</view> -->
<view class="overlay-text {{analizing ? 'loading-shimmer' : ''}}" style="animation-delay: {{index * 200}}ms; {{index === 0 ? 'text-transform: capitalize;' : ''}}">{{item.text}}</view>
</view>
</view>
<view wx:if="{{isRecording}}" class="recording-mask" catchtouchstart="noop" catchtouchmove="noop" catchtouchend="noop"></view>
<view wx:if="{{loadingMaskVisible}}" class="page-loading-mask" catchtap="noop" catchtouchstart="noop" catchtouchmove="noop" catchtouchend="noop"></view>
<view class="bottom-button-area {{buttonsVisible ? 'show' : ''}}">
<view wx:if="{{isMoreMenuOpen}}" class="more-menu-modal"></view>
<view class="button-row">
<t-icon name="{{isPlaying ? 'pause' : 'play'}}" class="bottom-button {{isRecording ? 'disabled' : ''}}" size="48rpx" bind:tap="playStandardVoice" />
<view class="bottom-button-img-wrap bottom-button {{isRecording ? 'disabled' : ''}}" bind:tap="onTransTap">
<t-icon name="translate" class="trans-button left-half {{transDisplayMode === 'en_ipa' ? 'trans-active' : 'trans-deactive'}}" size="48rpx" />
<t-icon name="translate" class="trans-button right-half {{transDisplayMode === 'en_zh' ? 'trans-active' : 'trans-deactive'}}" size="48rpx" />
</view>
<view class="bottom-button mic-wrap" bind:longpress="handleRecordStart" bind:touchend="handleRecordEnd" bind:touchcancel="handleRecordEnd" >
<t-icon name="microphone-1" color="{{isRecording ? '#FFFFFF' : '#333333'}}"
class="microphone {{isRecording ? 'recording' : 'bottom-button'}} {{recordPermissionGranted ? '' : 'disabled'}}" size="48rpx" />
<view wx:if="{{isRecording}}" class="mic">
<view class="mic-shadow"></view>
</view>
</view>
<t-icon name="fact-check" class="bottom-button {{(hasScoreInfo && !isRecording) ? '' : 'disabled'}}" size="48rpx" bind:tap="onScoreTap" />
<!-- <t-icon name="ellipsis" class="bottom-button {{isMoreMenuOpen ? 'more-open' : ''}}" size="48rpx" bind:tap="onMoreTap" /> -->
<view class="bottom-button {{isRecording ? 'disabled' : ''}} " bindtap="onMoreTap">
<view class="ul {{isMoreMenuOpen ? 'active' : ''}}">
<view class="dot1"></view>
<view class="dot2"></view>
<view class="dot3"></view>
</view>
</view>
</view>
</view>
<view class="bottom-more-area {{isMoreMenuOpen ? 'open' : (isMoreMenuClosing ? 'close' : '')}}" wx:if="{{isMoreMenuOpen || isMoreMenuClosing}}">
<view class="more-items">
<view class="more-item" bindtap="onSceneSentenceTap">场景句型</view>
<!-- <view class="more-item">功能2</view> -->
<!-- <view class="more-item">功能3</view> -->
</view>
</view>
<view class="bottom-mask"></view>
<score-modal
wx:if="{{isScoreModalOpen && hasScoreInfo}}"
visible="{{scoreModalVisible}}"
hasScoreInfo="{{hasScoreInfo}}"
sentence="{{currentSentence}}"
totalScore="{{displayTotalScore}}"
accuracyScore="{{displayAccuracyScore}}"
completenessScore="{{displayCompletenessScore}}"
fluencyScore="{{displayFluencyScore}}"
circleProgressStyle="{{circleProgressStyle}}"
accuracyCircleStyle="{{accuracyCircleStyle}}"
completenessCircleStyle="{{completenessCircleStyle}}"
fluencyCircleStyle="{{fluencyCircleStyle}}"
wordScores="{{wordScores}}"
matchTagLegend="{{matchTagLegend}}"
playIconName="{{playIconName}}"
bind:close="onCloseScoreModal"
bind:play="playAssessmentVoice"
/>
<word-dictionary
visible="{{showDictPopup}}"
expanded="{{showDictExtended}}"
loading="{{dictLoading}}"
wordDict="{{wordDict}}"
showBackIcon="{{showBackIcon}}"
prototypeWord="{{prototypeWord}}"
isWordEmptyResult="{{isWordEmptyResult}}"
dictDefaultTabValue="{{dictDefaultTabValue}}"
activeWordAudioType="{{activeWordAudioType}}"
wordAudioPlaying="{{wordAudioPlaying}}"
wordAudioIconName="{{wordAudioIconName}}"
bind:close="handleDictClose"
bind:more="handleDictMore"
bind:tabsChange="onTabsChange"
bind:tabsClick="onTabsClick"
bind:play="playWordAudio"
bind:back="handleBackToPreviousWord"
bind:wordTap="handleWordClick"
/>
<view class="word-popup-mask" wx:if="{{showDictPopup}}" bindtap="handleDictClose"></view>
</view>