chatapp-h5/h5/hyapp/recharge-center/original-vue-logic.md

Original Vue Recharge Center Logic

Routes

• /recharge
  • Clears the persisted targetUser store on mount.
  • Lets the user input a target account / user ID.
  • Searches the target user before entering the payment page.
  • Opens a help modal with recharge instructions.
• /recharge-pay-way
  • Reads the target user from the persisted targetUser store.
  • Loads payment application, target region/country, commodity packages, and payment channels.
  • Places a recharge order and redirects to a third-party payment page.

State

• targetUser
  • Persisted Pinia store.
  • setTargetUser(profile) after /recharge search succeeds.
  • clearTargetUser() on /recharge mount and after Airwallex order redirect starts.
• selectedCountry
  • Country store value used by /recharge-pay-way.
  • First returned country is selected when the store is empty.
• countryList
  • Country store list populated from /order/web/pay/user-profile.
• applicationId
  • Fixed value in original Vue: 1963531459019739137.
• type
  • FREIGHT_GOLD_SUPER when targetUser.isSuperFreightAgent.
  • FREIGHT_GOLD when targetUser.isFreightAgent.
  • GOLD otherwise.

APIs

Get current user profile

GET /team/member/profile

Usage in new H5:

• Loads the current logged-in user's account card before the recharge flow.
• This is the same current-user profile source reused by the hyapp center pages.

Reusable fields:

• id
• account
• userNickname
• name
• userAvatar
• ownSpecialId.account

Get current user coin balance

GET /wallet/freight/balance

Original Vue reference:

• The old recharge agency / coin seller page imports a4 from the main bundle.
• a4 maps to dX(), which calls GET /wallet/freight/balance.
• Original UI stores body.toString() and displays it under my_coins.

Usage in new H5:

• Displays the current user's Coins card.
• If the request fails, the page keeps showing 0 and the recharge flow still works.

Reusable fields:

• body as number
• body.gold
• body.goldBalance
• body.coin
• body.coins
• body.balance
• body.amount

Search target user

GET /user/user-profile/open-search?account=<account>

Usage:

• Called from /recharge search button.
• Success condition in Vue: status && body.id.
• Success action: save body to targetUser, then route to /recharge-pay-way.
• Failure action: toast User info not found.

Reusable fields:

• id
• account
• userNickname
• name
• userAvatar
• ownSpecialId.account
• isFreightAgent
• isSuperFreightAgent

Recharge coins to target user

POST /wallet/freight/ship

Body:

{
  "acceptUserId": "<target user id>",
  "quantity": 1000
}

Original Vue reference:

• The old coin seller page imports a5 from the main bundle.
• a5 maps to mX(payload), which calls POST /wallet/freight/ship.
• Original submit logic sends te({ acceptUserId: o, quantity: t }).
• If the response has body, Vue uses it as the updated current coin balance.

Usage in new H5:

• After searching the target user, the page shows one coins input and a confirm recharge button.
• It no longer shows country selection, payment methods, or recharge packages for this direct transfer flow.

Reusable fields:

• acceptUserId: target user id
• quantity: entered coins amount
• response body: updated current user coin balance when returned

Get transfer history

GET /wallet/freight/balance/running/water/client/flowByUserId

Query params:

• userId=<current user id>
• type=0 | 1
• searchId=<searched user id or empty>
• lastId=<last record id for load more or empty>

Original Vue reference:

• The seller records page imports ad as Z from the main bundle.
• Z(params) maps to hX(params), which calls this endpoint.
• Original page uses type=0 for income and type=1 for expenditure.
• For each record, Vue displays +quantity when record.type === 0, otherwise -quantity.
• For user display, Vue reads record.userAccount for income records and record.acceptUserAccount for expenditure records.

Usage in new H5:

• The Coins card has a right-side History button.
• History opens in a center modal with Income / Expenditure tabs, user ID search, and load more using lastId.

Get payment application

GET /order/web/pay/application/{applicationId}

Usage:

• Called by /recharge-pay-way.
• Original code reads body.appCode.

Reusable fields:

• id
• appName
• appCode
• androidLink
• iosLink

Get target recharge profile and countries

GET /order/web/pay/user-profile

Query params:

• sysOrigin=<appCode>
• account=<targetUser.account>
• type=GOLD | FREIGHT_GOLD | FREIGHT_GOLD_SUPER

Usage:

• Called after payment application is loaded.
• Backend resolves user region and available pay countries.
• Original Vue sets countryList, selects the first country if none is selected, and stores regionId.

Reusable fields:

• userProfile.id
• userProfile.userAvatar
• userProfile.userNickname
• userProfile.account
• userProfile.sysOrigin
• countryList[].id
• countryList[].countryId
• countryList[].country.countryName
• countryList[].country.aliasName
• countryList[].country.nationalFlag
• regionId

Get commodities and channels

GET /order/web/pay/commodity

Query params:

• applicationId=1963531459019739137
• payCountryId=<selected country id>
• regionId=<regionId>
• type=GOLD | FREIGHT_GOLD | FREIGHT_GOLD_SUPER

Usage:

• Called after country/profile data is ready.
• Original Vue renders all returned channels, and each channel shows the same commodity grid.

Reusable fields:

• application
• commodity[].id
• commodity[].content
• commodity[].awardContent
• commodity[].amountUsd
• commodity[].amount
• commodity[].currency
• channels[].channel.channelCode
• channels[].channel.channelName
• channels[].channel.channelIcon
• channels[].details.channelCode
• channels[].details.factoryChannel
• channels[].details.factoryMinLimit
• channels[].details.factoryMaxLimit

Place recharge order

POST /order/web/pay/recharge

Body:

{
  "applicationId": "1963531459019739137",
  "payCountryId": "<selected country id>",
  "goodsId": "<commodity id>",
  "userId": "<target user id>",
  "channelCode": "<channel.channelCode>"
}

Usage:

• Called when the user taps a commodity under a payment channel.
• If body.factoryCode === "AIRWALLEX", original Vue loads Airwallex Elements and calls redirectToCheckout.
• If body.requestUrl exists, original Vue redirects with location.href = decodeURIComponent(requestUrl).

Reusable fields:

• orderId
• tradeNo
• factoryCode
• factoryChannelCode
• currency
• requestUrl
• expand.id
• expand.client_secret

New H5 implementation notes

• New page lives at h5/hyapp/recharge-center.
• It keeps the existing hyapp center architecture: static index.html, style.css, script.js.
• It uses URL token for Java API authorization and sends the same H5 request headers used by the existing hyapp center pages.
• It uses the old coin seller direct-transfer API for the current UI: search target user, enter coins amount, and confirm recharge.
• The older /recharge-pay-way country / package / third-party payment flow is documented above for reference but is not rendered in the current H5 page.