caimei-applets-hehe/pages/user/activity/coupon-find-list.vue

<template>
    <!-- TODO -->
    <view class="coupon-find-list">
        <!-- 顶部提示 -->
        <view class="top-tip">
            <view class="tip-text">如何领取更多优惠券？</view>
            <view class="tip-btn" @click="popupVisible = true">去了解</view>
        </view>
        <!-- 优惠券列表 -->
        <view class="coupon-list">
            <cm-coupon :key="i" v-for="i in 3"></cm-coupon>
        </view>
        <!-- 如何获取更多优惠券 -->
        <message-popup @close="closePopup" :visible="popupVisible" class="message-popup">
            <template v-slot:title>
                <view class="title"> 如何获取更多优惠券？ </view>
            </template>
            <template v-slot:content>
                <view class="content">
                    <view class="row">
                        <view class="dt">好友分享券</view>
                        <view class="dd">
                            登录用户可通过分享商城给好友，当好友成功登录后，您可以领取一张好友分享券。
                        </view>
                    </view>
                    <view class="row">
                        <view class="dt">好友消费券</view>
                        <view class="dd">
                            登录用户可通过分享商城给好友，当好友成功消费一笔订单后，您将可以领取一张好友消费券。
                        </view>
                    </view>
                </view>
            </template>
        </message-popup>
    </view>
</template>

<script>
import MessagePopup from '@/components/message-popup/message-popup.vue'
import CmCoupon from '@/components/cm-module/cm-coupon/cm-coupon.vue'
export default {
    components: {
        MessagePopup,
        CmCoupon
    },
    data() {
        return {
            popupVisible: true
        }
    },
    computed: {},
    onLoad() {},
    methods: {
        // 关闭信息弹窗
        closePopup() {
            this.popupVisible = false
        }
    }
}
</script>

<style lang="scss" scoped>
$tip-height: 80rpx;
$grid: 24rpx;

.top-tip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
    height: $tip-height;
    padding: 0 $grid;
    background: #fff3f7;
    box-sizing: border-box;
    .tip-text {
        font-size: 26rpx;
        color: #ff457b;
    }
    .tip-btn {
        width: 128rpx;
        height: 48rpx;
        border: 1rpx solid #ff457b;
        border-radius: 24rpx;
        text-align: center;
        line-height: 48rpx;
        font-size: 26rpx;
        color: #ff457b;
    }
}
.message-popup {
    .title {
        font-size: 30rpx;
        font-weight: 600;
        color: #333333;
    }
    .content {
        .row {
            padding-left: 32rpx;
            margin: $grid 0;
            .dt {
                position: relative;
                font-size: 26rpx;
                font-weight: 600;
                line-height: 40rpx;
                color: #333333;
                &::before {
                    content: '';
                    display: block;
                    position: absolute;
                    left: -$grid;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 10rpx;
                    height: 10rpx;
                    background: #ff457b;
                }
            }
            .dd {
                font-size: 26rpx;
                line-height: 40rpx;
                color: #666666;
                margin-top: $grid;
            }
        }
    }
}
</style>