From 94fb8b77f20791cc6f29146fa4e4b3a76310cf5a Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Tue, 31 Mar 2026 14:10:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=B0=E9=A1=B5=E9=9D=A2):=20=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0BD=E7=9A=84=E5=A2=9E=E9=80=81=E7=A4=BC=E7=89=A9?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bdCenter.js                     |  38 +++
 src/router/index.js                     |   6 +
 src/utils/permissionManager.js          |   1 +
 src/views/BDCenter/ItemDistribution.vue | 392 ++++++++++++++++++++++++
 4 files changed, 437 insertions(+)
 create mode 100644 src/views/BDCenter/ItemDistribution.vue

diff --git a/src/api/bdCenter.js b/src/api/bdCenter.js
index a09f59a..de734a9 100644
--- a/src/api/bdCenter.js
+++ b/src/api/bdCenter.js
@@ -95,3 +95,41 @@ export const getBdHistoryMore = async (billBelong) => {
     throw error
   }
 }
+
+// BD 可赠送道具详情
+export const getBDPropsList = async (params) => {
+  try {
+    const response = await get(
+      `/sys/bd/props?propsType=${params.propsType}&currencyType=${params.currencyType}`,
+    )
+    return response
+  } catch (error) {
+    console.error('Failed to fetch admin center list:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// 是否有指定道具类型的权限
+export const hasSendGiftsPermission = async (propsType) => {
+  try {
+    const response = await get(`/sys/bd/own-permission?propsType=${propsType}`)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch has send gifts permission:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
+
+// BD 赠送道具.
+export const giveProps = async (data) => {
+  try {
+    const response = await post('/sys/bd/send', data)
+    return response
+  } catch (error) {
+    console.error('Failed to fetch give props:', error)
+    console.error('error:' + error.response.errorMsg)
+    throw error
+  }
+}
diff --git a/src/router/index.js b/src/router/index.js
index b1d9d2c..850f9c3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -117,6 +117,12 @@ const router = createRouter({
       component: () => import('../views/BDCenter/policy.vue'),
       meta: { requiresAuth: true },
     },
+    {
+      path: '/bd-item-distribution',
+      name: 'bd-item-distribution',
+      component: () => import('../views/BDCenter/ItemDistribution.vue'),
+      meta: { requiresAuth: true },
+    },
 
     // 金币代理页面
     {
diff --git a/src/utils/permissionManager.js b/src/utils/permissionManager.js
index 1c0ac8c..104b800 100644
--- a/src/utils/permissionManager.js
+++ b/src/utils/permissionManager.js
@@ -114,6 +114,7 @@ export const ROLE_PERMISSIONS = {
     PAGES.EXCHANGE, // 兑换功能
     PAGES.MESSAGE, // 消息功能
     INVITATION_PAGES.INVITE_AGENCY, //邀请代理
+    '/bd-item-distribution', //赠送商品页面
     '/team-member',
     '/history-salary',
     '/available-income', //操作收益页
diff --git a/src/views/BDCenter/ItemDistribution.vue b/src/views/BDCenter/ItemDistribution.vue
new file mode 100644
index 0000000..9eb577a
--- /dev/null
+++ b/src/views/BDCenter/ItemDistribution.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="fullPage">
+    <div class="bg">
+      <!-- 顶部导航 -->
+      <GeneralHeader
+        :showLanguageList="true"
+        :title="t('item_distribution')"
+        color="black"
+        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      />
+
+      <!-- 标签 -->
+      <div
+        style="
+          display: flex;
+          justify-content: space-around;
+
+          background-color: transparent;
+          position: relative;
+        "
+      >
+        <div
+          v-for="(item, index) in tabList"
+          :key="index"
+          style="font-size: 1.3em; padding: 10px 0; flex: 1; text-align: center"
+          class="tab-item"
+          :class="activeIndex == index ? 'tabName-active' : 'tabName'"
+          ref="tabItems"
+          @click="setActiveTab(index)"
+        >
+          {{ t(item.name) }}
+        </div>
+        <!-- 下划线元素 -->
+        <div
+          style="width: 15px; height: 3px; background-color: #bb92ff"
+          :style="underlineStyle"
+        ></div>
+      </div>
+
+      <!-- 商品列表 -->
+      <div
+        style="
+          width: 100%;
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 12px;
+          padding: 15px;
+        "
+      >
+        <div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
+          <div
+            style="
+              background-color: white;
+              border-radius: 10px;
+              box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+            "
+          >
+            <img :src="product.cover" alt="" style="width: 60%; margin: 10px 0" />
+            <button
+              style="
+                background-color: #bb92ff;
+                color: white;
+                margin-bottom: 10px;
+                border: 0;
+                border-radius: 20px;
+                padding: 5px 10px;
+              "
+            >
+              {{ t('send') }}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 弹窗 -->
+      <!-- 遮罩层 -->
+      <maskLayer :maskLayerShow="dialogshow" @click="closedPopup">
+        <div
+          style="
+            padding: 20px;
+            background-color: white;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            border-radius: 20px;
+            margin: 20% 5%;
+          "
+          @click.stop
+        >
+          <img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
+          <div style="font-weight: 600; margin: 10px 0">
+            <span style="color: #00000080; margin-right: 10px">{{ t('validity') }}:</span>
+            <span style="font-weight: 700; color: #000">{{ validityPeriod }}{{ t('day') }}</span>
+          </div>
+          <div
+            style="
+              width: 90%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              gap: 4px;
+            "
+          >
+            <input
+              type="text"
+              :placeholder="t('enter_user_id_placeholder')"
+              style="
+                flex: 1;
+                min-width: 0;
+                align-self: stretch;
+
+                border-radius: 8px;
+                border: 0;
+                outline: none;
+                background-color: #f1f1f1b2;
+                padding: 8px;
+                margin-right: 4px;
+                font-size: 1em;
+                font-weight: 590;
+              "
+              v-model="targetUserId"
+            />
+            <button
+              style="
+                width: auto;
+                min-width: 0;
+                align-self: stretch;
+
+                border-radius: 8px;
+                border: 0;
+                padding: 8px;
+                color: white;
+                font-size: 1em;
+                font-weight: 590;
+              "
+              :style="{ backgroundColor: confirmClick ? '#bb92ff' : '#00000080' }"
+              @click="sendGoods"
+            >
+              {{ t('confirm') }}
+            </button>
+          </div>
+        </div>
+      </maskLayer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+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 { searchUser } from '@/api/userInfo'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const { t, locale } = useI18n()
+
+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') //选中名字
+const tabItems = ref([]) // 存储标签DOM引用
+
+const confirmClick = ref(true)
+
+// 选择标签
+const setActiveTab = (index) => {
+  if (activeIndex.value != index) {
+    console.log('切换标签')
+    productList.value = [] //置空商品列表
+    activeIndex.value = index
+    currentTab.value = tabList.value[index].name
+
+    loadProps()
+  }
+}
+
+// 计算下划线样式
+const underlineStyle = computed(() => {
+  console.log('计算属性')
+
+  // 访问 locale.value 使其成为依赖项
+  const currentLocale = locale.value
+  console.log('当前语言:', currentLocale)
+
+  if (tabItems.value.length === 0) return {} //没有这个元素
+  const activeTab = tabItems.value[activeIndex.value]
+  console.log('选中元素的左边距', activeTab.offsetLeft)
+
+  return {
+    position: 'absolute',
+    left: `${activeTab.offsetLeft + activeTab.offsetWidth / 2 - 15 / 2}px`,
+    bottom: '0',
+    transition: 'left 0.3s ease', // 平滑过渡
+  }
+})
+
+const targetUserId = ref('')
+
+// 检查是否有赠送某个栏目商品的资格
+const getHasSendVIPPermission = async (propsType) => {
+  const response = await hasSendGiftsPermission(propsType)
+  console.log('response:', response)
+  return response.body
+}
+
+const sendGoods = async () => {
+  if (confirmClick.value) {
+    confirmClick.value = false
+
+    console.log('赠送用户id：', targetUserId.value)
+    console.log('赠送商品：', selectedGoods.value)
+
+    try {
+      const targetUserInfo = await searchUser(targetUserId.value)
+      console.log('targetUserInfo:', targetUserInfo)
+      if (targetUserInfo.status && targetUserInfo.body) {
+        const data = {
+          propsId: selectedGoods.value.id,
+          acceptUserId: targetUserInfo.body.id,
+        }
+        const res = await giveProps(data)
+        if (res.errorCode == 0 && res.status) {
+          closedPopup()
+          showSuccess(t('gift_delivery_successful'))
+        } else {
+          confirmClick.value = true
+        }
+      } else {
+        confirmClick.value = true
+      }
+    } catch (error) {
+      console.log('error:', error)
+      // 信息提示id有误
+      showWarning(error.response.errorMsg)
+      confirmClick.value = true
+      throw error
+    }
+  }
+}
+
+// 选中的标签
+const getPropsType = () => {
+  const typeMap = {
+    frames: 'AVATAR_FRAME',
+    vehicles: 'RIDE',
+    chat_box: 'CHAT_BUBBLE',
+    theme: 'THEME',
+    vip: 'NOBLE_VIP',
+  }
+  return typeMap[currentTab.value]
+}
+
+// 获取商品列表
+const loadProps = async () => {
+  try {
+    const params = {
+      propsType: getPropsType(),
+      currencyType: 'GOLD',
+    }
+    const response = await getBDPropsList(params)
+    console.log('response:', response)
+    productList.value = response.body
+  } catch (error) {
+    throw error
+  }
+}
+
+// 虚拟商品数据
+const productList = ref([])
+
+// 选中商品
+const selectedGoods = ref({})
+
+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) => {
+  console.log('product:', product)
+  selectedGoods.value = product
+  dialogshow.value = true
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  confirmClick.value = true
+  selectedGoods.value = {}
+  targetUserId.value = ''
+  dialogshow.value = false
+}
+
+onMounted(() => {
+  console.log('onMounted')
+
+  // 检查是否有赠送VIP的资格
+  if (getHasSendVIPPermission('NOBLE_VIP')) {
+    tabList.value.push({
+      id: 3,
+      name: 'vip',
+    })
+  }
+
+  if (tabItems.value.length > 0) {
+    underlineStyle.value // 触发计算属性更新
+  }
+  loadProps()
+})
+</script>
+
+<style scoped>
+* {
+  color: black;
+}
+
+.fullPage {
+  background-color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url(../../assets/images/Azizi/secondBg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.tabName {
+  color: #00000066;
+}
+
+.tabName-active {
+  color: black;
+  font-weight: 500;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  * {
+    font-size: 32px;
+  }
+}
+</style>