feat(充值): 完善充值页面样式，并对接支付功能

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/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"
-                v-for="(item, index) in switchList"
+                style="padding: 8px; color: white !important; font-weight: 590"
+                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>
-      <!-- 个人信息 -->
-      <div>name:{{ userProfile.userNickname }}</div>
+      <!-- 头部展示图 -->
+      <img src="../assets/images/firstRechargeBonus.png" alt="" style="width: 100%" />
 
-      <div style="width: 100%; display: flex; justify-content: space-between">
-        <div>Select a country：</div>
-        <div>图标{{ selectedCountry.countryName }}</div>
+      <div style="font-weight: 600; margin-bottom: 10px">Recharge ID：</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>