ysdH5/pages/draw/logs.vue

<template>
    <view class="content">
        <!-- 抽奖tab -->
        <view class="recordTab">
            <view class="recordTab-label" :class="{active : stateType == item.type}" @tap="orderTab" v-for="(item, index) in couponLabel" :key="index" :data-index="(index)" :data-state="(item.type)">
                {{ item.title }}
            </view>
        </view>
        <view class="record" v-if="awardsArr.length > 0">
            <view class="top">
                <text>抽奖结果</text>
                <text>抽奖状态</text>
                <text>抽奖时间</text>
                <text>操作</text>
            </view>
            <view class="list">
                <view class="item" v-for="(item, index) in awardsArr" :key="index">
                    <text class="itemText" v-if="item.exchange_item">{{item.exchange_item.title}}</text>
                    <text class="itemText" v-if="item.status" :class="{red : item.status.value == 1}">{{item.status.text}}</text>
                    <text class="itemText">{{item.created_at}}</text>
                    <text class="itemText" v-if="stateType == 'right'">
                        <view v-if="item.status.value == 1" class="itemText-go itemText-active">已使用</view>
                        <navigator v-else class="itemText-go" hover-class="none" :url="'right?luck_id=' + item.exchage_log_id">去使用</navigator>
                    </text>
                    <text class="itemText" v-else>
                        <view v-if="item.status.value == 1" class="itemText-go itemText-active">已领取</view>
                        <navigator v-else class="itemText-go" hover-class="none" :url="'choose?id=' + item.exchage_log_id">去领取</navigator>
                    </text>
                </view>
            </view>
        </view>
        <view class="pack-center pages-hint" wx:else>
        	<image src="/static/img/staff_null.png"></image>
        	<view>暂无抽奖记录</view>
        </view>
    </view>
</template>

<script>
    import { awards } from '@/apis/interfaces/draw'
    export default {
        data() {
            return {
                //抽奖Tab列表
                couponLabel : [
                    { title : "权益", type: 'right' },
                    { title : "商品", type: 'goods' }
                ],
                stateType   : 'right', //订单状态
                awardsArr   : []    //记录列表
            }
        },
        
        // 生命周期函数--监听页面加载
        onLoad(options) {
            this.couponId = options.id
        },
    
        // 生命周期函数--监听页面显示
        onShow() {
            // 存储环境-用户抽奖活动
            getApp().globalData.envType = 'drawEnv'
            
            // 获取记录列表
            this.awardInfo();
        },
        methods: {
            // 记录列表
            awardInfo(id){
                awards(this.couponId, {
                    type: this.stateType
                }).then(res=>{
                    this.awardsArr = res
                })
            },
            
            // tab选择
            orderTab(e){
                this.stateType = e.currentTarget.dataset.state
                // 获取记录列表
                this.awardInfo();
            }
        }
    }
</script>

<style lang="scss" scoped>
    .recordTab {
        position: fixed;
        width: 100%;
        height: 100rpx;
        border-bottom: 2rpx solid #ebebeb;
        z-index: 99;
        left: 0;
        top: 0;
        display: flex;
        padding: 20rpx 0;
        box-sizing: border-box;
        background-color: #FFFFFF;
        .recordTab-label {
            flex: 2;
            text-align: center;
            position: relative;
            &::after {
                position: absolute;
                content: '';
                left: calc(50% - 20rpx);
                bottom: 0;
                background-color: #FFFFFF;
                width: 40rpx;
                height: 6rpx;
                border-radius: 50rpx;
            }
            &.active {
                color: #eb4747;
            }
            &.active::after {
                background-color: #eb4747;
            }
        }
    }
    
    .record {
        width: 100%;
        margin-top: 100rpx;
        .top {
            color: #999999;
            background-color: #FFFFFF;
            line-height: 90rpx;
            font-size: 28rpx;
            overflow: hidden;
            text {
                display: inline-block;
                width: 25%;
                text-align: center;
            }
        }
        .list {
            .item {
                background-color: #FFFFFF;
                line-height: 90rpx;
                overflow: hidden;
                border-top: 2rpx solid #ebebeb;
                font-size: 26rpx;
                .itemText {
                    display: inline-block;
                    width: 25%;
                    text-align: center;
                    &:nth-child(2) {
                        color: green;
                    }
                    &:nth-child(2).active {
                        color: #eb4747;
                    }
                    &.red {
                        color: red;
                    }
                    .itemText-go {
                        margin: 0 auto;
                        background-color: #eb4747;
                        height: 44rpx;
                        line-height: 44rpx;
                        width: 60%;
                        text-align: center;
                        color: #FFFFFF;
                        border-radius: 10rpx;
                        font-size: 24rpx;
                        &.itemText-active {
                            background-color: #d3d3d3;
                        }
                    }
                }
                
            }
        }
    }
</style>