feat(充值页面): 新增搜索页面，功能重置为为目标用户充值

src/components/MaskLayer.vue

@@ -1,19 +1,16 @@
 <template>
   <div
+    v-show="maskLayerShow"
     style="
       width: 100vw;
       height: 100vh;
       background-color: #00000080;
       position: fixed;
-      top: 0;
+      inset: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
       z-index: 999;
     "
-    v-show="maskLayerShow"
   >
-    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow-y: auto">
+    <div style="position: absolute; inset: 0; overflow-y: auto">
       <slot></slot>
     </div>
   </div>

src/router/index.js

@@ -268,7 +268,13 @@ const router = createRouter({
     {
       path: '/recharge',
       name: 'recharge',
-      component: () => import('../views/Recharge/RechargeFreightAgent.vue'),
+      component: () => import('../views/Recharge/index.vue'),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: '/recharge-pay-way',
+      name: 'recharge-pay-way',
+      component: () => import('../views/Recharge/payWay.vue'),
       meta: { requiresAuth: true },
     },
     {

src/stores/rechargeTarget.js

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+
+export const useTargetUser = defineStore('targetUser', {
+  state: () => ({
+    targetUser: {},
+  }),
+
+  actions: {
+    setTargetUser(targetUser) {
+      console.log('setTargetUser设置充值对象')
+      this.targetUser = targetUser
+    },
+
+    // 清空方法
+    clearTargetUser() {
+      console.log('clearTargetUser清空充值对象')
+      this.targetUser = {}
+    },
+  },
+
+  persist: true,
+})

src/utils/permissionManager.js

@@ -75,8 +75,9 @@ export const ROLE_PERMISSIONS = {
     PAGES.MAP, // 地图选择页面
     ...RANKING_PAGES, //排行榜
     ...ACTIVITIES, //活动页面
-    '/recharge',
+    '/recharge', //搜索充值对象页面
-    '/recharge-guide',
+    '/recharge-pay-way', //充值方式页面
+    '/recharge-guide', //充值引导页面
     '/recharge-agency-recruit', //充值代理介绍页面
     '/search-payee', //搜索收款人
     '/cash-out', // 提现页面

src/utils/routeGuard.js

@@ -423,8 +423,9 @@ class RouteGuard {
       ...ACTIVITIES, // 活动页面
       '/404', // 404页面
       '/error', // 通用错误页面
-      '/recharge',
+      '/recharge', //搜索充值对象页面
-      '/recharge-guide',
+      '/recharge-pay-way', //充值方式页面
+      '/recharge-guide', //充值引导页面
       '/recharge-agency-recruit', //充值代理介绍页面
       '/pay-result',
       '/search-payee', //搜索收款人

src/views/Recharge/index.vue

@@ -0,0 +1,261 @@
+<!-- Recharge.vue -->
+<template>
+  <div class="fullPage">
+    <div class="bg">
+      <!-- 顶部导航 -->
+      <GeneralHeader
+        :isHomePage="true"
+        :title="$t('recharge')"
+        :backImg="imgUrl"
+        color="black"
+        style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
+      >
+        <template v-slot:extraFunction>
+          <img
+            v-smart-img
+            src="../../assets/icon/help.png"
+            alt=""
+            style="display: block; width: 7vw; object-fit: contain"
+            @click="popupHelp"
+          />
+        </template>
+      </GeneralHeader>
+
+      <!-- 主要内容 -->
+      <div style="padding: 4%">
+        <!-- 搜索栏 -->
+        <div style="display: flex; gap: 20px; width: 100%">
+          <!-- 输入框 -->
+          <div style="flex: 1">
+            <input
+              style="
+                width: 100%;
+                border: 0;
+                border-radius: 8px;
+                box-shadow: 0 0 2px 2px #00000020;
+                padding: 10px 8px;
+              "
+              type="text"
+              placeholder="Please enter your Likei's lD"
+              v-model="targetUserId"
+            />
+          </div>
+
+          <!-- 跳转按钮 -->
+          <button
+            style="
+              border: 0;
+              border-radius: 8px;
+              font-weight: 590;
+              color: white;
+              padding: 10px 8px;
+              background-color: #c670ff;
+              background: linear-gradient(to bottom, rgba(198, 112, 255, 1), rgba(119, 38, 255, 1));
+              box-shadow: 0 0 1px 1px #00000020;
+            "
+            @click="checkUserId"
+          >
+            Recharge
+          </button>
+        </div>
+
+        <!-- 功能介绍 -->
+        <div style="margin-top: 16px">
+          <p style="font-weight: bold">Frequently asked question:</p>
+          <div class="textContent">
+            <p>1.Question:</p>
+            <p>How to check whether the account recharge amounthasbeen received.</p>
+            <p>Ask:</p>
+            <p>
+              Firstly, open Likei, enter the 'My' page, click on theWallet' page, and select the
+              recharge record in theupper right corner.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 弹窗遮罩层 -->
+      <maskLayer :maskLayerShow="dialogshow" @click="closedPopup">
+        <div
+          style="
+            width: 100%;
+            height: 100%;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          "
+        >
+          <div
+            style="
+              width: 80%;
+              padding: 8%;
+              background-color: white;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              border-radius: 20px;
+            "
+            @click.stop
+          >
+            <!-- 标题行 -->
+            <div
+              style="
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                font-weight: 800;
+                position: relative;
+                padding: 5px 0;
+              "
+            >
+              Help
+              <div
+                style="
+                  position: absolute;
+                  top: 50%;
+                  right: 0;
+                  transform: translateY(-50%);
+                  font-weight: bold;
+                "
+                @click="closedPopup"
+              >
+                x
+              </div>
+            </div>
+
+            <!-- 内容 -->
+            <div>
+              <p style="font-weight: bold">User recharge instructions:</p>
+              <div class="textContent">
+                <p>
+                  1、Before recharging,the user needs toprovide the correct Likei lD to complete
+                  thisrecharge.
+                </p>
+                <p>
+                  2、After the coin seller recharges, therecharged coins will be directly sent to
+                  thecoin seller account.
+                </p>
+                <p>
+                  3、How to obtain an lD for an account:(1)In Likei open the 'My' page.(2)You can
+                  confrm the account lD at the topof the page.
+                </p>
+                <p>
+                  4、lf the lD account you enter is a coinseller account, the coin will be sent to
+                  thecoin seller center of that account.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </maskLayer>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { showWarning } from '@/utils/toast.js'
+import { useTargetUser } from '@/stores/rechargeTarget'
+
+import { searchUser } from '@/api/userInfo'
+
+import GeneralHeader from '@/components/GeneralHeader.vue'
+import maskLayer from '@/components/MaskLayer.vue'
+
+const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
+const targetUserStore = useTargetUser()
+const router = useRouter()
+
+const dialogshow = ref(false)
+// 展示弹窗
+const popupHelp = () => {
+  dialogshow.value = true
+}
+
+// 关闭弹窗
+const closedPopup = () => {
+  dialogshow.value = false
+}
+
+const targetUserId = ref('')
+
+const checkUserId = async () => {
+  console.log('充值目标用户id：', targetUserId.value)
+
+  try {
+    const targetUserInfo = await searchUser(targetUserId.value)
+    console.log('targetUserInfo:', targetUserInfo)
+    if (targetUserInfo.status && targetUserInfo.body.id) {
+      targetUserStore.setTargetUser(targetUserInfo.body) //保存目标用户信息
+      router.push('/recharge-pay-way') //跳转到充值方式页面
+    } else {
+      // 信息提示id有误
+      showWarning('User info not found')
+    }
+  } catch (error) {
+    console.log('error:', error.response.errorMsg)
+    throw error
+  }
+}
+
+onMounted(() => {
+  targetUserStore.clearTargetUser() //清空目标用户信息
+})
+</script>
+
+<style scoped>
+* {
+  color: black;
+  font-family: 'SF Pro';
+}
+
+.fullPage {
+  background-color: #ffffff;
+  min-height: 100vh;
+  position: relative;
+}
+
+.bg {
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url(../../assets/images/secondBg.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
+}
+
+.textContent > p {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+input::placeholder {
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+@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>

src/views/Recharge/payWay.vue

@@ -3,7 +3,6 @@
     <div class="bg">
       <!-- 顶部导航 -->
       <GeneralHeader
-        :isHomePage="true"
         :showLanguageList="true"
         :title="$t('recharge')"
         :backImg="imgUrl"
@@ -76,7 +75,7 @@
                 </div>
 
                 <img
-                  v-if="isFreightAgent"
+                  v-if="userInfo.isFreightAgent"
                   src="../../assets/icon/identity/coinSeller.png"
                   alt=""
                   style="
@@ -193,17 +192,18 @@
 import { onMounted, ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { connectToApp } from '@/utils/appConnector.js'
-
 import { goAirwallex } from '@/utils/payment'
 import { showWarning } from '@/utils/toast.js'
-import { useCountryStore } from '@/stores/country'
-import { storeToRefs } from 'pinia'
 import { handleAvatarImageError } from '@/utils/imageHandler.js'
-import { getPngUrl } from '@/config/imagePaths.js'
 import { preloadImages } from '@/utils/imagePreloader.js'
 
-import { getMemberProfile } from '@/api/wallet'
+import { storeToRefs } from 'pinia'
-import { searchUser, searchPayRechargeUser } from '@/api/userInfo'
+import { useCountryStore } from '@/stores/country'
+import { useTargetUser } from '@/stores/rechargeTarget'
+
+import { getPngUrl } from '@/config/imagePaths.js'
+
+import { searchPayRechargeUser } from '@/api/userInfo'
 import { getPayAplication, getAppCommodityCard, payPlaceAnOrderRecharge } from '@/api/pay'
 
 import GeneralHeader from '@/components/GeneralHeader.vue'
@@ -213,18 +213,16 @@ const imageUrl = (filename) => getPngUrl('Recharge/', filename)
 const imgUrl = new URL('/src/assets/icon/arrowBackBlack.png', import.meta.url).href
 
 const countryStore = useCountryStore()
+const targetUserStore = useTargetUser()
 const route = useRoute()
 const router = useRouter()
 
-const applicationId = ref('1963531459019739137')
+const applicationId = ref('1963531459019739137') //应用id
-const userInfo = ref({}) //用户信息
-const type = ref(route.params.type || '') //用户身份
-const isFreightAgent = ref(route.query.isFreightAgent === 'true')
-const isSuperFreightAgent = ref(route.query.isSuperFreightAgent === 'true')
-
 const regionId = ref('') //区域id
+const type = ref(route.params.type || '') //第三方支付页面返回的类型
 
 const { selectedCountry } = storeToRefs(countryStore) //国家信息
+const userInfo = ref(targetUserStore.targetUser) //用户信息
 
 const channels = ref([]) //支付渠道
 const commodityList = ref([]) //商品列表
@@ -255,6 +253,7 @@ const goPay = async (item, commodity) => {
     return
   }
   if (payRes.body.factoryCode === 'AIRWALLEX') {
+    targetUserStore.clearTargetUser() //清空目标用户信息
     // 拉起对应的h5支付页
     goAirwallex({
       result: payRes.body,
@@ -275,30 +274,6 @@ const goPay = async (item, commodity) => {
     location.href = decodeURIComponent(payRes.body.requestUrl)
   }
 }
-//获取用户信息
-const getUserInfo = async () => {
-  const resUserInfo = await getMemberProfile()
-  if (resUserInfo.status && resUserInfo.body) {
-    userInfo.value = resUserInfo.body
-  }
-}
-
-// 检查身份
-const checkAccount = async () => {
-  console.log('充值目标用户account：', userInfo.value.account)
-
-  try {
-    const targetUserInfo = await searchUser(userInfo.value.account)
-    console.log('targetUserInfo:', targetUserInfo)
-    if (targetUserInfo.status && targetUserInfo.body.id) {
-      isSuperFreightAgent.value = targetUserInfo.body?.isSuperFreightAgent
-      isFreightAgent.value = targetUserInfo.body?.isFreightAgent
-    }
-  } catch (error) {
-    console.log('error:', error.response.errorMsg)
-    throw error
-  }
-}
 
 // 获取appCode
 const getAppCode = async () => {
@@ -312,9 +287,9 @@ const getPayAplicationAndCommodity = async () => {
     applicationId: applicationId.value,
     payCountryId: selectedCountry.value.id,
     regionId: regionId.value,
-    type: isSuperFreightAgent.value
+    type: userInfo.value.isSuperFreightAgent
       ? 'FREIGHT_GOLD_SUPER'
-      : isFreightAgent.value
+      : userInfo.value.isFreightAgent
       ? 'FREIGHT_GOLD'
       : 'GOLD',
   }
@@ -332,9 +307,9 @@ const getUserInfoAndCountry = async () => {
     let params = {
       sysOrigin: appCode,
       account: userInfo.value.account,
-      type: isSuperFreightAgent.value
+      type: userInfo.value.isSuperFreightAgent
         ? 'FREIGHT_GOLD_SUPER'
-        : isFreightAgent.value
+        : userInfo.value.isFreightAgent
         ? 'FREIGHT_GOLD'
         : 'GOLD',
     }
@@ -366,8 +341,6 @@ const init = async () => {
 const connectToAppHandler = () => {
   connectToApp(async () => {
     // 连接成功回调
-    await getUserInfo() //获取用户信息
-    await checkAccount() // 检查身份
     await init() // 数据初始化
   })
 }