caimei-applets-hehe/components/cm-module/cm-coupon-list/cm-coupon-list.vue

<template>
    <view class="cm-coupon-list">
        <view class="mask" v-if="visible"></view>
        <view class="main-content">
            <uni-transition mode-class="slide-bottom" :show="visible">
                <view class="content">
                    <!-- 关闭弹框按钮 -->
                    <view class="iconfont icon-iconfontguanbi close" @click="$emit('close')"></view>
                    <!-- 弹框标题 -->
                    <view class="title">{{ title }}</view>
                    <view class="other" v-if="listType !== 'receive'">
                        <!-- 勾选不使用优惠券 -->
                        <view class="unset" v-if="listType === 'use'">
                            <text>不使用优惠券</text> <text class="radio-flag iconfont icon-xuanze"></text>
                        </view>
                        <!-- tab切换 -->
                        <view class="tabs" v-if="listType === 'search'">
                            <view
                                class="tab"
                                :class="{ active: currentTab === index }"
                                v-for="(tab, index) in tabs"
                                :key="index"
                                @click="checkedTab(index)"
                            >
                                <text>{{ tab.name }}</text> <text>({{ 1 }})</text>
                            </view>
                        </view>
                    </view>
                    <view class="list" :class="['scroll-' + listType]">
                        <!-- 优惠券列表 -->
                        <cm-coupon :key="i" v-for="i in 6"></cm-coupon>
                        <!-- 使用优惠券按钮 -->
                        <view class="btn" @click="confirm" v-if="listType === 'use'">确定</view>
                        <!-- IPhoneX 以上版本适配 -->
                        <view :style="{ height: isIphoneX ? '40rpx' : 0 }"></view>
                    </view>
                </view>
            </uni-transition>
        </view>
    </view>
</template>

<script>
import CmCoupon from '@/components/cm-module/cm-coupon/cm-coupon.vue'
import { mapGetters } from 'vuex'

export default {
    name: 'cm-coupon-list',
    components: {
        CmCoupon
    },
    props: {
        // 列表标题
        title: {
            type: String,
            default: '优惠券'
        },
        // 优惠券列表
        couponList: {
            type: Object,
            default: () => {}
        },
        // 显示弹窗
        visible: {
            type: Boolean,
            default: false
        },
        // 列表类型 receive 领取 use 使用  search 查看
        listType: {
            type: String,
            default: 'receive'
        }
    },
    data() {
        return {
            currentTab: 0,
            tabs: [
                {
                    name: '已领取优惠券'
                },
                {
                    name: '可领取优惠券'
                }
            ]
        }
    },
    computed: {
        ...mapGetters(['isIphoneX'])
    },
    methods: {
        // 确认需要把优惠券对象返回
        confirm() {
            this.$emit('confirm')
        },
        checkedTab(index) {
            this.currentTab = index
        }
    }
}
</script>

<style lang="scss" scoped>
$grid: 24rpx;
$title-top: 50rpx;
$title-bottom: 28rpx;
$title-line-height: 50rpx;
$other-line-height: 40rpx;
$tabs-height: 80rpx;
$main-height: 1028rpx;
$base-scroll-height: $main-height - $title-top - $title-bottom - $title-line-height;
.mask {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
}
.cm-coupon-list {
    .main-content {
        width: 750rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 99999;
        .content {
            position: relative;
            width: 100%;
            height: $main-height;
            border-radius: 16rpx 16rpx 0px 0px;
            background: #fff;
            .close {
                position: absolute;
                top: 36rpx;
                right: 36rpx;
                font-size: 34rpx;
                color: #b2b2b2;
            }
            .title {
                padding: $title-top 0 $title-bottom;
                text-align: center;
                font-size: 34rpx;
                font-weight: 500;
                line-height: $title-line-height;
                color: #333333;
            }
            .other {
                padding: 0 $grid $grid;
                line-height: $other-line-height;
                .unset {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding-right: 30rpx;
                    font-size: 30rpx;
                    color: #333333;
                    .radio-flag {
                        color: #ff457b;
                    }
                }
                .tabs {
                    height: $tabs-height;
                    line-height: $tabs-height;
                    border-bottom: 1px solid #e1e1e1;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;
                    .tab {
                        position: relative;
                        font-size: 30rpx;
                        color: #333333;
                        &::after {
                            content: '';
                            position: absolute;
                            width: 100%;
                            height: 4rpx;
                            bottom: 0;
                            left: 0;
                            background-color: #fff;
                        }
                        &.active {
                            color: #ff457b;
                            &::after {
                                background-color: #ff457b;
                            }
                        }
                    }
                }
            }
            .list {
                overflow-y: scroll;
                // 查看优惠券
                &.scroll-search {
                    height: $base-scroll-height - $tabs-height;
                }
                // 领取优惠券
                &.scroll-receive {
                    height: $base-scroll-height;
                }
                // 使用优惠券
                &.scroll-use {
                    height: $base-scroll-height - $other-line-height - $grid;
                }
                .btn {
                    width: 600rpx;
                    height: 90rpx;
                    margin: $grid auto;
                    background: linear-gradient(90deg, #fc32b4 0%, #f83c6c 100%);
                    opacity: 1;
                    border-radius: 45rpx;
                    line-height: 90rpx;
                    text-align: center;
                    font-size: 30rpx;
                    color: #ffffff;
                }
            }
        }
    }
}
</style>