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

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

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 merges the original /recharge and /recharge-pay-way flows into one page, so it does not depend on Vue router or Pinia targetUser.