From 52422793f5c2148c43ba5d7a482b211cce34a10d Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 5 Sep 2025 19:11:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=AE=A1=E7=90=86=E5=91=98=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83):=20=E7=94=A8=E6=88=B7=E5=B1=95=E7=A4=BA=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=8F=8A=E5=9F=BA=E6=9C=AC=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/arrow.png      | Bin 0 -> 694 bytes
 src/views/AdminCenter.vue      | 360 ++++++++++++++++-----------------
 src/views/ItemDistribution.vue |   4 -
 3 files changed, 172 insertions(+), 192 deletions(-)
 create mode 100644 src/assets/icon/arrow.png

diff --git a/src/assets/icon/arrow.png b/src/assets/icon/arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..0101d2df9bee1e72902e5733c9b458079b570aec
GIT binary patch
literal 694
zcmV;n0!jUeP)<h;3K|Lk000e1NJLTq002k;002k`1^@s6RqeA!00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0!v9mK~#7F?b%IE
zB2f?r@Zw_!cmq%13B15KVcj%=C2{uS%mH)`0L;df#wDM<CeZ`P2|R%}kgy|QRiqR1
ze9|kc%H;n`jG^D|pI7y&UlRcU00000000000O%-@qWOIOcemS}^51>C-M*o3KrJ8+
z=bVH2m;aWK8jZ&9X0!Q1j+IFX2lDg%?^3CBwqCCv#^doZIi?m6dki0NXvfuRb?!MN
zwSdwz9q_LC(03%HN~Q8Jo6SziA<Z2`tyb%b|MeqFNBoyfr_*2LjOr<t3mf)(yvqh0
zWS^Wc2}q1aqZ95w8NKbE&@GqbB{^UgkdWpqO<MX;WO-Sy*L&7ufN4PDP)J;E&zsGr
z)#-Ge$%uJCVzF2ptyZi5G8=_!)*-nFD96qFig!}%B$G1habH@JGSy?gh{rL&)eg!X
z8UxDZaxY1eds5<R2jzGt-E!agA^j&@+ith2yU1lgqTB60Npp@YslJl94M<Klen%UI
z&ttplD^<xM35TyjWXe7X*SI&$NRhiHeQ0o$aQG(jf)u$bv4W}kMmrqgro;-~%ldq>
z4ak6t5-WJK@5^Ny8L5!5EX&TgeC{X`4nM!-aIVRaX^C+-DGz?b*czAG1&5=0V#S!1
z*!~;YpUBb+4~U5jisXRFDfU@7`>PE%;Ry8|R1l8o<yegNr{^JulZMZ|h9lHUY=4Cj
z3+KseI700d3qL&z38z-8C7!>}n|*qg_bTt<2-O}mnM}_4Mo=#1mzL8p0000000000
c004kTuZo5eNR2&f8UO$Q07*qoM6N<$f?Sg}%m4rY

literal 0
HcmV?d00001

diff --git a/src/views/AdminCenter.vue b/src/views/AdminCenter.vue
index 3c7ad95..883d7b7 100644
--- a/src/views/AdminCenter.vue
+++ b/src/views/AdminCenter.vue
@@ -1,6 +1,12 @@
 <template>
   <div class="fullPage">
-    <MobileHeader title="Admin Center" />
+    <MobileHeader title="Admin Center">
+      <template v-slot:extraFunction>
+        <div style="color: rgba(187, 146, 255, 1) !important; font-weight: 600" @click="send">
+          Send
+        </div>
+      </template>
+    </MobileHeader>
     <!-- 标签 -->
     <div
       style="
@@ -36,112 +42,116 @@
       ></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;
-            "
-          >
-            Send
-          </button>
+    <!-- BD列表 -->
+    <div style="padding: 10px" v-show="activeIndex == 0">
+      <div
+        v-for="(info, BDIndex) in BDList"
+        :key="BDIndex"
+        style="
+          box-shadow: 0 0 4px 0 #00000066;
+          padding: 10px;
+          border-radius: 10px;
+          margin-bottom: 10px;
+          transition: all 0.3s ease-out;
+        "
+        @click="showUserInfo(BDIndex)"
+      >
+        <!-- 基本信息 -->
+        <div style="display: flex; justify-content: space-between">
+          <div style="display: flex; align-items: center">
+            <img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
+            <div style="margin-left: 8px">
+              <div style="font-weight: 700">{{ info.name }}</div>
+              <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ info.id }}</div>
+            </div>
+          </div>
+          <div style="display: flex; align-items: center">
+            <img
+              src="../assets/icon/arrow.png"
+              alt=""
+              style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
+              :class="{ rotated: BDIndex == selectedBDIndex }"
+            />
+          </div>
         </div>
