sqxp/sqxp-wx/components/sq-copy-btn.vue

<script setup>
import { computed } from 'vue';
import { staticAssetUrl } from '@/utils/staticAsset';

const props = defineProps({
  text: { type: [String, Number, Object], default: '' },
  label: { type: String, default: '' },
  iconOnly: { type: Boolean, default: false }
});

const value = computed(() => String(props.text ?? '').trim());
const ICON_COPY = staticAssetUrl('copy.svg');

function onCopy() {
  const v = value.value;
  if (!v || v === '—') return;
  uni.setClipboardData({
    data: v,
    success: () => uni.showToast({ title: `${props.label || '内容'}已复制`, icon: 'none' })
  });
}
</script>

<template>
  <view
    v-if="value"
    class="sq-copy-btn"
    :class="{ 'sq-copy-btn--icon-only': !!iconOnly }"
    @click.stop="onCopy"
  >
    <image class="sq-copy-btn__icon" :src="ICON_COPY" mode="aspectFit" />
    <text v-if="!iconOnly" class="sq-copy-btn__text">复制</text>
  </view>
</template>

<style lang="scss" scoped>
/* 参考配送员端复制按钮样式：浅绿底 + 绿字 */
.sq-copy-btn {
  flex-shrink: 0;
  min-height: 36rpx;
  padding: 0 10rpx;
  border-radius: 999rpx;
  background: #eef8f3;
  display: inline-flex;
  align-items: center;
  gap: 6rpx;
}

.sq-copy-btn--icon-only {
  width: 44rpx;
  height: 44rpx;
  padding: 0;
  justify-content: center;
  border-radius: 10rpx;
}

.sq-copy-btn__icon {
  width: 20rpx;
  height: 20rpx;
}

.sq-copy-btn--icon-only .sq-copy-btn__icon {
  width: 22rpx;
  height: 22rpx;
}

.sq-copy-btn__text {
  font-size: 18rpx;
  color: #189b65;
}
</style>