fix: 新增支付页面
This commit is contained in:
hzj
parent
4e6943a8d8
commit
bd7d271dea
39
src/api/pay.js
Normal file
39
src/api/pay.js
Normal file
@ -0,0 +1,39 @@
|
||||
import { get, post } from "../utils/http.js";
|
||||
|
||||
// 获取支付应用信息
|
||||
export const getPayAplication = async (applicationId) => {
|
||||
try {
|
||||
const response = await get(`/order/web/pay/application/${applicationId}`);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch get pay application:", error);
|
||||
onsole.error("error:" + error.response.errorMsg);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// 获取商品列表
|
||||
export const getAppCommodityCard = async (params) => {
|
||||
try {
|
||||
const response = await get(
|
||||
`/order/web/pay/commodity?applicationId=${params.applicationId}&payCountryId=${params.payCountryId}®ionId=${params.regionId}&type=GOLD`
|
||||
);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch get app commodity card:", error);
|
||||
onsole.error("error:" + error.response.errorMsg);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
// 下单充值
|
||||
export const payPlaceAnOrderRecharge = async (data) => {
|
||||
try {
|
||||
const response = await post("/order/web/pay/recharge", data);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch get pay application:", error);
|
||||
onsole.error("error:" + error.response.errorMsg);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
@ -2,91 +2,111 @@
|
||||
<div class="mobile-header" :class="{ 'in-app': isInAppEnvironment }">
|
||||
<!-- 状态栏占位区域（仅在APP中显示） -->
|
||||
<div v-if="isInAppEnvironment" class="status-bar-spacer"></div>
|
||||
|
||||
|
||||
<!-- header内容 -->
|
||||
<div class="header-content">
|
||||
<button v-if="showBack" class="back-btn" @click="handleBack">
|
||||
<svg class="back-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path
|
||||
d="M15 18L9 12L15 6"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<button v-if="showHelp" class="help-btn" @click="$emit('help')">
|
||||
<svg class="help-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12 17h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" />
|
||||
<path
|
||||
d="M9.09 9A3 3 0 0 1 12 6a3 3 0 0 1 3 3c0 2-3 3-3 3"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 17h.01"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div v-else class="placeholder"></div>
|
||||
|
||||
<slot name="extraFunction"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { closePage, isInApp } from '../utils/appBridge.js'
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import { computed, ref, onMounted } from "vue";
|
||||
import { closePage, isInApp } from "../utils/appBridge.js";
|
||||
|
||||
// 定义props
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
required: true,
|
||||
},
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
default: true,
|
||||
},
|
||||
showHelp: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
default: false,
|
||||
},
|
||||
isHomePage: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
// 定义emits
|
||||
defineEmits(['help'])
|
||||
defineEmits(["help"]);
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
||||
// 检测是否在APP环境中
|
||||
const isInAppEnvironment = ref(false)
|
||||
const isInAppEnvironment = ref(false);
|
||||
|
||||
// 定义首页路由列表
|
||||
const homeRoutes = ['/host-center', '/agency-center', '/coin-seller', '/']
|
||||
const homeRoutes = ["/host-center", "/agency-center", "/coin-seller", "/"];
|
||||
|
||||
// 计算是否为首页
|
||||
const isCurrentlyHomePage = computed(() => {
|
||||
// 1. 首先检查 props
|
||||
const propsHomePage = props.isHomePage === true || props.isHomePage === 'true'
|
||||
const propsHomePage = props.isHomePage === true || props.isHomePage === "true";
|
||||
|
||||
// 2. 然后检查路由
|
||||
const routeHomePage = homeRoutes.includes(route.path)
|
||||
const routeHomePage = homeRoutes.includes(route.path);
|
||||
|
||||
// 3. 两者任一为true即为首页
|
||||
return propsHomePage || routeHomePage
|
||||
})
|
||||
return propsHomePage || routeHomePage;
|
||||
});
|
||||
|
||||
const handleBack = () => {
|
||||
if (isCurrentlyHomePage.value && isInApp()) {
|
||||
// 首页且在APP中：关闭页面
|
||||
console.log('home back')
|
||||
closePage()
|
||||
console.log("home back");
|
||||
closePage();
|
||||
} else {
|
||||
// 非首页或浏览器环境：正常返回
|
||||
router.go(-1)
|
||||
router.go(-1);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 组件挂载时检测环境
|
||||
onMounted(() => {
|
||||
isInAppEnvironment.value = isInApp()
|
||||
})
|
||||
isInAppEnvironment.value = isInApp();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@ -112,7 +132,8 @@ onMounted(() => {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.back-btn, .help-btn {
|
||||
.back-btn,
|
||||
.help-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: none;
|
||||
@ -127,19 +148,22 @@ onMounted(() => {
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.back-btn:hover, .help-btn:hover {
|
||||
.back-btn:hover,
|
||||
.help-btn:hover {
|
||||
background: #e9ecef !important;
|
||||
color: #343a40 !important;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.back-btn:active, .help-btn:active {
|
||||
.back-btn:active,
|
||||
.help-btn:active {
|
||||
transform: scale(0.95);
|
||||
background: #dee2e6 !important;
|
||||
}
|
||||
|
||||
.back-icon, .help-icon {
|
||||
.back-icon,
|
||||
.help-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: inherit;
|
||||
@ -167,26 +191,28 @@ onMounted(() => {
|
||||
background: white !important;
|
||||
border-bottom-color: #f0f0f0 !important;
|
||||
}
|
||||
|
||||
|
||||
.status-bar-spacer {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
|
||||
.header-content {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
.back-btn, .help-btn {
|
||||
|
||||
.back-btn,
|
||||
.help-btn {
|
||||
background: #f8f9fa !important;
|
||||
border-color: #e9ecef !important;
|
||||
color: #495057 !important;
|
||||
}
|
||||
|
||||
.back-btn:hover, .help-btn:hover {
|
||||
|
||||
.back-btn:hover,
|
||||
.help-btn:hover {
|
||||
background: #e9ecef !important;
|
||||
color: #343a40 !important;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
color: #212529 !important;
|
||||
}
|
||||
@ -198,16 +224,17 @@ onMounted(() => {
|
||||
background: white !important;
|
||||
color: #212529 !important;
|
||||
}
|
||||
|
||||
|
||||
.mobile-header * {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
color: #212529 !important;
|
||||
}
|
||||
|
||||
.back-btn, .help-btn {
|
||||
|
||||
.back-btn,
|
||||
.help-btn {
|
||||
background: #f8f9fa !important;
|
||||
color: #495057 !important;
|
||||
border-color: #e9ecef !important;
|
||||
@ -219,12 +246,13 @@ onMounted(() => {
|
||||
.mobile-header {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
color: #212529 !important;
|
||||
}
|
||||
|
||||
.back-btn, .help-btn {
|
||||
|
||||
.back-btn,
|
||||
.help-btn {
|
||||
background: #f8f9fa !important;
|
||||
color: #495057 !important;
|
||||
}
|
||||
|
||||
@ -5,162 +5,175 @@
|
||||
|
||||
// 用户身份类型
|
||||
export const USER_ROLES = {
|
||||
FREIGHT_AGENT: 'freightAgent',
|
||||
AGENT: 'agent',
|
||||
BD: 'bd',
|
||||
ANCHOR: 'anchor',
|
||||
GUEST: 'guest'
|
||||
}
|
||||
FREIGHT_AGENT: "freightAgent",
|
||||
AGENT: "agent",
|
||||
BD: "bd",
|
||||
ANCHOR: "anchor",
|
||||
GUEST: "guest",
|
||||
ADMIN: "admin",
|
||||
};
|
||||
|
||||
// 页面路径常量
|
||||
export const PAGES = {
|
||||
COIN_SELLER: '/coin-seller',
|
||||
AGENCY_CENTER: '/agency-center',
|
||||
BD_CENTER: '/bd-center',
|
||||
HOST_CENTER: '/host-center',
|
||||
APPLY: '/apply',
|
||||
MESSAGE: '/message',
|
||||
TRANSFER: '/transfer',
|
||||
EXCHANGE: '/exchange-gold-coins',
|
||||
PERSONAL_SALARY: '/platform-policy',
|
||||
HOST_SETTING: '/host-setting',
|
||||
NOT_APP: '/not_app',
|
||||
LOADING: '/loading',
|
||||
}
|
||||
COIN_SELLER: "/coin-seller",
|
||||
AGENCY_CENTER: "/agency-center",
|
||||
BD_CENTER: "/bd-center",
|
||||
HOST_CENTER: "/host-center",
|
||||
APPLY: "/apply",
|
||||
MESSAGE: "/message",
|
||||
TRANSFER: "/transfer",
|
||||
EXCHANGE: "/exchange-gold-coins",
|
||||
PERSONAL_SALARY: "/platform-policy",
|
||||
HOST_SETTING: "/host-setting",
|
||||
NOT_APP: "/not_app",
|
||||
LOADING: "/loading",
|
||||
ADMIN_CENTER: "/admin-center",
|
||||
RECHARGE_STANDARD: "/recharge-standard",
|
||||
};
|
||||
|
||||
// 🎯 核心改变：基于身份的权限配置
|
||||
// 每个身份拥有的页面权限列表
|
||||
export const ROLE_PERMISSIONS = {
|
||||
// Freight Agent (货运代理/金币销售员)
|
||||
[USER_ROLES.FREIGHT_AGENT]: [
|
||||
PAGES.COIN_SELLER, // 主页面
|
||||
'/seller-records',
|
||||
'/coin-seller-search'
|
||||
PAGES.COIN_SELLER, // 主页面
|
||||
"/seller-records",
|
||||
"/coin-seller-search",
|
||||
"/recharge-freight-agent",
|
||||
],
|
||||
|
||||
// Agent (代理商)
|
||||
[USER_ROLES.AGENT]: [
|
||||
PAGES.AGENCY_CENTER, // 主页面
|
||||
PAGES.TRANSFER, // 转账功能
|
||||
PAGES.EXCHANGE, // 兑换功能
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
||||
'/team-member',
|
||||
'/information-details',
|
||||
'/search-payee',
|
||||
'/history-salary',
|
||||
'/platform-salary',
|
||||
'/invite-members',
|
||||
'/team-bill'
|
||||
PAGES.AGENCY_CENTER, // 主页面
|
||||
PAGES.TRANSFER, // 转账功能
|
||||
PAGES.EXCHANGE, // 兑换功能
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
||||
"/team-member",
|
||||
"/information-details",
|
||||
"/search-payee",
|
||||
"/history-salary",
|
||||
"/platform-salary",
|
||||
"/invite-members",
|
||||
"/team-bill",
|
||||
],
|
||||
|
||||
// BD (商务拓展)
|
||||
[USER_ROLES.BD]: [
|
||||
PAGES.BD_CENTER, // 主页面
|
||||
PAGES.TRANSFER, // 转账功能
|
||||
PAGES.EXCHANGE, // 兑换功能
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
'/team-member',
|
||||
'/history-salary',
|
||||
'/platform-salary'
|
||||
PAGES.BD_CENTER, // 主页面
|
||||
PAGES.TRANSFER, // 转账功能
|
||||
PAGES.EXCHANGE, // 兑换功能
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
||||
"/team-member",
|
||||
"/history-salary",
|
||||
"/platform-salary",
|
||||
],
|
||||
|
||||
// Anchor (主播)
|
||||
[USER_ROLES.ANCHOR]: [
|
||||
PAGES.HOST_CENTER, // 主页面
|
||||
PAGES.TRANSFER, // 转账功能
|
||||
PAGES.EXCHANGE, // 兑换功能
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
||||
PAGES.HOST_SETTING, // 主播设置
|
||||
'/information-details',
|
||||
'/search-payee',
|
||||
'/apply',
|
||||
'/history-salary',
|
||||
'/platform-salary',
|
||||
'/invite-members',
|
||||
'/team-bill'
|
||||
PAGES.HOST_CENTER, // 主页面
|
||||
PAGES.TRANSFER, // 转账功能
|
||||
PAGES.EXCHANGE, // 兑换功能
|
||||
PAGES.MESSAGE, // 消息功能
|
||||
PAGES.PERSONAL_SALARY, // 个人薪资查看
|
||||
PAGES.HOST_SETTING, // 主播设置
|
||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
||||
"/information-details",
|
||||
"/search-payee",
|
||||
"/apply",
|
||||
"/history-salary",
|
||||
"/platform-salary",
|
||||
"/invite-members",
|
||||
"/team-bill",
|
||||
],
|
||||
|
||||
// Admin（管理员）
|
||||
[USER_ROLES.ADMIN]: [
|
||||
PAGES.ADMIN_CENTER, //管理员的身份验证
|
||||
"/item-distribution", //赠送商品页面
|
||||
PAGES.RECHARGE_STANDARD, //普通转账功能
|
||||
],
|
||||
|
||||
// Guest (访客/申请者)
|
||||
[USER_ROLES.GUEST]: [
|
||||
PAGES.APPLY, // 申请页面
|
||||
PAGES.APPLY, // 申请页面
|
||||
],
|
||||
|
||||
// 公共页面（所有身份都可以访问）
|
||||
PUBLIC_PAGES: [
|
||||
PAGES.NOT_APP, // 错误页面
|
||||
PAGES.NOT_APP, // 错误页面
|
||||
],
|
||||
|
||||
// 加载页面
|
||||
LOADING_PAGE: [
|
||||
PAGES.LOADING
|
||||
]
|
||||
|
||||
}
|
||||
LOADING_PAGE: [PAGES.LOADING],
|
||||
};
|
||||
|
||||
// 身份优先级（数字越大优先级越高）
|
||||
export const ROLE_PRIORITY = {
|
||||
[USER_ROLES.ADMIN]: 5,
|
||||
[USER_ROLES.FREIGHT_AGENT]: 4,
|
||||
[USER_ROLES.BD]: 3,
|
||||
[USER_ROLES.AGENT]: 2,
|
||||
[USER_ROLES.ANCHOR]: 1,
|
||||
[USER_ROLES.GUEST]: 0
|
||||
}
|
||||
[USER_ROLES.GUEST]: 0,
|
||||
};
|
||||
|
||||
// 身份对应的默认首页
|
||||
export const ROLE_DEFAULT_PAGES = {
|
||||
[USER_ROLES.ADMIN]: PAGES.ADMIN_CENTER,
|
||||
[USER_ROLES.FREIGHT_AGENT]: PAGES.COIN_SELLER,
|
||||
[USER_ROLES.AGENT]: PAGES.AGENCY_CENTER,
|
||||
[USER_ROLES.BD]: PAGES.BD_CENTER,
|
||||
[USER_ROLES.ANCHOR]: PAGES.HOST_CENTER,
|
||||
[USER_ROLES.GUEST]: PAGES.APPLY
|
||||
}
|
||||
[USER_ROLES.GUEST]: PAGES.APPLY,
|
||||
};
|
||||
|
||||
// 身份显示配置
|
||||
export const ROLE_DISPLAY_CONFIG = {
|
||||
[USER_ROLES.FREIGHT_AGENT]: {
|
||||
name: 'Freight Agent',
|
||||
tag: '💰 Coin Seller',
|
||||
color: '#FCD34D',
|
||||
bgColor: '#FEF3C7'
|
||||
name: "Freight Agent",
|
||||
tag: "💰 Coin Seller",
|
||||
color: "#FCD34D",
|
||||
bgColor: "#FEF3C7",
|
||||
},
|
||||
[USER_ROLES.AGENT]: {
|
||||
name: 'Agent',
|
||||
tag: '🏢 Agency',
|
||||
color: '#1E40AF',
|
||||
bgColor: '#DBEAFE'
|
||||
name: "Agent",
|
||||
tag: "🏢 Agency",
|
||||
color: "#1E40AF",
|
||||
bgColor: "#DBEAFE",
|
||||
},
|
||||
[USER_ROLES.BD]: {
|
||||
name: 'BD',
|
||||
tag: '📈 BD',
|
||||
color: '#059669',
|
||||
bgColor: '#D1FAE5'
|
||||
name: "BD",
|
||||
tag: "📈 BD",
|
||||
color: "#059669",
|
||||
bgColor: "#D1FAE5",
|
||||
},
|
||||
[USER_ROLES.ANCHOR]: {
|
||||
name: 'Anchor',
|
||||
tag: '👑 Host',
|
||||
color: '#5B21B6',
|
||||
bgColor: '#E0E7FF'
|
||||
name: "Anchor",
|
||||
tag: "👑 Host",
|
||||
color: "#5B21B6",
|
||||
bgColor: "#E0E7FF",
|
||||
},
|
||||
[USER_ROLES.GUEST]: {
|
||||
name: 'Guest',
|
||||
tag: '👤 Guest',
|
||||
color: '#6B7280',
|
||||
bgColor: '#F3F4F6'
|
||||
}
|
||||
}
|
||||
name: "Guest",
|
||||
tag: "👤 Guest",
|
||||
color: "#6B7280",
|
||||
bgColor: "#F3F4F6",
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* 基于身份的权限管理类
|
||||
*/
|
||||
class RoleBasedPermissionManager {
|
||||
constructor() {
|
||||
this.userIdentity = null
|
||||
this.primaryRole = null
|
||||
this.allRoles = []
|
||||
this.isIdentityLoaded = false
|
||||
this.allowedPages = []
|
||||
this.userIdentity = null;
|
||||
this.primaryRole = null;
|
||||
this.allRoles = [];
|
||||
this.isIdentityLoaded = false;
|
||||
this.allowedPages = [];
|
||||
}
|
||||
|
||||
/**
|
||||
@ -168,18 +181,18 @@ class RoleBasedPermissionManager {
|
||||
* @param {Object} identity - 身份信息对象
|
||||
*/
|
||||
setUserIdentity(identity) {
|
||||
this.userIdentity = identity
|
||||
this.allRoles = this.calculateAllRoles(identity)
|
||||
this.primaryRole = this.calculatePrimaryRole(this.allRoles)
|
||||
this.allowedPages = this.calculateAllowedPages(this.allRoles)
|
||||
this.isIdentityLoaded = true
|
||||
this.userIdentity = identity;
|
||||
this.allRoles = this.calculateAllRoles(identity);
|
||||
this.primaryRole = this.calculatePrimaryRole(this.allRoles);
|
||||
this.allowedPages = this.calculateAllowedPages(this.allRoles);
|
||||
this.isIdentityLoaded = true;
|
||||
|
||||
console.debug('🔐 User identity updated:', {
|
||||
console.debug("🔐 User identity updated:", {
|
||||
identity: this.userIdentity,
|
||||
allRoles: this.allRoles,
|
||||
primaryRole: this.primaryRole,
|
||||
allowedPages: this.allowedPages
|
||||
})
|
||||
allowedPages: this.allowedPages,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -188,15 +201,16 @@ class RoleBasedPermissionManager {
|
||||
* @returns {Array} 所有身份列表
|
||||
*/
|
||||
calculateAllRoles(identity) {
|
||||
if (!identity) return [USER_ROLES.GUEST]
|
||||
if (!identity) return [USER_ROLES.GUEST];
|
||||
|
||||
const roles = []
|
||||
if (identity.freightAgent) roles.push(USER_ROLES.FREIGHT_AGENT)
|
||||
if (identity.agent) roles.push(USER_ROLES.AGENT)
|
||||
if (identity.bd) roles.push(USER_ROLES.BD)
|
||||
if (identity.anchor) roles.push(USER_ROLES.ANCHOR)
|
||||
const roles = [];
|
||||
if (identity.freightAgent) roles.push(USER_ROLES.FREIGHT_AGENT);
|
||||
if (identity.agent) roles.push(USER_ROLES.AGENT);
|
||||
if (identity.bd) roles.push(USER_ROLES.BD);
|
||||
if (identity.anchor) roles.push(USER_ROLES.ANCHOR);
|
||||
if (identity.admin) roles.push(USER_ROLES.ADMIN);
|
||||
|
||||
return roles.length > 0 ? roles : [USER_ROLES.GUEST]
|
||||
return roles.length > 0 ? roles : [USER_ROLES.GUEST];
|
||||
}
|
||||
|
||||
/**
|
||||
@ -205,12 +219,12 @@ class RoleBasedPermissionManager {
|
||||
* @returns {string} 主要身份
|
||||
*/
|
||||
calculatePrimaryRole(roles) {
|
||||
if (!roles || roles.length === 0) return USER_ROLES.GUEST
|
||||
if (!roles || roles.length === 0) return USER_ROLES.GUEST;
|
||||
|
||||
// 按优先级排序，返回优先级最高的身份
|
||||
return roles.reduce((highest, current) => {
|
||||
return ROLE_PRIORITY[current] > ROLE_PRIORITY[highest] ? current : highest
|
||||
}, USER_ROLES.GUEST)
|
||||
return ROLE_PRIORITY[current] > ROLE_PRIORITY[highest] ? current : highest;
|
||||
}, USER_ROLES.GUEST);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -219,27 +233,27 @@ class RoleBasedPermissionManager {
|
||||
* @returns {Array} 允许访问的页面列表
|
||||
*/
|
||||
calculateAllowedPages(roles) {
|
||||
const allowedPages = new Set()
|
||||
const allowedPages = new Set();
|
||||
|
||||
// 添加公共页面
|
||||
ROLE_PERMISSIONS.PUBLIC_PAGES.forEach(page => {
|
||||
allowedPages.add(page)
|
||||
})
|
||||
ROLE_PERMISSIONS.PUBLIC_PAGES.forEach((page) => {
|
||||
allowedPages.add(page);
|
||||
});
|
||||
|
||||
// 添加loading页面
|
||||
ROLE_PERMISSIONS.LOADING_PAGE.forEach(page => {
|
||||
allowedPages.add(page)
|
||||
})
|
||||
ROLE_PERMISSIONS.LOADING_PAGE.forEach((page) => {
|
||||
allowedPages.add(page);
|
||||
});
|
||||
|
||||
// 根据用户拥有的每个身份，添加对应的页面权限
|
||||
roles.forEach(role => {
|
||||
const rolePages = ROLE_PERMISSIONS[role] || []
|
||||
rolePages.forEach(page => {
|
||||
allowedPages.add(page)
|
||||
})
|
||||
})
|
||||
roles.forEach((role) => {
|
||||
const rolePages = ROLE_PERMISSIONS[role] || [];
|
||||
rolePages.forEach((page) => {
|
||||
allowedPages.add(page);
|
||||
});
|
||||
});
|
||||
|
||||
return Array.from(allowedPages)
|
||||
return Array.from(allowedPages);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -249,20 +263,20 @@ class RoleBasedPermissionManager {
|
||||
*/
|
||||
hasPagePermission(page) {
|
||||
if (!this.isIdentityLoaded) {
|
||||
console.warn('⚠️ Identity not loaded yet')
|
||||
return false
|
||||
console.warn("⚠️ Identity not loaded yet");
|
||||
return false;
|
||||
}
|
||||
|
||||
const hasPermission = this.allowedPages.includes(page)
|
||||
const hasPermission = this.allowedPages.includes(page);
|
||||
|
||||
console.debug('🔍 Permission check:', {
|
||||
console.debug("🔍 Permission check:", {
|
||||
page,
|
||||
allRoles: this.allRoles,
|
||||
primaryRole: this.primaryRole,
|
||||
hasPermission
|
||||
})
|
||||
hasPermission,
|
||||
});
|
||||
|
||||
return hasPermission
|
||||
return hasPermission;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -272,10 +286,10 @@ class RoleBasedPermissionManager {
|
||||
* @returns {boolean} 是否有权限
|
||||
*/
|
||||
hasRolePagePermission(role, page) {
|
||||
const rolePages = ROLE_PERMISSIONS[role] || []
|
||||
const publicPages = ROLE_PERMISSIONS.PUBLIC_PAGES || []
|
||||
const rolePages = ROLE_PERMISSIONS[role] || [];
|
||||
const publicPages = ROLE_PERMISSIONS.PUBLIC_PAGES || [];
|
||||
|
||||
return rolePages.includes(page) || publicPages.includes(page)
|
||||
return rolePages.includes(page) || publicPages.includes(page);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -284,10 +298,10 @@ class RoleBasedPermissionManager {
|
||||
* @returns {Array} 页面权限列表
|
||||
*/
|
||||
getRolePermissions(role) {
|
||||
const rolePages = ROLE_PERMISSIONS[role] || []
|
||||
const publicPages = ROLE_PERMISSIONS.PUBLIC_PAGES || []
|
||||
const rolePages = ROLE_PERMISSIONS[role] || [];
|
||||
const publicPages = ROLE_PERMISSIONS.PUBLIC_PAGES || [];
|
||||
|
||||
return [...new Set([...rolePages, ...publicPages])]
|
||||
return [...new Set([...rolePages, ...publicPages])];
|
||||
}
|
||||
|
||||
/**
|
||||
@ -295,7 +309,7 @@ class RoleBasedPermissionManager {
|
||||
* @returns {string} 默认页面路径
|
||||
*/
|
||||
getDefaultPage() {
|
||||
return ROLE_DEFAULT_PAGES[this.primaryRole] || PAGES.APPLY
|
||||
return ROLE_DEFAULT_PAGES[this.primaryRole] || PAGES.APPLY;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -303,7 +317,7 @@ class RoleBasedPermissionManager {
|
||||
* @returns {string} 当前主要身份
|
||||
*/
|
||||
getPrimaryRole() {
|
||||
return this.primaryRole
|
||||
return this.primaryRole;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -311,7 +325,7 @@ class RoleBasedPermissionManager {
|
||||
* @returns {Array} 所有身份
|
||||
*/
|
||||
getAllRoles() {
|
||||
return this.allRoles
|
||||
return this.allRoles;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -320,7 +334,7 @@ class RoleBasedPermissionManager {
|
||||
* @returns {Object} 显示信息
|
||||
*/
|
||||
getRoleDisplayInfo(role = this.primaryRole) {
|
||||
return ROLE_DISPLAY_CONFIG[role] || ROLE_DISPLAY_CONFIG[USER_ROLES.GUEST]
|
||||
return ROLE_DISPLAY_CONFIG[role] || ROLE_DISPLAY_CONFIG[USER_ROLES.GUEST];
|
||||
}
|
||||
|
||||
/**
|
||||
@ -328,7 +342,7 @@ class RoleBasedPermissionManager {
|
||||
* @returns {boolean} 是否有多重身份
|
||||
*/
|
||||
hasMultipleRoles() {
|
||||
return this.allRoles.length > 1
|
||||
return this.allRoles.length > 1;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -338,11 +352,11 @@ class RoleBasedPermissionManager {
|
||||
*/
|
||||
switchToRole(role) {
|
||||
if (!this.allRoles.includes(role)) {
|
||||
console.warn(`⚠️ User does not have role: ${role}`)
|
||||
return this.getDefaultPage()
|
||||
console.warn(`⚠️ User does not have role: ${role}`);
|
||||
return this.getDefaultPage();
|
||||
}
|
||||
|
||||
return ROLE_DEFAULT_PAGES[role] || PAGES.APPLY
|
||||
return ROLE_DEFAULT_PAGES[role] || PAGES.APPLY;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -350,16 +364,16 @@ class RoleBasedPermissionManager {
|
||||
* @returns {Array} 可访问的页面菜单
|
||||
*/
|
||||
getNavigationMenu() {
|
||||
const menu = []
|
||||
const menu = [];
|
||||
|
||||
this.allowedPages.forEach(page => {
|
||||
const menuItem = this.getPageMenuInfo(page)
|
||||
this.allowedPages.forEach((page) => {
|
||||
const menuItem = this.getPageMenuInfo(page);
|
||||
if (menuItem) {
|
||||
menu.push(menuItem)
|
||||
menu.push(menuItem);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return menu
|
||||
return menu;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -369,31 +383,31 @@ class RoleBasedPermissionManager {
|
||||
*/
|
||||
getPageMenuInfo(page) {
|
||||
const pageMenuConfig = {
|
||||
[PAGES.COIN_SELLER]: { title: 'Coin Seller', icon: '💰', order: 1 },
|
||||
[PAGES.AGENCY_CENTER]: { title: 'Agency Center', icon: '🏢', order: 2 },
|
||||
[PAGES.BD_CENTER]: { title: 'BD Center', icon: '📈', order: 3 },
|
||||
[PAGES.HOST_CENTER]: { title: 'Host Center', icon: '👑', order: 4 },
|
||||
[PAGES.TRANSFER]: { title: 'Transfer', icon: '💸', order: 5 },
|
||||
[PAGES.EXCHANGE]: { title: 'Exchange', icon: '🔄', order: 6 },
|
||||
[PAGES.MESSAGE]: { title: 'Messages', icon: '💬', order: 7 },
|
||||
[PAGES.PERSONAL_SALARY]: { title: 'Salary', icon: '💵', order: 8 },
|
||||
[PAGES.HOST_SETTING]: { title: 'Settings', icon: '⚙️', order: 9 }
|
||||
}
|
||||
[PAGES.COIN_SELLER]: { title: "Coin Seller", icon: "💰", order: 1 },
|
||||
[PAGES.AGENCY_CENTER]: { title: "Agency Center", icon: "🏢", order: 2 },
|
||||
[PAGES.BD_CENTER]: { title: "BD Center", icon: "📈", order: 3 },
|
||||
[PAGES.HOST_CENTER]: { title: "Host Center", icon: "👑", order: 4 },
|
||||
[PAGES.TRANSFER]: { title: "Transfer", icon: "💸", order: 5 },
|
||||
[PAGES.EXCHANGE]: { title: "Exchange", icon: "🔄", order: 6 },
|
||||
[PAGES.MESSAGE]: { title: "Messages", icon: "💬", order: 7 },
|
||||
[PAGES.PERSONAL_SALARY]: { title: "Salary", icon: "💵", order: 8 },
|
||||
[PAGES.HOST_SETTING]: { title: "Settings", icon: "⚙️", order: 9 },
|
||||
};
|
||||
|
||||
const config = pageMenuConfig[page]
|
||||
return config ? { ...config, path: page } : null
|
||||
const config = pageMenuConfig[page];
|
||||
return config ? { ...config, path: page } : null;
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置权限信息
|
||||
*/
|
||||
reset() {
|
||||
this.userIdentity = null
|
||||
this.primaryRole = null
|
||||
this.allRoles = []
|
||||
this.isIdentityLoaded = false
|
||||
this.allowedPages = []
|
||||
console.debug('🔄 Permission manager reset')
|
||||
this.userIdentity = null;
|
||||
this.primaryRole = null;
|
||||
this.allRoles = [];
|
||||
this.isIdentityLoaded = false;
|
||||
this.allowedPages = [];
|
||||
console.debug("🔄 Permission manager reset");
|
||||
}
|
||||
|
||||
/**
|
||||
@ -401,64 +415,65 @@ class RoleBasedPermissionManager {
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isLoaded() {
|
||||
return this.isIdentityLoaded
|
||||
return this.isIdentityLoaded;
|
||||
}
|
||||
|
||||
/**
|
||||
* 调试方法：打印当前权限状态
|
||||
*/
|
||||
debugPermissions() {
|
||||
console.group('🔐 Current Permission State')
|
||||
console.log('User Identity:', this.userIdentity)
|
||||
console.log('All Roles:', this.allRoles)
|
||||
console.log('Primary Role:', this.primaryRole)
|
||||
console.log('Allowed Pages:', this.allowedPages)
|
||||
console.log('Default Page:', this.getDefaultPage())
|
||||
console.log('Navigation Menu:', this.getNavigationMenu())
|
||||
console.groupEnd()
|
||||
console.group("🔐 Current Permission State");
|
||||
console.log("User Identity:", this.userIdentity);
|
||||
console.log("All Roles:", this.allRoles);
|
||||
console.log("Primary Role:", this.primaryRole);
|
||||
console.log("Allowed Pages:", this.allowedPages);
|
||||
console.log("Default Page:", this.getDefaultPage());
|
||||
console.log("Navigation Menu:", this.getNavigationMenu());
|
||||
console.groupEnd();
|
||||
}
|
||||
}
|
||||
|
||||
// 创建全局权限管理实例
|
||||
export const permissionManager = new RoleBasedPermissionManager()
|
||||
export const permissionManager = new RoleBasedPermissionManager();
|
||||
|
||||
// 便捷方法
|
||||
export const hasPermission = (page) => permissionManager.hasPagePermission(page)
|
||||
export const hasRolePermission = (role, page) => permissionManager.hasRolePagePermission(role, page)
|
||||
export const getRolePermissions = (role) => permissionManager.getRolePermissions(role)
|
||||
export const getDefaultPage = () => permissionManager.getDefaultPage()
|
||||
export const getPrimaryRole = () => permissionManager.getPrimaryRole()
|
||||
export const getAllRoles = () => permissionManager.getAllRoles()
|
||||
export const getRoleDisplayInfo = (role) => permissionManager.getRoleDisplayInfo(role)
|
||||
export const setUserIdentity = (identity) => permissionManager.setUserIdentity(identity)
|
||||
export const resetPermissions = () => permissionManager.reset()
|
||||
export const switchToRole = (role) => permissionManager.switchToRole(role)
|
||||
export const getNavigationMenu = () => permissionManager.getNavigationMenu()
|
||||
export const debugPermissions = () => permissionManager.debugPermissions()
|
||||
export const hasPermission = (page) => permissionManager.hasPagePermission(page);
|
||||
export const hasRolePermission = (role, page) =>
|
||||
permissionManager.hasRolePagePermission(role, page);
|
||||
export const getRolePermissions = (role) => permissionManager.getRolePermissions(role);
|
||||
export const getDefaultPage = () => permissionManager.getDefaultPage();
|
||||
export const getPrimaryRole = () => permissionManager.getPrimaryRole();
|
||||
export const getAllRoles = () => permissionManager.getAllRoles();
|
||||
export const getRoleDisplayInfo = (role) => permissionManager.getRoleDisplayInfo(role);
|
||||
export const setUserIdentity = (identity) => permissionManager.setUserIdentity(identity);
|
||||
export const resetPermissions = () => permissionManager.reset();
|
||||
export const switchToRole = (role) => permissionManager.switchToRole(role);
|
||||
export const getNavigationMenu = () => permissionManager.getNavigationMenu();
|
||||
export const debugPermissions = () => permissionManager.debugPermissions();
|
||||
|
||||
// 🎯 新增：快速查询某个身份的权限
|
||||
export const QUICK_ROLE_CHECK = {
|
||||
// 检查 Freight Agent 的权限
|
||||
freightAgent: {
|
||||
pages: getRolePermissions(USER_ROLES.FREIGHT_AGENT),
|
||||
canAccess: (page) => hasRolePermission(USER_ROLES.FREIGHT_AGENT, page)
|
||||
canAccess: (page) => hasRolePermission(USER_ROLES.FREIGHT_AGENT, page),
|
||||
},
|
||||
|
||||
// 检查 Agent 的权限
|
||||
agent: {
|
||||
pages: getRolePermissions(USER_ROLES.AGENT),
|
||||
canAccess: (page) => hasRolePermission(USER_ROLES.AGENT, page)
|
||||
canAccess: (page) => hasRolePermission(USER_ROLES.AGENT, page),
|
||||
},
|
||||
|
||||
// 检查 BD 的权限
|
||||
bd: {
|
||||
pages: getRolePermissions(USER_ROLES.BD),
|
||||
canAccess: (page) => hasRolePermission(USER_ROLES.BD, page)
|
||||
canAccess: (page) => hasRolePermission(USER_ROLES.BD, page),
|
||||
},
|
||||
|
||||
// 检查 Anchor 的权限
|
||||
anchor: {
|
||||
pages: getRolePermissions(USER_ROLES.ANCHOR),
|
||||
canAccess: (page) => hasRolePermission(USER_ROLES.ANCHOR, page)
|
||||
}
|
||||
}
|
||||
canAccess: (page) => hasRolePermission(USER_ROLES.ANCHOR, page),
|
||||
},
|
||||
};
|
||||
|
||||
@ -3,18 +3,24 @@
|
||||
* 提供APP连接检查、页面访问权限控制和自动重定向功能
|
||||
*/
|
||||
|
||||
import { permissionManager, PAGES, USER_ROLES } from './permissionManager.js'
|
||||
import {getUserIdentity, getMemberProfile} from '../api/wallet.js'
|
||||
import {getUserId, setUserInfo} from './userStore.js'
|
||||
import { connectApplication, parseAccessOrigin, parseHeader, setHttpHeaders, isInApp } from './appBridge.js'
|
||||
import { appConnectionManager, isAppConnected } from './appConnectionManager.js'
|
||||
import { permissionManager, PAGES, USER_ROLES } from "./permissionManager.js";
|
||||
import { getUserIdentity, getMemberProfile } from "../api/wallet.js";
|
||||
import { getUserId, setUserInfo } from "./userStore.js";
|
||||
import {
|
||||
connectApplication,
|
||||
parseAccessOrigin,
|
||||
parseHeader,
|
||||
setHttpHeaders,
|
||||
isInApp,
|
||||
} from "./appBridge.js";
|
||||
import { appConnectionManager, isAppConnected } from "./appConnectionManager.js";
|
||||
|
||||
/**
|
||||
* APP连接检查器
|
||||
*/
|
||||
class AppConnectionChecker {
|
||||
constructor() {
|
||||
this.isConnecting = false
|
||||
this.isConnecting = false;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -22,88 +28,91 @@ class AppConnectionChecker {
|
||||
* @returns {Promise<boolean>} 连接是否成功
|
||||
*/
|
||||
async ensureConnection() {
|
||||
console.debug('🔗 Checking APP connection...')
|
||||
console.debug("🔗 Checking APP connection...");
|
||||
|
||||
// 如果不在APP环境中，直接返回成功
|
||||
|
||||
console.log("我是app环境", window.app);
|
||||
console.log("我是app环境", window.webkit);
|
||||
console.log("我是app环境", window.FlutterPageControl);
|
||||
if (!isInApp()) {
|
||||
console.debug('🌐 Browser environment, no connection needed')
|
||||
return true
|
||||
console.debug("🌐 Browser environment, no connection needed");
|
||||
return true;
|
||||
}
|
||||
|
||||
// 如果已经连接且未超时，直接返回成功
|
||||
if (isAppConnected()) {
|
||||
console.debug('✅ APP already connected')
|
||||
return true
|
||||
console.debug("✅ APP already connected");
|
||||
return true;
|
||||
}
|
||||
|
||||
// 如果正在连接中，等待现有连接
|
||||
if (appConnectionManager.isConnecting()) {
|
||||
console.debug('⏳ Connection already in progress, waiting...')
|
||||
console.debug("⏳ Connection already in progress, waiting...");
|
||||
try {
|
||||
await appConnectionManager.getConnectionPromise()
|
||||
return isAppConnected()
|
||||
await appConnectionManager.getConnectionPromise();
|
||||
return isAppConnected();
|
||||
} catch (error) {
|
||||
console.error('❌ Connection wait failed:', error)
|
||||
return false
|
||||
console.error("❌ Connection wait failed:", error);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 开始新的连接
|
||||
return await this._performConnection()
|
||||
return await this._performConnection();
|
||||
}
|
||||
|
||||
/**
|
||||
* 执行APP连接
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
* 执行APP连接
|
||||
* @returns {Promise<boolean>}
|
||||
*/
|
||||
async _performConnection() {
|
||||
try {
|
||||
console.debug('📱 Starting new APP connection...')
|
||||
|
||||
const connectionPromise = new Promise((resolve, reject) => {
|
||||
connectApplication(async (access) => {
|
||||
try {
|
||||
const result = parseAccessOrigin(access)
|
||||
console.debug("📱 Starting new APP connection...");
|
||||
|
||||
if (result.success) {
|
||||
// 解析头部信息
|
||||
const headerInfo = parseHeader(result.data)
|
||||
const connectionPromise = new Promise((resolve, reject) => {
|
||||
connectApplication(async (access) => {
|
||||
try {
|
||||
const result = parseAccessOrigin(access);
|
||||
|
||||
// 设置HTTP请求头
|
||||
await setHttpHeaders(headerInfo)
|
||||
if (result.success) {
|
||||
// 解析头部信息
|
||||
const headerInfo = parseHeader(result.data);
|
||||
|
||||
// 更新连接状态
|
||||
appConnectionManager.setConnected(headerInfo)
|
||||
// 设置HTTP请求头
|
||||
await setHttpHeaders(headerInfo);
|
||||
|
||||
console.debug('🎉 APP connection established successfully')
|
||||
// 更新连接状态
|
||||
appConnectionManager.setConnected(headerInfo);
|
||||
|
||||
// APP连接成功后立即获取用户信息
|
||||
await this._fetchUserInfoAfterConnection()
|
||||
console.debug("🎉 APP connection established successfully");
|
||||
|
||||
resolve(true)
|
||||
} else {
|
||||
console.error('❌ Failed to parse access origin:', result.error)
|
||||
appConnectionManager.reset()
|
||||
reject(new Error(result.error))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Connection process failed:', error)
|
||||
appConnectionManager.reset()
|
||||
reject(error)
|
||||
}
|
||||
})
|
||||
})
|
||||
// APP连接成功后立即获取用户信息
|
||||
await this._fetchUserInfoAfterConnection();
|
||||
|
||||
// 设置连接状态
|
||||
appConnectionManager.setConnecting(connectionPromise)
|
||||
resolve(true);
|
||||
} else {
|
||||
console.error("❌ Failed to parse access origin:", result.error);
|
||||
appConnectionManager.reset();
|
||||
reject(new Error(result.error));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ Connection process failed:", error);
|
||||
appConnectionManager.reset();
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 等待连接完成
|
||||
return await connectionPromise
|
||||
// 设置连接状态
|
||||
appConnectionManager.setConnecting(connectionPromise);
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ APP connection failed:', error)
|
||||
appConnectionManager.reset()
|
||||
return false
|
||||
// 等待连接完成
|
||||
return await connectionPromise;
|
||||
} catch (error) {
|
||||
console.error("❌ APP connection failed:", error);
|
||||
appConnectionManager.reset();
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -113,21 +122,21 @@ class AppConnectionChecker {
|
||||
*/
|
||||
async _fetchUserInfoAfterConnection() {
|
||||
try {
|
||||
console.debug('👤 Fetching user info after connection...')
|
||||
console.debug("👤 Fetching user info after connection...");
|
||||
|
||||
const response = await getMemberProfile()
|
||||
const response = await getMemberProfile();
|
||||
|
||||
if (response && response.status && response.body) {
|
||||
// 缓存用户信息
|
||||
console.debug('✅ User info cached successfully')
|
||||
setUserInfo(response.body, null)
|
||||
console.debug("✅ User info cached successfully");
|
||||
setUserInfo(response.body, null);
|
||||
} else {
|
||||
console.warn('⚠️ Failed to get team entry or invalid response')
|
||||
console.warn("⚠️ Failed to get team entry or invalid response");
|
||||
}
|
||||
} catch (error) {
|
||||
// 这里不抛出错误，因为APP连接已经成功
|
||||
// 用户信息获取失败可以在后续的身份检查中处理
|
||||
console.warn('⚠️ Failed to fetch user info after connection:', error)
|
||||
console.warn("⚠️ Failed to fetch user info after connection:", error);
|
||||
}
|
||||
}
|
||||
|
||||
@ -135,7 +144,7 @@ class AppConnectionChecker {
|
||||
* 重置连接状态
|
||||
*/
|
||||
reset() {
|
||||
appConnectionManager.reset()
|
||||
appConnectionManager.reset();
|
||||
}
|
||||
}
|
||||
|
||||
@ -144,8 +153,8 @@ class AppConnectionChecker {
|
||||
*/
|
||||
class IdentityChecker {
|
||||
constructor() {
|
||||
this.isChecking = false
|
||||
this.checkPromise = null
|
||||
this.isChecking = false;
|
||||
this.checkPromise = null;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -155,26 +164,26 @@ class IdentityChecker {
|
||||
*/
|
||||
async checkUserIdentity(userId) {
|
||||
if (!userId) {
|
||||
console.warn('⚠️ No user ID provided')
|
||||
permissionManager.setUserIdentity(null)
|
||||
return USER_ROLES.GUEST
|
||||
console.warn("⚠️ No user ID provided");
|
||||
permissionManager.setUserIdentity(null);
|
||||
return USER_ROLES.GUEST;
|
||||
}
|
||||
|
||||
// 如果正在检查中，等待现有的检查完成
|
||||
if (this.isChecking && this.checkPromise) {
|
||||
console.debug('⏳ Identity check already in progress, waiting...')
|
||||
return await this.checkPromise
|
||||
console.debug("⏳ Identity check already in progress, waiting...");
|
||||
return await this.checkPromise;
|
||||
}
|
||||
|
||||
this.isChecking = true
|
||||
this.checkPromise = this._performIdentityCheck(userId)
|
||||
this.isChecking = true;
|
||||
this.checkPromise = this._performIdentityCheck(userId);
|
||||
|
||||
try {
|
||||
const primaryRole = await this.checkPromise
|
||||
return primaryRole
|
||||
const primaryRole = await this.checkPromise;
|
||||
return primaryRole;
|
||||
} finally {
|
||||
this.isChecking = false
|
||||
this.checkPromise = null
|
||||
this.isChecking = false;
|
||||
this.checkPromise = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -185,27 +194,27 @@ class IdentityChecker {
|
||||
*/
|
||||
async _performIdentityCheck(userId) {
|
||||
try {
|
||||
console.debug('🔍 Checking user identity for:', userId)
|
||||
console.debug("🔍 Checking user identity for:", userId);
|
||||
|
||||
const response = await getUserIdentity(userId)
|
||||
const response = await getUserIdentity(userId);
|
||||
|
||||
if (response && response.status && response.body) {
|
||||
const identity = response.body
|
||||
console.debug('✅ Identity fetched:', identity)
|
||||
const identity = response.body;
|
||||
console.debug("✅ Identity fetched:", identity);
|
||||
|
||||
// 设置权限信息
|
||||
permissionManager.setUserIdentity(identity)
|
||||
permissionManager.setUserIdentity(identity);
|
||||
|
||||
return permissionManager.getPrimaryRole()
|
||||
return permissionManager.getPrimaryRole();
|
||||
} else {
|
||||
console.warn('⚠️ Invalid identity response')
|
||||
permissionManager.setUserIdentity(null)
|
||||
return USER_ROLES.GUEST
|
||||
console.warn("⚠️ Invalid identity response");
|
||||
permissionManager.setUserIdentity(null);
|
||||
return USER_ROLES.GUEST;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to fetch user identity:', error)
|
||||
permissionManager.setUserIdentity(null)
|
||||
return USER_ROLES.GUEST
|
||||
console.error("❌ Failed to fetch user identity:", error);
|
||||
permissionManager.setUserIdentity(null);
|
||||
return USER_ROLES.GUEST;
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,8 +222,8 @@ class IdentityChecker {
|
||||
* 重置检查状态
|
||||
*/
|
||||
reset() {
|
||||
this.isChecking = false
|
||||
this.checkPromise = null
|
||||
this.isChecking = false;
|
||||
this.checkPromise = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -230,36 +239,36 @@ class PageRedirector {
|
||||
* @returns {Promise<boolean>} 是否进行了重定向
|
||||
*/
|
||||
async redirectToCorrectPage(router, targetPath, currentPath) {
|
||||
const primaryRole = permissionManager.getPrimaryRole()
|
||||
const primaryRole = permissionManager.getPrimaryRole();
|
||||
|
||||
// 检查目标页面权限
|
||||
const hasPermission = permissionManager.hasPagePermission(targetPath)
|
||||
const hasPermission = permissionManager.hasPagePermission(targetPath);
|
||||
|
||||
console.debug('🔄 Redirect check:', {
|
||||
console.debug("🔄 Redirect check:", {
|
||||
targetPath,
|
||||
currentPath,
|
||||
primaryRole,
|
||||
hasPermission
|
||||
})
|
||||
hasPermission,
|
||||
});
|
||||
|
||||
if (hasPermission) {
|
||||
// 有权限访问目标页面
|
||||
if (targetPath !== currentPath) {
|
||||
console.debug('✅ Access granted, navigating to:', targetPath)
|
||||
return false // 不需要重定向，让路由正常进行
|
||||
console.debug("✅ Access granted, navigating to:", targetPath);
|
||||
return false; // 不需要重定向，让路由正常进行
|
||||
}
|
||||
return false
|
||||
return false;
|
||||
} else {
|
||||
// 无权限访问，重定向到默认页面
|
||||
const defaultPage = permissionManager.getDefaultPage()
|
||||
const defaultPage = permissionManager.getDefaultPage();
|
||||
|
||||
console.debug('❌ Access denied, redirecting to:', defaultPage)
|
||||
console.debug("❌ Access denied, redirecting to:", defaultPage);
|
||||
|
||||
if (defaultPage !== currentPath) {
|
||||
await router.replace(defaultPage)
|
||||
return true // 已进行重定向
|
||||
await router.replace(defaultPage);
|
||||
return true; // 已进行重定向
|
||||
}
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -269,17 +278,17 @@ class PageRedirector {
|
||||
* @param {string} attemptedPage - 尝试访问的页面
|
||||
*/
|
||||
async handleUnauthorizedAccess(router, attemptedPage) {
|
||||
const primaryRole = permissionManager.getPrimaryRole()
|
||||
const defaultPage = permissionManager.getDefaultPage()
|
||||
const primaryRole = permissionManager.getPrimaryRole();
|
||||
const defaultPage = permissionManager.getDefaultPage();
|
||||
|
||||
console.warn('🚫 Unauthorized access attempt:', {
|
||||
console.warn("🚫 Unauthorized access attempt:", {
|
||||
attemptedPage,
|
||||
primaryRole,
|
||||
redirectingTo: defaultPage
|
||||
})
|
||||
redirectingTo: defaultPage,
|
||||
});
|
||||
|
||||
// 重定向到用户有权限的默认页面
|
||||
await router.replace(defaultPage)
|
||||
await router.replace(defaultPage);
|
||||
}
|
||||
}
|
||||
|
||||
@ -288,10 +297,10 @@ class PageRedirector {
|
||||
*/
|
||||
class RouteGuard {
|
||||
constructor() {
|
||||
this.appConnectionChecker = new AppConnectionChecker()
|
||||
this.identityChecker = new IdentityChecker()
|
||||
this.pageRedirector = new PageRedirector()
|
||||
this.isGuardActive = false
|
||||
this.appConnectionChecker = new AppConnectionChecker();
|
||||
this.identityChecker = new IdentityChecker();
|
||||
this.pageRedirector = new PageRedirector();
|
||||
this.isGuardActive = false;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -300,11 +309,11 @@ class RouteGuard {
|
||||
*/
|
||||
install(router) {
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
await this.handleRouteChange(to, from, next)
|
||||
})
|
||||
await this.handleRouteChange(to, from, next);
|
||||
});
|
||||
|
||||
this.isGuardActive = true
|
||||
console.debug('🛡️ Route guard installed')
|
||||
this.isGuardActive = true;
|
||||
console.debug("🛡️ Route guard installed");
|
||||
}
|
||||
|
||||
/**
|
||||
@ -314,69 +323,68 @@ class RouteGuard {
|
||||
* @param {Function} next - 路由继续函数
|
||||
*/
|
||||
async handleRouteChange(to, from, next) {
|
||||
console.group('🛡️ Route Guard Check')
|
||||
console.debug('📍 Route change:', from.path, '→', to.path)
|
||||
console.group("🛡️ Route Guard Check");
|
||||
console.debug("📍 Route change:", from.path, "→", to.path);
|
||||
|
||||
try {
|
||||
// 1. 检查是否为公共页面（无需任何验证）
|
||||
if (this.isPublicPage(to.path)) {
|
||||
console.debug('🌐 Public page, allowing access')
|
||||
console.groupEnd()
|
||||
next()
|
||||
return
|
||||
console.debug("🌐 Public page, allowing access");
|
||||
console.groupEnd();
|
||||
next();
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 确保APP连接
|
||||
console.debug('🔗 Ensuring APP connection...')
|
||||
const isConnected = await this.appConnectionChecker.ensureConnection()
|
||||
console.debug("🔗 Ensuring APP connection...");
|
||||
const isConnected = await this.appConnectionChecker.ensureConnection();
|
||||
|
||||
if (!isConnected) {
|
||||
console.error('❌ APP connection failed, redirecting to error page')
|
||||
console.groupEnd()
|
||||
next(PAGES.NOT_APP)
|
||||
return
|
||||
console.error("❌ APP connection failed, redirecting to error page");
|
||||
console.groupEnd();
|
||||
next(PAGES.NOT_APP);
|
||||
return;
|
||||
}
|
||||
|
||||
// 3. 检查用户身份是否已加载
|
||||
if (!permissionManager.isLoaded()) {
|
||||
console.debug('🔍 Identity not loaded, checking...')
|
||||
console.debug("🔍 Identity not loaded, checking...");
|
||||
|
||||
const userId = getUserId()
|
||||
const userId = getUserId();
|
||||
if (!userId) {
|
||||
console.debug('❌ No user ID available, redirecting to apply')
|
||||
console.groupEnd()
|
||||
next(PAGES.APPLY)
|
||||
return
|
||||
console.debug("❌ No user ID available, redirecting to apply");
|
||||
console.groupEnd();
|
||||
next(PAGES.APPLY);
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查用户身份
|
||||
await this.identityChecker.checkUserIdentity(userId)
|
||||
await this.identityChecker.checkUserIdentity(userId);
|
||||
}
|
||||
|
||||
// 4. 检查页面访问权限
|
||||
const hasPermission = permissionManager.hasPagePermission(to.path)
|
||||
const hasPermission = permissionManager.hasPagePermission(to.path);
|
||||
|
||||
if (hasPermission) {
|
||||
console.debug('✅ Permission granted, allowing access')
|
||||
console.groupEnd()
|
||||
next()
|
||||
console.debug("✅ Permission granted, allowing access");
|
||||
console.groupEnd();
|
||||
next();
|
||||
} else {
|
||||
console.debug('❌ Permission denied')
|
||||
const defaultPage = permissionManager.getDefaultPage()
|
||||
console.debug('🔄 Redirecting to default page:', defaultPage)
|
||||
console.groupEnd()
|
||||
next(defaultPage)
|
||||
console.debug("❌ Permission denied");
|
||||
const defaultPage = permissionManager.getDefaultPage();
|
||||
console.debug("🔄 Redirecting to default page:", defaultPage);
|
||||
console.groupEnd();
|
||||
next(defaultPage);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Route guard error:', error)
|
||||
console.groupEnd()
|
||||
console.error("❌ Route guard error:", error);
|
||||
console.groupEnd();
|
||||
|
||||
// 根据错误类型决定重定向目标
|
||||
if (error.message && error.message.includes('connection')) {
|
||||
next(PAGES.NOT_APP) // 连接相关错误
|
||||
if (error.message && error.message.includes("connection")) {
|
||||
next(PAGES.NOT_APP); // 连接相关错误
|
||||
} else {
|
||||
next(PAGES.APPLY) // 其他错误
|
||||
next(PAGES.APPLY); // 其他错误
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -388,12 +396,18 @@ class RouteGuard {
|
||||
*/
|
||||
isPublicPage(path) {
|
||||
const publicPages = [
|
||||
PAGES.APPLY, // 申请页面 - 重要：申请页面不需要权限检查
|
||||
PAGES.NOT_APP, // 错误页面 - APP连接失败时的页面
|
||||
'/404', // 404页面
|
||||
'/error' // 通用错误页面
|
||||
]
|
||||
return publicPages.includes(path)
|
||||
PAGES.APPLY, // 申请页面 - 重要：申请页面不需要权限检查
|
||||
PAGES.NOT_APP, // 错误页面 - APP连接失败时的页面
|
||||
"/404", // 404页面
|
||||
"/error", // 通用错误页面
|
||||
|
||||
// "/admin-center", //管理员中心（临时配置）
|
||||
"/item-distribution", //赠送页面（临时配置）
|
||||
"/recharge", //支付前页面（临时配置）
|
||||
"/recharge-standard", //标准支付页面（临时配置）
|
||||
"/recharge-freight-agent", //金币代理支付页面（临时配置）
|
||||
];
|
||||
return publicPages.includes(path);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -403,26 +417,26 @@ class RouteGuard {
|
||||
*/
|
||||
async checkAndRedirect(router, userId) {
|
||||
try {
|
||||
console.debug('🔄 Manual identity check and redirect')
|
||||
console.debug("🔄 Manual identity check and redirect");
|
||||
|
||||
// 检查身份
|
||||
const primaryRole = await this.identityChecker.checkUserIdentity(userId)
|
||||
const primaryRole = await this.identityChecker.checkUserIdentity(userId);
|
||||
|
||||
// 获取当前页面
|
||||
const currentPath = router.currentRoute.value.path
|
||||
const currentPath = router.currentRoute.value.path;
|
||||
|
||||
// 检查当前页面权限
|
||||
const hasPermission = permissionManager.hasPagePermission(currentPath)
|
||||
const hasPermission = permissionManager.hasPagePermission(currentPath);
|
||||
|
||||
if (!hasPermission) {
|
||||
// 重定向到默认页面
|
||||
await this.pageRedirector.redirectToCorrectPage(router, currentPath, currentPath)
|
||||
await this.pageRedirector.redirectToCorrectPage(router, currentPath, currentPath);
|
||||
}
|
||||
|
||||
return primaryRole
|
||||
return primaryRole;
|
||||
} catch (error) {
|
||||
console.error('❌ Manual check and redirect failed:', error)
|
||||
throw error
|
||||
console.error("❌ Manual check and redirect failed:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@ -430,17 +444,17 @@ class RouteGuard {
|
||||
* 重置守卫状态
|
||||
*/
|
||||
reset() {
|
||||
this.appConnectionChecker.reset()
|
||||
this.identityChecker.reset()
|
||||
permissionManager.reset()
|
||||
console.debug('🔄 Route guard reset')
|
||||
this.appConnectionChecker.reset();
|
||||
this.identityChecker.reset();
|
||||
permissionManager.reset();
|
||||
console.debug("🔄 Route guard reset");
|
||||
}
|
||||
}
|
||||
|
||||
// 创建全局路由守卫实例
|
||||
export const routeGuard = new RouteGuard()
|
||||
export const routeGuard = new RouteGuard();
|
||||
|
||||
// 便捷方法
|
||||
export const installRouteGuard = (router) => routeGuard.install(router)
|
||||
export const checkAndRedirect = (router, userId) => routeGuard.checkAndRedirect(router, userId)
|
||||
export const resetRouteGuard = () => routeGuard.reset()
|
||||
export const installRouteGuard = (router) => routeGuard.install(router);
|
||||
export const checkAndRedirect = (router, userId) => routeGuard.checkAndRedirect(router, userId);
|
||||
export const resetRouteGuard = () => routeGuard.reset();
|
||||
|
||||
197
src/views/Recharge.vue
Normal file
197
src/views/Recharge.vue
Normal file
@ -0,0 +1,197 @@
|
||||
<!-- Recharge.vue -->
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge" showHelp="true" @help="popupHelp" />
|
||||
|
||||
<!-- 内容 -->
|
||||
<div style="padding: 4%">
|
||||
<!-- 输入框 -->
|
||||
<div style="display: flex; gap: 20px; width: 100%">
|
||||
<input
|
||||
style="
|
||||
flex: 1;
|
||||
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"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<!-- 遮罩层 -->
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background-color: #00000080;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
v-show="dialogshow"
|
||||
@click="closedPopup"
|
||||
>
|
||||
<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;
|
||||
font-size: 16px;
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import MobileHeader from "../components/MobileHeader.vue";
|
||||
import { onMounted, ref, computed } from "vue";
|
||||
import { searchUser } from "@/api/userInfo";
|
||||
// import { getUserIdentity } from "@/api/wallet";
|
||||
import { useRouter } from "vue-router";
|
||||
|
||||
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) {
|
||||
router.push({ path: "/recharge-freight-agent", query: { targetUserId: targetUserId.value } });
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("error:", error);
|
||||
// 信息提示id有误
|
||||
showWarning("User info not found");
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fullPage {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: url(../assets/images/secondBg.png);
|
||||
background-size: 100% 100%;
|
||||
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);
|
||||
}
|
||||
</style>
|
||||
183
src/views/RechargeFreightAgent.vue
Normal file
183
src/views/RechargeFreightAgent.vue
Normal file
@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge">
|
||||
<template v-slot:extraFunction>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
color: rgba(187, 146, 255, 1) !important;
|
||||
"
|
||||
>
|
||||
<div style="font-weight: bold">English</div>
|
||||
<div style="margin-left: 5px">></div>
|
||||
<transition name="slide-fade">
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
margin-top: 5px;
|
||||
backdrop-filter: blur(8px);
|
||||
"
|
||||
v-show="visibleList"
|
||||
class="extraList"
|
||||
>
|
||||
<div
|
||||
style="padding: 8px; opacity: 0.5"
|
||||
v-for="(item, index) in switchList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
</MobileHeader>
|
||||
|
||||
<div style="padding: 10px">
|
||||
<div>Recharge ID：</div>
|
||||
<!-- 个人信息 -->
|
||||
<div>name:{{ userProfile.userNickname }}</div>
|
||||
|
||||
<div style="width: 100%; display: flex; justify-content: space-between">
|
||||
<div>Select a country：</div>
|
||||
<div>图标{{ selectedCountry.countryName }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付渠道 -->
|
||||
<div v-if="channels.length != 0">
|
||||
<div v-for="(channelItem, index) in channels" :key="index">
|
||||
<!-- 支付类型 -->
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 4px 0 #00000050;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<img :src="channelItem.channel.channelIcon" alt="" style="width: 10%; margin: 10px" />
|
||||
<div style="font-weight: 500">{{ channelItem.channel.channelName }}</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付商品 -->
|
||||
<div
|
||||
style="
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 4px 0 #00000050;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
padding: 10px;
|
||||
margin-top: 1rem;
|
||||
"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 4px 0 #00000050;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
"
|
||||
v-for="(goods, index) in commodityList"
|
||||
:key="index"
|
||||
@click="goPay(channelItem, goods)"
|
||||
>
|
||||
<img src="../assets/icon/coin.png" alt="" style="width: 30%" />
|
||||
<div>{{ goods.content }}</div>
|
||||
<div>${{ goods.amountUsd }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref } from "vue";
|
||||
import MobileHeader from "../components/MobileHeader.vue";
|
||||
import { searchUser, searchPayRechargeUser } from "@/api/userInfo";
|
||||
// import { getUserIdentity } from "@/api/wallet";
|
||||
import { getPayAplication, getAppCommodityCard, payPlaceAnOrderRecharge } from "@/api/pay";
|
||||
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const applicationId = ref("1963531459019739137");
|
||||
const userProfile = ref({}); //用户信息
|
||||
const countryList = ref([]); //国家信息
|
||||
const regionId = ref(""); //区域id
|
||||
const selectedCountry = ref("");
|
||||
|
||||
const commodityList = ref([]); //商品列表
|
||||
const channels = ref([]); //支付渠道
|
||||
|
||||
const selectedCommodity = ref({}); //选中的商品
|
||||
|
||||
const goPay = async (item, commodity) => {
|
||||
selectedCommodity.value = commodity;
|
||||
let payData = {
|
||||
applicationId: applicationId.value,
|
||||
payCountryId: applicationId.value,
|
||||
goodsId: commodity.id,
|
||||
userId: userProfile.id,
|
||||
channelCode: item.channel.channelCode,
|
||||
};
|
||||
|
||||
const payRes = await payPlaceAnOrderRecharge(data);
|
||||
const body = payRes.body;
|
||||
if (!body) {
|
||||
console.log("Payment not available, please contact administrator!!!");
|
||||
return;
|
||||
}
|
||||
if (body.factoryCode === "AIRWALLEX") {
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
const PayAplication = await getPayAplication(applicationId.value);
|
||||
console.log("PayAplication:", PayAplication);
|
||||
if (PayAplication.body && PayAplication.body.appCode) {
|
||||
let params = {
|
||||
sysOrigin: PayAplication.body.appCode,
|
||||
account: route.query.targetUserId,
|
||||
};
|
||||
const userInfo = await searchPayRechargeUser(params);
|
||||
console.log("userInfo:", userInfo);
|
||||
|
||||
if (userInfo.body && userInfo.body.regionId && userInfo.body.countryList.length != 0) {
|
||||
userProfile.value = { ...userInfo.body.userProfile, type: "GOLD" };
|
||||
|
||||
countryList.value = userInfo.body.countryList;
|
||||
selectedCountry.value = userInfo.body.countryList[0];
|
||||
regionId.value = userInfo.body.regionId;
|
||||
|
||||
let appCommodityCardParams = {
|
||||
applicationId: applicationId.value,
|
||||
payCountryId: userInfo.body.countryList[0].id,
|
||||
regionId: userInfo.body.regionId,
|
||||
};
|
||||
const appCommodityCard = await getAppCommodityCard(appCommodityCardParams);
|
||||
console.log("appCommodityCard:", appCommodityCard);
|
||||
commodityList.value = appCommodityCard.body.commodity;
|
||||
channels.value = appCommodityCard.body.channels;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
203
src/views/RechargeStandard.vue
Normal file
203
src/views/RechargeStandard.vue
Normal file
@ -0,0 +1,203 @@
|
||||
<template>
|
||||
<div class="fullPage">
|
||||
<!-- 上区域 -->
|
||||
<div
|
||||
style="
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
background-image: url(/src/assets/images/rechargeBg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
"
|
||||
>
|
||||
<!-- 顶部 -->
|
||||
<MobileHeader title="Recharge">
|
||||
<template v-slot:extraFunction>
|
||||
<div style="display: flex; align-items: center; position: relative">
|
||||
<img src="../assets/icon/listBt.png" style="width: 1.2rem" alt="" @click="listBt" />
|
||||
<transition name="slide-fade">
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
margin-top: 5px;
|
||||
backdrop-filter: blur(8px);
|
||||
"
|
||||
v-show="visibleList"
|
||||
class="extraList"
|
||||
>
|
||||
<div
|
||||
style="padding: 8px; opacity: 0.5"
|
||||
v-for="(item, index) in switchList"
|
||||
:key="index"
|
||||
>
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
</MobileHeader>
|
||||
|
||||
<!-- 余额展示 -->
|
||||
<div style="flex: 1; display: flex; justify-content: center; align-items: center">
|
||||
<img src="/src/assets/icon/coin.png" alt="" style="width: 32px" />
|
||||
<div style="margin-left: 10px; font-weight: 500">999999</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 圆角修饰 -->
|
||||
<div
|
||||
style="
|
||||
background-color: white;
|
||||
margin-top: -10px;
|
||||
height: 11px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
"
|
||||
></div>
|
||||
|
||||
<!-- 主要展示 -->
|
||||
<div style="padding: 10px; display: flex; flex-direction: column; align-items: center">
|
||||
<!-- 商品展示 -->
|
||||
<div style="width: 100%; display: flex; flex-direction: column; gap: 20px">
|
||||
<div
|
||||
v-for="(goods, index) in coinGoodsList"
|
||||
:key="index"
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 3px 0.5px #00000050;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
"
|
||||
@click="selectGoods(index)"
|
||||
:class="[selectedIndex == index ? 'selectedGoods' : 'notSelectedGoods']"
|
||||
>
|
||||
<!-- 数量 -->
|
||||
<div style="display: flex; align-items: center">
|
||||
<img :src="getImageUrl(goods.cover)" alt="" style="width: 32px; margin-right: 8px" />
|
||||
<div style="font-weight: 500">{{ goods.amount }}</div>
|
||||
</div>
|
||||
<!-- 价格 -->
|
||||
<div style="font-weight: 500; line-height: 32px">${{ goods.price }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 充值按钮 -->
|
||||
<button
|
||||
style="
|
||||
width: 70%;
|
||||
margin: 32px 0;
|
||||
padding: 10px;
|
||||
border-radius: 32px;
|
||||
border: 0;
|
||||
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
|
||||
"
|
||||
:class="[selectedIndex != -1 ? 'selectedBt' : 'notSelectedBt']"
|
||||
>
|
||||
Recharge
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import MobileHeader from "../components/MobileHeader.vue";
|
||||
|
||||
const switchList = ref(["Gold List", "Recharge List"]);
|
||||
const visibleList = ref(false);
|
||||
const listBt = () => {
|
||||
visibleList.value = !visibleList.value;
|
||||
};
|
||||
|
||||
const coinGoodsList = ref([
|
||||
{
|
||||
cover: "/src/assets/icon/coin.png",
|
||||
amount: 10000,
|
||||
price: 0.99,
|
||||
},
|
||||
{
|
||||
cover: "/src/assets/icon/coinMore.png",
|
||||
amount: 50000,
|
||||
price: 4.99,
|
||||
},
|
||||
]);
|
||||
|
||||
const getImageUrl = (imgUrl) => {
|
||||
return new URL(imgUrl, import.meta.url).href;
|
||||
};
|
||||
|
||||
const selectedIndex = ref(-1); //选中商品下标
|
||||
const selectedGoods = ref({}); //选中商品
|
||||
|
||||
const selectGoods = (index) => {
|
||||
if (selectedIndex.value != index) {
|
||||
selectedIndex.value = index;
|
||||
selectedGoods.value = coinGoodsList.value[index];
|
||||
|
||||
console.log("选中下标:", selectedIndex.value);
|
||||
console.log("选中商品:", coinGoodsList.value[index]);
|
||||
} else {
|
||||
selectedIndex.value = -1;
|
||||
selectedGoods.value = {};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fullPage {
|
||||
}
|
||||
|
||||
.slide-fade-enter-active {
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
|
||||
}
|
||||
.slide-fade-enter-from,
|
||||
.slide-fade-leave-to {
|
||||
transform: translateY(-10px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 未选中状态 */
|
||||
.notSelectedGoods {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.selectedGoods {
|
||||
background-color: rgba(187, 146, 255, 1);
|
||||
/* border: 1px solid rgba(119, 38, 255, 1); */
|
||||
border: 1px solid rgba(119, 38, 255, 1);
|
||||
}
|
||||
|
||||
/* 未选中状态 */
|
||||
.notSelectedBt {
|
||||
background-color: white;
|
||||
color: rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* 选中状态 */
|
||||
.selectedBt {
|
||||
background: linear-gradient(to bottom, rgba(198, 112, 255, 0.7), rgba(119, 38, 255, 0.7));
|
||||
color: white;
|
||||
}
|
||||
|
||||
.extraList > div:not(:last-child) {
|
||||
border-bottom: 0.1px solid black;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user