消息红包领取

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

@@ -25,7 +25,9 @@
           />
           <main class="message-body" @click.stop>
             <div
-              v-if="message.flow === 'in' && message.conversationType === 'GROUP'"
+              v-if="
+                message.flow === 'in' && message.conversationType === 'GROUP'
+              "
               class="message-body-nick-name"
             >
               {{ props.content.showName }}
@@ -55,7 +57,10 @@
                         message.type === TYPES.MSG_VIDEO) &&
                       message.hasRiskContent
                     "
-                    :class="['message-risk-replace', !isPC && 'message-risk-replace-h5']"
+                    :class="[
+                      'message-risk-replace',
+                      !isPC && 'message-risk-replace-h5',
+                    ]"
                     :src="riskImageReplaceUrl"
                   />
                   <template v-else>
@@ -63,7 +68,10 @@
                   </template>
                 </div>
                 <!-- Risk Content Tips -->
-                <div v-if="message.hasRiskContent" class="content-has-risk-tips">
+                <div
+                  v-if="message.hasRiskContent"
+                  class="content-has-risk-tips"
+                >
                   {{ riskContentText }}
                 </div>
               </div>
@@ -141,6 +149,7 @@ import { shallowCopyMessage } from "../../utils/utils";
 import { isPC } from "../../../../utils/env";
 import { watchEffect, ref } from "../../../../adapter-vue";
 import { isUrl, JSONToObject } from "../../../../utils/index";
