评论商品接口有问题

pages/my-index/customer-service/index.vue

@@ -1,17 +1,48 @@
 <script setup>
   import { navigateTo } from '@/utils/router'
-  // import { onLoad } from '@dcloudio/uni-app'
-  // import { ref } from 'vue'
-  // import { getUserServiceList } from '@/api/my-index'
+  import TUIChatEngine, {
+    TUIConversationService,
+    TUIFriendService
+  } from '@tencentcloud/chat-uikit-engine-lite'
+  import { TUIGlobal } from '@tencentcloud/universal-api'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { ref } from 'vue'
+  import { getUserServiceFree } from '@/api/my-index'
 
-  // const list = ref([])
-  // const getList = async () => {
-  //   const res = await getUserServiceList()
-  //   list.value = res.data
-  // }
-  // onLoad(() => {
-  //   getList()
-  // })
+  const customerData = ref({})
+  const getList = async () => {
+    const res = await getUserServiceFree()
+    customerData.value = res?.data || {}
+  }
+
+  const handleSwitchConversation = async () => {
+    // 在这里可以添加提交验证信息的逻辑
+    let source = 'AddSource_Type_Web' // 来源渠道
+    // #ifdef H5
+    source = 'AddSource_Type_H5'
+    // #endif
+
+    // 判断是否为 App（5+ App）
+    // #ifdef APP-PLUS
+    source = 'AddSource_Type_App'
+    // #endif
+    await TUIFriendService.addFriend({
+      to: customerData.value.imUserId,
+      source,
+      remark: customerData.value.nickname,
+      type: TUIChatEngine.TYPES.SNS_ADD_TYPE_BOTH
+    })
+    TUIConversationService.switchConversation(
+      `C2C${customerData.value.imUserId}`
+    )
+    TUIGlobal?.navigateTo({
+      url: `/TUIKit/components/TUIChat/index?id=${customerData.value.id}`
+    })
+  }
+
+  onLoad(() => {
+    getList()
+  })
 </script>
 
 <template>
@@ -28,7 +59,13 @@
       >
         第三方客服
       </button>
-      <!-- <button>APP客服</button> -->
+      <button
+        v-if="customerData?.imUserId"
+        class="btn"
+        @click="handleSwitchConversation"
+      >
+        APP客服
+      </button>
     </view>
   </view>
 </template>
@@ -70,16 +107,16 @@
         background: linear-gradient(0deg, #00d993 0%, #00d9c5 100%);
         border-radius: 16rpx;
         box-sizing: border-box;
-        &:nth-child(2) {
-          background: #ffffff;
-          color: #00d993;
-          border: 2rpx solid #00d993;
-        }
-
         &::after {
           display: none;
         }
       }
+
+      .btn {
+        background: #ffffff;
+        color: #00d993;
+        border: 2rpx solid #00d993;
+      }
     }
   }
 </style>