Merge remote-tracking branch 'origin/master'

src/api/pay.js

@@ -33,7 +33,6 @@ export const payPlaceAnOrderRecharge = async (data) => {
     return response;
   } catch (error) {
     console.error("Failed to fetch get pay application:", error);
-    onsole.error("error:" + error.response.errorMsg);
     throw error;
   }
 };

src/router/index.js

@@ -185,6 +185,12 @@ const router = createRouter({
       component: () => import("../views/RechargeFreightAgent.vue"),
       meta: { requiresAuth: true },
     },
+    {
+      path: "/pay-result",
+      name: "pay-result",
+      component: () => import("../views/payResult.vue"),
+      meta: { requiresAuth: true },
+    },
   ],
 });
 

src/utils/index.js

@@ -0,0 +1,29 @@
+/**
+ * 合并对象.
+ */
+export function mergeObject(source, target) {
+  if (!source && !target) {
+    return {};
+  }
+
+  if (!source) {
+    return !!target && isObject(target) ? deepClone(target) : {};
+  }
+
+  if (!target) {
+    return !!source && isObject(source) ? deepClone(source) : {};
+  }
+
+  const resultObj = deepClone(source);
+  for (const key in target) {
+    const sourceObj = resultObj[key];
+    const targetObj = target[key];
+
+    if (!isObject(sourceObj) || !isObject(targetObj)) {
+      resultObj[key] = deepClone(target[key]);
+      continue;
+    }
+    resultObj[key] = mergeObject(sourceObj, targetObj);
+  }
+  return resultObj;
+}

src/utils/payment.js

@@ -0,0 +1,65 @@
+import { mergeObject } from "@/utils";
+import { loadAirwallex, redirectToCheckout } from "airwallex-payment-elements";
+
+/**
+ * 空中云汇率,支付环境.
+ */
+export function getAirwallexEnv() {
+  const env = process.env.ENV;
+  if (env === "staging") {
+    return "staging";
+  }
+  if (env === "production") {
+    return "prod";
+  }
+  return "demo";
+}
+
+/**
+ * 发起支付.
+ * @param result 下单结果
+ * @param callback 支付拉起加载回掉
+ * @param props 空中云汇支付属性
+ */
+export function goAirwallex({ result, props, callback }) {
+  const env = getAirwallexEnv();
+  loadAirwallex({ env })
+    .then(() => {
+      callback({ code: "INIT-LOAD", msg: "init load success." });
+      const param = mergeObject(
+        {
+          env,
+          mode: "payment",
+          currency: result.currency,
+          intent_id: result.expand.id,
+          client_secret: result.expand["client_secret"],
+          methods: [result.factoryChannelCode],
+          // country_code: result.countryCode,
+          recurringOptions: {
+            card: {
+              next_triggered_by: "customer",
+              merchant_trigger_reason: "unscheduled",
+              currency: result.currency,
+            },
+          },
+          theme: {
+            // Must provide theme to display the checkout page properly
+            fonts: [
+              // Customizes the font for the payment elements
+              {
+                src: "https://checkout.airwallex.com/fonts/CircularXXWeb/CircularXXWeb-Regular.woff2",
+                family: "AxLLCircular",
+                weight: 400,
+              },
+            ],
+          },
+        },
+        props
+      );
+      redirectToCheckout(param);
+    })
+    .catch((er) => {
+      console.error(er);
+      callback({ code: "FAIL", msg: "init fail!!!" });
+    });
+}

src/utils/permissionManager.js

@@ -29,6 +29,7 @@ export const PAGES = {
   LOADING: "/loading",
   ADMIN_CENTER: "/admin-center",
   RECHARGE_STANDARD: "/recharge-standard",
+  PAY_RESULT: "/pay-result",
 };
 
 // 🎯 核心改变：基于身份的权限配置
