更新记录

1.0.2（2024-12-24） 下载此版本

固定已选择行业头部

1.0.1（2024-12-24） 下载此版本

增加在插件加载数据时 禁用 右上角确定按钮

1.0.0（2024-12-23） 下载此版本

完善行业选择功能

平台兼容性

select-industry

注意

本插件ui使用了 uview-plus, 请确保你已正确安装。
使用前请上传数据库相关文件 industry-categories.index.json   industry-categories.init_data.json  industry-categories.schema.json
maxCount 参数表示可以多选几个 默认3个
如果你要将保存的字段保存到用户表 uni-id-users.schema.json, 请添加以下字段

"industries": {
    "bsonType": "object",
    "description": "用户选择的行业",
    "title": "行业",
    "required": ["industry_ids", "names"],
    "properties": {
        "industry_ids": {
            "bsonType": "array",
            "description": "行业ID数组",
            "items": {
                "bsonType": "string"
            }
        },
        "names": {
            "bsonType": "array",
            "description": "行业名称数组",
            "items": {
                "bsonType": "string"
            }
        }
    },
    "permission": {
        "read": true,
        "write": "doc._id == auth.uid || 'CREATE_UNI_ID_USERS' in auth.permission || 'UPDATE_UNI_ID_USERS' in auth.permission"
    }
}

插件完整的调用页面示例 这个文件应该在你的项目 pages下

<template>
  <view class="select-industry-page">
    <up-navbar title="选择行业" :autoBack="true" placeholder>
      <template #right>
        <view class="u-nav-slot">
          <u-button 
            text="确定" 
            class="confirm-btn"
            :plain="true"
            :hairline="false"
            @click="confirmSelect"
            :disabled="!selectedIndustries.length || pageLoading"
          />
        </view>
      </template>
    </up-navbar>

    <select-industry 
      ref="industrySelector"
      @change="onIndustriesChange"
      :value="selectedIndustries"
      :maxCount="3"
      @loading-change="onLoadingChange"
    />
  </view>
</template>

<script>
// 引入组件
import SelectIndustry from '@/uni_modules/select-industry/components/select-industry/select-industry.vue'
import { store as uniIdStore } from '@/uni_modules/uni-id-pages/common/store.js'

export default {
  components: {
    SelectIndustry
  },
  data() {
    return {
      selectedIndustries: [],
      pageLoading: true
    }
  },
  onLoad(options) {
    // 如果有已选择的行业，解析并设置
    if (options.selected) {
      try {
        this.selectedIndustries = JSON.parse(decodeURIComponent(options.selected))
      } catch (e) {
        console.error('解析已选择行业失败', e)
      }
    }
  },
  methods: {
    onIndustriesChange(industries) {
      this.selectedIndustries = industries
    },
    onLoadingChange(loading) {
      this.pageLoading = loading
    },

    async confirmSelect() {
      if (!this.selectedIndustries.length) {
        return
      }

      try {
        uni.showLoading({
          title: '保存中...'
        })

        // 保存到数据库
        const db = uniCloud.database()
        const { result } = await db.collection('uni-id-users').doc(uniIdStore.userInfo._id).update({
          industries: {
            industry_ids: this.selectedIndustries.map(item => item._id),
            names: this.selectedIndustries.map(item => item.name)
          }
        })

        uni.hideLoading()

        // 判断 result 中的 code 字段
        if (result && result.errCode === 0) {
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })

          // 获取选中的行业名称，用逗号拼接
          const industryNames = this.selectedIndustries.map(item => item.name).join('、')

          // 通过事件通道传递数据给上一页
          const eventChannel = this.getOpenerEventChannel()
          eventChannel.emit('selectIndustry', {
            industries: this.selectedIndustries,
            displayText: industryNames
          })

          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          throw new Error(result?.message || '保存失败')
        }
      } catch (e) {
        uni.hideLoading()
        console.error('保存行业失败：', e)
        uni.showToast({
          title: '保存失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.select-industry-page {
  min-height: 100vh;
  background-color: #ffffff;

  .u-nav-slot {

    :deep(.confirm-btn) {
      background-color: transparent !important;
      border: none !important;

      .u-button__text {
        color: #ff9900 !important;
        font-size: 32rpx;
      }

      /* 添加禁用状态样式 */
      &.u-button--disabled {
        .u-button__text {
          color: #c8c9cc !important;
        }
      }
    }
  }
}
</style> 

打开插件页面传递参数示例

        data() {
            return {
                formItems: [{
                                label: '名字',
                                value: '',
                                placeholder: '请输入名字'
                            },
                            {
                                label: '简介',
                                value: '',
                                placeholder: '介绍喜好、个性或职业介绍'
                            },
                            {
                                label: '性别',
                                value: '',
                                placeholder: '请选择性别'
                            },
                            {
                                label: '生日',
                                value: '',
                                placeholder: '请选择生日'
                            },
                            {
                                label: '行业',
                                value: '',
                                placeholder: '填写行业，发现同好'
                            }]
                    }
                }

        //user是从数据库读取出来的用户数据
        const db = uniCloud.database()
        const userInfo = await db.collection('uni-id-users')
            .where({
                _id: uniIdStore.userInfo._id
            })
            .field('avatar,cover_image,nickname,gender,bio,birth,username,industries') // 字段自己过滤一下
            .get()

        // 表单数据
        this.formItems = this.formItems.map(item => {

            if (item.label === '行业') {
                if (user.industries && user.industries.names && user.industries.names.length > 0) {
                    item.value = user.industries.names.join('、')
                    item.industries = user.industries.industry_ids.map((id, index) => ({
                        _id: id,
                        name: user.industries.names[index]
                    }))
                }
            }
        }
        //以上仅是读取出 this.formItems的值 仅供参考

        // 打开行业选择
        openIndustrySelect() {
            // 获取当前已选择的行业
            const currentIndustry = this.formItems.find(item => item.label === '行业')
            // 确保传递正确的数据结构
            const selected = currentIndustry.industries ? currentIndustry.industries.map(ind => ({
                _id: ind._id,
                name: ind.name,
                selected: true  // 添加 selected 属性
            })) : []

            uni.navigateTo({
                url: `/pages/mine/selectIndustry?selected=${encodeURIComponent(JSON.stringify(selected))}`, // 参考上面的 #插件完整的调用页面示例
                events: {
                    // 监听保存后的回传事件 会更新已选择项目 参考图2
                    selectIndustry: ({industries, displayText}) => {
                        // 更新表单显示
                        this.formItems = this.formItems.map(item => {
                            if (item.label === '行业') {
                                item.value = displayText
                                item.industries = industries
                            }
                            return item
                        })
                    }
                }
            })
        }