caimei-applets-hehe/components/cm-module/cm-order-information/cm-order-information.vue

<template>
    <view class="detail">
        <view class="title">订单信息：</view>
        <view class="row">
            <view class="col">
                <view class="label">订单编号：</view>
                <view class="content">
                    <text>{{ orderInfo.orderNo }}</text> <text class="copy" @click="copyOrderNum">复制</text>
                </view>
            </view>
        </view>
        <view class="row">
            <view class="col">
                <view class="label">订单总额：</view>
                <view class="content">¥{{ orderInfo.payTotalFee | formatPrice }}</view>
            </view>
        </view>
        <view class="row">
            <view class="col">
                <view class="label">下单时间：</view> <view class="content">{{ orderInfo.orderTime }}</view>
            </view>
            <view class="col"> <view class="label">运费：</view> <view class="content">包邮</view> </view>
        </view>
        <view class="row">
            <view class="col" v-if="orderInfo.receiptDate">
                <view class="label">支付时间：</view> <view class="content"> {{ orderInfo.receiptDate }} </view>
            </view>
            <view class="col">
                <view class="label">分享减免：</view>
                <view class="content">¥{{ orderInfo.reductionAmount | formatPrice }}</view>
            </view>
        </view>
        <view class="row">
            <view class="col" v-if="orderInfo.couponAmount">
                <view class="label">优惠券：</view>
                <view class="content">¥{{ orderInfo.couponAmount | formatPrice }}</view>
            </view>
            <view class="col">
                <view class="label">已退货/已取消：</view>
                <view class="content">{{ orderInfo.returnedNum }}/{{ orderInfo.actualCancelNum }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        orderInfo: {
            type: Object,
            default: () => {}
        }
    },

    methods: {
        copyOrderNum() {
            uni.setClipboardData({
                data: this.orderInfo.orderNo,
                success: () => {
                    this.$util.msg('复制成功', 2000, true, 'success')
                },
                fail: () => {
                    this.$util.msg('复制失败', 2000, true, 'none')
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.detail {
    padding: 24rpx;
    background: #fff;
    line-height: 1.6;

    .title {
        display: flex;
        align-items: center;

        margin-bottom: 32rpx;

        font-size: 30rpx;
        color: #333333;

        &::before {
            content: '';
            display: block;
            width: 6rpx;
            height: 22rpx;
            background: #ff457b;
            border-radius: 3rpx;
            margin-right: 8rpx;
        }
    }
    .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8rpx 0;

        font-size: 26rpx;
        color: #333333;

        .label {
            color: #999999;
        }
        .content {
            position: relative;
            .copy {
                display: inline-block;
                line-height: 40rpx;
                width: 80rpx;
                height: 40rpx;
                margin-left: 40rpx;
                background: #fff8fd;
                border-radius: 8px;

                font-size: 24rpx;
                color: #ff457b;
                vertical-align: middle;
                text-align: center;
            }
        }
        .col {
            display: flex;
            align-items: center;
        }
    }
}
</style>