红包逻辑需要重构

.env

@@ -1,6 +1,6 @@
 # API
-# VITE_SYSTEM_URL = "http://w6972efb.natappfree.cc"
+VITE_SYSTEM_URL = "http://w6972efb.natappfree.cc"
-VITE_SYSTEM_URL = "https://dev.cqjcteach.cn/prod-api"
+# VITE_SYSTEM_URL = "https://dev.cqjcteach.cn/prod-api"
 
 # 第三方客户 channelId
 VITE_CHANNEL_ID = "7b81ec142eca42baa045820793b821bb"

TUIKit/components/TUIChat/message-list/index.vue

@@ -279,7 +279,12 @@
   import chatStorage from '../utils/chatStorage'
   import { IAudioContext } from '../../../interface'
   import { CHAT_MSG_CUSTOM_TYPE } from '../../../constant'
-  import { receiveRedEnvelope } from '../../../../api/tui-kit'
+  import {
+    receiveRedEnvelope,
+    getRedEnvelopeDetail
+  } from '../../../../api/tui-kit'
+  import { navigateTo } from '../../../../utils/router'
+  import { useUI } from '../../../../utils/use-ui'
 
   interface IEmits {
     (e: 'closeInputToolBar'): void
@@ -604,9 +609,10 @@
     })
   }
 
+  const { showDialog } = useUI()
   /** 领取红包 */
   const onClaim = (item: IMessageModel) => {
-    const { conversationType, flow, payload } = item
+    const { conversationType, cloudCustomData, flow, payload } = item
     const data = JSON.parse(payload.data)
     // 群聊
     if (conversationType === TYPES.value.CONV_GROUP) {
@@ -617,7 +623,43 @@
       })
     } else {
       // 个人红包
+      getRedEnvelopeDetail(data.id).then(async (res: any) => {
+        console.log(res)
+        let newMessage = {
+          // ...data,
+          in: false,
+          out: false
+        }
+        if (cloudCustomData) {
+          newMessage = JSON.parse(cloudCustomData)
+        }
         // 只能对方领取
+        if (flow === 'in') {
+          if (res.data.hasReceived) {
+            // 直接去详情页
+          } else {
+            const show = await showDialog('提示', '是否领取该红包？')
+            if (show) {
+              newMessage.in = true
+
+              item.modifyMessage({
+                cloudCustomData: JSON.stringify(newMessage)
+              })
+            }
+          }
+        } else {
+          newMessage.out = true
+          item.modifyMessage({
+            cloudCustomData: JSON.stringify(newMessage)
+          })
+          navigateTo('/pages/red-packet/details', {
+            id: data.id,
+            type: conversationType
+          })
+        }
+      })
+
+      return
       if (flow === 'in') {
         // 修改后的消息
         const newMessage = {

TUIKit/components/TUIChat/message-list/message-elements/message-custom.vue

@@ -86,6 +86,13 @@
           </text>
         </view>
         <text class="bottom-text">积分红包{{ customData.isOpen }}</text>
+        <!-- 需要处理报错 -->
+        <!-- <text>
+          {{
+            props.messageItem?.cloudCustomData &&
+            JSON.parse(props.messageItem?.cloudCustomData)
+          }}
+        </text> -->
       </view>
     </template>
     <template v-else>
@@ -95,7 +102,13 @@
 </template>
 
 <script lang="ts" setup>
-  import { watchEffect, ref } from '../../../../adapter-vue'
+  import {
+    watchEffect,
+    ref,
+    watch,
+    computed,
+    reactive
+  } from '../../../../adapter-vue'
   import {
     TUITranslateService,
     IMessageModel
@@ -123,7 +136,7 @@
     content: undefined
   })
 
-  console.log(props.messageItem, '获取到红包信息后更新UI')
+  // console.log(props.messageItem, '获取到红包信息后更新UI')
 
   const custom = ref()
   const message = ref<IMessageModel>()
@@ -142,6 +155,7 @@
       extension.value = JSONToObject(payload.extension)
     }
   })
+
   const openLink = (url: any) => {
     window.open(url)
   }

api/mall.js

@@ -26,11 +26,12 @@ export const getProductDetail = productId => {
 }
 
 /** 商品评价列表 */
-export const getProductCommentList = data => {
+export const getProductCommentList = (data, loading = true) => {
   return http({
     url: '/api/service/productReview/list',
     method: 'get',
-    data
+    data,
+    loading
   })
 }
 

api/tui-kit.js

@@ -59,6 +59,22 @@ export const receiveRedEnvelope = data => {
   })
 }
 
