caimei-applets-store/components/views/cm-coupon-popup/cm-coupon-popup.vue

<template>
    <view class="coupon-popup">
        <uni-popup ref="popup" mask-background-color="rgba(0,0,0,0.8)" class="popup">
            <view class="popup-content" :style="[popupContentStyle]">
                <view class="close iconfont icon-iconfontguanbi" @click="handleClose"></view>
                <view class="header">
                    <!-- 标题 -->
                    <view class="title">优惠券</view>
                    <!-- tabs选项卡 -->
                    <tui-tabs
                        :tabs="couponTabs"
                        :currentTab="currentTab"
                        selectedColor="#f83c6c"
                        sliderBgColor="#f83c6c"
                        badgeBgColor="#f83c6c"
                        itemWidth="50%"
                        @change="tabChange"
                        v-if="hasTabs"
                    ></tui-tabs>
                    <!-- 不使用优惠券选项 -->
                    <view class="choose-none" v-if="hasCheckedNone">
                        <text>不使用优惠券</text>
                        <view
                            class="iconfont icon"
                            :class="checkedClass"
                            :data-name="controlType"
                            @click="$emit('checkedNone')"
                        ></view>
                    </view>
                </view>
                <view class="coupon-list">
                    <!-- 优惠券列表为空 -->
                    <template v-if="list.length <= 0">
                        <tui-no-data :imgUrl="staticUrl + 'icon-coupon-empty.png'" :imgHeight="230" :imgWidth="290">
                            <view class="empty-tip">暂无任何优惠券~~</view>
                        </tui-no-data>
                    </template>
                    <scroll-view
                        scroll-y="true"
                        class="scroll-box"
                        v-else
                        :style="{ paddingTop: paddingTop, paddingBottom: paddingBottom }"
                    >
                        <view class="coupon-section" v-for="item in list" :key="item.couponId">
                            <cm-coupon
                                :controlType="item.controlType || 'use'"
                                :checked="item.checked"
                                :key="item.couponId"
                                :couponData="item"
                                @click="$emit('couponClick', item)"
                            ></cm-coupon>
                        </view>
                        <cm-safe-area-bottom v-if="hasSafeArea"></cm-safe-area-bottom>
                    </scroll-view>
                    <view class="confirm-control" v-if="hasConfirm">
                        <tui-button width="650rpx" height="88rpx" type="base" shape="circle" @click="handleClose">
                            确定
                        </tui-button>
                        <cm-safe-area-bottom v-if="hasSafeArea"></cm-safe-area-bottom>
                    </view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'cm-coupon-popup',
    props: {
        visiable: {
            type: Boolean,
            default: false
        },
        height: {
            type: String,
            default: '1000rpx'
        },
        list: {
            type: Array,
            default: () => []
        },
        couponTabs: {
            type: Array,
            default: () => []
        },
        transform: {
            type: String,
            default: '34px'
        },
        // tab切换
        hasTabs: {
            type: Boolean,
            default: false
        },
        // 确认按钮
        hasConfirm: {
            type: Boolean,
            default: false
        },
        // 是否需要安全距离
        hasSafeArea: {
            type: Boolean,
            default: false
        },
        checkedNone: {
            type: Boolean,
            default: false
        },
        hasCheckedNone: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            currentTab: 0
        }
    },
    watch: {
        visiable(nval) {
            if (nval) {
                this.$refs.popup.open('bottom')
            } else {
                this.$refs.popup.close()
            }
        }
    },
    computed: {
        ...mapGetters(['safeArea']),
        paddingTop() {
            return this.hasCheckedNone ? '168rpx' : this.hasTabs ? '188rpx' : '88rpx'
        },
        paddingBottom() {
            return this.hasConfirm ? '120rpx' : '0'
        },
        popupContentStyle() {
            return {
                height: this.height || '',
                transform: this.safeArea ? `translateY(${this.transform})` : 'translateY(0)'
            }
        },
        checkedClass() {
            return this.checkedNone ? 'icon-xuanze' : 'icon-weixuanze'
        }
    },
    methods: {
        // tab切换
        tabChange(e) {
            this.currentTab = e.index
            this.$emit('change', this.currentTab)
        },
        // 关闭事件
        handleClose() {
            this.$refs.popup.open('bottom')
            this.$emit('close')
        }
    }
}
</script>

<style lang="scss" scoped>
$title-height: 40rpx;
$tab-height: 80rpx;

.popup-content {
    position: relative;
    height: 100%;
    background-color: #fff;
    border-radius: 20rpx 20rpx 0 0;

    color: #333;

    .close {
        font-size: 30rpx;
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        z-index: 100;
        @extend .cm-flex-center;
    }

    .title {
        padding-top: 24rpx;
        line-height: 60rpx;
        font-size: 30rpx;
        text-align: center;
    }

    .header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
    }

    .choose-none {
        @extend .cm-flex-between;
        padding: 0 24rpx;
        height: 80rpx;

        text {
            font-size: 28rpx;
        }

        .icon {
            text-align: right;
            line-height: 80rpx;
            width: 80rpx;
            height: 80rpx;
            padding-right: 24rpx;
            box-sizing: border-box;
        }
    }

    .confirm-control {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 16rpx 0;
        background-color: #fff;
        @extend .cm-flex-center;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
    }

    .coupon-list {
        height: 100%;
        .scroll-box {
            height: 100%;
            padding-top: 164rpx;
            box-sizing: border-box;
            .coupon-section {
                margin: 24rpx;
                &:first-child {
                    margin-top: 0;
                }
            }
        }
    }
}
</style>