cfc/cfc-frontend/pages/action-detail/interaction-log.vue

<template>
  <view class="container">
    <view class="page-header">
      <text class="page-title">记录互动</text>
    </view>

    <!-- 家庭数据区 -->
    <!-- 选择互动对象（仅在未通过URL传入memberId时显示） -->
    <view class="form-section" v-if="!preselectedMemberId">
      <text class="section-label">互动对象</text>
      <view class="member-select">
        <view class="member-item" v-for="m in members" :key="m.id"
              :class="{selected: selectedMemberId === m.id}"
              @click="selectMember(m)">
          <text class="member-name">{{ m.nickname }}</text>
          <text class="member-rel">{{ m.relationship || m.relativeLabel || m.roleLabel }}</text>
        </view>
      </view>
    </view>

    <!-- 互动类型 -->
    <view class="form-section">
      <text class="section-label">互动类型</text>
      <view class="type-grid">
        <view class="type-item" v-for="(name, key) in interactionTypes" :key="key"
              :class="{selected: selectedType === key}"
              @click="selectType(key)">
          <text class="type-icon">{{ typeIcons[key] || '💬' }}</text>
          <text class="type-name">{{ name }}</text>
        </view>
        <view class="type-item" :class="{selected: selectedType === 'custom'}"
              @click="selectType('custom')">
          <text class="type-icon">✨</text>
          <text class="type-name">自定义</text>
        </view>
      </view>
      <input v-if="selectedType === 'custom'" class="custom-type-input" v-model="customTypeName"
             placeholder="请输入自定义活动名称（如：一起读书）" maxlength="20" />
    </view>

    <!-- 互动描述 -->
    <view class="form-section">
      <text class="section-label">描述（选填）</text>
      <textarea class="desc-input" v-model="description"
                  placeholder="简单描述一下这次互动..." maxlength="256"></textarea>
    </view>

    <!-- 互动时间 -->
    <view class="form-section">
      <text class="section-label">互动时间</text>
      <view class="time-selector">
        <view class="time-option" :class="{selected: timeType === 'now'}" @click="timeType = 'now'">现在</view>
        <view class="time-option" :class="{selected: timeType === 'custom'}" @click="timeType = 'custom'">选择时间</view>
      </view>
      <view v-if="timeType === 'custom'" class="custom-time">
        <picker mode="dateTime" :value="customTime" @change="onTimeChange">
          <view class="time-display">{{ customTime || '选择时间' }}</view>
        </picker>
      </view>
    </view>

    <!-- 附件上传区域 -->
    <view class="form-section">
      <text class="section-label">添加附件（选填）</text>

      <!-- 照片区域 -->
      <view class="media-section">
        <text class="media-subtitle">📷 照片</text>
        <view class="media-grid">
          <view class="media-item" v-for="(photo, idx) in photos" :key="idx">
            <image class="media-preview" :src="photo" mode="aspectFill" @click="previewPhoto(idx)"></image>
            <view class="media-delete" @click.stop="removePhoto(idx)">×</view>
          </view>
          <view class="media-add" v-if="photos.length < 9" @click="choosePhotos">
            <text class="media-add-icon">+</text>
            <text class="media-add-text">{{ photos.length }}/9</text>
          </view>
        </view>
      </view>

      <!-- 视频区域 -->
      <view class="media-section" style="margin-top: 20rpx;">
        <text class="media-subtitle">🎬 视频</text>
        <view class="media-grid" v-if="video">
          <view class="media-item video-item">
            <view class="video-placeholder">
              <text class="video-icon">🎬</text>
              <text class="video-name">{{ videoName || '视频已选择' }}</text>
            </view>
            <view class="media-delete" @click.stop="removeVideo">×</view>
          </view>
        </view>
        <view class="media-add" v-if="!video" @click="chooseVideo">
          <text class="media-add-icon">+</text>
          <text class="media-add-text">选择视频</text>
        </view>
      </view>

      <!-- 音频区域 -->
      <view class="media-section" style="margin-top: 20rpx;">
        <text class="media-subtitle">🎵 音频</text>
        <view class="media-grid" v-if="audio">
          <view class="media-item audio-item">
            <view class="audio-placeholder">
              <text class="audio-icon">🎵</text>
              <text class="audio-name">{{ audioName || '音频已选择' }}</text>
            </view>
            <view class="media-delete" @click.stop="removeAudio">×</view>
          </view>
        </view>
        <view class="media-add" v-if="!audio" @click="chooseAudio">
          <text class="media-add-icon">+</text>
          <text class="media-add-text">选择音频</text>
        </view>
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-bar">
      <button class="btn-submit" @click="onSubmit" :disabled="!canSubmit || submitting">
        {{ submitting ? '保存中...' : '保存记录' }}
      </button>
    </view>
  </view>