+import moment from "moment";
 interface IProps {
   messageItem: IMessageModel;
   content?: any;
@@ -154,7 +163,11 @@ interface IProps {
 interface IEmits {
   (e: "resendMessage"): void;
   (e: "blinkMessage", messageID: string): void;
-  (e: "setReadReceiptPanelVisible", visible: boolean, message?: IMessageModel): void;
+  (
+    e: "setReadReceiptPanelVisible",
+    visible: boolean,
+    message?: IMessageModel
+  ): void;
   (
     e: "changeSelectMessageIDList",
     options: { type: "add" | "remove" | "clearAll"; messageID: string }
@@ -171,20 +184,62 @@ watchEffect(() => {
   isCustom.value = JSONToObject(payload.data);
 });
 function messageClass(message) {
-  let businessId = message._message.payload.data
-    ? JSON.parse(message._message.payload.data).businessID
-    : "";
-  console.log(businessId);
-
-  if (message.flow === "out" && businessId != "red_envelope_message") {
-    return "content-out";
-  } else if (message.flow === "in" && businessId != "red_envelope_message") {
-    return "content-in";
-  } else if (message.flow === "out" && businessId == "red_envelope_message") {
-    return "contentCustom-out";
-  } else if (message.flow === "in" && businessId == "red_envelope_message") {
-    return "contentCustom-in";
+  // 从消息负载数据中提取 businessId
+  const businessId =
+    message._message &&
+    message._message.payload &&
+    message._message.payload.data
+      ? JSON.parse(message._message.payload.data).businessID
+      : "";
+  const msgtime =
+    message._message &&
+    message._message.payload &&
+    message._message.payload.data
+      ? JSON.parse(message._message.payload.data).redEnvelopeExpireTime
+      : "";
+
+  let expireTime = moment(msgtime).format("YYYY-MM-DD");
+  let expired = false;
+  const now = moment();
+  if (expireTime && now.isAfter(expireTime)) {
+    expired = true;
+  } else if (expireTime) {
+    expired = false;
+  }
+
+  // 判断消息流向是 "out"
+  if (message.flow === "out") {
+    // 判断 businessId 是否为红包消息相关
+    if (businessId === "red_envelope_message") {
+      if (expired) {
+        return "contentCustom-in-lq";
+      } else {
+        return "contentCustom-in";
+      }
+    } else if (businessId === "red_envelope_message_gq") {
+      return "contentCustom-in-lq";
+    } else {
+      return "content-out";
+    }
   }
+  // 判断消息流向是 "in"
+  else if (message.flow === "in") {
+    // 判断 businessId 是否为红包消息相关
+    if (businessId === "red_envelope_message") {
+      if (expired) {
+        return "contentCustom-in-lq";
+      } else {
+        return "contentCustom-in";
+      }
+    } else if (businessId === "red_envelope_message_gq") {
+      return "contentCustom-in-lq";
+    } else {
+      return "content-in";
+    }
+  }
+
+  // 如果消息流向不是 "in" 或 "out"，返回空字符串
+  return "";
 }
 
 const props = withDefaults(defineProps<IProps>(), {
@@ -243,7 +298,9 @@ const riskContentText = computed<string>(() => {
     content += TUITranslateService.t("TUIChat.发送失败");
   } else {
     content += TUITranslateService.t(
-      message.value.type === TYPES.MSG_AUDIO ? "TUIChat.无法收听" : "TUIChat.无法查看"
+      message.value.type === TYPES.MSG_AUDIO
+        ? "TUIChat.无法收听"
+        : "TUIChat.无法查看"
     );
   }
   return content;
@@ -293,6 +350,18 @@ function openReadUserPanel() {
   box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(226, 226, 226, 0.23);
   border-radius: 0px 20px 20px 20px;
 }
+
+.contentCustom-in-lq {
+  opacity: 0.5;
+  height: 100px;
+  // background: linear-gradient(225deg, #f74d30 0%, #ff7633 100%);
+  background: url("../../../../../static/img/hbbj.png") no-repeat;
+  background-size: 100% 100%;
+  padding: 16px 20px !important;
+  display: block !important;
+  box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(226, 226, 226, 0.23);
+  border-radius: 0px 20px 20px 20px;
+}
 :not(not) {
   display: flex;
   flex-direction: column;

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

@@ -2,16 +2,27 @@
   <div class="custom">
     <template v-if="isCustom.businessID === 'red_envelope_message'">
       <div class="evaluate" @click="lqhb(isCustom)">
-        <div class="evaluatered">通用红包</div>
+        <div class="evaluatered">
+          {{ titleImpl(isCustom.redEnvelopeExpireTime) }}
+        </div>
         <div class="time">
-          {{
+          {{ timeImpl(isCustom.redEnvelopeExpireTime) }}
+          <!-- {{
             isCustom.redEnvelopeExpireTime
-              ? $moment(isCustom.redEnvelopeExpireTime).format("YYYY-MM-DD") + "过期"
+              ? $moment(isCustom.redEnvelopeExpireTime).format("YYYY-MM-DD") +
+                "过期"
               : ""
-          }}
+          }} -->
         </div>
       </div>
     </template>
+    <template v-else-if="isCustom.businessID === 'red_envelope_message_gq'">
+      <div class="evaluate">
+        <div class="evaluatered">通用红包</div>
+        <div class="time">已领取</div>
+      </div>
+    </template>
+
     <template v-else-if="isCustom.businessID === 'order'">
       <div class="evaluate">
         <div @click="product(isCustom)">
@@ -41,6 +52,7 @@
 
 <script lang="ts" setup>
 import { watchEffect, ref } from "../../../../adapter-vue";
+import { Toast, TOAST_TYPE } from "../../../common/Toast/index";
 import {
   TUITranslateService,
   IMessageModel,
@@ -50,8 +62,8 @@ import { isUrl, JSONToObject } from "../../../../utils/index";
 import { CHAT_MSG_CUSTOM_TYPE } from "../../../../constant";
 import { ICustomMessagePayload } from "../../../../interface";
 import Icon from "../../../common/Icon.vue";
-import star from "../../../../assets/icon/star-light.png";
 import * as mesApi from "@/api/message/index";
+import moment from "moment";
 import TUIChatConfig from "../../config";
 const featureConfig = TUIChatConfig.getFeatureConfig();
 interface Props {
@@ -85,13 +97,74 @@ watchEffect(() => {
 const openLink = (url: any) => {
   window.open(url);
 };
-const lqhb = (record) => {
-  console.log(record);
-  let aa = record;
-  aa.businessID = "red_envelope_message_gq";
-  if (!message.value) return;
-  const messageModel = TUIStore.getMessageModel(message.value.ID);
-  messageModel.modifyMessage(aa);
+function titleImpl(time) {
+  if (time) {
+    let expireTime = moment(time).format("YYYY-MM-DD");
+    const now = moment();
+    if (expireTime && now.isAfter(expireTime)) {
+      return "已过期";
+    } else if (expireTime) {
+      return "通用红包";
+    }
+    return "";
+  } else {
+    return "";
+  }
+}
+function timeImpl(time) {
+  if (time) {
+    let expireTime = moment(time).format("YYYY-MM-DD");
+    const now = moment();
+    console.log("oldTime", expireTime);
+    if (expireTime && now.isAfter(expireTime)) {
+      return expireTime + "过期不可领取";
+    } else if (expireTime) {
+      return expireTime + "过期";
+    }
+    return "";
+  } else {
+    return "";
+  }
+}
+const lqhb = async (record) => {
+  console.log("lqhb 函数开始执行");
+  console.log("record.recordId:", record.recordId);
+  // 检查过期时间
+  const expireTime = record.redEnvelopeExpireTime
+    ? moment(record.redEnvelopeExpireTime).format("YYYY-MM-DD")
+    : null;
+  const now = moment();
+  const isOk = expireTime && !now.isAfter(expireTime);
+  if (isOk) {
+    try {
+      console.log("开始请求接口");
+      let res = await mesApi.default.receiveLq(record.recordId);
+      console.log("接口响应:", res);
+      if (res.code == 200) {
+        if (res.data) {
+          let text = props.messageItem.payload.data;
+          let msg = JSON.parse(text);
+          msg.businessID = "red_envelope_message_gq";
+          props.messageItem.payload.data = JSON.stringify(msg);
+          if (!message.value) return;
+          const messageModel = TUIStore.getMessageModel(message.value.ID);
+          messageModel.modifyMessage(props.messageItem.payload.data);
+          Toast({
+            message: TUITranslateService.t("红包领取成功,请在钱包余额查看！"),
+            type: TOAST_TYPE.SUCCESS,
+          });
+        }
+      } else {
+        Toast({
+          message: TUITranslateService.t("红包领取失败,请联系客服反馈！"),
+          type: TOAST_TYPE.ERROR,
+        });
+      }
+    } catch (error) {
+      console.error("接口请求出错:", error);
+    }
+  }
+  console.log("lqhb 函数执行结束");
 };
 
 const product = (record) => {
@@ -108,12 +181,14 @@ const product = (record) => {
 </script>
 <style lang="scss" scoped>
 @import "../../../../assets/styles/common";
+
 .evaluatered {
   position: relative;
   left: 40px;
   font-size: 20px;
   color: #fff;
 }
+
 .time {
   letter-spacing: 0.1em;
   position: relative;
@@ -124,15 +199,18 @@ const product = (record) => {
   text-align: left;
   font-style: normal;
 }
+
 .name {
   font-weight: bold;
   font-size: 16px;
   margin-right: 10px;
 }
+
 .value {
   font-size: 16px;
   margin-right: 10px;
 }
+
 a {
   color: #679ce1;
 }
@@ -154,6 +232,7 @@ a {
   .evaluate {
     min-width: 240px;
     width: 240px;
+
     .left {
       display: flex;
       flex-direction: row;
@@ -163,6 +242,7 @@ a {
       border-radius: 15px;
       padding: 15px;
     }
+
     .right {
       display: flex;
       flex-direction: column;
@@ -172,6 +252,7 @@ a {
       justify-content: center;
       line-height: 25px;
       margin-left: 10px;
+
       .label {
         font-weight: bold;
         font-size: 14px;
@@ -183,6 +264,7 @@ a {
         white-space: nowrap;
       }
     }
+
     ul {
       display: flex;
       padding: 10px 0;

api/message/index.js

@@ -2,8 +2,6 @@ import Request from '../request';
 
 let request = Request.http;
 
-
-
 export default {
     getSupplyDetails(param) {
         return request({
@@ -144,6 +142,17 @@ export default {
             data: param
         })
     },
+
+    /**
+     * 红包
+     */
+
+    receiveLq(param) {
+        return request({
+            url: '/user/app/v1/store/marketing/receive/' + param,
+            method: 'get',
+        })
+    },
 }
 
 

app.config.js

@@ -10,15 +10,15 @@ export const requestConfig = {
 	/**
 	 * 开发环境请求的根路径
 	 */
-	devBaseUrl: 'https://app.sxdirectpurchase.com/api',
+	// devBaseUrl: 'https://app.sxdirectpurchase.com/api',
 	// devBaseUrl: 'https://admin-test.sxdirectpurchase.com/api',
-	// devBaseUrl: 'http://192.168.1.9:9001/api',
+	devBaseUrl: 'http://192.168.3.107:9001/api',
 
 	/**
 	 * 测试环境请求的根路径
 	 */
-	// testBaseUrl: 'http://192.168.1.9:9001/api',//中亿云
-	testBaseUrl: 'https://app.sxdirectpurchase.com/api',//WIFI6
+	testBaseUrl: 'http://192.168.3.107:9001/api',//中亿云
+	// testBaseUrl: 'https://app.sxdirectpurchase.com/api',//WIFI6
 	// testBaseUrl: 'https://admin-test.sxdirectpurchase.com/api',
 
 

manifest.json

@@ -5,6 +5,7 @@
     "versionName" : "1.0.0",
     "versionCode" : "100",
     "transformPx" : false,
+	"sassImplementationName": "node-sass",
     /* 5+App特有相关 */
     "app-plus" : {
         "usingComponents" : true,