lucky_shop/components-diy/diy-recommend-code.vue

<template>
    <view data-component-name="diy-recommend-code" class="diy-recommend-code" :style="warpCss">
        <!-- 标题 -->
        <view class="title-line">
            <view class="icon iconfont icon-recommend-prize"></view>
            <text class="title">{{ $lang('components-diy.diy-recommend-code.myCode') }}</text>
        </view>

        <!-- 卡片 -->
        <view class="code-card" v-if="code.code">
            <view class="code-text" @tap="copyCode">{{ code.code }}</view>
            <view class="copy-btn" @tap="copyCode">
                <text class="iconfont icon-copy"></text>
                <text>{{ $lang('components-diy.diy-recommend-code.copy') }}</text>
            </view>
        </view>
        <view class="code-card placeholder" v-else>
            <text class="placeholder-text">{{ recommendError || $lang('components-diy.diy-recommend-code.loading') }}</text>
        </view>

        <!-- 复制 toast -->
        <view v-if="copyToast" class="copy-toast">
            {{ $lang('components-diy.diy-recommend-code.copySuccess') }}
        </view>

        <!-- 分享链接区 -->
        <view class="share-bar" v-if="code.share_link">
            <text class="iconfont icon-share"></text>
            <text class="share-tip">{{ $lang('components-diy.diy-recommend-code.shareTip') }}</text>
            <view class="share-link-card" @tap="copyShareLink">
                <text class="link-text">{{ code.share_link }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import recommendData from '@/common/js/recommend-diy-data.js';

export default {
    name: 'diy-recommend-code',
    mixins: [recommendData],
    data() {
        return {
            copyToast: false,
            _toastTimer: null,
        };
    },
    computed: {
        warpCss() {
            return {
                padding: (this.value && this.value.paddingTop || 16) + 'rpx ' +
                         (this.value && this.value.paddingLeft || 24) + 'rpx',
                backgroundColor: (this.value && this.value.componentBgColor) || 'transparent',
            };
        },
    },
    methods: {
        copyCode() {
            if (!this.code.code) return;
            uni.setClipboardData({
                data: this.code.code,
                success: () => this.showCopyToast(),
            });
        },
        copyShareLink() {
            if (!this.code.share_link) return;
            uni.setClipboardData({
                data: this.code.share_link,
                success: () => this.showCopyToast(),
            });
        },
        showCopyToast() {
            this.copyToast = true;
            if (this._toastTimer) clearTimeout(this._toastTimer);
            this._toastTimer = setTimeout(() => { this.copyToast = false; }, 1500);
        },
    },
};
</script>

<style lang="scss" scoped>
.diy-recommend-code {
    .title-line {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;
        .icon {
            font-size: 32rpx;
            color: #ff9800;
            margin-right: 12rpx;
        }
        .title {
            font-size: 30rpx;
            font-weight: 600;
            color: #333;
        }
    }
    .code-card {
        background: linear-gradient(135deg, #fff3e0, #ffe0b2);
        border: 2rpx dashed #ff9800;
        border-radius: 12rpx;
        padding: 36rpx 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .code-text {
            font-size: 56rpx;
            font-weight: 700;
            color: #e65100;
            letter-spacing: 4rpx;
            font-family: Menlo, Monaco, monospace;
        }
        .copy-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #ff9800;
            color: #fff;
            border-radius: 8rpx;
            padding: 12rpx 20rpx;
            font-size: 24rpx;
            .iconfont { font-size: 30rpx; margin-bottom: 4rpx; }
        }
        &.placeholder {
            background: #f5f5f5;
            border-color: #ccc;
            justify-content: center;
            min-height: 100rpx;
            .placeholder-text {
                color: #999;
                font-size: 28rpx;
            }
        }
    }
    .share-bar {
        margin-top: 16rpx;
        .icon-share { font-size: 28rpx; color: #ff9800; margin-right: 8rpx; }
        .share-tip {
            font-size: 24rpx;
            color: #666;
        }
        .share-link-card {
            margin-top: 12rpx;
            background: #fafafa;
            border-radius: 8rpx;
            padding: 16rpx 20rpx;
            .link-text {
                font-size: 24rpx;
                color: #444;
                word-break: break-all;
            }
        }
    }
    .copy-toast {
        position: fixed;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0,0,0,0.7);
        color: #fff;
        padding: 16rpx 32rpx;
        border-radius: 8rpx;
        font-size: 28rpx;
        z-index: 9999;
    }
}
</style>