</template>

<script>
import { getFamilyMemberList, addInteraction, reportAppEnter
} from '../../utils/api.js'
import config from '../../config.js'
import { pickImage } from '../../utils/image-picker.js'

export default {
  data() {
    return {
      members: [],
      selectedMemberId: null,
      preselectedMemberId: null, // URL传入的memberId，不显示成员选择器
      currentMemberId: null,     // 当前登录用户的家庭成员ID（fromMemberId）
      selectedType: '',
      customTypeName: '',
      description: '',
      timeType: 'now',
      customTime: '',
      submitting: false,

      // 附件相关
      photos: [],      // 照片临时路径列表（最多9张）
      video: '',        // 视频临时路径
      videoName: '',
      audio: '',        // 音频临时路径
      audioName: '',
      uploading: false,

      interactionTypes: {
        dining: '一起用餐',
        outgoing: '外出活动',
        call: '电话联系',
        video: '视频通话',
        chat: '聊天交流',
        play: '一起游戏',
        gift: '赠送礼物'
      },
      typeIcons: {
        dining: '🍽️',
        outgoing: '🚗',
        call: '📞',
        video: '📹',
        chat: '💬',
        play: '🎮',
        gift: '🎁'
      }
    }
  },
  computed: {
    canSubmit() {
      return this.selectedMemberId && this.selectedType
    }
  },
  onLoad(options) {
    reportAppEnter('interaction');
    
    if (options.memberId) {
      this.preselectedMemberId = Number(options.memberId)
      this.selectedMemberId = Number(options.memberId)
    }
    this.loadMembers()
  },
  methods: {
    async loadMembers() {
      try {
        var res = await getFamilyMemberList()
        if (res.code === 200 && res.data) {
          var all = res.data || []
          // 使用后端返回的 isSelf 标记（比匹配 userId 更可靠）
          var found = null
          for (var i = 0; i < all.length; i++) {
            var m = all[i]
            if (m && m.isSelf === true) {
              found = m
              break
            }
          }
          this.currentMemberId = found ? found.id : null
          // 互动对象列表过滤掉"我"（from==to 后端会拒绝）
          this.members = all.filter(function(m) {
            return !(m && m.isSelf === true)
          })
        }
      } catch (e) {
        uni.showToast({ title: '加载成员失败', icon: 'none' })
      }
    },
    selectMember(member) {
      this.selectedMemberId = member.id
    },
    selectType(type) {
      this.selectedType = type
      if (type !== 'custom') {
        this.customTypeName = ''
      }
    },
    onTimeChange(e) {
      this.customTime = e.detail.value
    },

    // ===== 照片选择 =====
    choosePhotos() {
      var self = this
      var remaining = 9 - self.photos.length
      if (remaining <= 0) return

      pickImage({
        count: remaining,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
          res.tempFilePaths.forEach(function(path) {
            if (self.photos.length < 9) {
              self.photos.push(path)
            }
          })
        }
      })
    },
    previewPhoto(idx) {
      uni.previewImage({
        current: idx,
        urls: this.photos
      })
    },
    removePhoto(idx) {
      this.photos.splice(idx, 1)
    },

    // ===== 视频选择 =====
    chooseVideo() {
      var self = this
      uni.chooseVideo({
        sourceType: ['album', 'camera'],
        maxDuration: 60,
        compressed: true,
        success: function(res) {
          self.video = res.tempFilePath
          self.videoName = res.name || '视频'
        }
      })
    },
    removeVideo() {
      this.video = ''
      this.videoName = ''
    },

    // ===== 音频选择 =====
    chooseAudio() {
      var self = this
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['mp3', 'wav', 'm4a', 'aac', 'ogg'],
        success: function(res) {
          if (res.tempFiles && res.tempFiles.length > 0) {
            self.audio = res.tempFiles[0].path
            self.audioName = res.tempFiles[0].name || '音频'
          }
        },
        fail: function() {
          // 用户取消或不支持，尝试录音
          uni.chooseVideo({
            sourceType: ['album'],
            maxDuration: 60,
            compressed: true,
            success: function(res) {
              self.audio = res.tempFilePath
              self.audioName = res.name || '音频'
            }
          })
        }
      })
    },
    removeAudio() {
      this.audio = ''
      this.audioName = ''
    },

    // ===== 上传文件 =====
    uploadFile(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)
              if (data && data.data && data.data.url) {
                resolve(data.data.url)
              } else if (data && data.url) {
                resolve(data.url)
              } else {
                resolve('')
              }
            } catch (e) {
              resolve(res.data || '')
            }
          },
          fail: function() { reject() }
        })
      })
    },

    // ===== 提交 =====
    async onSubmit() {
      if (!this.canSubmit) {
        uni.showToast({ title: '请选择对象和类型', icon: 'none' })
        return
      }
      if (this.submitting) return

      // fromMemberId 必须与 toMemberId 不同（后端校验"互动双方不能是同一人"）
      var fromId = this.currentMemberId || this.selectedMemberId
      if (!fromId || Number(fromId) === Number(this.selectedMemberId)) {
        uni.showToast({ title: '无法确定当前成员，请返回后重试', icon: 'none' })
        return
      }

      this.submitting = true
      this.uploading = true

      try {
        var happenedAt = ''
        if (this.timeType === 'custom' && this.customTime) {
          happenedAt = this.customTime
        }

        // 上传附件
        var photoUrls = []
        if (this.photos && this.photos.length > 0) {
          for (var i = 0; i < this.photos.length; i++) {
            try {
              var url = await this.uploadFile(this.photos[i])
              if (url) photoUrls.push(url)
            } catch (e) {
              // 单个上传失败不阻塞整个流程
            }
          }
        }
        var videoUrl = ''
        if (this.video) {
          try {
            videoUrl = await this.uploadFile(this.video) || ''
          } catch (e) {
            videoUrl = ''
          }
        }
        var audioUrl = ''
        if (this.audio) {
          try {
            audioUrl = await this.uploadFile(this.audio) || ''
          } catch (e) {
            audioUrl = ''
          }
        }

        this.uploading = false

        // 保存互动记录
        var interactionType = this.selectedType === 'custom' ? this.customTypeName : this.selectedType
        var res = await addInteraction({
          fromMemberId: fromId,
          toMemberId: this.selectedMemberId,
          interactionType: interactionType,
          description: this.description,
          happenedAt: happenedAt,
          photoUrls: photoUrls.join(','),
          videoUrl: videoUrl,
          audioUrl: audioUrl
        })
        if (res.code === 200) {
          uni.showToast({ title: '记录成功', icon: 'success' })
          setTimeout(function() {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({ title: res.message || '保存失败', icon: 'none' })
        }
      } catch (e) {
        uni.showToast({ title: '保存失败', icon: 'none' })
      } finally {
        this.submitting = false
        this.uploading = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background: $facade-fill-2;
  padding: 24rpx;
}
.page-header {
  padding: 20rpx 0 30rpx;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: $facade-text-strong;
}
.form-section {
  background: $app-surface;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.section-label {
  font-size: 28rpx;
  color: $facade-text-strong;
  font-weight: 500;
  display: block;
  margin-bottom: 16rpx;
}
.member-select {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.member-item {
  padding: 16rpx 24rpx;
  border: 2rpx solid $facade-hairline;
  border-radius: 12rpx;
  background: $facade-fill-ghost;
}
.member-item.selected {
  border-color: $brand-primary;
  background: $uni-primary-pale;
}
.member-name {
  font-size: 28rpx;
  color: $facade-text-strong;
  display: block;
}
.member-rel {
  font-size: 22rpx;
  color: $facade-text-muted;
}
.type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.type-item {
  box-sizing: border-box;
  width: calc(25% - 12rpx);
  padding: 20rpx 0;
  text-align: center;
  border: 2rpx solid $facade-hairline;
  border-radius: 12rpx;
  background: $facade-fill-ghost;
}
.type-item.selected {
  border-color: $brand-primary;
  background: $uni-primary-pale;
}
.custom-type-input {
  margin-top: 20rpx;
  border: 2rpx solid $facade-hairline;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  font-size: 28rpx;
  background: $facade-fill-ghost;
}
.type-icon {
  font-size: 40rpx;
  display: block;
  margin-bottom: 8rpx;
}
.type-name {
  font-size: 22rpx;
  color: $facade-text-body;
}
.desc-input {
  width: 100%;
  height: 160rpx;
  background: $facade-fill-ghost;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.time-selector {
  display: flex;
  gap: 16rpx;
  margin-bottom: 16rpx;
}
.time-option {
  padding: 16rpx 32rpx;
  border: 2rpx solid $facade-hairline;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: $facade-text-body;
}
.time-option.selected {
  border-color: $brand-primary;
  color: $brand-primary;
  background: $uni-primary-pale;
}
.custom-time {
  margin-top: 12rpx;
}
.time-display {
  padding: 20rpx;
  background: $facade-fill-ghost;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: $facade-text-strong;
}

/* ===== 附件上传样式 ===== */
.media-section {
  margin-bottom: 16rpx;
}
.media-subtitle {
  font-size: 24rpx;
  color: $facade-text-body;
  display: block;
  margin-bottom: 12rpx;
}
.media-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
}
.media-item {
  width: 150rpx;
  height: 150rpx;
  border-radius: 8rpx;
  position: relative;
  overflow: hidden;
}
.media-preview {
  width: 100%;
  height: 100%;
}
.media-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 40rpx;
  height: 40rpx;
  background: rgba(0, 0, 0, 0.6);
  color: $app-surface;
  font-size: 24rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 8rpx 0 8rpx;
}
.video-item,
.audio-item {
  width: 200rpx;
  height: 100rpx;
  background: $facade-fill;
  border-radius: 8rpx;
}
.video-placeholder,
.audio-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.video-icon,
.audio-icon {
  font-size: 32rpx;
}
.video-name,
.audio-name {
  font-size: 20rpx;
  color: $facade-text-body;
  margin-top: 8rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180rpx;
}
.media-add {
  width: 150rpx;
  height: 150rpx;
  background: $facade-fill-ghost;
  border: 2rpx dashed $facade-border-soft;
  border-radius: 8rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.media-add-icon {
  font-size: 48rpx;
  color: $facade-text-muted;
}
.media-add-text {
  font-size: 20rpx;
  color: $facade-text-muted;
  margin-top: 8rpx;
}

/* ===== 提交按钮 ===== */
.submit-bar {
  margin-top: 40rpx;
}
.btn-submit {
  width: 100%;
  background: $brand-primary;
  color: $app-surface;
  border: none;
  border-radius: 12rpx;
  padding: 24rpx 0;
  font-size: 32rpx;
}
.btn-submit[disabled] {
  background: $facade-text-ghost;
}
</style>