cfc/cfc-frontend/pages/action-detail/octopus-add-help.vue

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

    <!-- 选择帮助对象 -->
    <view class="form-section">
      <text class="section-label">帮助对象</text>
      <view class="member-select">
        <view class="member-item" v-for="c in contacts" :key="c.id"
              :class="{selected: selectedContactId === c.id}"
              @click="selectContact(c)">
          <text class="member-name">{{ c.name }}</text>
          <text class="member-rel">{{ c.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 helpTypes" :key="key"
              :class="{selected: selectedType === key}"
              @click="selectedType = key">
          <text class="type-icon">{{ helpTypeIcons[key] }}</text>
          <text class="type-name">{{ name }}</text>
        </view>
      </view>
    </view>

    <!-- 金额（仅经济支持） -->
    <view class="form-section" v-if="selectedType === 'MONEY'">
      <text class="section-label">金额（选填）</text>
      <input class="amount-input" type="digit" v-model="amount"
             placeholder="请输入金额，单位：元" />
    </view>

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

    <!-- 提交按钮 -->
    <view class="submit-bar">
      <button class="btn-submit" @click="onSubmit" :disabled="!canSubmit">保存记录</button>
    </view>
  </view>
</template>

<script>
import { getContactList, addOctopusHelpLog } from '../../utils/api.js'

export default {
  data() {
    return {
      contacts: [],
      selectedContactId: null,
      selectedType: '',
      amount: '',
      description: '',
      helpTypes: {
        MONEY: '经济支持',
        ITEM: '物质帮助',
        EMOTION: '情感支持',
        RESOURCE: '资源帮助',
        SKILL: '技能帮助',
        TIME: '时间帮助',
        OTHER: '其他'
      },
      helpTypeIcons: {
        MONEY: '💰',
        ITEM: '📦',
        EMOTION: '💕',
        RESOURCE: '📚',
        SKILL: '🛠️',
        TIME: '⏰',
        OTHER: '🤝'
      }
    }
  },
  computed: {
    canSubmit() {
      return this.selectedContactId && this.selectedType
    }
  },
  onLoad(options) {
    if (options.contactId) {
      this.selectedContactId = Number(options.contactId)
    }
    this.loadContacts()
  },
  methods: {
    async loadContacts() {
      try {
        var res = await getContactList({ page: 1, size: 100 })
        if (res.code === 200 && res.data) {
          this.contacts = res.data.list || (Array.isArray(res.data) ? res.data : [])
        }
      } catch (e) {
        uni.showToast({ title: '加载联系人失败', icon: 'none' })
      }
    },
    selectContact(contact) {
      this.selectedContactId = contact.id
    },
    async onSubmit() {
      if (!this.canSubmit) {
        uni.showToast({ title: '请选择对象和类型', icon: 'none' })
        return
      }
      try {
        var logData = {
          contactId: this.selectedContactId,
          helpType: this.selectedType,
          amount: this.amount,
          description: this.description
        }
        var res = await addOctopusHelpLog(logData)
        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(33.33% - 11rpx);
  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;
}
.amount-input {
  width: 100%;
  height: 88rpx;
  background: #fafafa;
  border-radius: 12rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.desc-input {
  width: 100%;
  height: 160rpx;
  background: #fafafa;
  border-radius: 12rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}
.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>