更新记录

1.0.1

优化

1.0.0

组件初始化

平台兼容性

云端兼容性

uni-app(4.72)

uni-app x(4.72)

cc-GaoCheckBox

uniapp专属精品组件页面模板（由前端组件开发出品）精品组件页面模板

●组件模板效果图：

可下载项目后预览，效果图见右侧图片；

●组件模板费用：

学习：免费下载，进行学习，无费用；

使用/商用：本页面地址赞赏5元后，可终身商用；

●组件模板使用版权/商用：

本组件模板免费下载可供学习，如需使用及商用，请在本组件页面模板进行赞赏5元

（仅需5元获取精品页面模板代码-物有所值，1个组件页面市场价50元 ）

赞赏5后（当前项目产生赞赏订单可追溯）即可终身商用当前本地址下载的页面模版代码，不同下载地址需进行不同的赞赏。（不赞赏就进行商用使用者，面临侵权！保留追究知识产权法律责任！后果自负！）

我的技术公众号(私信可加前端技术交流群)

群内气氛颇为不错，应该可能算为数不多专门进行技术交流的前端群，同时也涵盖后端技术产品交流，偶尔成员们会聊天摸鱼。

使用方法

<template>
  <view class="skill-select-container">
    <view class="header">请选择最多5个技能并为其评分</view>
    <checkbox-group @change="onCheckboxChange">
      <view v-for="(skill, idx) in skills" :key="skill.id" class="skill-item">
        <checkbox :value="skill.id+''" :checked="isSelected(skill.id)" />
        <view class="skill-info">
          <view class="skill-title">{{ skill.name }}</view>
          <view class="skill-desc">{{ skill.desc }}</view>
        </view>
        <view v-if="isSelected(skill.id)" class="rating">
          <text v-for="n in 5" :key="n" class="star" :class="{ active: getRating(skill.id) >= n }" @click="setRating(skill.id, n)">★</text>
        </view>
      </view>
    </checkbox-group>
    <view class="footer">
      <button type="primary" :disabled="selectedSkills.length === 0" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      skills: [
        { id: 1, name: '桩工机械', desc: '通过静压方式将预制桩压入地基，减少噪音污染。' },
        { id: 2, name: '运输机械', desc: '运输土方、建材，车厢可自动卸料' },
        { id: 3, name: '装修与拆除机械', desc: '外墙装修、清洗时承载人员作业。' },
        { id: 4, name: '钢筋加工机械', desc: '切断钢筋至指定长度。' },
        { id: 5, name: '基础施工机械', desc: '打入桩基础，分锤击式、液压式等，用于建筑地基。' },
        { id: 6, name: '混凝土机械', desc: '混合水泥、砂石、水等原料，分强制式和自落式。' },
        { id: 7, name: '起重吊装机械', desc: '包括塔式起重机（塔吊，用于高层建筑物料吊运）、汽车起重机（车载式，灵活移动）、履带起重机（履带吊，适合重载和复杂场地）' },
        { id: 8, name: '土方工程机械', desc: '用于挖掘、装载土方，分履带式和轮式（如常见的挖机）。' },
      ],
      selectedSkills: [], // { id, rating }
    };
  },
  methods: {
    isSelected(id) {
      return this.selectedSkills.some(s => s.id === id);
    },
    getRating(id) {
      const skill = this.selectedSkills.find(s => s.id === id);
      return skill ? skill.rating : 0;
    },
    setRating(id, rating) {
      const idx = this.selectedSkills.findIndex(s => s.id === id);
      if (idx !== -1) {
        this.selectedSkills[idx].rating = rating;
      }
    },
    onCheckboxChange(e) {
      const values = e.detail.value.map(v => parseInt(v));
      if (values.length > 5) {
        uni.showToast({
          title: '最多只能选择5个技能',
          icon: 'none'
        });
        // 恢复为前5个
        this.selectedSkills = this.selectedSkills.filter(s => values.includes(s.id));
        return;
      }
      // 保留已评分的技能，新增的默认3分
      const newSelected = values.map(id => {
        const exist = this.selectedSkills.find(s => s.id === id);
        return exist ? exist : { id, rating: 2 };
      });
      this.selectedSkills = newSelected;
    },
    submit() {
      // 回传数据到上一页
      const selected = this.selectedSkills.map(s => {
        const skill = this.skills.find(k => k.id === s.id);
        return { id: s.id, name: skill.name, rating: s.rating };
      });

      console.log("skills = " + JSON.stringify(selected));
      const eventChannel = this.getOpenerEventChannel && this.getOpenerEventChannel();
      if (eventChannel) {
        eventChannel.emit('skillsSelected', selected);
      }
      uni.navigateBack();
    }
  }
};
</script>

<style scoped>
.skill-select-container {
  padding: 32rpx;
}
.header {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 24rpx;
  text-align: center;
}
.skill-item {
  display: flex;
  align-items: center;
  background: #f8f8f8;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 20rpx 16rpx;
}
.skill-info {
  flex: 1;
  margin-left: 16rpx;
}
.skill-title {
  font-size: 28rpx;
  font-weight: 500;
}
.skill-desc {
  font-size: 22rpx;
  color: #888;
  margin-top: 4rpx;
}
.rating {
  margin-left: 16rpx;
}
.star {
  font-size: 32rpx;
  color: #ccc;
  margin-right: 4rpx;
  cursor: pointer;
}
.star.active {
  color: #f6b01e;
}
.footer {
  margin-top: 32rpx;
  text-align: center;
}
</style>