yihuo/pages/product/activity.vue

<template>
    <view class="wrapper">
        <view class="flex-align" v-if="data && data.coupon && data.coupon.length > 0">
            <view class="color-2 font2 marginR16">优惠</view>
            <view class="light color-theme font2">
                {{data.coupon[0].name}}
            </view>
            <view class="font4 color-1 text-right flex1" @click="showCoupons">领券</view>
        </view>
    </view>
</template>
<script>
export default {
    props: {
        data: Object
    },
    mounted() {
    },
    methods: {
        showCoupons() {
            this.$router.push('coupon_take', { scene: 'MALL', id: this.data.id})
        }
    }
}
</script>
<style lang="scss" scoped>
.wrapper {
    margin-top: 20rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 40rpx 28rpx;
    .light {
        background: rgba($color: #a76ef4, $alpha: 0.3);
        height: 40rpx;
        border-radius: 8rpx;
        padding: 0 10rpx;
    }
    .light-2 {
        border-radius: 4rpx;
        border: 2rpx solid #a76ef4;
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 10rpx;
    }
}
</style>