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

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

    <!-- 家庭数据区 -->
    <view v-if="hasFamily">
    <!-- 选择互动对象 -->
    <view class="form-section">
      <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.relationshipTypeName || m.relationshipType }}</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="selectedType = key">
          <text class="type-icon">{{ typeIcons[key] || '💬' }}</text>
          <text class="type-name">{{ name }}</text>
        </view>
      </view>
    </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="submit-bar">
      <button class="btn-submit" @click="onSubmit" :disabled="!canSubmit">保存记录</button>
    </view>
    </view>
    <view v-else>
      <FamilyEmptyState type="card" />
    </view>
  </view>
</template>

<script>
import { listFamilyMembers, addInteraction, getInteractionTypes } from '../../utils/api.js'

export default {
  data() {
    return {
      members: [],
      selectedMemberId: null,
      selectedType: '',
      description: '',
      timeType: 'now',
      customTime: '',
      interactionTypes: {
        dining: '一起用餐',
        outgoing: '外出活动',
        call: '电话联系',
        video: '视频通话',
        chat: '聊天交流',
        play: '一起游戏',
        gift: '赠送礼物'
      },
      typeIcons: {
        dining: '🍽️',
        outgoing: '🚗',
        call: '📞',
        video: '📹',
        chat: '💬',
        play: '🎮',
        gift: '🎁'
      }
    }
  },
  computed: {
    hasFamily: function() {
      return this.$store.getters.hasFamily
    },
    canSubmit() {
      return this.selectedMemberId && this.selectedType
    }
  },
  onLoad(options) {
    if (options.memberId) {
      this.selectedMemberId = Number(options.memberId)
    }
    this.loadMembers()
  },
  methods: {
    async loadMembers() {
      try {
        var res = await listFamilyMembers()
        if (res.code === 200 && res.data) {
          this.members = res.data || []
        }
      } catch (e) {
        uni.showToast({ title: '加载成员失败', icon: 'none' })
      }
    },
    selectMember(member) {
      this.selectedMemberId = member.id
    },
    onTimeChange(e) {
      this.customTime = e.detail.value
    },
    async onSubmit() {
      if (!this.canSubmit) {
        uni.showToast({ title: '请选择对象和类型', icon: 'none' })
        return
      }
      try {
        var happenedAt = ''
        if (this.timeType === 'custom' && this.customTime) {
          happenedAt = this.customTime
        }
        var res = await addInteraction({
          fromMemberId: this.selectedMemberId,
          toMemberId: this.selectedMemberId,
          interactionType: this.selectedType,
          description: this.description,
          happenedAt: happenedAt
        })
        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' })
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24rpx;
}
.page-header {
  padding: 20rpx 0 30rpx;
}
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}
.form-section {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.section-label {
  font-size: 28rpx;
  color: #333;
  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 #e0e0e0;
  border-radius: 12rpx;
  background: #fafafa;
}
.member-item.selected {
  border-color: #F97316;
  background: #FFF7ED;
}
.member-name {
  font-size: 28rpx;
  color: #333;
  display: block;
}
.member-rel {
  font-size: 22rpx;
  color: #999;
}
.type-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}
.type-item {
  width: calc(25% - 12rpx);
  padding: 20rpx 0;
  text-align: center;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background: #fafafa;
}
.type-item.selected {
  border-color: #F97316;
  background: #FFF7ED;
}
.type-icon {
  font-size: 40rpx;
  display: block;
  margin-bottom: 8rpx;
}
.type-name {
  font-size: 22rpx;
  color: #666;
}
.desc-input {
  width: 100%;
  height: 160rpx;
  background: #fafafa;
  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 #e0e0e0;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #666;
}
.time-option.selected {
  border-color: #F97316;
  color: #F97316;
  background: #FFF7ED;
}
.custom-time {
  margin-top: 12rpx;
}
.time-display {
  padding: 20rpx;
  background: #fafafa;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
}
.submit-bar {
  margin-top: 40rpx;
}
.btn-submit {
  width: 100%;
  background: #F97316;
  color: #fff;
  border: none;
  border-radius: 12rpx;
  padding: 24rpx 0;
  font-size: 32rpx;
}
.btn-submit[disabled] {
  background: #ccc;
}
</style>