+        <!-- 展示信息 -->
+        <transition name="info-fade">
+          <div style="display: flex" v-show="BDIndex == selectedBDIndex">
+            <div style="flex: 1">
+              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Host</div>
+              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">{{ info.host }}</div>
+            </div>
+            <div style="flex: 1">
+              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Agency</div>
+              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">{{ info.agency }}</div>
+            </div>
+          </div>
+        </transition>
       </div>
     </div>
 
-    <!-- 弹窗 -->
-    <!-- 遮罩层 -->
-    <div
-      style="
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        z-index: 9999;
-        background-color: #00000080;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      "
-      v-show="dialogshow"
-      @click="closedPopup"
-    >
+    <!-- agency列表 -->
+    <div style="padding: 10px" v-show="activeIndex == 1">
       <div
         style="
-          padding: 20px;
-          background-color: white;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          border-radius: 20px;
+          box-shadow: 0 0 4px 0 #00000066;
+          padding: 10px;
+          border-radius: 10px;
+          margin-bottom: 10px;
+          transition: all 0.3s ease-out;
         "
-        @click.stop
       >
-        <img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
-        <div style="font-weight: 600; font-size: 16px; margin: 10px 0">
-          <span style="color: #00000080; margin-right: 10px">Validity:</span>
-          <span style="font-weight: 700">7day</span>
+        <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge for the month:</div>
+        <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">${{ rechargeDetail.total }}</div>
+        <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
+        <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+          ${{ rechargeDetail.lastMonth }}
         </div>
-        <div>
-          <input
-            type="text"
-            placeholder="Enter user ID"
-            style="
-              height: 36px;
-              width: 171px;
-              border-radius: 8px;
-              border: 0;
-              background-color: #f1f1f1b2;
-              padding: 8px;
-              margin-right: 4px;
-              font-size: 14px;
-              font-weight: 590;
-            "
-            v-model="targetUserId"
-          />
-          <button
-            style="
-              height: 36px;
-              width: 72px;
-              border-radius: 8px;
-              border: 0;
-              padding: 8px;
-              background-color: #bb92ff;
-              color: white;
-              font-size: 14px;
-              font-weight: 590;
-            "
-            @click="sendGoods"
-          >
-            Confirm
-          </button>
+      </div>
+      <div
+        v-for="(agency, aIndex) in agencyList"
+        :key="aIndex"
+        style="
+          box-shadow: 0 0 4px 0 #00000066;
+          padding: 10px;
+          border-radius: 10px;
+          margin-bottom: 10px;
+          transition: all 0.3s ease-out;
+        "
+        @click="showAgencyInfo(aIndex)"
+      >
+        <!-- 基本信息 -->
+        <div style="display: flex; justify-content: space-between">
+          <div style="display: flex; align-items: center">
+            <img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
+            <div style="margin-left: 8px">
+              <div style="font-weight: 700">{{ agency.name }}</div>
+              <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ agency.id }}</div>
+            </div>
+          </div>
+          <div style="display: flex; align-items: center">
+            <img
+              src="../assets/icon/arrow.png"
+              alt=""
+              style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
+              :class="{ rotated: aIndex == selectedAgencyIndex }"
+            />
+          </div>
         </div>
+
+        <!-- 展示信息 -->
+        <transition name="info-fade">
+          <div style="display: flex" v-show="aIndex == selectedAgencyIndex">
+            <div style="flex: 1">
+              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">This month:</div>
+              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">${{ agency.thisMonth }}</div>
+            </div>
+            <div style="flex: 1">
+              <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Last month:</div>
+              <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">${{ agency.lastMonth }}</div>
+            </div>
+          </div>
+        </transition>
       </div>
     </div>
   </div>
@@ -153,39 +163,31 @@ import { onMounted, ref, computed } from "vue";
 import { getAdminCenterList, giveProps } from "@/api/itemDistribution";
 import { searchUser } from "@/api/userInfo";
 import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 const tabList = ref([
   {
     id: 1,
-    name: "Frames",
+    name: "BD",
   },
   {
     id: 2,
-    name: "Vehicles",
-  },
-  {
-    id: 3,
-    name: "Chat Box",
-  },
-  {
-    id: 4,
-    name: "Theme",
+    name: "Recharge Agency",
   },
 ]);
 
 const activeIndex = ref(0);
