feat(pearl): 登记资源页 25 类连接类型分组选择器

cfc-frontend/pages/action-detail/pearl-add-resource.vue

@@ -4,15 +4,18 @@
       <text class="page-title">登记资源</text>
     </view>
 
-    <!-- 选择资源类型 -->
+    <!-- 选择连接类型 -->
     <view class="form-section">
-      <text class="section-label">资源类型</text>
+      <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="(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 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>
@@ -20,14 +23,14 @@
     <!-- 资源名称 -->
     <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" />
+      <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="descPlaceholder" maxlength="200"></textarea>
+                placeholder="简单描述一下这个资源" maxlength="200"></textarea>
     </view>
 
     <!-- 关联联系人（选填） -->
@@ -52,64 +55,46 @@
 </template>
 
 <script>
-import { getContactList, addPearlResource } from '../../utils/api.js'
+import { getContactList, getConnectionTypes, addPearlResource } from '../../utils/api.js'
 
 export default {
   data() {
     return {
       contacts: [],
       selectedContactId: null,
+      selectedCategory: 'ESSENTIAL',
+      connectionTypes: [],
       selectedType: '',
       name: '',
-      description: '',
-      resourceTypes: {
-        INFO: '信息',
-        PLACE: '场所',
-        SKILL: '技能'
-      },
-      typeIcons: {
-        INFO: '📚',
-        PLACE: '🏠',
-        SKILL: '🛠️'
-      }
+      description: ''
     }
   },
   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 '简单描述一下这个资源'
+    filteredTypes() {
+      var self = this
+      return this.connectionTypes.filter(function(t) {
+        return t.category === self.selectedCategory
+      })
     }
   },
   onLoad(options) {
-    if (options.type) {
-      this.selectedType = options.type
-    }
+    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 })
@@ -130,7 +115,7 @@ export default {
       }
       try {
         var data = {
-          type: this.selectedType,
+          connectionType: this.selectedType,
           name: this.name.trim(),
           description: this.description.trim()
         }
@@ -184,6 +169,24 @@ export default {
 .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;
@@ -201,11 +204,6 @@ export default {
   border-color: #F97316;
   background: #FFF7ED;
 }
-.type-icon {
-  font-size: 40rpx;
-  display: block;
-  margin-bottom: 8rpx;
-}
 .type-name {
   font-size: 22rpx;
   color: #666;