164 lines
4.5 KiB
Markdown
164 lines
4.5 KiB
Markdown
# 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:
|
|
|
|
```json
|
|
{
|
|
"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`.
|