|
@@ -1,416 +0,0 @@
|
|
|
-<template>
|
|
|
|
|
- <view class="page">
|
|
|
|
|
- <!-- 顶部导航栏 -->
|
|
|
|
|
- <view class="nav-bar">
|
|
|
|
|
- <view class="nav-left" @tap="goBack">
|
|
|
|
|
- <text class="nav-icon">‹</text>
|
|
|
|
|
- <text class="nav-title">心情打卡</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <scroll-view class="content" scroll-y>
|
|
|
|
|
- <!-- 情绪选择 -->
|
|
|
|
|
- <view class="card">
|
|
|
|
|
- <view class="card-header">
|
|
|
|
|
- <text class="card-icon">💖</text>
|
|
|
|
|
- <text class="card-title">现在的心情</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="card-body">
|
|
|
|
|
- <view class="emotion-grid">
|
|
|
|
|
- <view class="emotion-item" v-for="em in emotions" :key="em.type"
|
|
|
|
|
- :class="{ 'emotion-active': selectedEmotion === em.type }"
|
|
|
|
|
- @tap="selectedEmotion = em.type">
|
|
|
|
|
- <text class="emotion-icon">{{ em.icon }}</text>
|
|
|
|
|
- <text class="emotion-label">{{ em.label }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 心情强度 -->
|
|
|
|
|
- <view class="card">
|
|
|
|
|
- <view class="card-header">
|
|
|
|
|
- <text class="card-icon">📊</text>
|
|
|
|
|
- <text class="card-title">心情强度</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="card-body">
|
|
|
|
|
- <view class="slider-row">
|
|
|
|
|
- <text class="slider-min">微弱</text>
|
|
|
|
|
- <slider min="1" max="10" :value="intensityLevel" @change="function(e){intensityLevel=e.detail.value}" block-size="20" activeColor="#FF6B9D" />
|
|
|
|
|
- <text class="slider-val">{{ intensityLevel }}</text>
|
|
|
|
|
- <text class="slider-max">强烈</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 文字记录 + 媒体附件 -->
|
|
|
|
|
- <view class="card">
|
|
|
|
|
- <view class="card-header">
|
|
|
|
|
- <text class="card-icon">📝</text>
|
|
|
|
|
- <text class="card-title">文字记录</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="card-body">
|
|
|
|
|
- <textarea class="note-input" v-model="note" placeholder="今天发生了什么?说说你的感受..." maxlength="500" />
|
|
|
|
|
- <!-- 媒体工具栏 -->
|
|
|
|
|
- <view class="media-toolbar">
|
|
|
|
|
- <view class="tool-btn" @tap="choosePhoto">
|
|
|
|
|
- <text class="tool-icon">📷</text>
|
|
|
|
|
- <text class="tool-label">照片</text>
|
|
|
|
|
- <text class="tool-count" v-if="photos.length > 0">{{ photos.length }}/9</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="tool-divider"></view>
|
|
|
|
|
- <view class="tool-btn" @tap="toggleRecord">
|
|
|
|
|
- <text class="tool-icon">🎙</text>
|
|
|
|
|
- <text class="tool-label">{{ isRecording ? '录音中…' : (voicePath ? '已录制' : '录音') }}</text>
|
|
|
|
|
- <text class="tool-count" v-if="isRecording">{{ recordSeconds }}s</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- 照片缩略图 -->
|
|
|
|
|
- <view class="photo-strip" v-if="photos.length > 0">
|
|
|
|
|
- <view class="photo-item" v-for="(img, idx) in photos" :key="getItemKey(img, idx)" @tap="removePhoto(idx)">
|
|
|
|
|
- <image :src="img" mode="aspectFill" class="photo-img"/>
|
|
|
|
|
- <view class="photo-delete-overlay">
|
|
|
|
|
- <text class="delete-icon">×</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <!-- 录音状态 -->
|
|
|
|
|
- <view class="voice-strip" v-if="isRecording">
|
|
|
|
|
- <view class="waveform">
|
|
|
|
|
- <view class="wave-bar" v-for="n in 7" :key="n" :style="{animationDelay: (n * 0.1) + 's'}"></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="voice-controls">
|
|
|
|
|
- <view class="mini-btn cancel-mini" @tap="cancelRecord"><text>取消</text></view>
|
|
|
|
|
- <view class="mini-btn done-mini" @tap="finishRecord"><text>完成</text></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="voice-strip" v-else-if="voicePath">
|
|
|
|
|
- <view class="voice-player">
|
|
|
|
|
- <text class="play-icon">▶</text>
|
|
|
|
|
- <text class="voice-duration">{{ recordDurationText }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="delete-voice" @tap="deleteVoice"><text>×</text></view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 提交按钮 -->
|
|
|
|
|
- <view class="submit-wrap">
|
|
|
|
|
- <view class="submit-btn" :class="{ 'submitting': submitting }" @tap="doCheckin">
|
|
|
|
|
- <text>{{ submitting ? '提交中...' : '✓ 记录心情' }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 历史记录 -->
|
|
|
|
|
- <view class="card" v-if="history.length > 0">
|
|
|
|
|
- <view class="card-header">
|
|
|
|
|
- <text class="card-icon">📜</text>
|
|
|
|
|
- <text class="card-title">近期心情</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="card-body">
|
|
|
|
|
- <view class="history-list">
|
|
|
|
|
- <view class="history-item" v-for="item in history" :key="item.id">
|
|
|
|
|
- <view class="history-left">
|
|
|
|
|
- <text class="history-type">{{ emotionIcon(item.emotionType) }} {{ emotionLabel(item.emotionType) }}</text>
|
|
|
|
|
- <text class="history-content">{{ item.note || '-' }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="history-right">
|
|
|
|
|
- <text class="history-date">{{ formatDate(item.createdAt) }}</text>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
- </view>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 底部留白 -->
|
|
|
|
|
- <view class="bottom-spacer"></view>
|
|
|
|
|
- </scroll-view>
|
|
|
|
|
- </view>
|
|
|
|
|
-</template>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
-import config from '../../config'
|
|
|
|
|
-import { parseDate } from '../../utils/format.js'
|
|
|
|
|
-
|
|
|
|
|
-export default {
|
|
|
|
|
- data() {
|
|
|
|
|
- return {
|
|
|
|
|
- memberId: null,
|
|
|
|
|
- submitting: false,
|
|
|
|
|
- isRecording: false,
|
|
|
|
|
- recordSeconds: 0,
|
|
|
|
|
- recordTimer: null,
|
|
|
|
|
- recorderManager: null,
|
|
|
|
|
- history: [],
|
|
|
|
|
- selectedEmotion: '',
|
|
|
|
|
- intensityLevel: 5,
|
|
|
|
|
- note: '',
|
|
|
|
|
- photos: [],
|
|
|
|
|
- voicePath: '',
|
|
|
|
|
- emotions: [
|
|
|
|
|
- { type: 'joy', icon: '😊', label: '开心' },
|
|
|
|
|
- { type: 'calm', icon: '😌', label: '平静' },
|
|
|
|
|
- { type: 'excited', icon: '🤩', label: '兴奋' },
|
|
|
|
|
- { type: 'sad', icon: '😢', label: '难过' },
|
|
|
|
|
- { type: 'angry', icon: '😤', label: '生气' },
|
|
|
|
|
- { type: 'anxious', icon: '😰', label: '焦虑' },
|
|
|
|
|
- { type: 'tired', icon: '😴', label: '疲惫' },
|
|
|
|
|
- { type: 'scared', icon: '😨', label: '害怕' }
|
|
|
|
|
- ]
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- computed: {
|
|
|
|
|
- recordDurationText: function() {
|
|
|
|
|
- if (!this.voicePath) return ''
|
|
|
|
|
- return '录音 ' + this.recordSeconds + '秒'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- onLoad: function() {
|
|
|
|
|
- var role = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
|
|
|
|
|
- if (role !== 'child') {
|
|
|
|
|
- this.memberId = uni.getStorageSync('currentChildId') || uni.getStorageSync('currentMemberId') || uni.getStorageSync('userId') || null
|
|
|
|
|
- }
|
|
|
|
|
- this.recorderManager = uni.getRecorderManager()
|
|
|
|
|
- this.recorderManager.onStart(() => {
|
|
|
|
|
- this.isRecording = true
|
|
|
|
|
- this.recordSeconds = 0
|
|
|
|
|
- this.recordTimer = setInterval(() => { this.recordSeconds++ }, 1000)
|
|
|
|
|
- })
|
|
|
|
|
- this.recorderManager.onStop((res) => {
|
|
|
|
|
- this.isRecording = false
|
|
|
|
|
- if (this.recordTimer) { clearInterval(this.recordTimer); this.recordTimer = null }
|
|
|
|
|
- this.voicePath = res.tempFilePath
|
|
|
|
|
- this.voiceDuration = res.duration
|
|
|
|
|
- })
|
|
|
|
|
- this.recorderManager.onError(() => {
|
|
|
|
|
- this.isRecording = false
|
|
|
|
|
- if (this.recordTimer) { clearInterval(this.recordTimer); this.recordTimer = null }
|
|
|
|
|
- uni.showToast({ title: '录音失败', icon: 'none' })
|
|
|
|
|
- })
|
|
|
|
|
- this.loadHistory()
|
|
|
|
|
- },
|
|
|
|
|
- onUnload: function() {
|
|
|
|
|
- if (this.recordTimer) clearInterval(this.recordTimer)
|
|
|
|
|
- },
|
|
|
|
|
- methods: {
|
|
|
|
|
- goBack: function() { uni.navigateBack() },
|
|
|
|
|
- emotionLabel: function(type) {
|
|
|
|
|
- var m = { joy: '开心', calm: '平静', excited: '兴奋', sad: '难过', angry: '生气', anxious: '焦虑', tired: '疲惫', scared: '害怕' }
|
|
|
|
|
- return m[type] || type || ''
|
|
|
|
|
- },
|
|
|
|
|
- emotionIcon: function(type) {
|
|
|
|
|
- var em = this.emotions.find(function(e) { return e.type === type })
|
|
|
|
|
- return em ? em.icon : ''
|
|
|
|
|
- },
|
|
|
|
|
- formatDate: function(dateStr) {
|
|
|
|
|
- if (!dateStr) return ''
|
|
|
|
|
- var d = parseDate(dateStr)
|
|
|
|
|
- if (!d) return dateStr
|
|
|
|
|
- var m2 = (d.getMonth() + 1).toString().padStart(2, '0')
|
|
|
|
|
- var day = d.getDate().toString().padStart(2, '0')
|
|
|
|
|
- return m2 + '-' + day
|
|
|
|
|
- },
|
|
|
|
|
- loadHistory: function() {
|
|
|
|
|
- var self = this
|
|
|
|
|
- var token = uni.getStorageSync('token')
|
|
|
|
|
- if (!token || !self.memberId) return
|
|
|
|
|
- uni.request({
|
|
|
|
|
- url: config.API_BASE_URL + '/api/mind/checkin/list',
|
|
|
|
|
- method: 'POST',
|
|
|
|
|
- data: { memberId: self.memberId, page: 1, size: 5 },
|
|
|
|
|
- header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
|
|
|
|
- success: function(res) {
|
|
|
|
|
- if (res.data && res.data.code === 200 && res.data.data) {
|
|
|
|
|
- self.history = res.data.data
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- choosePhoto: function() {
|
|
|
|
|
- var self = this
|
|
|
|
|
- uni.chooseImage({
|
|
|
|
|
- count: 9 - self.photos.length,
|
|
|
|
|
- sizeType: ['compressed'],
|
|
|
|
|
- sourceType: ['album', 'camera'],
|
|
|
|
|
- success: function(res) {
|
|
|
|
|
- res.tempFilePaths.forEach(function(path) {
|
|
|
|
|
- if (self.photos.length < 9) self.photos.push(path)
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- getPhotoKey: function(img, idx) {
|
|
|
|
|
- return img ? img : ('p' + idx)
|
|
|
|
|
- },
|
|
|
|
|
- removePhoto: function(idx) {
|
|
|
|
|
- this.photos.splice(idx, 1)
|
|
|
|
|
- },
|
|
|
|
|
- toggleRecord: function() {
|
|
|
|
|
- if (this.isRecording) {
|
|
|
|
|
- this.recorderManager.stop()
|
|
|
|
|
- } else {
|
|
|
|
|
- this.recorderManager.start({ duration: 60000, format: 'mp3' })
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- cancelRecord: function() {
|
|
|
|
|
- this.recorderManager.stop()
|
|
|
|
|
- this.voicePath = ''
|
|
|
|
|
- },
|
|
|
|
|
- finishRecord: function() {
|
|
|
|
|
- this.recorderManager.stop()
|
|
|
|
|
- },
|
|
|
|
|
- deleteVoice: function() {
|
|
|
|
|
- this.voicePath = ''
|
|
|
|
|
- },
|
|
|
|
|
- uploadFile: function(filePath) {
|
|
|
|
|
- var self = this
|
|
|
|
|
- return new Promise(function(resolve, reject) {
|
|
|
|
|
- uni.uploadFile({
|
|
|
|
|
- url: config.API_BASE_URL + '/api/media/upload',
|
|
|
|
|
- filePath: filePath,
|
|
|
|
|
- name: 'file',
|
|
|
|
|
- header: { 'Authorization': 'Bearer ' + uni.getStorageSync('token') },
|
|
|
|
|
- success: function(res) {
|
|
|
|
|
- try { var data = JSON.parse(res.data); resolve(data.data || data.url || '') }
|
|
|
|
|
- catch (e) { resolve(res.data || '') }
|
|
|
|
|
- },
|
|
|
|
|
- fail: function() { reject() }
|
|
|
|
|
- })
|
|
|
|
|
- })
|
|
|
|
|
- },
|
|
|
|
|
- async doCheckin() {
|
|
|
|
|
- var self = this
|
|
|
|
|
- if (!self.selectedEmotion) { uni.showToast({ title: '请选择当前心情', icon: 'none' }); return }
|
|
|
|
|
- if (!self.memberId) { uni.showToast({ title: '孩子ID无效', icon: 'none' }); return }
|
|
|
|
|
- self.submitting = true
|
|
|
|
|
- try {
|
|
|
|
|
- var photoUrls = []
|
|
|
|
|
- if (self.photos && self.photos.length > 0) {
|
|
|
|
|
- for (var i = 0; i < self.photos.length; i++) {
|
|
|
|
|
- try { var url = await self.uploadFile(self.photos[i]) } catch(e) { url = '' }
|
|
|
|
|
- if (url) photoUrls.push(url)
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- var voiceUrl = ''
|
|
|
|
|
- if (self.voicePath) {
|
|
|
|
|
- try { voiceUrl = await self.uploadFile(self.voicePath) } catch(e) { voiceUrl = '' }
|
|
|
|
|
- }
|
|
|
|
|
- var token = uni.getStorageSync('token')
|
|
|
|
|
- uni.request({
|
|
|
|
|
- url: config.API_BASE_URL + '/api/mind/checkin/create',
|
|
|
|
|
- method: 'POST',
|
|
|
|
|
- data: {
|
|
|
|
|
- memberId: self.memberId,
|
|
|
|
|
- emotionType: self.selectedEmotion,
|
|
|
|
|
- intensityLevel: self.intensityLevel,
|
|
|
|
|
- note: self.note,
|
|
|
|
|
- photoUrls: photoUrls.join(','),
|
|
|
|
|
- voiceUrl: voiceUrl
|
|
|
|
|
- },
|
|
|
|
|
- header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
|
|
|
|
|
-success: function(res) {
|
|
|
|
|
- self.submitting = false
|
|
|
|
|
- if (res.data && res.data.code === 200) {
|
|
|
|
|
- uni.showToast({ title: '+5 心能量', icon: 'none' })
|
|
|
|
|
- setTimeout(function() {
|
|
|
|
|
- uni.navigateBack()
|
|
|
|
|
- }, 800)
|
|
|
|
|
- } else {
|
|
|
|
|
- uni.showToast({ title: (res.data && res.data.message) || '提交失败', icon: 'none' })
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- fail: function() {
|
|
|
|
|
- self.submitting = false
|
|
|
|
|
- uni.showToast({ title: '网络错误', icon: 'none' })
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- } catch (e) {
|
|
|
|
|
- self.submitting = false
|
|
|
|
|
- uni.showToast({ title: '提交失败', icon: 'none' })
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-</script>
|
|
|
|
|
-
|
|
|
|
|
-<style scoped>
|
|
|
|
|
-/* ===== 页面基础 ===== */
|
|
|
|
|
-.page { min-height: 100vh; background: #FFF7ED; }
|
|
|
|
|
-.nav-bar { height: 88rpx; padding: 24rpx 24rpx 0; display: flex; align-items: flex-end; }
|
|
|
|
|
-.nav-left { display: flex; align-items: center; gap: 10rpx; }
|
|
|
|
|
-.nav-icon { font-size: 48rpx; color: #333; line-height: 1; }
|
|
|
|
|
-.nav-title { font-size: 34rpx; font-weight: 600; color: #333; }
|
|
|
|
|
-.content { padding-bottom: 40rpx; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 卡片通用 ===== */
|
|
|
|
|
-.card { margin: 16rpx 20rpx; background: #fff; border-radius: 20rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05); }
|
|
|
|
|
-.card-header { display: flex; align-items: center; gap: 10rpx; padding: 20rpx 24rpx 8rpx; border-bottom: 1rpx solid #f5f5f5; background: linear-gradient(90deg, #FFF5FA, #fff); }
|
|
|
|
|
-.card-icon { font-size: 32rpx; }
|
|
|
|
|
-.card-title { font-size: 30rpx; font-weight: 600; color: #333; }
|
|
|
|
|
-.card-body { padding: 20rpx 24rpx 24rpx; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 情绪网格 ===== */
|
|
|
|
|
-.emotion-grid { display: flex; flex-wrap: wrap; gap: 12rpx; }
|
|
|
|
|
-.emotion-item { width: calc(25% - 9rpx); display: flex; flex-direction: column; align-items: center; padding: 18rpx 0; border-radius: 14rpx; background: #FAFAFA; border: 2rpx solid transparent; transition: all 0.2s ease; }
|
|
|
|
|
-.emotion-active { background: #FFF0F5; border-color: #FF6B9D; box-shadow: 0 4rpx 12rpx rgba(255,107,157,0.15); }
|
|
|
|
|
-.emotion-icon { font-size: 44rpx; margin-bottom: 6rpx; }
|
|
|
|
|
-.emotion-label { font-size: 24rpx; color: #666; }
|
|
|
|
|
-.emotion-active .emotion-label { color: #FF6B9D; font-weight: 600; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 滑块 ===== */
|
|
|
|
|
-.slider-row { display: flex; align-items: center; gap: 10rpx; }
|
|
|
|
|
-.slider-min { font-size: 22rpx; color: #999; flex-shrink: 0; }
|
|
|
|
|
-.slider-val { font-size: 26rpx; color: #FF6B9D; font-weight: 600; width: 36rpx; text-align: center; }
|
|
|
|
|
-.slider-max { font-size: 22rpx; color: #999; flex-shrink: 0; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 文本输入 ===== */
|
|
|
|
|
-.note-input { width: 100%; height: 140rpx; border: 1rpx solid #e8e8e8; border-radius: 14rpx; padding: 16rpx; font-size: 26rpx; background: #FAFAFA; box-sizing: border-box; font-family: inherit; margin-bottom: 16rpx; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 媒体工具栏 ===== */
|
|
|
|
|
-.media-toolbar { display: flex; align-items: center; gap: 0; padding: 12rpx 0; }
|
|
|
|
|
-.tool-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6rpx; padding: 16rpx 0; }
|
|
|
|
|
-.tool-icon { font-size: 42rpx; }
|
|
|
|
|
-.tool-label { font-size: 24rpx; color: #666; }
|
|
|
|
|
-.tool-count { font-size: 20rpx; color: #FF6B9D; font-weight: 600; }
|
|
|
|
|
-.tool-divider { width: 1rpx; height: 56rpx; background: linear-gradient(180deg, transparent, #e8e8e8, transparent); }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 照片缩略图 ===== */
|
|
|
|
|
-.photo-strip { display: flex; flex-wrap: wrap; gap: 10rpx; padding: 12rpx 0 4rpx; }
|
|
|
|
|
-.photo-item { position: relative; width: 132rpx; height: 132rpx; border-radius: 12rpx; overflow: hidden; }
|
|
|
|
|
-.photo-img { width: 100%; height: 100%; object-fit: cover; }
|
|
|
|
|
-.photo-delete-overlay { position: absolute; top: -6rpx; right: -6rpx; width: 32rpx; height: 32rpx; background: #EF4444; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2rpx 8rpx rgba(239,68,68,0.3); z-index: 2; }
|
|
|
|
|
-.delete-icon { color: #fff; font-size: 22rpx; font-weight: bold; line-height: 32rpx; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 录音展开区 ===== */
|
|
|
|
|
-.voice-strip { display: flex; align-items: center; justify-content: space-between; padding: 12rpx 0 4rpx; gap: 16rpx; }
|
|
|
|
|
-.waveform { display: flex; align-items: center; gap: 5rpx; height: 40rpx; flex: 1; }
|
|
|
|
|
-.wave-bar { width: 5rpx; height: 8rpx; background: #FF6B9D; border-radius: 3rpx; animation: wave-anim 0.8s ease-in-out infinite; }
|
|
|
|
|
-@keyframes wave-anim { 0%, 100% { height: 8rpx; } 50% { height: 32rpx; } }
|
|
|
|
|
-.voice-controls { display: flex; gap: 12rpx; }
|
|
|
|
|
-.mini-btn { padding: 10rpx 24rpx; border-radius: 22rpx; font-size: 24rpx; }
|
|
|
|
|
-.cancel-mini { background: #f0f0f0; color: #666; }
|
|
|
|
|
-.done-mini { background: #FF6B9D; color: #fff; font-weight: 600; }
|
|
|
|
|
-
|
|
|
|
|
-.voice-player { display: flex; align-items: center; gap: 10rpx; flex: 1; background: #FFF0F5; padding: 10rpx 20rpx; border-radius: 28rpx; }
|
|
|
|
|
-.play-icon { font-size: 26rpx; color: #FF6B9D; }
|
|
|
|
|
-.voice-duration { font-size: 24rpx; color: #666; }
|
|
|
|
|
-.delete-voice { width: 40rpx; height: 40rpx; display: flex; align-items: center; justify-content: center; color: #999; font-size: 28rpx; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 提交按钮 ===== */
|
|
|
|
|
-.submit-wrap { padding: 24rpx 20rpx 32rpx; }
|
|
|
|
|
-.submit-btn { background: linear-gradient(135deg, #FF6B9D, #F97316); color: #fff; text-align: center; padding: 22rpx 0; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; box-shadow: 0 6rpx 20rpx rgba(255,107,157,0.3); transition: all 0.2s ease; }
|
|
|
|
|
-.submit-btn:active { transform: scale(0.98); }
|
|
|
|
|
-.submitting { opacity: 0.6; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 历史记录 ===== */
|
|
|
|
|
-.history-list { display: flex; flex-direction: column; gap: 12rpx; }
|
|
|
|
|
-.history-item { display: flex; justify-content: space-between; align-items: center; padding: 14rpx 0; border-bottom: 1rpx solid #f5f5f5; }
|
|
|
|
|
-.history-left { flex: 1; min-width: 0; }
|
|
|
|
|
-.history-type { font-size: 26rpx; font-weight: 500; color: #333; display: block; }
|
|
|
|
|
-.history-content { font-size: 24rpx; color: #888; display: block; margin-top: 4rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
|
-.history-right { text-align: right; margin-left: 16rpx; flex-shrink: 0; }
|
|
|
|
|
-.history-date { font-size: 22rpx; color: #999; }
|
|
|
|
|
-
|
|
|
|
|
-/* ===== 底部留白 ===== */
|
|
|
|
|
-.bottom-spacer { height: 40rpx; }
|
|
|
|
|
-</style>
|
|
|