aiot-app/components/myCard.vue

<template>
  <!-- 在最外层容器添加点击事件 -->
  <view class="card_container" @click="handleCardClick">
    <view class="card_box">
      <!-- 标题区域 -->
      <view class="header_box" v-if="title">
        <view class="title_left">
          <view class="round" v-if="index">{{ index }}</view>
          <view class="orderId" :style="{ marginLeft: index ? '16rpx' : '' }">{{
            title
          }}</view>
        </view>
        <!-- 状态标签 -->
        <view class="status-tag" v-if="status">{{ status }}</view>
        <!-- 单选/多选控件（阻止冒泡，避免重复触发） -->
        <view class="select-tag" v-if="showRadio" @click.stop>
          <!-- 单选模式 -->
          <u-radio-group
            v-if="selectionMode === 'single'"
            v-model="radioValueModel"
            placement="row"
            @change="handleRadioChange"
          >
            <u-radio
              :name="item.id"
              :iconSize="44"
              activeColor="#3c9cff"
              :labelSize="0"
            ></u-radio>
          </u-radio-group>
          <!-- 多选模式 -->
          <u-checkbox
            v-else
            :name="item.id"
            :checked="isChecked"
            :iconSize="44"
            activeColor="#3c9cff"
            :labelSize="0"
            @change="handleCheckboxChange"
          ></u-checkbox>
        </view>
      </view>

      <!-- 内容区域 -->
      <view class="item_box rx-bc" v-for="(_item, i) in columns" :key="i">
        <template v-for="val in _item">
          <view
            class="perce50"
            :class="[val.className, { 'full-width': val.isFullWidth }]"
            :style="val.style"
            :key="val.prop"
            v-if="!val.isNone"
          >
            <view class="item_one rx-sc" v-if="val.type == 'action'">
              <view class="lable">{{ val.label }}</view>
              <view class="text" style="flex-wrap: wrap">
                <template v-for="(btn, bI) in btnList">
                  <u-button
                    :plain="true"
                    :hairline="true"
                    size="mini"
                    :type="btn.btnType"
                    v-if="judge(btn)"
                    :text="btn.name"
                    @click="action(btn)"
                    :key="bI"
                  ></u-button>
                </template>
              </view>
            </view>
            <view class="item_one rx-sc kk" v-else>
              <view class="lable">{{ val.label }}</view>
              <view class="text" :class="val.valueClass" v-if="val.formatter">{{
                val.formatter(item) || ''
              }}</view>
              <view class="text" :class="val.valueClass" v-else-if="val.slot">
                <slot :name="val.slot"></slot>
              </view>
              <view class="text" :class="val.valueClass" v-else>{{
                item[val.prop] || ''
              }}</view>
            </view>
          </view>
        </template>
      </view>

      <!-- 查看详情（阻止冒泡） -->
      <view class="footer-link" v-if="showDetail" @click.stop="goDetail">
        <text>查看详情</text>
        <u-icon name="arrow-right" size="24" color="#999999"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    btnList: { type: Array, default: () => [] },
    item: { type: Object, default: () => ({}) },
    columns: { type: Array, default: () => [] },
    title: { type: String, default: '' },
    status: { type: String, default: '' },
    index: { type: [String, Number], default: '' },
    showDetail: { type: Boolean, default: true },
    showRadio: { type: Boolean, default: false },
    radioValue: { type: [String, Number], default: null },
    selectionMode: { type: String, default: 'single' }, // 'single' or 'multiple'
    checkboxValue: { type: Array, default: () => [] },
    // 是否允许点击卡片切换选中（默认true）
    clickable: { type: Boolean, default: true },
  },
  computed: {
    judge() {
      return (item) => {
        if (item.judge) {
          let is = true;
          item.judge.forEach(({ key, value, authorities, fn }) => {
            if (authorities) {
              is = this.$isAuthorities(authorities);
            }
            if (value && !value.includes(this.item[key])) {
              is = false;
            }
            if (fn) {
              is = fn(this.item);
            }
          });
          return is;
        } else {
          return true;
        }
      };
    },
    // 单选模式下的绑定值
    radioValueModel: {
      get() {
        return this.radioValue;
      },
      set(val) {
        if (val === this.item.id) {
          this.$emit('radioChange', this.item);
        }
      },
    },
    // 多选模式下的选中状态
    isChecked() {
      return this.checkboxValue.includes(this.item.id);
    },
  },
  methods: {
    action(item) {
      if (item.type == 1) {
        uni.navigateTo({
          url: item.pageUrl + '?id=' + this.item.id + (item.query || ''),
        });
      } else {
        this.$emit(item.apiName);
      }
    },
    goDetail() {
      this.$emit('goDetail', this.item);
    },
    handleRadioChange(val) {
      if (val === this.item.id) {
        this.$emit('radioChange', this.item);
      }
    },
    handleCheckboxChange(e) {
      this.$emit('checkboxChange', {
        checked: e,
        item: this.item,
      });
    },
    // ============ 点击整个卡片 ============
    handleCardClick() {
      // 如果不可点击，直接返回
      if (!this.clickable) return;
      // 如果没有开启选择模式，返回
      if (!this.showRadio) return;

      // 单选模式：直接触发选中
      if (this.selectionMode === 'single') {
        // 如果当前卡片已选中，则取消选中（允许取消）
        if (this.radioValue === this.item.id) {
          this.$emit('radioChange', null);
        } else {
          this.$emit('radioChange', this.item);
        }
        return;
      }

      // 多选模式：切换选中状态
      const isChecked = this.checkboxValue.includes(this.item.id);
      this.$emit('checkboxChange', {
        checked: !isChecked,
        item: this.item,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card_container {
  padding: 16rpx 0;
  // 增加点击反馈
  &:active {
    .card_box {
      transform: scale(0.99);
      transition: transform 0.15s ease;
    }
  }
}

.card_box {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  position: relative;
  transition: transform 0.15s ease;

  .rx-bc {
    display: flex;
    align-items: flex-start;
    flex-flow: row wrap;

    > view {
      margin-top: 24rpx;

      &:first-child,
      &:nth-child(2) {
        margin-top: 0;
      }
    }
  }

  .rx-sc {
    display: flex;
    align-items: flex-start;
  }

  .header_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
    background: linear-gradient(135deg, #eef5ff 0%, #f5f9ff 100%);
    padding: 20rpx 24rpx;
    border-radius: 20rpx 20rpx 0 0;
    margin: -24rpx -24rpx 24rpx -24rpx;
    width: calc(100% + 48rpx);
    box-sizing: border-box;

    .round {
      width: 44rpx;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 50%;
      background: $theme-color;
      color: #fff;
      text-align: center;
      font-size: 24rpx;
      font-weight: 600;
      flex-shrink: 0;
    }

    .orderId {
      color: #1f2b3c;
      font-size: 30rpx;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .title_left {
      display: flex;
      align-items: center;
      flex: 1;
      padding-right: 120rpx;
      overflow: hidden;
    }

    .status-tag {
      background: #e3f2fd;
      color: #2196f3;
      font-size: 24rpx;
      padding: 6rpx 20rpx;
      border-radius: 30rpx;
      font-weight: 500;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 24rpx;
      z-index: 1;
    }

    .select-tag {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 24rpx;
      z-index: 2;
      background: transparent;

      /deep/ .u-radio-group,
      /deep/ .u-checkbox-group {
        .u-radio,
        .u-checkbox {
          padding: 0;
          margin-right: 0;
        }
      }
    }
  }

  .item_box {
    .text {
      display: flex;
      flex: 1;

      uni-button:after {
        border: none;
      }

      uni-button {
        width: 100rpx;
        margin-left: 10rpx;
        margin-right: 0;
        color: #fff !important;
        border: none;
        background: #157a2c;
        margin-top: 3px;
      }
    }

    .kk .text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: block;
    }

    .item_one {
      width: 100%;
      font-size: 28rpx;
      line-height: 44rpx;
      display: flex;
      align-items: flex-start;

      .lable {
        color: #8e9aae;
        flex-shrink: 0;
        margin-right: 16rpx;
        font-size: 26rpx;
      }

      .text {
        color: #1f2b3c;
        font-size: 28rpx;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;

        &.highlight {
          color: #4caf50;
        }
      }
    }

    .perce50 {
      width: 50%;
      box-sizing: border-box;
      padding-right: 20rpx;

      &:nth-child(2n) {
        padding-right: 0;
        padding-left: 20rpx;
      }
    }

    .perce100 {
      width: 100%;
    }

    .full-width {
      width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  .footer-link {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 24rpx;
    padding-top: 20rpx;
    border-top: 2rpx solid #f0f2f5;
    color: #8e9aae;
    font-size: 28rpx;
    cursor: pointer;
    gap: 8rpx;

    &:active {
      opacity: 0.7;
    }
  }
}
</style>