@@ -91,7 +92,7 @@ export const ROLE_PERMISSIONS = {
 
   // Admin（管理员）
   [USER_ROLES.ADMIN]: [
-    PAGES.ADMIN_CENTER, //管理员的身份验证
+    PAGES.ADMIN_CENTER, //管理员中心
     "/item-distribution", //赠送商品页面
     PAGES.RECHARGE_STANDARD, //普通转账功能
   ],
@@ -104,6 +105,9 @@ export const ROLE_PERMISSIONS = {
   // 公共页面（所有身份都可以访问）
   PUBLIC_PAGES: [
     PAGES.NOT_APP, // 错误页面
+    PAGES.PAY_RESULT, // 支付成功页面
+    "/recharge",
+    "/recharge-freight-agent",
   ],
 
   // 加载页面

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>
 
-    <!-- 商品列表 -->
+    <!-- BD列表 -->
-    <div
+    <div style="padding: 10px" v-show="activeIndex == 0">
-      style="
+      <div
-        width: 100%;
+        v-for="(info, BDIndex) in BDList"
-        display: grid;
+        :key="BDIndex"
-        grid-template-columns: repeat(2, 1fr);
+        style="
-        gap: 12px;
+          box-shadow: 0 0 4px 0 #00000066;
-        padding: 15px;
+          padding: 10px;
-      "
+          border-radius: 10px;
-    >
+          margin-bottom: 10px;
-      <div v-for="(product, index) in productList" :key="index" @click="showSendDialog(product)">
+          transition: all 0.3s ease-out;
-        <div
+        "
-          style="
+        @click="showUserInfo(BDIndex)"
-            background-color: white;
+      >
-            border-radius: 10px;
+        <!-- 基本信息 -->
-            box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.2);
+        <div style="display: flex; justify-content: space-between">
-            display: flex;
+          <div style="display: flex; align-items: center">
-            flex-direction: column;
+            <img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
-            align-items: center;
+            <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>
-          <img :src="product.cover" alt="虚拟商品" style="width: 60%; margin: 10px 0" />
+            </div>
-          <button
+          </div>
-            style="
+          <div style="display: flex; align-items: center">
-              background-color: #bb92ff;
+            <img
-              color: white;
+              src="../assets/icon/arrow.png"
-              margin-bottom: 10px;
+              alt=""
-              border: 0;
+              style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
-              border-radius: 20px;
+              :class="{ rotated: BDIndex == selectedBDIndex }"
-              padding: 5px 10px;
+            />
-            "
+          </div>
-          >
-            Send
-          </button>
         </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>
 
-    <!-- 弹窗 -->
+    <!-- agency列表 -->
-    <!-- 遮罩层 -->
+    <div style="padding: 10px" v-show="activeIndex == 1">
-    <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"
-    >
       <div
         style="
-          padding: 20px;
+          box-shadow: 0 0 4px 0 #00000066;
-          background-color: white;
+          padding: 10px;
-          display: flex;
+          border-radius: 10px;
-          flex-direction: column;
+          margin-bottom: 10px;
-          align-items: center;
+          transition: all 0.3s ease-out;
-          border-radius: 20px;
         "
-        @click.stop
       >
-        <img :src="selectedGoods.cover" alt="" style="width: 60%; margin: 5px 0" />
+        <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge for the month:</div>
-        <div style="font-weight: 600; font-size: 16px; margin: 10px 0">
+        <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">${{ rechargeDetail.total }}</div>
-          <span style="color: #00000080; margin-right: 10px">Validity:</span>
+        <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">Total recharge last month:</div>
-          <span style="font-weight: 700">7day</span>
+        <div style="font-weight: 600; color: rgba(0, 0, 0, 0.8)">
+          ${{ rechargeDetail.lastMonth }}
         </div>
-        <div>
+      </div>
-          <input
+      <div
-            type="text"
+        v-for="(agency, aIndex) in agencyList"
-            placeholder="Enter user ID"
+        :key="aIndex"
-            style="
+        style="
-              height: 36px;
+          box-shadow: 0 0 4px 0 #00000066;
-              width: 171px;
+          padding: 10px;
-              border-radius: 8px;
+          border-radius: 10px;
-              border: 0;
+          margin-bottom: 10px;
-              background-color: #f1f1f1b2;
+          transition: all 0.3s ease-out;
-              padding: 8px;
+        "
-              margin-right: 4px;
+        @click="showAgencyInfo(aIndex)"
-              font-size: 14px;
+      >
-              font-weight: 590;
+        <!-- 基本信息 -->
-            "
+        <div style="display: flex; justify-content: space-between">
-            v-model="targetUserId"
+          <div style="display: flex; align-items: center">
-          />
+            <img src="../assets/icon/coin.png" alt="" style="width: 36px; border-radius: 50%" />
-          <button
+            <div style="margin-left: 8px">
-            style="
+              <div style="font-weight: 700">{{ agency.name }}</div>
-              height: 36px;
+              <div style="font-weight: 700; color: rgba(0, 0, 0, 0.4)">ID:{{ agency.id }}</div>
-              width: 72px;
+            </div>
-              border-radius: 8px;
+          </div>
-              border: 0;
+          <div style="display: flex; align-items: center">
-              padding: 8px;
+            <img
-              background-color: #bb92ff;
+              src="../assets/icon/arrow.png"
-              color: white;
+              alt=""
-              font-size: 14px;
+              style="width: 24px; transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55)"
-              font-weight: 590;
+              :class="{ rotated: aIndex == selectedAgencyIndex }"
-            "
+            />
-            @click="sendGoods"
+          </div>
-          >
-            Confirm
-          </button>
         </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",
+    name: "Recharge Agency",
-  },
-  {
-    id: 3,
-    name: "Chat Box",
-  },
-  {
-    id: 4,
-    name: "Theme",
   },
 ]);
 
 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;
