charge-java/charge-front/src/components/shadow-card/shadow-card.vue

<template>
  <view class="shadow-card">
    <slot></slot>
    <view
        v-for="(item, index) in list"
        :key="index"
        :style="{
        marginTop: index === 0 ? '0rpx' : '40rpx',
      }">

      <view class="label">{{ item.label }}</view>
      <view
          class="value"
          :style="{
          color: item.color ? item.color : '#000',
        }">
        {{ item.value }}
        <text class="copy-btn" v-if="item.copy" @click="copyText(item.value)">复制</text>
        <text class="copy-btn" v-if="item.discount" @click="handleClickOrderDiscountDesc">明细</text>
      </view>

    </view>
  </view>
</template>

<script lang="ts">
export default {
  props: {
    list: {
      type: Array<any>,
      defalut: [],
    },
  },
  methods: {
    copyText(text: string) {
      if (!text) return;
      uni.setClipboardData({
        data: text,
        success: function () {
          uni.showToast({
            title: '复制成功',
            icon: 'success',
          })
        }
      })
    },
    handleClickOrderDiscountDesc(){
      this.$emit('on-discount')
    }
  }
};
</script>

<style lang="scss">
.shadow-card {
  background: #ffffff;
  border: 1rpx solid rgba(0, 0, 0, 0.1);
  box-shadow: 0px 4rpx 20rpx rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  padding: 40rpx;

  & > view {
    display: flex;

    .label {
      width: 156rpx;
      flex-shrink: 0;
      color: rgba(0, 0, 0, 0.4);
      font-size: 26rpx;
    }

    .value {
      flex-grow: 1;
      font-size: 26rpx;
      overflow-wrap: anywhere;
    }
  }
}

.copy-btn {
  margin-left: 10rpx;
  color: #1aa4f2;
  /*  padding: 6rpx;
    background: #1aa4f2;*/
  font-size: 20rpx;
}
</style>