brand-arrival-wechat/src/pagesOne/winner/components/winRecordPopup.vue

<template>
  <view class="winRecordPopup">
    <wd-popup
      v-model="props.show"
      custom-style="height: 880rpx;width:686rpx;background: transparent;"
      @close="handleClose"
    >
      <view class="content">
        <scroll-view class="list" scroll-y @scrolltolower="scrolltolower">
          <view>
            <view v-for="item in list" :key="item.id" class="record">
              <text>活动力度：{{ item.discountLevel }}</text>
              <view class="flex-center-btw bot">
                <text>奖励金额：{{ item.paymentAmount }}元</text>
                <view
                  class="btn"
                  :class="isWithDraw(item.processStatus) ? '' : 'static'"
                  >提现</view
                >
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <image
        class="closed"
        @click="handleClose"
        :src="imgObj.close"
        mode="scaleToFill"
      />
    </wd-popup>
  </view>
</template>

<script lang="ts" setup>
import { imgObj } from "../utils/source";
// import { ref } from "vue";
import { useDraw } from "@/hooks/useDraw";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Array<any>,
    default: () => [],
  },
});
const emit = defineEmits(["update:show", "scrolltolower"]);

const { handleClose, onPayment, isWithDraw } = useDraw(props, emit);
const scrolltolower = () => {
  emit("scrolltolower");
};
</script>

<style lang="scss" scoped>
.winRecordPopup {
  .content {
    height: 798rpx;
    width: 686rpx;
    background: url("https://qiuyu-daodian.oss-cn-beijing.aliyuncs.com/images/winRecord.png")
      no-repeat center;
    background-size: 100% 100%;

    box-sizing: border-box;
    // overflow: hidden;
    .list {
      font-size: 28rpx;
      color: #666666;
      // overflow-y: scroll;
      height: 798rpx;
      box-sizing: border-box;
      width: 85%;
      margin: auto;
      padding: 128rpx 0 95rpx;
      .record {
        // text-align: center;
        // text-align: left;
        padding: 32rpx 0;
        border-bottom: 1rpx solid rgba(191, 200, 219, 0.5);
        // display: flex;
        // justify-content: space-between;
        // align-items: flex-end;
        > text {
          line-height: 30rpx;

          &:last-of-type {
            // margin-left: 44rpx;
          }
        }
        &:last-of-type {
          border: none;
        }
      }
    }
  }
  .closed {
    width: 56rpx;
    height: 56rpx;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  .btn {
    @include btnStyle(108rpx, 48rpx);
    font-weight: normal;
    font-size: 22rpx;
    &.static {
      background: #d1d1d6;
    }
  }
  .bot {
    height: 48rpx;
  }
}
</style>