+/**
+ * 获取红包详情
+ * status  1:进行中,2:已领完,3:已过期,4:已撤销
+ * receivedCount 已领取红包个数
+ * receivedAmount 已领取红包金额
+ * hasReceived 当前用户是否已领取
+ * receiveList 领取列表
+ * luckyReceive 手气最佳
+ */
+export const getRedEnvelopeDetail = id => {
+  return http({
+    url: `/api/system/pointsRedPacket/${id}`,
+    method: 'get'
+  })
+}
+
 /**
  * 新增/修改主播
  * @param {*} data

components/nav-bar/nav-bar.vue

@@ -104,7 +104,6 @@
     rpxToPxRatio.value = sysInfo.windowWidth / 750
   })
 
-
   // 向外暴露方法
   defineExpose({
     updateScroll
@@ -204,4 +203,3 @@
     height: calc(var(--status-bar-height) + 44px);
   }
 </style>
-

components/register-app/register-app.vue

@@ -143,7 +143,6 @@
       ></cb-input>
       <cb-input
         v-model="formData.invitationCode"
-        type="number"
         icon="4"
         placeholder="请输入邀请码"
       ></cb-input>

pages.json

@@ -427,6 +427,13 @@
       "style": {
         "navigationBarTitleText": "添加好友"
       }
+    },
+    {
+      "path": "pages/red-packet/details",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "红包详情"
+      }
     }
   ],
   "globalStyle": {

pages/discover/punch.vue

@@ -200,7 +200,9 @@
     <view class="public-header—box">
       <view class="integral-box">
         <text>我的积分</text>
-        <text>{{ formatNumberWithWan(userInfo.totalPoints) }}</text>
+        <text style="font-size: 80rpx; margin-top: 30rpx;">
+          {{ formatNumberWithWan(userInfo.totalPoints) }}
+        </text>
       </view>
       <image
         src="/static/images/discover/calendar.png"

pages/mall/comment.vue

@@ -17,6 +17,7 @@
   const productId = ref('')
   const listData = ref([])
   const paging = ref(null)
+  const total = ref(0)
 
   const onTop = id => {
     formData.type = id
@@ -24,23 +25,31 @@
 
   const getList = async (pageNum, pageSize) => {
     try {
+      console.log(listData.value.length, '====')
       const res = await getProductCommentList({
         productId: productId.value,
         pageNum,
         pageSize
       })
+      total.value = res.total
       paging.value.complete(res.rows)
     } catch (err) {
       paging.value.complete(false)
     }
   }
 
+  const onImage = img => {
+    uni.previewImage({
+      urls: [img]
+    })
+  }
+
   onLoad(e => {
     productId.value = e.productId
   })
 
   onShow(() => {
-    getList()
+    getList(1, 15)
   })
 </script>
 
@@ -51,6 +60,7 @@
     :default-page-size="15"
     safe-area-inset-bottom
     use-safe-area-placeholder
+    :show-loading-more-no-more-view="total !== listData.length"
     :auto="false"
     @query="getList"
   >
@@ -69,7 +79,19 @@
 
       <!-- 卡片位置 -->
       <view v-for="item in listData" :key="item.id" class="card-box">
+        <uni-icons
+          v-if="item.isAnonymous"
+          type="contact-filled"
+          size="90rpx"
+          class="avatar"
+          style="
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+        ></uni-icons>
         <image
+          v-else
           :src="item.avatar || '/static/images/public/random1.png'"
           mode="scaleToFill"
           class="avatar"
@@ -77,7 +99,9 @@
         <!-- 右边 -->
         <view class="right-box">
           <view class="name_box">
-            <text class="name">{{ item.userName }}</text>
+            <text class="name">
+              {{ item.isAnonymous ? '匿名用户' : item.userName }}
+            </text>
             <uni-rate readonly :size="24" :value="item.rating" />
           </view>
           <view class="rate-box">
@@ -104,15 +128,16 @@
           <text class="content">
             {{ item.content }}
           </text>
-          <!-- <view class="img-box">
+          <view v-if="item.imageUrls" class="img-box">
             <image
-            v-for="item in 5"
+              :src="item.imageUrls"
-            src="/static/images/public/random1.png"
+              lazy-load
               mode="scaleToFill"
               class="bottom-img"
+              @click="onImage(item.imageUrls)"
             ></image>
           </view>
-        <view class="bottom-content">
+          <!-- <view class="bottom-content">
           <view class="name-box">
             <text>名字：</text>
             <text>内容</text>
@@ -128,7 +153,7 @@
         <cb-button
           @click="navigateTo('/pages/mall/add-comment', { productId })"
         >
-          确认添加
+          添加评论
         </cb-button>
       </bottom-view>
     </template>
@@ -139,7 +164,7 @@
   // @import './styles/public.scss';
   @import '@/styles/top-selector.scss';
   .comment-box {
-    padding: 32rpx 24rpx;
+    padding: 32rpx 24rpx 180rpx 24rpx;
     .card-box {
       margin-top: 36rpx;
       display: flex;

pages/mall/confirm-order.vue

@@ -119,6 +119,8 @@
       quantity: formData.num,
       skuId: formData.spec
     }
+    console.log(data, '===data===')
+    return
 
     tixian.value.close()
     const res = await addOrder(data)

pages/mall/detail.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { onLoad } from '@dcloudio/uni-app'
+  import { onLoad, onShow } from '@dcloudio/uni-app'
   import { getProductDetail, getProductCommentList } from '@/api/mall'
   import { ref, computed } from 'vue'
   import { navigateTo } from '@/utils/router'
@@ -17,11 +17,14 @@
 
   /** 评论数量获取 */
   const getComment = async productId => {
-    const res = await getProductCommentList({
+    const res = await getProductCommentList(
+      {
         productId,
         pageNum: 1,
         pageSize: 1
-    })
+      },
+      false
+    )
     commentNum.value = res.total
   }
 
