hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(招募充值代理页): 对接接口

Browse Source
This commit is contained in:
hzj 2025-10-24 19:11:46 +08:00
parent a0822da7a8
commit 795205258f
5 changed files with 241 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/api/recruit.js Normal file
View File

@ -0,0 +1,12 @@
import { get, post } from '../utils/http.js'
// 执行关注
export const follow = async (data) => {
try {
const response = await post('/user/support-relation/follow', data)
return response
} catch (error) {
console.error('Failed to fetch follow recharge agency:', error)
throw error
}
}

12
src/api/userInfo.js
View File

@ -62,3 +62,15 @@ export const getAgencyTotalRecharge = async (data) => {
throw error
}
}
// 分页查询货运
export const getFreightAgencys = async () => {
try {
const response = await get(`/user/freight-balance/page`)
return response
} catch (error) {
console.error('Failed to fetch get Freight Agencys:', error)
console.error('error:' + error.response.errorMsg)
throw error
}
}

BIN
src/assets/images/RechargeAgency/idBg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 16 KiB

2
src/views/Activities/Lottery/Lottery.vue
View File

@ -1416,7 +1416,7 @@ const getWinners = async () => {
}
}
//获取领取任务奖励
//领取任务奖励
const receiveTaskReward = async (code) => {
let data = {
taskCode: code,

234
src/views/RechargeAgency/Recruit.vue
View File

@ -46,20 +46,28 @@
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: 8px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(32px);
"
v-for="FreightAgency in FreightAgencyList?.records"
>
<!-- 基本信息 -->
<div style="display: flex; gap: 4px">
<div style="width: 15%; display: flex; align-items: center">
<img
src=""
:src="FreightAgency.userBaseInfo.userAvatar"
alt=""
@error="defaultAvatarUrl"
style="display: block; width: 100%; aspect-ratio: 1/1"
style="
display: block;
width: 100%;
border-radius: 50%;
aspect-ratio: 1/1;
object-fit: cover;
"
/>
</div>
<div
@ -73,7 +81,7 @@
>
<div style="display: flex; align-items: center; gap: 4px">
<img :src="images.testFlag" alt="" width="10%" style="display: block" />
<div style="font-weight: 700">Nanfangjian</div>
<div style="font-weight: 700">{{ FreightAgency.userBaseInfo.userNickname }}</div>
</div>
<div style="display: flex; align-items: center; gap: 4px">
<div style="position: relative; width: 30%">
@ -82,7 +90,7 @@
style="
position: absolute;
inset: 0;
padding: 5% 10% 5% 30%;
padding: 5% 8% 5% 23%;
display: flex;
justify-content: space-between;
align-items: center;
@ -90,16 +98,24 @@
>
<div
style="
font-size: 0.7em;
font-size: 0.6em;
width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: flex;
justify-content: center;
align-items: center;
"
>
8826602
{{ FreightAgency.userBaseInfo.account }}
</div>
<img :src="images.copyWhite" alt="" width="20%" @click="copyPhone('8826602')" />
<img
:src="images.copyWhite"
alt=""
width="15%"
@click="copyPhone(FreightAgency.userBaseInfo.account)"
/>
</div>
</div>
<img src="../../assets/icon/RA.png" alt="" width="25%" style="display: block" />
@ -119,10 +135,12 @@
style="aspect-ratio: 1/1; display: block"
/>
</div>
<div style="color: #f00; font-weight: 590">7********</div>
<div style="color: #f00; font-weight: 590">{{ maskAmount(FreightAgency.balance) }}</div>
</div>
<!-- 老资历 -->
<div style="font-weight: 600; font-size: 0.8em">Has been a coin agency for 160 days</div>
<div style="font-weight: 600; font-size: 0.8em">
Has been a coin agency for {{ FreightAgency.becomeDays }} days
</div>
<!-- 社交的手腕 -->
<div>
<div style="font-weight: 600; font-size: 0.8em; margin-bottom: 4px">
@ -135,13 +153,13 @@
</div>
</div>
<!-- 实力展示 -->
<div>10972 successful transaction</div>
<div>{{ FreightAgency.transactionCount }} successful transaction</div>
<!-- 食人树 -->
<div
style="display: flex; align-items: center; gap: 4px; font-weight: 600; font-size: 0.9em"
>
<img :src="images.phone" alt="" width="8%" />
+86 1008610086
{{ FreightAgency.contactInfo || '' }}
</div>
</div>
<!-- 按钮 -->
@ -159,7 +177,7 @@
align-items: center;
"
:style="{
background: followingStatus
background: FreightAgency.isFollow
? `radial-gradient(107.94% 107.94% at 15.9% 13.54%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #FFF 0%, #000 100%), #D1D1D1`
: `radial-gradient(
107.94% 107.94% at 15.9% 13.54%,
@ -168,9 +186,9 @@
),
linear-gradient(180deg, #fff 0%, #000 100%), #b464ff`,
}"
@click="followingStatus = !followingStatus"
@click="followBt(FreightAgency.isFollow, FreightAgency.userBaseInfo.id)"
>
<div style="font-weight: 500">Following</div>
<div style="font-weight: 500">{{ FollowButtonText(FreightAgency.isFollow) }}</div>
</div>
<!-- 私聊按钮 -->
<div
@ -253,10 +271,24 @@
</template>
<script setup>
import { isInApp } from '@/utils/appBridge.js'
import {
connectApplication,
parseAccessOrigin,
parseHeader,
setHttpHeaders,
isInApp,
} from '@/utils/appBridge.js'
import {
appConnectionManager,
isAppConnected,
getAppHeaderInfo,
} from '@/utils/appConnectionManager.js'
import { onMounted, ref } from 'vue'
import { useClipboard } from '@vueuse/core'
import maskLayer from '@/components/MaskLayer.vue'
import { getFreightAgencys } from '@/api/userInfo.js'
import { follow } from '@/api/recruit.js'
import { showError, showWarning, showInfo, showSuccess } from '@/utils/toast.js'
//vite动态批量导入图片
const imageModules = import.meta.glob('@/assets/images/RechargeAgency/*.{png,jpg,svg}', {
@ -270,10 +302,14 @@ const images = Object.fromEntries(
})
)
const { copy, isSupported } = useClipboard()
const appConnected = ref(false)
const headerInfo = ref({})
const isInAppEnvironment = ref(false) // 检测是否在APP环境中
const FreightAgencyList = ref([]) //充值代理列表
const maskLayerShow = ref(false) // 控制遮罩层显示隐藏
const followingStatus = ref(false) // 控制关注按钮状态
const tipShow = ref(false) //提示弹窗
const defaultAvatarUrl = (e) => {
@ -282,10 +318,50 @@ const defaultAvatarUrl = (e) => {
e.target.src = new URL('/src/assets/images/WeeklyStar/defaultAvatar.png', import.meta.url).href
}
// 获取代理列表
const getAgencyList = async () => {
const resAgencyList = await getFreightAgencys()
if (resAgencyList.status && resAgencyList.body) {
FreightAgencyList.value = resAgencyList.body
}
}
// 格式化金额
const maskAmount = (number) => {
let amount = number.toString()
if (amount.length === 0) return ''
if (amount.length === 1) return amount
let firstChar = amount.charAt(0)
let maskedPart = '*'.repeat(amount.length - 1)
return firstChar + maskedPart
}
// 格式化关注按钮
const FollowButtonText = (isFollow) => {
return isFollow ? 'Following' : 'Follow'
}
// 点击关注按钮
const followBt = async (isFollow, userId) => {
if (isFollow) return
let data = {
userId,
}
try {
const resFollow = await follow(data)
if (resFollow.status) {
getAgencyList() // 获取代理列表
}
} catch (error) {
showError(error.errorMsg)
}
}
// 关闭弹窗
const closedPopup = () => {
maskLayerShow.value = false
}
// 复制到剪贴板（原生方法）
const copyPhone = (text) => {
if (isSupported.value) {
@ -306,9 +382,131 @@ const copyPhone = (text) => {
}, 2000)
}
/**
* 连接APP并获取认证信息（优化版 - 仅专注连接）
*/
const connectToApp = async () => {
console.group('🔗 APP Connection Process')
console.debug('🚀 Starting APP connection...')
try {
// 检查是否在APP环境中
if (!isInApp()) {
console.debug('🌐 Browser environment detected')
appConnected.value = true
console.groupEnd()
// 触发连接成功回调
getAgencyList() // 获取代理列表
return { success: true, environment: 'browser' }
}
// 检查是否已经连接且未过期
if (isAppConnected()) {
console.debug('✅ APP already connected and valid')
appConnected.value = true
// 使用缓存的头部信息
const cachedHeaderInfo = getAppHeaderInfo()
if (cachedHeaderInfo) {
headerInfo.value = cachedHeaderInfo
console.debug('🔧 Using cached HTTP headers')
}
console.groupEnd()
// 触发连接成功回调
getAgencyList() // 获取代理列表
return { success: true, environment: 'app', fromCache: true }
}
// 检查是否有正在进行的连接
if (appConnectionManager.isConnecting()) {
console.debug('⏳ Connection already in progress, waiting...')
await appConnectionManager.getConnectionPromise()
appConnected.value = true
console.debug('✅ Connected via existing process')
console.groupEnd()
// 触发连接成功回调
getAgencyList() // 获取代理列表
return { success: true, environment: 'app', fromCache: true }
}
// 建立新的APP连接
console.debug('📱 Establishing new APP connection...')
const connectionResult = await new Promise((resolve, reject) => {
const connectionPromise = new Promise((connectResolve, connectReject) => {
connectApplication(async (access) => {
try {
const result = parseAccessOrigin(access)
if (result.success) {
// 解析头部信息
headerInfo.value = parseHeader(result.data)
// 设置HTTP请求头
console.debug('🔧 Setting HTTP headers...')
await setHttpHeaders(headerInfo.value)
// 标记连接成功
appConnected.value = true
appConnectionManager.setConnected(headerInfo.value)
console.debug('🎉 APP connection established successfully')
connectResolve({ success: true, environment: 'app', fromCache: false })
} else {
console.error('❌ Failed to parse access origin:', result.error)
appConnectionManager.reset()
connectReject(new Error(result.error))
}
} catch (error) {
console.error('❌ Connection process failed:', error)
appConnectionManager.reset()
connectReject(error)
}
})
})
// 设置连接状态
appConnectionManager.setConnecting(connectionPromise)
connectionPromise.then(resolve).catch(reject)
})
console.debug('✅ Connection completed successfully')
console.groupEnd()
// 触发连接成功回调
getAgencyList() // 获取代理列表
return connectionResult
} catch (error) {
console.error('❌ Connection failed:', error)
appConnected.value = false
console.groupEnd()
// 触发连接失败回调
// if (onConnectionFailed) {
// onConnectionFailed(error)
// }
// 连接失败的特殊处理
if (error.message && error.message.includes('parse access')) {
router.push({ path: '/not_app', query: { message: error.message } })
}
return { success: false, error: error.message }
}
}
onMounted(() => {
connectToApp()
isInAppEnvironment.value = isInApp()
console.log('images:', images)
})
</script>
@ -327,7 +525,7 @@ onMounted(() => {
@media screen and (max-width: 360px) {
* {
font-size: 10px;
font-size: 12px;
}
}