-const currentTab = ref("Frames"); //选中名字
 const tabItems = ref([]); // 存储标签DOM引用
 
 // 选择标签
 const setActiveTab = (index) => {
   if (activeIndex.value != index) {
     console.log("切换标签");
-    productList.value = []; //置空商品列表
     activeIndex.value = index;
-    currentTab.value = tabList.value[index].name;
-
-    loadProps();
+    selectedBDIndex.value = -1;
+    selectedAgencyIndex.value = -1;
   }
 };
 
@@ -205,58 +207,53 @@ const underlineStyle = computed(() => {
   };
 });
 
-const targetUserId = ref("");
+const selectedBDIndex = ref(-1); //选中的BD用户下标
+const showUserInfo = (index) => {
+  selectedBDIndex.value = selectedBDIndex.value != index ? index : -1;
+}; //选中的BD用户
 
-const sendGoods = async () => {
-  console.log("赠送用户id：", targetUserId.value);
-  console.log("赠送商品：", selectedGoods.value);
+const selectedAgencyIndex = ref(-1); //选中的agency用户下标
+const showAgencyInfo = (index) => {
+  selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1;
+}; //选中的agency用户
 
-  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();
-      }
-    }
-  } catch (error) {
-    console.log("error:", error);
-    // 信息提示id有误
-    showWarning("User info not found");
-    throw error;
-  }
+const send = async () => {
+  router.push({ path: "/item-distribution" });
 };
 
-// 选中的标签
-const getPropsType = () => {
-  const typeMap = {
-    Frames: "AVATAR_FRAME",
-    Vehicles: "RIDE",
-    "Chat Box": "CHAT_BUBBLE",
-    Theme: "THEME",
-  };
-  return typeMap[currentTab.value];
-};
+const BDList = ref([
+  {
+    name: "BD1",
+    id: "123",
+    host: "111",
+    agency: "222",
+  },
+  {
+    name: "BD2",
+    id: "456",
+    host: "333",
+    agency: "444",
+  },
+]); // BD列表
+const agencyList = ref([
+  {
+    name: "agency1",
+    id: "666",
+    thisMonth: "112",
+    lastMonth: "223",
+  },
+  {
+    name: "agency2",
+    id: "777",
+    thisMonth: "334",
+    lastMonth: "445",
+  },
+]); // 代理列表
 
-// 获取商品列表
-const loadProps = async () => {
-  try {
-    const params = {
-      propsType: getPropsType(),
-      currencyType: "GOLD",
-    };
-    const response = await getAdminCenterList(params);
-    console.log("response:", response);
-    productList.value = response.body;
-  } catch (error) {
-    throw error;
-  }
-};
+const rechargeDetail = ref({
+  total: "123456",
+  lastMonth: "12345",
+}); //代理消费金额
 
 onMounted(() => {
   console.log("onMounted");
@@ -264,34 +261,7 @@ onMounted(() => {
   if (tabItems.value.length > 0) {
     underlineStyle.value; // 触发计算属性更新
   }
-  loadProps();
 });
-
-// 虚拟商品数据
-const productList = ref([]);
-
-// 选中商品
-const selectedGoods = ref({});
-
-// 获取本地图片
-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 = () => {
-  selectedGoods.value = {};
-  targetUserId.value = "";
-  dialogshow.value = false;
-};
 </script>
 
 <style scoped>
@@ -304,7 +274,21 @@ const closedPopup = () => {
   background-repeat: no-repeat;
 }
 
-.tab-item .active {
-  color: #3498db; /* 激活态文字颜色 */
+.info-fade-enter-from,
+.info-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.info-fade-enter-active {
+  transition: all 0.5s ease-out;
+}
+
+.info-fade-leave-active {
+  transition: all 0.5s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.rotated {
+  transform: rotate(90deg);
 }
 </style>
diff --git a/src/views/ItemDistribution.vue b/src/views/ItemDistribution.vue
index 3c7ad95..d721a3a 100644
--- a/src/views/ItemDistribution.vue
+++ b/src/views/ItemDistribution.vue
@@ -303,8 +303,4 @@ const closedPopup = () => {
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
-
-.tab-item .active {
-  color: #3498db; /* 激活态文字颜色 */
-}
 </style>