@@ -50,7 +53,9 @@
     productId.value = e.productId
     groupId.value = e?.groupId || ''
     await getData(e.productId)
-    await getComment(e.productId)
+  })
+  onShow(() => {
+    getComment(productId.value)
   })
 </script>
 
@@ -64,13 +69,13 @@
           class="left-icon"
         ></image>
       </template>
-      <template #right>
+      <!-- <template #right>
         <image
           src="/static/images/public/share-icon.png"
           mode="heightFix"
           class="right-icon"
         ></image>
-      </template>
+      </template> -->
     </nav-bar>
     <!-- 顶部图片 -->
     <view class="top-img">

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>

stores/user.js

@@ -118,21 +118,27 @@ export const useUserStore = defineStore('user', () => {
       // #ifdef APP-PLUS
       await useLoginState().logout()
       // #endif
-      clearToken()
+      clearAllUserInfo()
-      removeUserInfoData()
-      removeSig()
-      removeFontSize()
       await showToast('退出登录成功', 'success')
       reLaunch('/pages/login/login')
     } catch (error) {
-      clearToken()
+      clearAllUserInfo()
-      removeUserInfoData()
-      removeSig()
-      removeFontSize()
       await showToast('退出登录成功', 'success')
       reLaunch('/pages/login/login')
     }
   }
+
+  /** 清空所有用户缓存 */
+  const clearAllUserInfo = async () => {
+    userInfo.value = null
+    tencentUserSig.value = null
+    fontSizeData.value = 26
+    clearToken()
+    removeUserInfoData()
+    removeSig()
+    removeFontSize()
+  }
+
   /** 刷新用户信息（如用户信息被修改） */
   const refreshUserInfo = async () => {
     const res = await getUserData()
@@ -159,6 +165,7 @@ export const useUserStore = defineStore('user', () => {
     userInfo,
     tencentUserSig,
     fontSizeData,
+    clearAllUserInfo,
     updateFontSize,
     logout,
     refreshUserInfo,

styles/login.scss

@@ -33,6 +33,7 @@
   padding: 120rpx 32rpx 66rpx;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   .title-left,
   .title-right {
     font-family: PingFang SC, PingFang SC;

utils/request.js

@@ -105,9 +105,9 @@ const handleError = (statusCode, data) => {
       content: '登录已过期，请重新登录',
       showCancel: false,
       success: async () => {
-        await useUserStore().logout()
+        await useUserStore().clearAllUserInfo()
         // 可选：跳转登录页
-        // uni.redirectTo({ url: '/pages/login/index' })
+        uni.redirectTo({ url: '/pages/login/index' })
         console.log('登录已过期,====')
       },
       complete: () => {