caimei-applets-hehe/components/cm-module/cm-order-share-reduce/cm-order-share-reduce.vue

<template>
    <view class="share-reduce">
        <template v-if="!reductionData.status">
            <view class="left-title high">
                <text>金额满{{ reduction.touchPrice }}元，分享可立减{{ reduction.reducedAmount }}元</text>
            </view>
            <view class="right-content">
                <view class="share-btn">
                    <!-- 分享按钮 -->
                    <button open-type="share">点击分享</button>
                </view>
            </view>
        </template>
        <template v-else>
            <view class="left-title">分享减免</view>
            <view class="right-content">
                <view class="reduce-amount">-￥{{ reduction.reducedAmount | formatPrice }}</view>
                <view class="iconfont icon-chakangengduo"></view>
            </view>
        </template>
    </view>
</template>

<script>
export default {
    props: {
        reductionData: {
            type: Object,
            default: () => {}
        }
    },
    computed: {
        reduction() {
            return this.reductionData.reduction || {}
        }
    },
    created() {
        console.log(this.reductionData)
    }
}
</script>

<style lang="scss" scoped>
.share-reduce {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx;
    height: 90rpx;
    background: #fff;
    .left-title {
        font-weight: bold;
        color: #333333;
        font-size: 28rpx;
        &.high {
            color: #ff457b;
        }
    }
    .right-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .coupon-amount,
        .reduce-amount,
        .share-btn {
            font-size: 28rpx;
            color: #ff457b;
            margin-right: 12rpx;
            button {
                display: inline;
                color: #ff457b;
            }
        }
        .iconfont {
            font-size: 28rpx;
            color: #b2b2b2;
        }
    }
}
</style>