红包逻辑需要重构

pages/red-packet/details.vue

@@ -0,0 +1,171 @@
+<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 v-if="isPersonal">
+          {{
+            viewData.hasReceived
+              ? `${viewData.remainCount}个红包${viewData.remainAmount}积分`
+              : `红包${viewData.remainAmount}积分，等待对方领取`
+          }}
+        </text>
+        <text v-else>1个红包共5.00元</text>
+      </view>
+
+      <!-- 领取人卡片信息 -->
+      <view
+        v-if="isPersonal && viewData.hasReceived"
+        class="red-envelope-card"
+      >
+        <view class="avatar"></view>
+        <view class="right-box">
+          <view class="top-name">
+            <text>用户名称</text>
+            <text>5积分</text>
+          </view>
+          <text class="date">用户名称</text>
+        </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;
+        }
+      }
+      .date {
+        font-size: 28rpx;
+        color: #a1a1a1;
+      }
+    }
+  }
+
+  .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>