LocalLivingServicesUniapp/pages/coupon/usersList.vue

<template>
    <view style="background: #F7F8FC;height:100vh">
        <cu-custom bgColor="bg-fff" :isBack="true">
            <block slot="content">{{ currentTab == 0 ? '代金券用户' : currentTab == 1 ? '满减券用户' : '折扣券用户' }}</block>
        </cu-custom>
        <view class="coupon-title"
            :style="currentTab == '0' ? 'background: #EFFFFE' : currentTab == '1' ? 'background: #F4FAFF;' : 'background: #FFF7F3;'">
            <image :src="`/static/coupon/userBg${Number(currentTab) + 1}.png`" mode="">
            </image>
            <text class="coupon-name">{{ name }}</text>
        </view>

        <view class="coupon-header">
            <view class="tab-bar flex justify-around items-center">
                <text v-for="(item, index) in staList" :key="index" class="tab-item"
                    :class="{ active: statusType === index }" @click="onTabChange(index)">
                    {{ item.label }} {{ item.value }}
                </text>
            </view>
        </view>
        <view class="coupon-item" v-for="val in couponList" :key="val.id">
            <view class="user-info">
                <image class="avatar" :src="val.userAvatar" mode="aspectFill"></image>
                <view class="name">{{ val.userName }}</view>
                <view class="status" style="color: #D56412;" v-if="val.consumerStatus == 1">未使用</view>
                <view class="status" v-if="val.consumerStatus == 2">已使用</view>
                <view class="status" style="color: #999999;" v-if="val.consumerStatus == 3">已失效</view>
            </view>

            <view class="date-info">
                <view class="valid-date">
                    <text class="label">有效时间：</text>
                    <text class="value">{{ val.beginTime }} - {{ val.endTime }}</text>
                </view>
                <view class="purchase-date">
                    <text class="label" v-if="val.source==2">购买时间：</text>
                    <text class="label" v-else>发放时间：</text>
                    <text class="value">{{ val.payTime }}</text>
                </view>
            </view>

            <view class="product-info flex" v-if="val.consumerStatus == 2">
                <view class="product-title">
                    <view>
                        <text class="label">购买信息：</text>
                        <text class="value">{{ val.productName }}</text>
                    </view>
                    <view class="product-detail">
                        <text class="price">¥{{ val.soldPrice }}</text>
                        <text class="quantity">1份</text>
                    </view>
                </view>
                <image class="product-image" :src="val.productImage" mode="aspectFill"></image>
            </view>
        </view>
    </view>

</template>
<script>

export default {
    data() {
        return {
            staList: [{
                label:'全部', 
                value:''
            },{
                label:'未使用', 
                value:''
            },{
                label:'已使用', 
                value:''
            },{
                label:'已失效', 
                value:''
            }],
            productId: '',
            currentTab: '',
            couponList: [],
            statusType: 0,
            page: {
                pageNo: 1,
                pageSize: 10
            },
            name:'',
        }
    },
    methods: {
        onTabChange(index) {
            this.statusType = index
            this.getForm()
        },
        getForm() {
            this.$http.post('/merchant/localConsumerUserInfo/list', { status: this.statusType, consumerId: this.productId, ...this.page }).then(res => {
                if (res.data.success) {
                    this.couponList = res.data.result.records
                }
                else {
                    this.$tip.error(res.data.message);
                }
            })
        },
    },
    onLoad(options) {
        if (options) {
            this.productId = options.id
            this.currentTab = options.tab
            this.name=options.name
        }
    },
    onShow() {
        if (this.productId) {
            this.getForm()
            this.$http.get('/merchant/localConsumerUserInfo/getConsumerInfo', {params: {consumerId: this.productId} }).then(res => {
                if (res.data.success) {
                    this.staList.forEach(e=>{
                        if(e.label=='全部'){
                            e.value=res.data.result.allNum
                        }
                        if(e.label=='已使用'){
                            e.value=res.data.result.useNum
                        }
                        if(e.label=='未使用'){
                            e.value=res.data.result.noUseNum
                        }
                        if(e.label=='已失效'){
                            e.value=res.data.result.noNum
                        }
                    })
                }
                else {
                    this.$tip.error(res.data.message);
                }
            })
           
        }
    }

}
</script>
<style lang="scss" scoped>
.coupon-header {
    background: #FFFFFF;
    padding: 18rpx;
    border-bottom: 1px solid #EEEEEE;
}

.coupon-title {
    background: #EFFFFE;
    padding: 20rpx 32rpx;
    border-top: 1px solid #EEEEEE;
position: relative;
    image {
        width: 347rpx;
        height: 56rpx;
    }
    .coupon-name {
        position: absolute;
        color: #FFFFFF;
        left: 22rpx;
        width: 347rpx;
        height: 56rpx;
        line-height: 56rpx;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 0 16rpx;
        box-sizing: border-box;
    }
}


.tab-bar {
    position: relative;

    .tab-item {
        // padding: 12rpx 40rpx;
        // height: 60rpx;
        // line-height: 60rpx;
        text-align: center;
        padding: 10rpx 16rpx;
        font-size: 28rpx;
        color: #666;
        position: relative;
        border-radius: 8rpx;
        transition: all 0.3s;
        background: #F2F3F5;

        &.active {
            color: #2D88F4;
            background: #ECF5FF;
            font-weight: 500;
        }

        &:last-child {
            margin-right: 0;
        }
    }
}

.coupon-item {
    background: #FFFFFF;
    padding: 20rpx 40rpx;
    margin-bottom: 20rpx;
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;

    .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 16rpx;
    }

    .name {
        font-size: 32rpx;
        color: #333333;
        flex: 1;
    }

    .status {
        font-size: 28rpx;
        color: #509B45;
    }
}

.date-info {
    margin-bottom: 16rpx;
    margin-left: 96rpx;
    font-size: 26rpx;
    color: #8A91A8;

    .valid-date,
    .purchase-date {
        margin-bottom: 8rpx;

        .label {
            margin-right: 8rpx;
        }
    }
}

.product-info {
    background: #F7F8FC;
    padding: 14rpx;
    border-radius: 8rpx;

    .product-title {
        width: 60%;
        margin-bottom: 16rpx;
        font-size: 26rpx;
        color: #666666;
        overflow: hidden;
        /* 隐藏溢出的内容 */
        white-space: nowrap;
        /* 防止文本换行 */
        text-overflow: ellipsis;
        /* 使用省略号表示溢出的内容 */

    }

    .product-image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 8rpx;
        margin-left: 42rpx;
    }

    .product-detail {
        display: flex;
        align-items: center;
        color: #999999;
        font-size: 24rpx;

        .price {
            margin-right: 26rpx;
        }

    }
}
</style>