zhibo/pages_course/components/winningPopup.vue

<template>
  <u-popup 
    :show="show" 
    @close="handleClose" 
    round="20rpx" 
    bgColor="#f3f5f9" 
    zIndex="10076"
  >
    <view class="winning_record">
      <image class="head_bg" src="/static/images/red_head.png" mode="widthFix"></image>
      <image class="bg" src="/static/images/red_bg.png"></image>
      
      <view class="winning_content">
        <view class="title">我的中奖记录</view>
        
        <view class="row mb40 fs34">
          <view class="start">时间</view>
          <view class="center">状态</view>
          <view class="end">奖品</view>
        </view>
        
        <scroll-view 
          enable-flex 
          scroll-y 
          v-if="prizeList && prizeList.length > 0" 
          :style="{ height: scrollHeight + 'px' }"
        >
          <view 
            class="row mb20 fs34" 
            v-for="(item, index) in prizeList" 
            :key="index"
          >
            <view class="start fs30">{{ formatTime(item.createTime) }}</view>
            
            <view 
              class="center button" 
              v-if="item.orderStatus === -9 || !item.orderStatus"
              @click="handleFillAddress(item)"
            >
              <text>填地址</text>
            </view>
            
            <view class="center" v-else>
              <text v-if="item.orderStatus === 1">待支付</text>
              <text v-if="item.orderStatus === 2">待发货</text>
              <text v-if="item.orderStatus === 3">待收货</text>
              <text v-if="item.orderStatus === 4">已完成</text>
              <text v-if="item.orderStatus === -3">已取消</text>
            </view>
            
            <view class="end">
              {{ truncateString(item.productName, 6) }}
            </view>
          </view>
        </scroll-view>
        
        <view v-else class="f36 mt150" style="text-align: center">
          暂无中奖信息
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: 'WinningRecordPopup',
  
  props: {
    // 控制显示/隐藏
    show: {
      type: Boolean,
      default: false
    },
    // 中奖记录列表
    prizeList: {
      type: Array,
      default: () => []
    },
    // 直播间ID
    liveId: {
      type: [String, Number],
      default: ''
    },
    // 滚动区域高度
    scrollHeight: {
      type: Number,
      default: 500
    }
  },
  
  data() {
    return {};
  },
  
  methods: {
    /**
     * 关闭弹窗
     */
    handleClose() {
      this.$emit('close');
    },
    
    /**
     * 处理填写地址
     */
    handleFillAddress(item) {
      this.$emit('fill-address', {
        productId: item.productId,
        recordId: item.id,
        liveId: this.liveId,
        item: item
      });
    },
    
    /**
     * 格式化时间显示
     */
    formatTime(timeStr) {
      if (!timeStr) return '';
      // 简单的格式化，可以根据需要调整
      return timeStr.length > 10 ? timeStr.substring(5, 16) : timeStr;
    },
    
    /**
     * 截断字符串
     */
    truncateString(str, maxLength) {
      if (typeof str !== 'string' || str.length <= maxLength) {
        return str || '';
      }
      return str.slice(0, maxLength) + '...';
    }
  }
};
</script>

<style scoped lang="scss">
.winning_record {
  position: relative;
  height: 800rpx;
  
  .head_bg {
    position: absolute;
    top: -125rpx;
    left: 50%;
    width: 311rpx;
    transform: translateX(-50%);
  }
  
  .bg {
    width: 100%;
    height: 100%;
  }
  
  .winning_content {
    position: absolute;
    top: 50rpx;
    color: #fff;
    width: 100%;
    padding: 0 36rpx;
    box-sizing: border-box;
    
    .title {
      text-align: center;
      font-size: 40rpx;
      font-weight: 500;
      margin-bottom: 40rpx;
    }
    
    .row {
      display: flex;
      justify-content: space-between;
      text-align: center;
      
      .start {
        width: 40%;
      }
      
      .center {
        width: 20%;
        
      
      }
        .button {
          background-color: #fff;
          border-radius: 20rpx;
          color: #f4410b;
          padding: 4rpx 8rpx;
        }
      .end {
        width: 40%;
      }
    }
  }
}


</style>