yihuo/pages/weal_detail/winRecord.vue

<template>
    <view class="cu-modal bottom-modal" :class="{'show': visible}">
        <view class="mask" @click="close"></view>
        <view class="wrapper cu-dialog">
            <view :style="{height: wrapperWidth + 'rpx'}">
              <view>
                    <view class="title">
                        中奖记录
                        <view class="close" @click="close">
                            <text class="cuIcon-close"></text>
                        </view>
                    </view>
                </view>
                <view v-if="data && data.length > 0">
                    <scroll-view
                        :style="{height: (wrapperWidth - 132) + 'rpx'}"
                        :scroll-y="true"
                        refresher-enabled
                        refresher-default-style="white"
                        @refresherrefresh="refresh"
                        :refresher-triggered="refreshing"
                        @scrolltolower="loadMore"
                    >
                        <view>
                            <view v-for="(item, index) in data" class="item flex-align" :key="index">
                                <image :src="item.avatar || resource.defaultAvatar" class="icon" />
                                <view class="font2  marginL12 flex1">{{item.nickname}}</view>
                                <view class="font2 marginL12 flex1">获得了</view>
                                <view class="marginL20 font2 line-ellipsis" style="width: 30%">{{item.spu.name}}</view>
                                <image :src="item.spu.cover" class="image marginL20" />
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <empty v-else :top="150" />
            </view>
        </view>
    </view>
</template>

<script>
import resource from '@/utils/resource'
import empty from '@/components/empty'

export default {
    components: { empty },
    props: {
        poolId: Number
    },
    data() {
        return {
            resource,
            visible: false,
            data: [],
            refreshing: false,
            requesting: false,
            roomId: ''
        }
    },
    computed: {
        wrapperWidth() {
            return (this.$store.state.systemInfo.screenHeight / 3) * 2 * 2
        }
    },
    methods: {
        show(roomId) {
            this.visible = true
            this.data = []
            this.roomId = roomId
            this.refresh()
        },
        refresh() {
            if (this.requesting) return
            this.refreshing = true
            this.getData()
        },
        loadMore() {
            if (this.requesting) return
            this.getData()
        },
        async getData() {
            this.requesting = true
            const res = await this.$service.weal.winningTheLotteryRecord(this.roomId)
            this.refreshing = false
            if (res && res.length > 0) {
                this.data = res
            }
            this.requesting = false
            console.log(this.data);
        },
        close() {
            this.visible = false
            this.$emit('close', false)
        }
    }
}
</script>

<style lang="scss" scoped>
.mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.wrapper {
    border-radius: 15px 15px 0 0!important;
    .title {
            text-align: center;
            font-size: 32rpx;
            font-family: Source Han Sans, Source Han Sans;
            font-weight: 700;
            color: #000000;
            padding: 44rpx 0 48rpx 0;
            position: relative;
        }

        .close {
            position: absolute;
            right: 0;
            width: 48rpx;
            height: 48rpx;
            background: #ebebeb;
            border-radius: 48rpx;
            color: #a2a2a2;
            top: 30rpx;
            line-height: 48rpx;
        }
    .item {
      padding: 0 16rpx 0 40rpx;
            margin: 0 28rpx 20rpx 28rpx;
            height: 116rpx;
            border-radius: 8rpx;
            background: #FFF7E3;
            .icon {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
            }
            .image {
                width: 48rpx;
                height: 48rpx;
                border-radius: 24rpx;
                background-color: #fff;
            }
    }
}
</style>