feat(充值页面): 新增搜索页面，功能重置为为目标用户充值
This commit is contained in:
hzj
parent
8de28d82c8
commit
2c9c63ca52
@ -1,19 +1,16 @@
|
||||
<template>
|
||||
<div
|
||||
v-show="maskLayerShow"
|
||||
style="
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #00000080;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset: 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>
|
||||
|
||||
@ -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 },
|
||||
},
|
||||
{
|
||||
|
||||
22
src/stores/rechargeTarget.js
Normal file
22
src/stores/rechargeTarget.js
Normal file
@ -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,
|
||||
})
|
||||
@ -75,8 +75,9 @@ export const ROLE_PERMISSIONS = {
|
||||
PAGES.MAP, // 地图选择页面
|
||||
...RANKING_PAGES, //排行榜
|
||||
...ACTIVITIES, //活动页面
|
||||
'/recharge',
|
||||
'/recharge-guide',
|
||||
'/recharge', //搜索充值对象页面
|
||||
'/recharge-pay-way', //充值方式页面
|
||||
'/recharge-guide', //充值引导页面
|
||||
'/recharge-agency-recruit', //充值代理介绍页面
|
||||
'/search-payee', //搜索收款人
|
||||
'/cash-out', // 提现页面
|
||||
|
||||
@ -423,8 +423,9 @@ class RouteGuard {
|
||||
...ACTIVITIES, // 活动页面
|
||||
'/404', // 404页面
|
||||
'/error', // 通用错误页面
|
||||
'/recharge',
|
||||
'/recharge-guide',
|
||||
'/recharge', //搜索充值对象页面
|
||||
'/recharge-pay-way', //充值方式页面
|
||||
'/recharge-guide', //充值引导页面
|
||||
'/recharge-agency-recruit', //充值代理介绍页面
|
||||
'/pay-result',
|
||||
'/search-payee', //搜索收款人
|
||||
|
||||
261
src/views/Recharge/index.vue
Normal file
261
src/views/Recharge/index.vue
Normal file
@ -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>
|
||||
@ -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 { searchUser, searchPayRechargeUser } from '@/api/userInfo'
|
||||
import { storeToRefs } from 'pinia'
|
||||
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 userInfo = ref({}) //用户信息
|
||||
const type = ref(route.params.type || '') //用户身份
|
||||
const isFreightAgent = ref(route.query.isFreightAgent === 'true')
|
||||
const isSuperFreightAgent = ref(route.query.isSuperFreightAgent === 'true')
|
||||
|
||||
const applicationId = ref('1963531459019739137') //应用id
|
||||
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() // 数据初始化
|
||||
})
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user