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 class="required-mark">*</text></text>
      <view class="cat-tabs">
        <view class="cat-tab" :class="{active: selectedCategory === 'ESSENTIAL'}" @click="selectedCategory = 'ESSENTIAL'">必备</view>
        <view class="cat-tab" :class="{active: selectedCategory === 'IDEAL'}" @click="selectedCategory = 'IDEAL'">理想</view>
      </view>
      <view class="type-grid">
        <view class="type-item" v-for="(t, idx) in filteredTypes" :key="idx"
              :class="{selected: selectedType === t.code}"
              @click="selectedType = t.code">
          <text class="type-name">{{ t.label }}</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="请输入资源名称" maxlength="50" />
    </view>

    <!-- 资源描述 -->
    <view class="form-section">
      <text class="section-label">描述（选填）</text>
      <textarea class="desc-input" v-model="description"
                placeholder="简单描述一下这个资源" 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, getConnectionTypes, addPearlResource } from '../../utils/api.js'

export default {
  data() {
    return {
      contacts: [],
      selectedContactId: null,
      selectedCategory: 'ESSENTIAL',
      connectionTypes: [],
      selectedType: '',
      name: '',
      description: ''
    }
  },
  computed: {
    canSubmit() {
      return this.selectedType && this.name.trim()
    },
    filteredTypes() {
      var self = this
      return this.connectionTypes.filter(function(t) {
        return t.category === self.selectedCategory
      })
    }
  },
  onLoad(options) {
    this.loadConnectionTypes()
    this.loadContacts()
  },
  methods: {
    async loadConnectionTypes() {
      try {
        var res = await getConnectionTypes()
        if (res.code === 200 && res.data) {
          this.connectionTypes = res.data
        }
      } catch (e) {
        uni.showToast({ title: '连接类型加载失败', icon: 'none' })
      }
    },
    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 = {
          connectionType: 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;
}
.cat-tabs {
  display: flex;
  gap: 16rpx;
  margin-bottom: 20rpx;
}
.cat-tab {
  padding: 12rpx 32rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 999rpx;
  font-size: 26rpx;
  color: #666;
  background: #fafafa;
}
.cat-tab.active {
  border-color: #F97316;
  color: #F97316;
  background: #FFF7ED;
}
.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-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>