feat(BD的增送礼物页): 对接接口

src/views/BDCenter/ItemDistribution.vue

@@ -32,6 +32,7 @@
         </div>
         <!-- 下划线元素 -->
         <div
+          v-show="tabList.length > 0"
           style="width: 15px; height: 3px; background-color: #bb92ff"
           :style="underlineStyle"
         ></div>
@@ -153,7 +154,12 @@ import { onMounted, ref, computed } from 'vue'
 import { showWarning, showSuccess } from '@/utils/toast.js'
 import { useI18n } from 'vue-i18n'
 
-import { getBDPropsList, giveProps, hasSendGiftsPermission } from '@/api/bdCenter'
+import {
+  getSendGiftsPermissionList,
+  getBDPropsList,
+  giveProps,
+  hasSendGiftsPermission,
+} from '@/api/bdCenter'
 import { searchUser } from '@/api/userInfo'
 
 import GeneralHeader from '@/components/GeneralHeader.vue'
@@ -161,24 +167,7 @@ import maskLayer from '@/components/MaskLayer.vue'
 
 const { t, locale } = useI18n()
 
-const tabList = ref([
+const tabList = ref([])
-  {
-    id: 1,
-    name: 'frames',
-  },
-  {
-    id: 2,
-    name: 'vehicles',
-  },
-  // {
-  //   id: 3,
-  //   name: 'chat_box',
-  // },
-  // {
-  //   id: 4,
-  //   name: 'theme',
-  // },
-])
 
 const activeIndex = ref(0)
 const currentTab = ref('frames') //选中名字
@@ -220,13 +209,37 @@ const underlineStyle = computed(() => {
 
 const targetUserId = ref('')
 
-// 检查是否有赠送某个栏目商品的资格
+// 获取赠送礼物的类型列表
-const getHasSendVIPPermission = async (propsType) => {
+const getSendGiftsPermissions = async () => {
-  const response = await hasSendGiftsPermission(propsType)
+  const response = await getSendGiftsPermissionList()
   console.log('response:', response)
-  return response.body
+
+  const permissions = response.body
+
+  const tabs = []
+  const hasVip = permissions.some((p) => p.startsWith('NOBLE_VIP'))
+
+  if (permissions.includes('AVATAR_FRAME')) {
+    tabs.push({ id: 1, name: 'frames' })
+  }
+  if (permissions.includes('RIDE')) {
+    tabs.push({ id: 2, name: 'vehicles' })
+  }
+  if (hasVip) {
+    tabs.push({ id: 3, name: 'vip' })
+  }
+
+  tabList.value = tabs
+
+  if (tabs.length > 0) {
+    activeIndex.value = 0
+    currentTab.value = tabs[0].name
+  }
+
+  return tabs
 }
 
+// 赠送礼物
 const sendGoods = async () => {
   if (confirmClick.value) {
     confirmClick.value = false
@@ -267,8 +280,6 @@ const getPropsType = () => {
   const typeMap = {
     frames: 'AVATAR_FRAME',
     vehicles: 'RIDE',
-    chat_box: 'CHAT_BUBBLE',
-    theme: 'THEME',
     vip: 'NOBLE_VIP',
   }
   return typeMap[currentTab.value]
@@ -299,11 +310,6 @@ const validityPeriod = computed(() => {
   return currentTab.value == 'VIP' ? '3' : '7'
 })
 
-// 获取本地图片
-const getImageUrl = (imgUrl) => {
-  return new URL(imgUrl, import.meta.url).href
-}
-
 const dialogshow = ref(false)
 // 展示弹窗
 const showSendDialog = (product) => {
@@ -320,21 +326,17 @@ const closedPopup = () => {
   dialogshow.value = false
 }
 
-onMounted(() => {
+onMounted(async () => {
   console.log('onMounted')
-
+  await getSendGiftsPermissions()
-  // 检查是否有赠送VIP的资格
-  if (getHasSendVIPPermission('NOBLE_VIP')) {
-    tabList.value.push({
-      id: 3,
-      name: 'vip',
-    })
-  }
 
   if (tabItems.value.length > 0) {
-    underlineStyle.value // 触发计算属性更新
+    underlineStyle.value
+  }
+
+  if (tabList.value.length > 0) {
+    loadProps()
   }
-  loadProps()
 })
 </script>