uniapp-im-shop/pages/red-packet/details.vue

<script setup>
  // pages/red-packet/details   红包详情
  import { onLoad } from '@dcloudio/uni-app'
  import { getRedEnvelopeDetail } from '../../api/tui-kit'
  import { ref, computed } from 'vue'
  import { useAuthUser } from '../../composables/useAuthUser'

  const { userInfo } = useAuthUser()

  const viewData = ref({})
  const conversationType = ref('')
  const loading = ref(true)

  /** 是否个人红包详情 */
  const isPersonal = computed(() => conversationType.value === 'C2C')
  const getData = async id => {
    loading.value = true
    const res = await getRedEnvelopeDetail(id)
    viewData.value = res.data
    loading.value = false
  }

  onLoad(e => {
    conversationType.value = e.type
    getData(e.id)
  })
</script>

<template>
  <view>
    <nav-bar>
      <template #back>
        <uni-icons type="back" size="42rpx" color="#ffffff"></uni-icons>
      </template>
    </nav-bar>
    <!-- 顶部半圆样式 -->
    <view class="top-half-circle"></view>
    <view v-if="loading" style="margin-top: 40rpx">
      <uni-load-more status="loading"></uni-load-more>
    </view>
    <view v-else>
      <!-- 发红包人 -->
      <view class="red-envelope-person">
        <view class="name-box">
          <image
            v-if="userInfo?.avatar"
            :src="userInfo?.avatar"
            mode="aspectFill"
            class="avatar"
          ></image>
          <uni-icons
            v-else
            type="contact-filled"
            size="54rpx"
          ></uni-icons>
          <text>{{ userInfo?.userName }}发出的的红包</text>
        </view>
        <text class="tips">{{ viewData?.title }}</text>
      </view>

      <!-- 红包信息 -->
      <view class="red-envelope-info">
        <text>
          {{
            viewData.receiveList.length > 0
              ? `${viewData.totalCount}个红包${viewData.totalAmount}积分`
              : `红包${viewData.remainAmount}积分，等待对方领取`
          }}
        </text>
        <!-- <text v-else>1个红包共5.00元</text> -->
      </view>

      <!-- 领取人卡片信息 -->
      <view v-if="viewData.receiveList.length > 0">
        <view
          v-for="item in viewData.receiveList"
          :key="item.id"
          class="red-envelope-card"
        >
          <view class="avatar"></view>
          <view class="right-box">
            <view class="top-name">
              <text>用户名称</text>
              <text>{{ item.receiveAmount }}积分</text>
            </view>
            <view class="bottom-name">
              <text class="date">{{ item.receiveTime }}</text>
              <view
                v-if="viewData.luckyReceive.userId === item.userId"
                class="tisp"
              >
                <image
                  src="/static/images/best.svg"
                  mode="heightFix"
                  class="best-icon"
                ></image>
                <text>手气最佳</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .top-half-circle {
    width: 100%;
    height: 200rpx;
    // 使用 border-radius 创建半圆效果
    border-radius: 0 0 50% 50%;
    background: #f05f55;
  }

  .red-envelope-card {
    padding: 20rpx 32rpx;
    border-bottom: 2rpx solid #f1f1f1;
    display: flex;
    .avatar {
      flex-shrink: 0;
      width: 80rpx;
      height: 80rpx;
      border-radius: 16rpx;
      background: rgb(197, 139, 139);
      margin-right: 16rpx;
    }
    .right-box {
      width: 100%;
      height: 80rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .top-name {
        display: flex;
        justify-content: space-between;
        text {
          font-size: 28rpx;
          color: #333333;
        }
      }
      .bottom-name {
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        .date {
          color: #a1a1a1;
        }
        .tisp {
          display: flex;
          align-items: center;
          .best-icon {
            height: 34rpx;
            margin-right: 10rpx;
          }
          text {
            color: #e7ba24;
          }
        }
      }
    }
  }

  .red-envelope-info {
    margin-top: 60rpx;
    padding: 20rpx 32rpx;
    border-bottom: 2rpx solid #f1f1f1;
    text {
      font-size: 28rpx;
      color: #a1a1a1;
    }
  }

  .red-envelope-person {
    margin-top: 38rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .name-box {
      display: flex;
      align-items: center;
      .avatar {
        width: 40rpx;
        height: 40rpx;
        border-radius: 10rpx;
        background: rgb(190, 133, 133);
        margin-right: 6rpx;
        text {
          line-height: 1;
          font-size: 34rpx;
          font-weight: 600;
          color: #333333;
        }
      }
    }
    .tips {
      margin-top: 10rpx;
      font-size: 28rpx;
      color: #a1a1a1;
    }
  }
</style>