cfc/cfc-frontend/pages/action-detail/pearl-add-resource.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="type-grid">
        <view class="type-item" v-for="(name, key) in resourceTypes" :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 class="required-mark">*</text></text>
      <input class="name-input" v-model="name" :placeholder="namePlaceholder" maxlength="50" />
    </view>

    <!-- 资源描述 -->
    <view class="form-section">
      <text class="section-label">描述（选填）</text>
      <textarea class="desc-input" v-model="description"
                :placeholder="descPlaceholder" maxlength="200"></textarea>
    </view>

    <!-- 关联联系人（选填） -->
    <view class="form-section">
      <text class="section-label">关联联系人（选填）</text>
      <view class="member-select" v-if="contacts.length > 0">
        <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>
      <text class="empty-hint" v-else>暂无联系人，可暂不关联</text>
    </view>

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

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

export default {
  data() {
    return {
      contacts: [],
      selectedContactId: null,
      selectedType: '',
      name: '',
      description: '',
      resourceTypes: {
        INFO: '信息',
        PLACE: '场所',
        SKILL: '技能'
      },
      typeIcons: {
        INFO: '📚',
        PLACE: '🏠',
        SKILL: '🛠️'
      }
    }
  },
  computed: {
    canSubmit() {
      return this.selectedType && this.name.trim()
    },
    namePlaceholder() {
      if (this.selectedType === 'INFO') {
        return '如：升学政策渠道、名师课程资源'
      }
      if (this.selectedType === 'PLACE') {
        return '如：社区图书馆、运动场馆'
      }
      if (this.selectedType === 'SKILL') {
        return '如：编程辅导、英语陪练'
      }
      return '请输入资源名称'
    },
    descPlaceholder() {
      if (this.selectedType === 'INFO') {
        return '如：在哪获取、谁提供、怎么用'
      }
      if (this.selectedType === 'PLACE') {
        return '如：地址、开放时间、适合场景'
      }
      if (this.selectedType === 'SKILL') {
        return '如：擅长方向、可帮助的内容'
      }
      return '简单描述一下这个资源'
    }
  },
  onLoad(options) {
    if (options.type) {
      this.selectedType = options.type
    }
    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) {
        // 静默：不阻塞登记
      }
    },
    selectContact(contact) {
      this.selectedContactId = this.selectedContactId === contact.id ? null : contact.id
    },
    async onSubmit() {
      if (!this.canSubmit) {
        uni.showToast({ title: '请选择类型并填写名称', icon: 'none' })
        return
      }
      try {
        var data = {
          type: this.selectedType,
          name: this.name.trim(),
          description: this.description.trim()
        }
        if (this.selectedContactId) {
          data.contactId = this.selectedContactId
        }
        var res = await addPearlResource(data)
        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;
}
.required-mark {
  color: #F97316;
}
.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;
}
.name-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;
}
.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;
}
.empty-hint {
  font-size: 26rpx;
  color: #999;
}
.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>