chatapp-h5/h5/hyapp/recharge-center/original-vue-logic.md
2026-04-30 13:29:00 +08:00

252 lines
7.2 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
### 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:
```json
{
"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:
```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 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.