mrr.sj.front/components/common/service-second-icon-tab.vue

<template>
  <view class="service-second-icon-tab">
    <scroll-view
      scroll-x
      class="icon-scroll"
      :show-scrollbar="false"
      @touchmove.prevent.stop
    >
      <view class="icon-container">
        <view
          v-for="(icon, index) in icons"
          :key="icon.id"
          :class="['icon-item', { active: activeId == icon.id }]"
          @click="handleIconClick(icon)"
        >
          <view class="icon-img-wrap">
            <image
              :src="icon.photo || defaultIcon"
              mode="aspectFill"
              class="icon-img"
            ></image>
          </view>
          <text class="icon-text">{{ icon.title }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: "ServiceSecondIconTab",
  props: {
    icons: {
      type: Array,
      required: true,
      default: () => [],
    },
    // 当前选中的Icon ID
    activeId: {
      type: [String, Number],
      default: "",
    },
    // Icon宽度（rpx）
    iconWidth: {
      type: Number,
      default: 96,
    },
    // Icon高度（rpx）
    iconHeight: {
      type: Number,
      default: 96,
    },
    // 文字大小（rpx）
    textSize: {
      type: Number,
      default: 24,
    },
    // 激活状态的颜色
    activeColor: {
      type: String,
      default: "#FF4767",
    },
    // 非激活状态的颜色
    inactiveColor: {
      type: String,
      default: "#3d3d3d",
    },
    // 图标默认图片（当没有提供photo时使用）
    defaultIcon: {
      type: String,
      default:
        "https://mrrplus.oss-cn-beijing.aliyuncs.com/wxstaic/images/default-icon.png",
    },
  },
  methods: {
    // 处理Icon点击
    handleIconClick(icon) {
      // 触发事件，向父组件传递选中的Icon信息
      this.$emit("icon-click", icon.id, icon.title, icon);
    },
  },
};
</script>

<style scoped>
.service-second-icon-tab {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 24rpx 0;
}

.icon-scroll {
  width: 100%;
}

.icon-container {
  display: flex;
  padding: 0 24rpx;
  gap: 32rpx;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 110rpx;
}

.icon-img-wrap {
  width: 96rpx;
  height: 96rpx;
  border-radius: 48rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
  position: relative;
}

.icon-img {
  width: 100%;
  height: 100%;
}

.icon-item.active .icon-img-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2rpx solid #FF4767;
  border-radius: 48rpx;
}

.icon-text {
  font-size: 24rpx;
  color: #3d3d3d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.icon-item.active .icon-text {
  color: #FF4767;
}
</style>