aiot-app/pages/pcs/components/myCard.vue

<template>
  <view class="card_container">
    <view class="card_box">
      <!-- 标题区域 - 独立出来，宽度100% -->
      <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>

      <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="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: "",
    showDetail: {
      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;
        }
      };
    },
  },
  data() {
    return {};
  },
  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);
    },
  },
};
</script>

<style lang="scss" scoped>
.card_container {
  padding: 20rpx 24rpx;
  background: #f5f5f5;
}

.card_box {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 28rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  position: relative;

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

    > view {
      margin-top: 28rpx;

      &: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, #e8f5e9 0%, #f1f8e9 100%);
    padding: 20rpx 24rpx;
    border-radius: 12rpx 12rpx 0 0;
    margin: -28rpx -28rpx 28rpx -28rpx;
    width: calc(100% + 56rpx);
    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: #333333;
      font-size: 32rpx;
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

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

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

  .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: #666666;
        flex-shrink: 0;
        margin-right: 12rpx;
        font-size: 28rpx;
      }

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

        // 高亮值样式
        &.highlight {
          color: #4caf50;
        }
      }
    }

    .gylx {
      color: $theme-color;
    }

    .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: 28rpx;
    padding-top: 24rpx;
    border-top: 1rpx solid #f0f0f0;
    color: #666666;
    font-size: 28rpx;
    cursor: pointer;

    &:active {
      opacity: 0.7;
    }
  }
}

/deep/.u-input {
  padding: 0 !important;
  height: 44rpx !important;
  font-size: 26rpx !important;
}

/deep/.u-input__content__field-wrapper__field {
  font-size: 26rpx !important;
}

/deep/.uni-date-editor--x .uni-date__icon-clear {
  border: none !important;
}

/deep/.uni-date__x-input,
/deep/.uni-date-x {
  padding: 0 !important;
  height: 44rpx !important;
  font-size: 26rpx !important;
}

/deep/.input-value {
  font-size: 26rpx !important;
  height: 44rpx !important;

  uni-text {
    font-size: 26rpx !important;
  }
}

/deep/.u-textarea {
  padding: 2px !important;
}

/deep/.u-textarea__field {
  font-size: 26rpx !important;
}
</style>