+    selectedBDIndex.value = -1;
-
+    selectedAgencyIndex.value = -1;
-    loadProps();
   }
 };
 
@@ -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 () => {
+const selectedAgencyIndex = ref(-1); //选中的agency用户下标
-  console.log("赠送用户id：", targetUserId.value);
+const showAgencyInfo = (index) => {
-  console.log("赠送商品：", selectedGoods.value);
+  selectedAgencyIndex.value = selectedAgencyIndex.value != index ? index : -1;
+}; //选中的agency用户
 
-  try {
+const send = async () => {
-    const targetUserInfo = await searchUser(targetUserId.value);
+  router.push({ path: "/item-distribution" });
-    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 BDList = ref([
-const getPropsType = () => {
+  {
-  const typeMap = {
+    name: "BD1",
-    Frames: "AVATAR_FRAME",
+    id: "123",
-    Vehicles: "RIDE",
+    host: "111",
-    "Chat Box": "CHAT_BUBBLE",
+    agency: "222",
-    Theme: "THEME",
+  },
-  };
+  {
-  return typeMap[currentTab.value];
+    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 rechargeDetail = ref({
-const loadProps = async () => {
+  total: "123456",
-  try {
+  lastMonth: "12345",
-    const params = {
+}); //代理消费金额
-      propsType: getPropsType(),
-      currencyType: "GOLD",
-    };
-    const response = await getAdminCenterList(params);
-    console.log("response:", response);
-    productList.value = response.body;
-  } catch (error) {
-    throw error;
-  }
-};
 
 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 {
+.info-fade-enter-from,
-  color: #3498db; /* 激活态文字颜色 */
+.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>

src/views/ItemDistribution.vue

@@ -303,8 +303,4 @@ const closedPopup = () => {
   background-size: 100% 100%;
   background-repeat: no-repeat;
 }
-
-.tab-item .active {
-  color: #3498db; /* 激活态文字颜色 */
-}
 </style>

src/views/RechargeFreightAgent.vue

@@ -10,8 +10,9 @@
             position: relative;
             color: rgba(187, 146, 255, 1) !important;
           "
+          @click="listBt"
         >
-          <div style="font-weight: bold">English</div>
+          <div style="font-weight: bold">{{ selectedLanguage.type }}</div>
           <div style="margin-left: 5px">></div>
           <transition name="slide-fade">
             <div
@@ -32,11 +33,11 @@
               class="extraList"
             >
               <div
-                style="padding: 8px; opacity: 0.5"
+                style="padding: 8px; color: white !important; font-weight: 590"
-                v-for="(item, index) in switchList"
+                v-for="(item, index) in languageList"
                 :key="index"
               >
-                {{ item }}
+                {{ item.type }}
               </div>
             </div>
           </transition>
@@ -45,13 +46,36 @@
     </MobileHeader>
 
     <div style="padding: 10px">
-      <div>Recharge ID：</div>
+      <!-- 头部展示图 -->
-      <!-- 个人信息 -->
+      <img src="../assets/images/firstRechargeBonus.png" alt="" style="width: 100%" />
-      <div>name:{{ userProfile.userNickname }}</div>
 
-      <div style="width: 100%; display: flex; justify-content: space-between">
+      <div style="font-weight: 600; margin-bottom: 10px">Recharge ID：</div>
-        <div>Select a country：</div>
+      <!-- 个人信息 -->
-        <div>图标{{ selectedCountry.countryName }}</div>
+      <div
+        style="
+          display: flex;
+          border-radius: 8px;
+          box-shadow: 0 0 4px 0 #00000050;
+          align-items: center;
+        "
+      >
+        <img
+          :src="userProfile.userAvatar"
+          alt=""
+          style="width: 10%; margin: 10px; border-radius: 50%"
+        />
+        <div style="">
+          <div style="font-weight: 700">{{ userProfile.userNickname }}</div>
+          <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">ID:{{ userProfile.id }}</div>
+        </div>
+      </div>
+
+      <div style="width: 100%; display: flex; justify-content: space-between; margin: 10px 0">
+        <div style="font-weight: 600">Select a country：</div>
+        <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4)">
+          <img src="../assets/icon/Vector.png" alt="" style="width: 10px" />
+          {{ selectedCountry.countryName }}
+        </div>
       </div>
 
       <!-- 支付渠道 -->
@@ -65,6 +89,7 @@
               box-shadow: 0 0 4px 0 #00000050;
               align-items: center;
             "
+            @click="setChannelName(channelItem.channel.channelName)"
           >
             <img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
             <div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
@@ -81,6 +106,7 @@
               padding: 10px;
               margin-top: 1rem;
             "
+            v-if="selectedChannelName == channelItem.channel.channelName"
           >
             <div
               style="
@@ -112,43 +138,85 @@ import MobileHeader from "../components/MobileHeader.vue";
 import { searchUser, searchPayRechargeUser } from "@/api/userInfo";
 // import { getUserIdentity } from "@/api/wallet";
 import { getPayAplication, getAppCommodityCard, payPlaceAnOrderRecharge } from "@/api/pay";
+import { goAirwallex } from "@/utils/payment";
+import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
 
 import { useRoute } from "vue-router";
 
 const route = useRoute();
 
+const languageList = ref([
+  {
+    type: "English",
+  },
+]);
+const selectedLanguage = ref({
+  type: "English",
+});
+const visibleList = ref(false);
+const listBt = () => {
+  visibleList.value = !visibleList.value;
+};
+
 const applicationId = ref("1963531459019739137");
 const userProfile = ref({}); //用户信息
+const type = ref(""); //用户身份
 const countryList = ref([]); //国家信息
 const regionId = ref(""); //区域id
-const selectedCountry = ref("");
+const selectedCountry = ref({}); //选中的国家
+
+const channels = ref([]); //支付渠道
+const selectedChannelName = ref(""); //选中的支付渠道
 
 const commodityList = ref([]); //商品列表
-const channels = ref([]); //支付渠道
-
 const selectedCommodity = ref({}); //选中的商品
 
 const goPay = async (item, commodity) => {
   selectedCommodity.value = commodity;
   let payData = {
     applicationId: applicationId.value,
-    payCountryId: applicationId.value,
+    payCountryId: selectedCountry.value.id,
     goodsId: commodity.id,
-    userId: userProfile.id,
+    userId: userProfile.value.id,
     channelCode: item.channel.channelCode,
   };
+  console.log("payData:", payData);
 
-  const payRes = await payPlaceAnOrderRecharge(data);
+  const payRes = await payPlaceAnOrderRecharge(payData);
   const body = payRes.body;
   if (!body) {
     console.log("Payment not available, please contact administrator!!!");
     return;
   }
   if (body.factoryCode === "AIRWALLEX") {
+    goAirwallex({
+      result: body,
+      props: {
+        logoUrl: that.sysOriginLog,
+        successUrl: `${location.origin}/#/pay-result?redirect=recharge&appType=${type.value}&appId=${applicationId.value}&appStatus=0`,
+        failUrl: `${location.origin}/#/pay-result?redirect=recharge&appType=${type.value}&appId=${applicationId.value}&appStatus=1`,
+      },
+      callback: (response) => {
+        if (response.code === "FAIL") {
+          showWarning("init fail!!!");
+          return;
+        }
+      },
+    });
+  }
+  if (body.requestUrl) {
+    location.href = decodeURIComponent(body.requestUrl);
   }
 };
 
+// 选中支付渠道
+const setChannelName = (channelName) => {
+  selectedChannelName.value = selectedChannelName.value != channelName ? channelName : "";
+};
+
 onMounted(async () => {
+  type.value = route.params.type || "GOLD";
+
   const PayAplication = await getPayAplication(applicationId.value);
   console.log("PayAplication:", PayAplication);
   if (PayAplication.body && PayAplication.body.appCode) {
@@ -180,4 +248,28 @@ onMounted(async () => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+.slide-fade-leave-active {
+  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
+}
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateY(-10px);
+  opacity: 0;
+}
+
+.showGoodsList {
+  display: block;
+}
+
+.hiddenGoodsList {
+  display: none;
+}
+
+.extraList > div:not(:last-child) {
+  border-bottom: 0.1px solid black;
+}
+</style>

src/views/payResult.vue

@@ -0,0 +1,14 @@
+<template>
+  <div></div>
+</template>
+
+<script setup>
+import { showError, showWarning, showInfo, showSuccess } from "@/utils/toast.js";
+import { onMounted } from "vue";
+
+onMounted(() => {
+  showSuccess("");
+});
+</script>
+
+<style lang="scss" scoped></style>