feat(player): 完善 H5 投注端与 API 演示数据
- 球赛/串关/优胜冠军、赛事详情、历史投注与个人资料编辑 - 固定顶栏、公告与底栏，仅内容区滚动 - 底部导航与站点 favicon 使用 logo，登录页精简 - API 种子、冠军盘与历史注单增强 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -6,3 +6,4 @@ JWT_ADMIN_EXPIRES=2h
|
||||
JWT_AGENT_EXPIRES=8h
|
||||
PORT=3000
|
||||
NODE_ENV=development
|
||||
UPLOAD_DIR=
|
||||
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@@ -7,4 +7,17 @@ dist/
|
||||
coverage/
|
||||
.turbo/
|
||||
*.tsbuildinfo
|
||||
# 勿将 tsc 编译产物提交到 player/src（会导致 Vite 加载过期 .js）
|
||||
apps/player/src/**/*.js
|
||||
!apps/player/src/router/index.js
|
||||
!apps/player/src/utils/localeDisplay.js
|
||||
apps/api/prisma/migrations/*_migration_lock.toml
|
||||
|
||||
# 用户上传文件（保留目录结构与示例 Banner）
|
||||
uploads/**/*
|
||||
!uploads/banners/
|
||||
!uploads/banners/**
|
||||
!uploads/teams/
|
||||
!uploads/teams/.gitkeep
|
||||
!uploads/contents/
|
||||
!uploads/contents/.gitkeep
|
||||
|
||||
@@ -3,7 +3,9 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="icon" type="image/png" href="/logo.png" />
|
||||
<link rel="apple-touch-icon" href="/logo.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<title>TheBet365 Admin</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
0
apps/admin/src/assets/images/.gitkeep
Normal file
0
apps/admin/src/assets/images/.gitkeep
Normal file
@@ -1,5 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/favicon.svg" /><title>TheBet365 Agent</title></head>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/png" href="/logo.png" />
|
||||
<link rel="apple-touch-icon" href="/logo.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<title>TheBet365 Agent</title>
|
||||
</head>
|
||||
<body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
|
||||
</html>
|
||||
|
||||
0
apps/agent/src/assets/images/.gitkeep
Normal file
0
apps/agent/src/assets/images/.gitkeep
Normal file
703
apps/api/prisma/migrations/20260602065556_init/migration.sql
Normal file
703
apps/api/prisma/migrations/20260602065556_init/migration.sql
Normal file
@@ -0,0 +1,703 @@
|
||||
-- CreateTable
|
||||
CREATE TABLE "users" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"username" VARCHAR(64) NOT NULL,
|
||||
"user_type" VARCHAR(20) NOT NULL,
|
||||
"status" VARCHAR(20) NOT NULL DEFAULT 'ACTIVE',
|
||||
"parent_id" BIGINT,
|
||||
"agent_level" INTEGER,
|
||||
"locale" VARCHAR(10) NOT NULL DEFAULT 'en-US',
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
"deleted_at" TIMESTAMP(3),
|
||||
|
||||
CONSTRAINT "users_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "user_auth" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"password_hash" VARCHAR(255) NOT NULL,
|
||||
"login_fail_count" INTEGER NOT NULL DEFAULT 0,
|
||||
"locked_until" TIMESTAMP(3),
|
||||
"last_login_at" TIMESTAMP(3),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "user_auth_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "user_preferences" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"locale" VARCHAR(10) NOT NULL DEFAULT 'en-US',
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "user_preferences_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "roles" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"code" VARCHAR(64) NOT NULL,
|
||||
"name" VARCHAR(128) NOT NULL,
|
||||
"description" VARCHAR(255),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "roles_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "permissions" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"code" VARCHAR(128) NOT NULL,
|
||||
"name" VARCHAR(128) NOT NULL,
|
||||
"module" VARCHAR(64) NOT NULL,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "permissions_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "role_permissions" (
|
||||
"role_id" BIGINT NOT NULL,
|
||||
"permission_id" BIGINT NOT NULL,
|
||||
|
||||
CONSTRAINT "role_permissions_pkey" PRIMARY KEY ("role_id","permission_id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "admin_user_roles" (
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"role_id" BIGINT NOT NULL,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "agent_profiles" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"level" INTEGER NOT NULL,
|
||||
"parent_agent_id" BIGINT,
|
||||
"credit_limit" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"used_credit" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"direct_player_liability" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"child_agent_exposure" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"status" VARCHAR(20) NOT NULL DEFAULT 'ACTIVE',
|
||||
"max_single_deposit" DECIMAL(18,4),
|
||||
"max_daily_deposit" DECIMAL(18,4),
|
||||
"cashback_rate" DECIMAL(8,4) NOT NULL DEFAULT 0,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "agent_profiles_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "agent_closure" (
|
||||
"ancestor_id" BIGINT NOT NULL,
|
||||
"descendant_id" BIGINT NOT NULL,
|
||||
"depth" INTEGER NOT NULL,
|
||||
|
||||
CONSTRAINT "agent_closure_pkey" PRIMARY KEY ("ancestor_id","descendant_id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "agent_credit_transactions" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"agent_id" BIGINT NOT NULL,
|
||||
"transaction_type" VARCHAR(32) NOT NULL,
|
||||
"amount" DECIMAL(18,4) NOT NULL,
|
||||
"credit_before" DECIMAL(18,4) NOT NULL,
|
||||
"credit_after" DECIMAL(18,4) NOT NULL,
|
||||
"reference_type" VARCHAR(32),
|
||||
"reference_id" VARCHAR(64),
|
||||
"operator_id" BIGINT,
|
||||
"request_id" VARCHAR(128),
|
||||
"remark" VARCHAR(500),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "agent_credit_transactions_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "wallets" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"available_balance" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"frozen_balance" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"currency" VARCHAR(16) NOT NULL DEFAULT 'USD',
|
||||
"status" VARCHAR(20) NOT NULL DEFAULT 'ACTIVE',
|
||||
"version" INTEGER NOT NULL DEFAULT 0,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "wallets_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "wallet_transactions" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"transaction_id" VARCHAR(64) NOT NULL,
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"wallet_id" BIGINT NOT NULL,
|
||||
"transaction_type" VARCHAR(32) NOT NULL,
|
||||
"amount" DECIMAL(18,4) NOT NULL,
|
||||
"balance_before" DECIMAL(18,4) NOT NULL,
|
||||
"balance_after" DECIMAL(18,4) NOT NULL,
|
||||
"frozen_before" DECIMAL(18,4) NOT NULL,
|
||||
"frozen_after" DECIMAL(18,4) NOT NULL,
|
||||
"reference_type" VARCHAR(32),
|
||||
"reference_id" VARCHAR(64),
|
||||
"operator_id" BIGINT,
|
||||
"remark" VARCHAR(500),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "wallet_transactions_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "leagues" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"sport_type" VARCHAR(20) NOT NULL DEFAULT 'FOOTBALL',
|
||||
"code" VARCHAR(64) NOT NULL,
|
||||
"display_order" INTEGER NOT NULL DEFAULT 0,
|
||||
"is_active" BOOLEAN NOT NULL DEFAULT true,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
"deleted_at" TIMESTAMP(3),
|
||||
|
||||
CONSTRAINT "leagues_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "teams" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"sport_type" VARCHAR(20) NOT NULL DEFAULT 'FOOTBALL',
|
||||
"code" VARCHAR(64) NOT NULL,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
"deleted_at" TIMESTAMP(3),
|
||||
|
||||
CONSTRAINT "teams_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "entity_translations" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"entity_type" VARCHAR(32) NOT NULL,
|
||||
"entity_id" BIGINT NOT NULL,
|
||||
"locale" VARCHAR(10) NOT NULL,
|
||||
"field_name" VARCHAR(32) NOT NULL,
|
||||
"value" VARCHAR(500) NOT NULL,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "entity_translations_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "matches" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"sport_type" VARCHAR(20) NOT NULL DEFAULT 'FOOTBALL',
|
||||
"league_id" BIGINT NOT NULL,
|
||||
"home_team_id" BIGINT NOT NULL,
|
||||
"away_team_id" BIGINT NOT NULL,
|
||||
"start_time" TIMESTAMP(3) NOT NULL,
|
||||
"status" VARCHAR(32) NOT NULL DEFAULT 'DRAFT',
|
||||
"is_hot" BOOLEAN NOT NULL DEFAULT false,
|
||||
"display_order" INTEGER NOT NULL DEFAULT 0,
|
||||
"publish_time" TIMESTAMP(3),
|
||||
"close_time" TIMESTAMP(3),
|
||||
"is_outright" BOOLEAN NOT NULL DEFAULT false,
|
||||
"created_by" BIGINT,
|
||||
"updated_by" BIGINT,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
"deleted_at" TIMESTAMP(3),
|
||||
|
||||
CONSTRAINT "matches_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "match_scores" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"match_id" BIGINT NOT NULL,
|
||||
"ht_home_score" INTEGER,
|
||||
"ht_away_score" INTEGER,
|
||||
"ft_home_score" INTEGER,
|
||||
"ft_away_score" INTEGER,
|
||||
"winner_team_id" BIGINT,
|
||||
"recorded_by" BIGINT,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "match_scores_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "markets" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"match_id" BIGINT NOT NULL,
|
||||
"market_type" VARCHAR(64) NOT NULL,
|
||||
"period" VARCHAR(16) NOT NULL,
|
||||
"line_value" DECIMAL(8,2),
|
||||
"status" VARCHAR(20) NOT NULL DEFAULT 'OPEN',
|
||||
"allow_single" BOOLEAN NOT NULL DEFAULT true,
|
||||
"allow_parlay" BOOLEAN NOT NULL DEFAULT true,
|
||||
"sort_order" INTEGER NOT NULL DEFAULT 0,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "markets_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "market_selections" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"market_id" BIGINT NOT NULL,
|
||||
"selection_code" VARCHAR(64) NOT NULL,
|
||||
"selection_name" VARCHAR(255) NOT NULL,
|
||||
"odds" DECIMAL(18,6) NOT NULL,
|
||||
"odds_version" BIGINT NOT NULL DEFAULT 1,
|
||||
"status" VARCHAR(20) NOT NULL DEFAULT 'OPEN',
|
||||
"sort_order" INTEGER NOT NULL DEFAULT 0,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "market_selections_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "odds_change_logs" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"selection_id" BIGINT NOT NULL,
|
||||
"old_odds" DECIMAL(18,6) NOT NULL,
|
||||
"new_odds" DECIMAL(18,6) NOT NULL,
|
||||
"odds_version" BIGINT NOT NULL,
|
||||
"changed_by" BIGINT,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "odds_change_logs_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "bets" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"bet_no" VARCHAR(64) NOT NULL,
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"agent_id" BIGINT,
|
||||
"bet_type" VARCHAR(20) NOT NULL,
|
||||
"stake" DECIMAL(18,4) NOT NULL,
|
||||
"total_odds" DECIMAL(18,6),
|
||||
"potential_return" DECIMAL(18,4),
|
||||
"actual_return" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"status" VARCHAR(32) NOT NULL DEFAULT 'PENDING',
|
||||
"settlement_status" VARCHAR(32),
|
||||
"currency" VARCHAR(16) NOT NULL DEFAULT 'USD',
|
||||
"request_id" VARCHAR(128) NOT NULL,
|
||||
"placed_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"settled_at" TIMESTAMP(3),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "bets_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "bet_selections" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"bet_id" BIGINT NOT NULL,
|
||||
"match_id" BIGINT,
|
||||
"market_id" BIGINT NOT NULL,
|
||||
"selection_id" BIGINT NOT NULL,
|
||||
"market_type" VARCHAR(64) NOT NULL,
|
||||
"period" VARCHAR(16),
|
||||
"selection_name_snapshot" VARCHAR(255) NOT NULL,
|
||||
"handicap_line" DECIMAL(8,2),
|
||||
"total_line" DECIMAL(8,2),
|
||||
"odds" DECIMAL(18,6) NOT NULL,
|
||||
"odds_version" BIGINT NOT NULL,
|
||||
"result_status" VARCHAR(32),
|
||||
"effective_odds" DECIMAL(18,6),
|
||||
"sort_order" INTEGER NOT NULL DEFAULT 0,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "bet_selections_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "settlement_batches" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"match_id" BIGINT NOT NULL,
|
||||
"batch_no" VARCHAR(64) NOT NULL,
|
||||
"ht_home_score" INTEGER,
|
||||
"ht_away_score" INTEGER,
|
||||
"ft_home_score" INTEGER,
|
||||
"ft_away_score" INTEGER,
|
||||
"status" VARCHAR(20) NOT NULL DEFAULT 'PREVIEW',
|
||||
"total_bets" INTEGER NOT NULL DEFAULT 0,
|
||||
"total_payout" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"total_refund" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"operator_id" BIGINT,
|
||||
"confirmed_at" TIMESTAMP(3),
|
||||
"is_resettle" BOOLEAN NOT NULL DEFAULT false,
|
||||
"reason" VARCHAR(500),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "settlement_batches_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "settlement_items" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"batch_id" BIGINT NOT NULL,
|
||||
"bet_id" BIGINT NOT NULL,
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"result" VARCHAR(32) NOT NULL,
|
||||
"payout" DECIMAL(18,4) NOT NULL,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "settlement_items_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "cashback_rules" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"name" VARCHAR(128) NOT NULL,
|
||||
"target_type" VARCHAR(32) NOT NULL,
|
||||
"target_id" BIGINT,
|
||||
"rate" DECIMAL(8,4) NOT NULL,
|
||||
"market_type" VARCHAR(64),
|
||||
"is_active" BOOLEAN NOT NULL DEFAULT true,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "cashback_rules_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "cashback_batches" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"batch_no" VARCHAR(64) NOT NULL,
|
||||
"period_start" TIMESTAMP(3) NOT NULL,
|
||||
"period_end" TIMESTAMP(3) NOT NULL,
|
||||
"status" VARCHAR(20) NOT NULL DEFAULT 'PREVIEW',
|
||||
"total_amount" DECIMAL(18,4) NOT NULL DEFAULT 0,
|
||||
"player_count" INTEGER NOT NULL DEFAULT 0,
|
||||
"operator_id" BIGINT,
|
||||
"confirmed_at" TIMESTAMP(3),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "cashback_batches_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "cashback_items" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"batch_id" BIGINT NOT NULL,
|
||||
"user_id" BIGINT NOT NULL,
|
||||
"effective_stake" DECIMAL(18,4) NOT NULL,
|
||||
"rate" DECIMAL(8,4) NOT NULL,
|
||||
"amount" DECIMAL(18,4) NOT NULL,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "cashback_items_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "contents" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"content_type" VARCHAR(32) NOT NULL,
|
||||
"sort_order" INTEGER NOT NULL DEFAULT 0,
|
||||
"status" VARCHAR(20) NOT NULL DEFAULT 'DRAFT',
|
||||
"link_type" VARCHAR(32),
|
||||
"link_target" VARCHAR(500),
|
||||
"start_time" TIMESTAMP(3),
|
||||
"end_time" TIMESTAMP(3),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "contents_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "content_translations" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"content_id" BIGINT NOT NULL,
|
||||
"locale" VARCHAR(10) NOT NULL,
|
||||
"title" VARCHAR(255),
|
||||
"body" TEXT,
|
||||
"image_url" VARCHAR(500),
|
||||
|
||||
CONSTRAINT "content_translations_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "i18n_messages" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"msg_key" VARCHAR(128) NOT NULL,
|
||||
"locale" VARCHAR(10) NOT NULL,
|
||||
"value" TEXT NOT NULL,
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "i18n_messages_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "system_configs" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"config_key" VARCHAR(128) NOT NULL,
|
||||
"config_value" TEXT NOT NULL,
|
||||
"description" VARCHAR(255),
|
||||
"updated_at" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "system_configs_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "audit_logs" (
|
||||
"id" BIGSERIAL NOT NULL,
|
||||
"operator_id" BIGINT,
|
||||
"operator_type" VARCHAR(20) NOT NULL,
|
||||
"action" VARCHAR(128) NOT NULL,
|
||||
"module" VARCHAR(64) NOT NULL,
|
||||
"target_type" VARCHAR(32),
|
||||
"target_id" VARCHAR(64),
|
||||
"before_data" TEXT,
|
||||
"after_data" TEXT,
|
||||
"ip_address" VARCHAR(45),
|
||||
"user_agent" VARCHAR(500),
|
||||
"created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
|
||||
CONSTRAINT "audit_logs_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "users_username_key" ON "users"("username");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "users_user_type_idx" ON "users"("user_type");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "users_parent_id_idx" ON "users"("parent_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "user_auth_user_id_key" ON "user_auth"("user_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "user_preferences_user_id_key" ON "user_preferences"("user_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "roles_code_key" ON "roles"("code");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "permissions_code_key" ON "permissions"("code");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "admin_user_roles_user_id_key" ON "admin_user_roles"("user_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "agent_profiles_user_id_key" ON "agent_profiles"("user_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "agent_profiles_parent_agent_id_idx" ON "agent_profiles"("parent_agent_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "agent_closure_descendant_id_idx" ON "agent_closure"("descendant_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "agent_credit_transactions_agent_id_idx" ON "agent_credit_transactions"("agent_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "agent_credit_transactions_operator_id_request_id_key" ON "agent_credit_transactions"("operator_id", "request_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "wallets_user_id_key" ON "wallets"("user_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "wallet_transactions_transaction_id_key" ON "wallet_transactions"("transaction_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "wallet_transactions_user_id_idx" ON "wallet_transactions"("user_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "wallet_transactions_wallet_id_idx" ON "wallet_transactions"("wallet_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "wallet_transactions_created_at_idx" ON "wallet_transactions"("created_at");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "leagues_code_key" ON "leagues"("code");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "teams_code_key" ON "teams"("code");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "entity_translations_entity_type_entity_id_idx" ON "entity_translations"("entity_type", "entity_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "entity_translations_entity_type_entity_id_locale_field_name_key" ON "entity_translations"("entity_type", "entity_id", "locale", "field_name");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "matches_status_idx" ON "matches"("status");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "matches_start_time_idx" ON "matches"("start_time");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "matches_league_id_idx" ON "matches"("league_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "match_scores_match_id_key" ON "match_scores"("match_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "markets_match_id_idx" ON "markets"("match_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "markets_market_type_idx" ON "markets"("market_type");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "market_selections_market_id_idx" ON "market_selections"("market_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "odds_change_logs_selection_id_idx" ON "odds_change_logs"("selection_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "bets_bet_no_key" ON "bets"("bet_no");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "bets_user_id_idx" ON "bets"("user_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "bets_agent_id_idx" ON "bets"("agent_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "bets_status_idx" ON "bets"("status");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "bets_placed_at_idx" ON "bets"("placed_at");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "bets_user_id_request_id_key" ON "bets"("user_id", "request_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "bet_selections_bet_id_idx" ON "bet_selections"("bet_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "bet_selections_match_id_idx" ON "bet_selections"("match_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "settlement_batches_batch_no_key" ON "settlement_batches"("batch_no");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "settlement_batches_match_id_idx" ON "settlement_batches"("match_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "settlement_items_batch_id_idx" ON "settlement_items"("batch_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "settlement_items_bet_id_idx" ON "settlement_items"("bet_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "cashback_batches_batch_no_key" ON "cashback_batches"("batch_no");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "cashback_items_batch_id_idx" ON "cashback_items"("batch_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "cashback_items_user_id_idx" ON "cashback_items"("user_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "contents_content_type_status_idx" ON "contents"("content_type", "status");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "content_translations_content_id_locale_key" ON "content_translations"("content_id", "locale");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "i18n_messages_msg_key_locale_key" ON "i18n_messages"("msg_key", "locale");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "system_configs_config_key_key" ON "system_configs"("config_key");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "audit_logs_operator_id_idx" ON "audit_logs"("operator_id");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "audit_logs_module_idx" ON "audit_logs"("module");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE INDEX "audit_logs_created_at_idx" ON "audit_logs"("created_at");
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "users" ADD CONSTRAINT "users_parent_id_fkey" FOREIGN KEY ("parent_id") REFERENCES "users"("id") ON DELETE SET NULL ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "user_auth" ADD CONSTRAINT "user_auth_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "user_preferences" ADD CONSTRAINT "user_preferences_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "role_permissions" ADD CONSTRAINT "role_permissions_role_id_fkey" FOREIGN KEY ("role_id") REFERENCES "roles"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "role_permissions" ADD CONSTRAINT "role_permissions_permission_id_fkey" FOREIGN KEY ("permission_id") REFERENCES "permissions"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "admin_user_roles" ADD CONSTRAINT "admin_user_roles_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "admin_user_roles" ADD CONSTRAINT "admin_user_roles_role_id_fkey" FOREIGN KEY ("role_id") REFERENCES "roles"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "agent_profiles" ADD CONSTRAINT "agent_profiles_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "wallets" ADD CONSTRAINT "wallets_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "wallet_transactions" ADD CONSTRAINT "wallet_transactions_wallet_id_fkey" FOREIGN KEY ("wallet_id") REFERENCES "wallets"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "matches" ADD CONSTRAINT "matches_league_id_fkey" FOREIGN KEY ("league_id") REFERENCES "leagues"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "matches" ADD CONSTRAINT "matches_home_team_id_fkey" FOREIGN KEY ("home_team_id") REFERENCES "teams"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "matches" ADD CONSTRAINT "matches_away_team_id_fkey" FOREIGN KEY ("away_team_id") REFERENCES "teams"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "match_scores" ADD CONSTRAINT "match_scores_match_id_fkey" FOREIGN KEY ("match_id") REFERENCES "matches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "markets" ADD CONSTRAINT "markets_match_id_fkey" FOREIGN KEY ("match_id") REFERENCES "matches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "market_selections" ADD CONSTRAINT "market_selections_market_id_fkey" FOREIGN KEY ("market_id") REFERENCES "markets"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "odds_change_logs" ADD CONSTRAINT "odds_change_logs_selection_id_fkey" FOREIGN KEY ("selection_id") REFERENCES "market_selections"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "bets" ADD CONSTRAINT "bets_user_id_fkey" FOREIGN KEY ("user_id") REFERENCES "users"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "bet_selections" ADD CONSTRAINT "bet_selections_bet_id_fkey" FOREIGN KEY ("bet_id") REFERENCES "bets"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "settlement_batches" ADD CONSTRAINT "settlement_batches_match_id_fkey" FOREIGN KEY ("match_id") REFERENCES "matches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "settlement_items" ADD CONSTRAINT "settlement_items_batch_id_fkey" FOREIGN KEY ("batch_id") REFERENCES "settlement_batches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "cashback_items" ADD CONSTRAINT "cashback_items_batch_id_fkey" FOREIGN KEY ("batch_id") REFERENCES "cashback_batches"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "content_translations" ADD CONSTRAINT "content_translations_content_id_fkey" FOREIGN KEY ("content_id") REFERENCES "contents"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
|
||||
3
apps/api/prisma/migrations/migration_lock.toml
Normal file
3
apps/api/prisma/migrations/migration_lock.toml
Normal file
@@ -0,0 +1,3 @@
|
||||
# Please do not edit this file manually
|
||||
# It should be added in your version-control system (e.g., Git)
|
||||
provider = "postgresql"
|
||||
@@ -55,6 +55,8 @@ model UserPreference {
|
||||
id BigInt @id @default(autoincrement())
|
||||
userId BigInt @unique @map("user_id")
|
||||
locale String @default("en-US") @db.VarChar(10)
|
||||
phone String? @db.VarChar(32)
|
||||
email String? @db.VarChar(128)
|
||||
createdAt DateTime @default(now()) @map("created_at")
|
||||
updatedAt DateTime @updatedAt @map("updated_at")
|
||||
|
||||
|
||||
@@ -3,6 +3,569 @@ import * as bcrypt from 'bcryptjs';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
/** 为演示赛事补齐详情页玩法（与后台 markets 模板一致） */
|
||||
async function seedDemoMarkets(matchId: bigint) {
|
||||
const configs: Array<{
|
||||
marketType: string;
|
||||
period: string;
|
||||
lineValue?: number;
|
||||
sortOrder: number;
|
||||
selections: Array<{ code: string; name: string; odds: number }>;
|
||||
}> = [
|
||||
{
|
||||
marketType: 'FT_1X2',
|
||||
period: 'FT',
|
||||
sortOrder: 1,
|
||||
selections: [
|
||||
{ code: 'HOME', name: '主胜', odds: 2.5 },
|
||||
{ code: 'DRAW', name: '和', odds: 3.2 },
|
||||
{ code: 'AWAY', name: '客胜', odds: 2.8 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'FT_HANDICAP',
|
||||
period: 'FT',
|
||||
lineValue: -0.5,
|
||||
sortOrder: 2,
|
||||
selections: [
|
||||
{ code: 'HOME', name: '主 -0.5', odds: 1.9 },
|
||||
{ code: 'AWAY', name: '客 +0.5', odds: 1.9 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'FT_OVER_UNDER',
|
||||
period: 'FT',
|
||||
lineValue: 2.5,
|
||||
sortOrder: 3,
|
||||
selections: [
|
||||
{ code: 'OVER', name: '大 2.5', odds: 1.85 },
|
||||
{ code: 'UNDER', name: '小 2.5', odds: 1.95 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'FT_ODD_EVEN',
|
||||
period: 'FT',
|
||||
sortOrder: 4,
|
||||
selections: [
|
||||
{ code: 'ODD', name: '单', odds: 1.9 },
|
||||
{ code: 'EVEN', name: '双', odds: 1.9 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'HT_1X2',
|
||||
period: 'HT',
|
||||
sortOrder: 5,
|
||||
selections: [
|
||||
{ code: 'HOME', name: '半场主', odds: 3.0 },
|
||||
{ code: 'DRAW', name: '半场和', odds: 2.0 },
|
||||
{ code: 'AWAY', name: '半场客', odds: 3.5 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'HT_HANDICAP',
|
||||
period: 'HT',
|
||||
lineValue: -0.5,
|
||||
sortOrder: 6,
|
||||
selections: [
|
||||
{ code: 'HOME', name: '半场主 -0.5', odds: 1.9 },
|
||||
{ code: 'AWAY', name: '半场客 +0.5', odds: 1.9 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'HT_OVER_UNDER',
|
||||
period: 'HT',
|
||||
lineValue: 1.5,
|
||||
sortOrder: 7,
|
||||
selections: [
|
||||
{ code: 'OVER', name: '半场大 1.5', odds: 2.0 },
|
||||
{ code: 'UNDER', name: '半场小 1.5', odds: 1.75 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'FT_CORRECT_SCORE',
|
||||
period: 'FT',
|
||||
sortOrder: 8,
|
||||
selections: [
|
||||
{ code: 'SCORE_1_0', name: '1-0', odds: 4.86 },
|
||||
{ code: 'SCORE_2_0', name: '2-0', odds: 5.22 },
|
||||
{ code: 'SCORE_2_1', name: '2-1', odds: 7.92 },
|
||||
{ code: 'SCORE_3_0', name: '3-0', odds: 8.28 },
|
||||
{ code: 'SCORE_0_0', name: '0-0', odds: 8.64 },
|
||||
{ code: 'SCORE_1_1', name: '1-1', odds: 7.47 },
|
||||
{ code: 'SCORE_2_2', name: '2-2', odds: 24.3 },
|
||||
{ code: 'SCORE_3_3', name: '3-3', odds: 175.5 },
|
||||
{ code: 'SCORE_0_1', name: '0-1', odds: 14.4 },
|
||||
{ code: 'SCORE_0_2', name: '0-2', odds: 45.9 },
|
||||
{ code: 'SCORE_1_2', name: '1-2', odds: 23.4 },
|
||||
{ code: 'SCORE_0_3', name: '0-3', odds: 207 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'HT_CORRECT_SCORE',
|
||||
period: 'HT',
|
||||
sortOrder: 9,
|
||||
selections: [
|
||||
{ code: 'SCORE_1_0', name: '1-0', odds: 4.5 },
|
||||
{ code: 'SCORE_2_0', name: '2-0', odds: 8.0 },
|
||||
{ code: 'SCORE_0_0', name: '0-0', odds: 5.5 },
|
||||
{ code: 'SCORE_1_1', name: '1-1', odds: 7.0 },
|
||||
{ code: 'SCORE_0_1', name: '0-1', odds: 6.5 },
|
||||
{ code: 'SCORE_0_2', name: '0-2', odds: 18.0 },
|
||||
],
|
||||
},
|
||||
{
|
||||
marketType: 'SH_CORRECT_SCORE',
|
||||
period: 'SH',
|
||||
sortOrder: 10,
|
||||
selections: [
|
||||
{ code: 'SCORE_1_0', name: '1-0', odds: 4.5 },
|
||||
{ code: 'SCORE_2_0', name: '2-0', odds: 8.0 },
|
||||
{ code: 'SCORE_0_0', name: '0-0', odds: 5.5 },
|
||||
{ code: 'SCORE_1_1', name: '1-1', odds: 7.0 },
|
||||
{ code: 'SCORE_0_1', name: '0-1', odds: 6.5 },
|
||||
{ code: 'SCORE_0_2', name: '0-2', odds: 18.0 },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
for (const cfg of configs) {
|
||||
const exists = await prisma.market.findFirst({
|
||||
where: { matchId, marketType: cfg.marketType },
|
||||
include: { _count: { select: { selections: true } } },
|
||||
});
|
||||
if (exists) {
|
||||
const needRefresh =
|
||||
cfg.marketType.includes('CORRECT_SCORE') &&
|
||||
exists._count.selections < cfg.selections.length;
|
||||
if (needRefresh) {
|
||||
await prisma.market.delete({ where: { id: exists.id } });
|
||||
} else {
|
||||
continue;
|
||||
}
|
||||
}
|
||||
await prisma.market.create({
|
||||
data: {
|
||||
matchId,
|
||||
marketType: cfg.marketType,
|
||||
period: cfg.period,
|
||||
lineValue: cfg.lineValue,
|
||||
allowSingle: true,
|
||||
allowParlay: true,
|
||||
sortOrder: cfg.sortOrder,
|
||||
status: 'OPEN',
|
||||
selections: {
|
||||
create: cfg.selections.map((s, i) => ({
|
||||
selectionCode: s.code,
|
||||
selectionName: s.name,
|
||||
odds: s.odds,
|
||||
sortOrder: i,
|
||||
status: 'OPEN',
|
||||
})),
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function upsertLeagueName(leagueId: bigint, names: Record<string, string>) {
|
||||
for (const [locale, value] of Object.entries(names)) {
|
||||
await prisma.entityTranslation.upsert({
|
||||
where: {
|
||||
entityType_entityId_locale_fieldName: {
|
||||
entityType: 'LEAGUE',
|
||||
entityId: leagueId,
|
||||
locale,
|
||||
fieldName: 'name',
|
||||
},
|
||||
},
|
||||
create: { entityType: 'LEAGUE', entityId: leagueId, locale, fieldName: 'name', value },
|
||||
update: { value },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function upsertTeam(
|
||||
code: string,
|
||||
names: Record<string, string>,
|
||||
) {
|
||||
const team = await prisma.team.upsert({
|
||||
where: { code },
|
||||
create: { code },
|
||||
update: {},
|
||||
});
|
||||
for (const [locale, value] of Object.entries(names)) {
|
||||
await prisma.entityTranslation.upsert({
|
||||
where: {
|
||||
entityType_entityId_locale_fieldName: {
|
||||
entityType: 'TEAM',
|
||||
entityId: team.id,
|
||||
locale,
|
||||
fieldName: 'name',
|
||||
},
|
||||
},
|
||||
create: { entityType: 'TEAM', entityId: team.id, locale, fieldName: 'name', value },
|
||||
update: { value },
|
||||
});
|
||||
}
|
||||
return team;
|
||||
}
|
||||
|
||||
async function ensurePublishedMatch(opts: {
|
||||
leagueId: bigint;
|
||||
homeTeamId: bigint;
|
||||
awayTeamId: bigint;
|
||||
startTime: Date;
|
||||
isHot?: boolean;
|
||||
displayOrder?: number;
|
||||
}) {
|
||||
let match = await prisma.match.findFirst({
|
||||
where: {
|
||||
leagueId: opts.leagueId,
|
||||
homeTeamId: opts.homeTeamId,
|
||||
awayTeamId: opts.awayTeamId,
|
||||
status: 'PUBLISHED',
|
||||
},
|
||||
});
|
||||
if (!match) {
|
||||
match = await prisma.match.create({
|
||||
data: {
|
||||
leagueId: opts.leagueId,
|
||||
homeTeamId: opts.homeTeamId,
|
||||
awayTeamId: opts.awayTeamId,
|
||||
startTime: opts.startTime,
|
||||
status: 'PUBLISHED',
|
||||
isHot: opts.isHot ?? false,
|
||||
displayOrder: opts.displayOrder ?? 0,
|
||||
publishTime: new Date(),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
match = await prisma.match.update({
|
||||
where: { id: match.id },
|
||||
data: {
|
||||
startTime: opts.startTime,
|
||||
isHot: opts.isHot ?? match.isHot,
|
||||
displayOrder: opts.displayOrder ?? match.displayOrder,
|
||||
},
|
||||
});
|
||||
}
|
||||
await seedDemoMarkets(match.id);
|
||||
return match;
|
||||
}
|
||||
|
||||
function hoursFromNow(hours: number) {
|
||||
return new Date(Date.now() + hours * 3600 * 1000);
|
||||
}
|
||||
|
||||
async function seedSportsDemo() {
|
||||
const epl = await prisma.league.upsert({
|
||||
where: { code: 'EPL' },
|
||||
create: { code: 'EPL' },
|
||||
update: {},
|
||||
});
|
||||
await upsertLeagueName(epl.id, { 'zh-CN': '英超', 'en-US': 'Premier League' });
|
||||
|
||||
const wc = await prisma.league.upsert({
|
||||
where: { code: 'WC2026' },
|
||||
create: { code: 'WC2026' },
|
||||
update: {},
|
||||
});
|
||||
await upsertLeagueName(wc.id, {
|
||||
'zh-CN': '2026世界杯(在加拿大,墨西哥和美国)',
|
||||
'en-US': '2026 FIFA World Cup',
|
||||
});
|
||||
|
||||
const teams: Array<[string, Record<string, string>]> = [
|
||||
['MUN', { 'zh-CN': '曼联', 'en-US': 'Man United' }],
|
||||
['CHE', { 'zh-CN': '切尔西', 'en-US': 'Chelsea' }],
|
||||
['MEX', { 'zh-CN': '墨西哥', 'en-US': 'Mexico' }],
|
||||
['RSA', { 'zh-CN': '南非', 'en-US': 'South Africa' }],
|
||||
['CZE', { 'zh-CN': '捷克', 'en-US': 'Czech Republic' }],
|
||||
['KOR', { 'zh-CN': '韩国', 'en-US': 'South Korea' }],
|
||||
['CAN', { 'zh-CN': '加拿大', 'en-US': 'Canada' }],
|
||||
['BIH', { 'zh-CN': '波黑', 'en-US': 'Bosnia' }],
|
||||
['USA', { 'zh-CN': '美国', 'en-US': 'USA' }],
|
||||
['PAR', { 'zh-CN': '巴拉圭', 'en-US': 'Paraguay' }],
|
||||
['SUI', { 'zh-CN': '瑞士', 'en-US': 'Switzerland' }],
|
||||
['BRA', { 'zh-CN': '巴西', 'en-US': 'Brazil' }],
|
||||
['SCO', { 'zh-CN': '苏格兰', 'en-US': 'Scotland' }],
|
||||
['TUR', { 'zh-CN': '土耳其', 'en-US': 'Turkey' }],
|
||||
['ARG', { 'zh-CN': '阿根廷', 'en-US': 'Argentina' }],
|
||||
['FRA', { 'zh-CN': '法国', 'en-US': 'France' }],
|
||||
];
|
||||
|
||||
const teamMap = new Map<string, { id: bigint }>();
|
||||
for (const [code, names] of teams) {
|
||||
teamMap.set(code, await upsertTeam(code, names));
|
||||
}
|
||||
|
||||
const get = (code: string) => {
|
||||
const t = teamMap.get(code);
|
||||
if (!t) throw new Error(`Team ${code} missing`);
|
||||
return t;
|
||||
};
|
||||
|
||||
// 英超：明日开赛 → 早盘
|
||||
await ensurePublishedMatch({
|
||||
leagueId: epl.id,
|
||||
homeTeamId: get('MUN').id,
|
||||
awayTeamId: get('CHE').id,
|
||||
startTime: hoursFromNow(26),
|
||||
isHot: true,
|
||||
displayOrder: 1,
|
||||
});
|
||||
|
||||
// 英超：今晚开赛 → 今日
|
||||
await ensurePublishedMatch({
|
||||
leagueId: epl.id,
|
||||
homeTeamId: get('CHE').id,
|
||||
awayTeamId: get('MUN').id,
|
||||
startTime: hoursFromNow(8),
|
||||
isHot: false,
|
||||
displayOrder: 2,
|
||||
});
|
||||
|
||||
const wcFixtures: Array<{
|
||||
home: string;
|
||||
away: string;
|
||||
start: Date;
|
||||
hot?: boolean;
|
||||
order: number;
|
||||
}> = [
|
||||
{ home: 'MEX', away: 'RSA', start: new Date('2026-06-12T03:00:00Z'), hot: true, order: 1 },
|
||||
{ home: 'CZE', away: 'KOR', start: new Date('2026-06-12T07:00:00Z'), order: 2 },
|
||||
{ home: 'CAN', away: 'BIH', start: new Date('2026-06-13T00:00:00Z'), order: 3 },
|
||||
{ home: 'USA', away: 'PAR', start: new Date('2026-06-13T03:00:00Z'), hot: true, order: 4 },
|
||||
{ home: 'SUI', away: 'BRA', start: new Date('2026-06-14T16:00:00Z'), order: 5 },
|
||||
{ home: 'SCO', away: 'TUR', start: new Date('2026-06-14T19:00:00Z'), order: 6 },
|
||||
{ home: 'FRA', away: 'ARG', start: new Date('2026-06-15T20:00:00Z'), hot: true, order: 7 },
|
||||
];
|
||||
|
||||
for (const f of wcFixtures) {
|
||||
await ensurePublishedMatch({
|
||||
leagueId: wc.id,
|
||||
homeTeamId: get(f.home).id,
|
||||
awayTeamId: get(f.away).id,
|
||||
startTime: f.start,
|
||||
isHot: f.hot,
|
||||
displayOrder: f.order,
|
||||
});
|
||||
}
|
||||
|
||||
console.log(` Sports demo: ${wcFixtures.length + 2} published matches`);
|
||||
}
|
||||
|
||||
async function seedOutrightDemo() {
|
||||
const wc = await prisma.league.findUnique({ where: { code: 'WC2026' } });
|
||||
if (!wc) return;
|
||||
|
||||
const placeholder = await upsertTeam('OUT', { 'zh-CN': '冠军盘', 'en-US': 'Outright' });
|
||||
|
||||
const outrightOdds: Array<[string, Record<string, string>, number]> = [
|
||||
['FRA', { 'zh-CN': '法国', 'en-US': 'France' }, 4.95],
|
||||
['ESP', { 'zh-CN': '西班牙', 'en-US': 'Spain' }, 4.95],
|
||||
['ENG', { 'zh-CN': '英格兰', 'en-US': 'England' }, 6.3],
|
||||
['BRA', { 'zh-CN': '巴西', 'en-US': 'Brazil' }, 8.55],
|
||||
['ARG', { 'zh-CN': '阿根廷', 'en-US': 'Argentina' }, 8.55],
|
||||
['POR', { 'zh-CN': '葡萄牙', 'en-US': 'Portugal' }, 9.0],
|
||||
['GER', { 'zh-CN': '德国', 'en-US': 'Germany' }, 15.3],
|
||||
['NED', { 'zh-CN': '荷兰', 'en-US': 'Netherlands' }, 18.9],
|
||||
['NOR', { 'zh-CN': '挪威', 'en-US': 'Norway' }, 32.4],
|
||||
['BEL', { 'zh-CN': '比利时', 'en-US': 'Belgium' }, 35.1],
|
||||
['COL', { 'zh-CN': '哥伦比亚', 'en-US': 'Colombia' }, 45.9],
|
||||
['JPN', { 'zh-CN': '日本', 'en-US': 'Japan' }, 45.9],
|
||||
['URU', { 'zh-CN': '乌拉圭', 'en-US': 'Uruguay' }, 63.9],
|
||||
['USA', { 'zh-CN': '美国', 'en-US': 'USA' }, 63.9],
|
||||
['MAR', { 'zh-CN': '摩洛哥', 'en-US': 'Morocco' }, 63.9],
|
||||
['CRO', { 'zh-CN': '克罗地亚', 'en-US': 'Croatia' }, 81.0],
|
||||
['MEX', { 'zh-CN': '墨西哥', 'en-US': 'Mexico' }, 85.0],
|
||||
['SUI', { 'zh-CN': '瑞士', 'en-US': 'Switzerland' }, 90.0],
|
||||
['TUR', { 'zh-CN': '土耳其', 'en-US': 'Turkey' }, 95.0],
|
||||
['SEN', { 'zh-CN': '塞内加尔', 'en-US': 'Senegal' }, 100.0],
|
||||
];
|
||||
|
||||
for (const [code, names] of outrightOdds) {
|
||||
await upsertTeam(code, names);
|
||||
}
|
||||
|
||||
let match = await prisma.match.findFirst({
|
||||
where: { leagueId: wc.id, isOutright: true },
|
||||
});
|
||||
if (!match) {
|
||||
match = await prisma.match.create({
|
||||
data: {
|
||||
leagueId: wc.id,
|
||||
homeTeamId: placeholder.id,
|
||||
awayTeamId: placeholder.id,
|
||||
isOutright: true,
|
||||
startTime: new Date('2027-07-01T00:00:00Z'),
|
||||
status: 'PUBLISHED',
|
||||
publishTime: new Date(),
|
||||
isHot: true,
|
||||
displayOrder: 0,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const marketExists = await prisma.market.findFirst({
|
||||
where: { matchId: match.id, marketType: 'OUTRIGHT_WINNER' },
|
||||
});
|
||||
if (!marketExists) {
|
||||
await prisma.market.create({
|
||||
data: {
|
||||
matchId: match.id,
|
||||
marketType: 'OUTRIGHT_WINNER',
|
||||
period: 'OUTRIGHT',
|
||||
allowSingle: true,
|
||||
allowParlay: false,
|
||||
sortOrder: 1,
|
||||
status: 'OPEN',
|
||||
selections: {
|
||||
create: outrightOdds.map(([code, names, odds], i) => ({
|
||||
selectionCode: code,
|
||||
selectionName: names['zh-CN'],
|
||||
odds,
|
||||
sortOrder: i,
|
||||
status: 'OPEN',
|
||||
})),
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
console.log(' Outright demo: World Cup winner market');
|
||||
}
|
||||
|
||||
async function seedPlayerDemo() {
|
||||
const player = await prisma.user.findUnique({
|
||||
where: { username: 'player1' },
|
||||
include: { wallet: true },
|
||||
});
|
||||
if (!player?.wallet) return;
|
||||
|
||||
await prisma.wallet.update({
|
||||
where: { id: player.wallet.id },
|
||||
data: { availableBalance: 88888.88 },
|
||||
});
|
||||
|
||||
await prisma.walletTransaction.upsert({
|
||||
where: { transactionId: 'DEMO-DEP-001' },
|
||||
create: {
|
||||
transactionId: 'DEMO-DEP-001',
|
||||
userId: player.id,
|
||||
walletId: player.wallet.id,
|
||||
transactionType: 'DEPOSIT',
|
||||
amount: 50000,
|
||||
balanceBefore: 1000,
|
||||
balanceAfter: 51000,
|
||||
frozenBefore: 0,
|
||||
frozenAfter: 0,
|
||||
remark: '演示充值',
|
||||
},
|
||||
update: {},
|
||||
});
|
||||
|
||||
await prisma.walletTransaction.upsert({
|
||||
where: { transactionId: 'DEMO-DEP-002' },
|
||||
create: {
|
||||
transactionId: 'DEMO-DEP-002',
|
||||
userId: player.id,
|
||||
walletId: player.wallet.id,
|
||||
transactionType: 'DEPOSIT',
|
||||
amount: 37888.88,
|
||||
balanceBefore: 51000,
|
||||
balanceAfter: 88888.88,
|
||||
frozenBefore: 0,
|
||||
frozenAfter: 0,
|
||||
remark: '演示充值（二笔）',
|
||||
},
|
||||
update: {},
|
||||
});
|
||||
|
||||
const sampleSel = await prisma.marketSelection.findFirst({
|
||||
where: {
|
||||
status: 'OPEN',
|
||||
market: { marketType: 'FT_1X2', match: { status: 'PUBLISHED' } },
|
||||
},
|
||||
include: { market: { include: { match: true } } },
|
||||
});
|
||||
|
||||
if (sampleSel && !(await prisma.bet.findUnique({ where: { betNo: 'DEMO-BET-001' } }))) {
|
||||
const odds = Number(sampleSel.odds);
|
||||
const stake = 200;
|
||||
await prisma.bet.create({
|
||||
data: {
|
||||
betNo: 'DEMO-BET-001',
|
||||
userId: player.id,
|
||||
agentId: player.parentId,
|
||||
betType: 'SINGLE',
|
||||
stake,
|
||||
totalOdds: odds,
|
||||
potentialReturn: stake * odds,
|
||||
status: 'PENDING',
|
||||
requestId: 'seed-demo-bet-001',
|
||||
selections: {
|
||||
create: {
|
||||
matchId: sampleSel.market.matchId,
|
||||
marketId: sampleSel.marketId,
|
||||
selectionId: sampleSel.id,
|
||||
marketType: sampleSel.market.marketType,
|
||||
period: sampleSel.market.period,
|
||||
selectionNameSnapshot: sampleSel.selectionName,
|
||||
odds: sampleSel.odds,
|
||||
oddsVersion: sampleSel.oddsVersion,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const settledSel = await prisma.marketSelection.findFirst({
|
||||
where: {
|
||||
market: { marketType: 'FT_1X2' },
|
||||
selectionCode: 'DRAW',
|
||||
},
|
||||
include: { market: true },
|
||||
});
|
||||
|
||||
if (settledSel && !(await prisma.bet.findUnique({ where: { betNo: 'DEMO-BET-002' } }))) {
|
||||
const odds = Number(settledSel.odds);
|
||||
const stake = 50;
|
||||
await prisma.bet.create({
|
||||
data: {
|
||||
betNo: 'DEMO-BET-002',
|
||||
userId: player.id,
|
||||
agentId: player.parentId,
|
||||
betType: 'SINGLE',
|
||||
stake,
|
||||
totalOdds: odds,
|
||||
potentialReturn: stake * odds,
|
||||
actualReturn: stake * odds,
|
||||
status: 'WON',
|
||||
settlementStatus: 'SETTLED',
|
||||
settledAt: new Date(Date.now() - 86400000),
|
||||
requestId: 'seed-demo-bet-002',
|
||||
selections: {
|
||||
create: {
|
||||
matchId: settledSel.market.matchId,
|
||||
marketId: settledSel.marketId,
|
||||
selectionId: settledSel.id,
|
||||
marketType: settledSel.market.marketType,
|
||||
period: settledSel.market.period,
|
||||
selectionNameSnapshot: settledSel.selectionName,
|
||||
odds: settledSel.odds,
|
||||
oddsVersion: settledSel.oddsVersion,
|
||||
resultStatus: 'WIN',
|
||||
effectiveOdds: settledSel.odds,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
console.log(' Player demo: wallet + transactions + sample bets');
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log('Seeding database...');
|
||||
|
||||
@@ -107,70 +670,79 @@ async function main() {
|
||||
}
|
||||
}
|
||||
|
||||
const league = await prisma.league.upsert({
|
||||
where: { code: 'EPL' },
|
||||
create: { code: 'EPL' },
|
||||
update: {},
|
||||
});
|
||||
|
||||
await prisma.entityTranslation.upsert({
|
||||
where: { entityType_entityId_locale_fieldName: { entityType: 'LEAGUE', entityId: league.id, locale: 'zh-CN', fieldName: 'name' } },
|
||||
create: { entityType: 'LEAGUE', entityId: league.id, locale: 'zh-CN', fieldName: 'name', value: '英超' },
|
||||
update: {},
|
||||
});
|
||||
|
||||
for (const [code, name] of [['MUN', '曼联'], ['CHE', '切尔西']] as const) {
|
||||
const team = await prisma.team.upsert({ where: { code }, create: { code }, update: {} });
|
||||
await prisma.entityTranslation.upsert({
|
||||
where: { entityType_entityId_locale_fieldName: { entityType: 'TEAM', entityId: team.id, locale: 'zh-CN', fieldName: 'name' } },
|
||||
create: { entityType: 'TEAM', entityId: team.id, locale: 'zh-CN', fieldName: 'name', value: name },
|
||||
update: { value: name },
|
||||
});
|
||||
}
|
||||
|
||||
const mun = await prisma.team.findUnique({ where: { code: 'MUN' } });
|
||||
const che = await prisma.team.findUnique({ where: { code: 'CHE' } });
|
||||
|
||||
if (mun && che) {
|
||||
const existing = await prisma.match.findFirst({ where: { homeTeamId: mun.id, awayTeamId: che.id } });
|
||||
if (!existing) {
|
||||
const match = await prisma.match.create({
|
||||
data: {
|
||||
leagueId: league.id,
|
||||
homeTeamId: mun.id,
|
||||
awayTeamId: che.id,
|
||||
startTime: new Date(Date.now() + 86400000),
|
||||
status: 'PUBLISHED',
|
||||
isHot: true,
|
||||
publishTime: new Date(),
|
||||
},
|
||||
});
|
||||
await prisma.market.create({
|
||||
data: {
|
||||
matchId: match.id,
|
||||
marketType: 'FT_1X2',
|
||||
period: 'FT',
|
||||
selections: {
|
||||
create: [
|
||||
{ selectionCode: 'HOME', selectionName: 'Home', odds: 2.5 },
|
||||
{ selectionCode: 'DRAW', selectionName: 'Draw', odds: 3.2 },
|
||||
{ selectionCode: 'AWAY', selectionName: 'Away', odds: 2.8 },
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
await seedSportsDemo();
|
||||
await seedOutrightDemo();
|
||||
await seedPlayerDemo();
|
||||
|
||||
await prisma.content.create({
|
||||
data: {
|
||||
contentType: 'BANNER',
|
||||
status: 'ACTIVE',
|
||||
sortOrder: 1,
|
||||
linkType: 'ROUTE',
|
||||
linkTarget: '/football',
|
||||
translations: {
|
||||
create: [
|
||||
{ locale: 'zh-CN', title: '欢迎投注', body: '足球赛事火热进行中' },
|
||||
{ locale: 'en-US', title: 'Welcome', body: 'Football matches available' },
|
||||
{ locale: 'zh-CN', title: '欢迎投注', body: '足球赛事火热进行中', imageUrl: '/uploads/banners/welcome.svg' },
|
||||
{ locale: 'en-US', title: 'Welcome', body: 'Football matches available', imageUrl: '/uploads/banners/welcome.svg' },
|
||||
],
|
||||
},
|
||||
},
|
||||
}).catch(() => {});
|
||||
|
||||
await prisma.content.create({
|
||||
data: {
|
||||
contentType: 'BANNER',
|
||||
status: 'ACTIVE',
|
||||
sortOrder: 2,
|
||||
translations: {
|
||||
create: [
|
||||
{ locale: 'zh-CN', title: '首存礼遇', body: '新会员专属优惠', imageUrl: '/uploads/banners/promo.svg' },
|
||||
{ locale: 'en-US', title: 'First Deposit', body: 'New member offer', imageUrl: '/uploads/banners/promo.svg' },
|
||||
],
|
||||
},
|
||||
},
|
||||
}).catch(() => {});
|
||||
|
||||
await prisma.content.create({
|
||||
data: {
|
||||
contentType: 'BANNER',
|
||||
status: 'ACTIVE',
|
||||
sortOrder: 3,
|
||||
linkType: 'ROUTE',
|
||||
linkTarget: '/football',
|
||||
translations: {
|
||||
create: [
|
||||
{ locale: 'zh-CN', title: '热门赛事', body: '五大联赛天天有球', imageUrl: '/uploads/banners/hot-matches.svg' },
|
||||
{ locale: 'en-US', title: 'Hot Matches', body: 'Top leagues daily', imageUrl: '/uploads/banners/hot-matches.svg' },
|
||||
],
|
||||
},
|
||||
},
|
||||
}).catch(() => {});
|
||||
|
||||
await prisma.content.create({
|
||||
data: {
|
||||
contentType: 'TICKER',
|
||||
status: 'ACTIVE',
|
||||
sortOrder: 1,
|
||||
translations: {
|
||||
create: [
|
||||
{ locale: 'zh-CN', body: '欢迎来到 TheBet365 · 热门赛事每日更新 · 请理性投注' },
|
||||
{ locale: 'en-US', body: 'Welcome to TheBet365 · Daily hot matches · Bet responsibly' },
|
||||
],
|
||||
},
|
||||
},
|
||||
}).catch(() => {});
|
||||
|
||||
await prisma.content.create({
|
||||
data: {
|
||||
contentType: 'NOTICE',
|
||||
status: 'ACTIVE',
|
||||
sortOrder: 1,
|
||||
translations: {
|
||||
create: [
|
||||
{ locale: 'zh-CN', title: '系统维护通知：每周一 04:00-05:00 例行维护，敬请谅解' },
|
||||
{ locale: 'en-US', title: 'Maintenance: Every Mon 04:00-05:00 UTC' },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
@@ -2,6 +2,7 @@ import {
|
||||
Controller,
|
||||
Get,
|
||||
Post,
|
||||
Patch,
|
||||
Body,
|
||||
Param,
|
||||
Query,
|
||||
@@ -62,6 +63,16 @@ class LocaleDto {
|
||||
locale!: string;
|
||||
}
|
||||
|
||||
class UpdateProfileDto {
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
phone?: string;
|
||||
|
||||
@IsOptional()
|
||||
@IsString()
|
||||
email?: string;
|
||||
}
|
||||
|
||||
@ApiTags('Player')
|
||||
@Controller('player')
|
||||
@UseGuards(JwtAuthGuard, PlayerGuard)
|
||||
@@ -88,6 +99,12 @@ export class PlayerController {
|
||||
return jsonResponse(result);
|
||||
}
|
||||
|
||||
@Patch('profile')
|
||||
async updateProfile(@CurrentUser('id') userId: bigint, @Body() dto: UpdateProfileDto) {
|
||||
const user = await this.users.updateProfile(userId, dto);
|
||||
return jsonResponse(user);
|
||||
}
|
||||
|
||||
@Get('home')
|
||||
async home(@CurrentUser('locale') locale: string) {
|
||||
const [banners, notices, ticker, hotMatches, todayMatches] = await Promise.all([
|
||||
@@ -115,6 +132,12 @@ export class PlayerController {
|
||||
return jsonResponse(items);
|
||||
}
|
||||
|
||||
@Get('outrights')
|
||||
async listOutrights(@CurrentUser('locale') locale: string) {
|
||||
const items = await this.matches.listOutrights(locale);
|
||||
return jsonResponse(items);
|
||||
}
|
||||
|
||||
@Get('matches/:id')
|
||||
async matchDetail(@Param('id') id: string, @CurrentUser('locale') locale: string) {
|
||||
const match = await this.matches.getMatchDetail(BigInt(id), locale);
|
||||
@@ -149,11 +172,13 @@ export class PlayerController {
|
||||
@Get('bets')
|
||||
async myBets(
|
||||
@CurrentUser('id') userId: bigint,
|
||||
@CurrentUser('locale') locale: string,
|
||||
@Query('status') status?: string,
|
||||
@Query('page') page?: string,
|
||||
) {
|
||||
const result = await this.bets.getUserBets(userId, status, page ? parseInt(page) : 1);
|
||||
return jsonResponse(result);
|
||||
const items = await this.matches.enrichBetsForHistory(result.items, locale);
|
||||
return jsonResponse({ ...result, items });
|
||||
}
|
||||
|
||||
@Get('bets/:betNo')
|
||||
|
||||
@@ -96,9 +96,8 @@ export class MatchesService {
|
||||
leagueId: bigint;
|
||||
homeTeamId: bigint;
|
||||
awayTeamId: bigint;
|
||||
league?: unknown;
|
||||
homeTeam?: unknown;
|
||||
awayTeam?: unknown;
|
||||
homeTeam?: { code: string };
|
||||
awayTeam?: { code: string };
|
||||
markets?: unknown[];
|
||||
};
|
||||
const [leagueName, homeName, awayName] = await Promise.all([
|
||||
@@ -108,9 +107,13 @@ export class MatchesService {
|
||||
]);
|
||||
return {
|
||||
...match,
|
||||
id: m.id.toString(),
|
||||
leagueId: m.leagueId.toString(),
|
||||
leagueName,
|
||||
homeTeamName: homeName,
|
||||
awayTeamName: awayName,
|
||||
homeTeamCode: m.homeTeam?.code ?? '',
|
||||
awayTeamCode: m.awayTeam?.code ?? '',
|
||||
};
|
||||
}
|
||||
|
||||
@@ -118,9 +121,12 @@ export class MatchesService {
|
||||
const matches = await this.prisma.match.findMany({
|
||||
where: {
|
||||
status: 'PUBLISHED',
|
||||
isOutright: false,
|
||||
...(leagueId ? { leagueId } : {}),
|
||||
},
|
||||
include: {
|
||||
homeTeam: true,
|
||||
awayTeam: true,
|
||||
markets: {
|
||||
where: { status: 'OPEN' },
|
||||
include: { selections: { where: { status: 'OPEN' } } },
|
||||
@@ -136,8 +142,11 @@ export class MatchesService {
|
||||
const match = await this.prisma.match.findUnique({
|
||||
where: { id: matchId },
|
||||
include: {
|
||||
homeTeam: true,
|
||||
awayTeam: true,
|
||||
markets: {
|
||||
include: { selections: true },
|
||||
where: { status: 'OPEN' },
|
||||
include: { selections: { where: { status: 'OPEN' }, orderBy: { sortOrder: 'asc' } } },
|
||||
orderBy: { sortOrder: 'asc' },
|
||||
},
|
||||
score: true,
|
||||
@@ -147,12 +156,180 @@ export class MatchesService {
|
||||
return this.enrichMatch(match, locale);
|
||||
}
|
||||
|
||||
async listOutrights(locale = 'en-US') {
|
||||
const matches = await this.prisma.match.findMany({
|
||||
where: { status: 'PUBLISHED', isOutright: true },
|
||||
include: {
|
||||
markets: {
|
||||
where: { marketType: 'OUTRIGHT_WINNER', status: 'OPEN' },
|
||||
include: {
|
||||
selections: {
|
||||
where: { status: 'OPEN' },
|
||||
orderBy: { sortOrder: 'asc' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy: [{ displayOrder: 'asc' }, { startTime: 'asc' }],
|
||||
});
|
||||
|
||||
const results = [];
|
||||
for (const match of matches) {
|
||||
const leagueName = await this.getTranslation('LEAGUE', match.leagueId, locale);
|
||||
const market = match.markets[0];
|
||||
if (!market) continue;
|
||||
|
||||
const selections = await Promise.all(
|
||||
market.selections.map(async (sel) => {
|
||||
const teamCode = sel.selectionCode.replace(/^TEAM_/, '');
|
||||
const team = await this.prisma.team.findUnique({ where: { code: teamCode } });
|
||||
const teamName = team
|
||||
? await this.getTranslation('TEAM', team.id, locale)
|
||||
: sel.selectionName;
|
||||
return {
|
||||
id: sel.id.toString(),
|
||||
teamCode,
|
||||
teamName,
|
||||
odds: sel.odds.toString(),
|
||||
oddsVersion: sel.oddsVersion.toString(),
|
||||
};
|
||||
}),
|
||||
);
|
||||
|
||||
results.push({
|
||||
id: match.id.toString(),
|
||||
leagueId: match.leagueId.toString(),
|
||||
leagueName,
|
||||
title: `*${leagueName} 冠军`,
|
||||
marketId: market.id.toString(),
|
||||
selections,
|
||||
});
|
||||
}
|
||||
return results;
|
||||
}
|
||||
|
||||
private marketLabelKey(marketType: string): string {
|
||||
const keys: Record<string, string> = {
|
||||
FT_1X2: '全场独赢',
|
||||
FT_HANDICAP: '全场让球',
|
||||
FT_OVER_UNDER: '全场大小',
|
||||
FT_ODD_EVEN: '全场单双',
|
||||
HT_1X2: '半场独赢',
|
||||
HT_HANDICAP: '半场让球',
|
||||
HT_OVER_UNDER: '半场大小',
|
||||
OUTRIGHT_WINNER: '冠军',
|
||||
FT_CORRECT_SCORE: '波胆',
|
||||
HT_CORRECT_SCORE: '上半场波胆',
|
||||
SH_CORRECT_SCORE: '下半场波胆',
|
||||
};
|
||||
return keys[marketType] ?? marketType;
|
||||
}
|
||||
|
||||
async enrichBetsForHistory(
|
||||
bets: Array<{
|
||||
betNo: string;
|
||||
betType: string;
|
||||
stake: unknown;
|
||||
totalOdds: unknown;
|
||||
potentialReturn: unknown;
|
||||
actualReturn: unknown;
|
||||
status: string;
|
||||
placedAt: Date;
|
||||
selections: Array<{
|
||||
matchId: bigint | null;
|
||||
marketType: string;
|
||||
selectionNameSnapshot: string;
|
||||
odds: unknown;
|
||||
resultStatus?: string | null;
|
||||
}>;
|
||||
}>,
|
||||
locale: string,
|
||||
) {
|
||||
const matchIds = [
|
||||
...new Set(
|
||||
bets.flatMap((b) =>
|
||||
b.selections.map((s) => s.matchId).filter((id): id is bigint => id != null),
|
||||
),
|
||||
),
|
||||
];
|
||||
|
||||
const matches =
|
||||
matchIds.length > 0
|
||||
? await this.prisma.match.findMany({
|
||||
where: { id: { in: matchIds } },
|
||||
include: { homeTeam: true, awayTeam: true },
|
||||
})
|
||||
: [];
|
||||
|
||||
const matchMeta = new Map<
|
||||
string,
|
||||
{ leagueName: string; matchTitle: string; isOutright: boolean }
|
||||
>();
|
||||
|
||||
for (const m of matches) {
|
||||
const [leagueName, homeName, awayName] = await Promise.all([
|
||||
this.getTranslation('LEAGUE', m.leagueId, locale),
|
||||
this.getTranslation('TEAM', m.homeTeamId, locale),
|
||||
this.getTranslation('TEAM', m.awayTeamId, locale),
|
||||
]);
|
||||
matchMeta.set(m.id.toString(), {
|
||||
leagueName,
|
||||
matchTitle: m.isOutright ? leagueName : `${homeName} vs ${awayName}`,
|
||||
isOutright: m.isOutright,
|
||||
});
|
||||
}
|
||||
|
||||
return bets.map((bet) => {
|
||||
const firstMatchId = bet.selections.find((s) => s.matchId)?.matchId?.toString();
|
||||
const meta = firstMatchId ? matchMeta.get(firstMatchId) : undefined;
|
||||
const isParlay = bet.betType === 'PARLAY' || bet.selections.length > 1;
|
||||
|
||||
const legs = bet.selections.map((sel) => {
|
||||
const mid = sel.matchId?.toString();
|
||||
const m = mid ? matchMeta.get(mid) : undefined;
|
||||
return {
|
||||
marketType: sel.marketType,
|
||||
marketLabel: this.marketLabelKey(sel.marketType),
|
||||
selectionName: sel.selectionNameSnapshot,
|
||||
odds: sel.odds,
|
||||
resultStatus: sel.resultStatus,
|
||||
matchTitle: m?.matchTitle ?? sel.selectionNameSnapshot,
|
||||
leagueName: m?.leagueName ?? '',
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
betNo: bet.betNo,
|
||||
betType: bet.betType,
|
||||
stake: bet.stake,
|
||||
totalOdds: bet.totalOdds,
|
||||
potentialReturn: bet.potentialReturn,
|
||||
actualReturn: bet.actualReturn,
|
||||
status: bet.status,
|
||||
placedAt: bet.placedAt,
|
||||
leagueName: isParlay
|
||||
? 'Parlay'
|
||||
: meta?.leagueName ?? legs[0]?.leagueName ?? '',
|
||||
legCount: bet.selections.length,
|
||||
matchTitle: isParlay
|
||||
? ''
|
||||
: meta?.matchTitle ?? legs[0]?.matchTitle ?? bet.betNo,
|
||||
pickLabel: isParlay
|
||||
? ''
|
||||
: `${legs[0]?.marketLabel ?? ''}: ${legs[0]?.selectionName ?? ''}`,
|
||||
legs,
|
||||
isParlay,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
@Cron(CronExpression.EVERY_MINUTE)
|
||||
async autoCloseMatches() {
|
||||
const now = new Date();
|
||||
await this.prisma.match.updateMany({
|
||||
where: {
|
||||
status: 'PUBLISHED',
|
||||
isOutright: false,
|
||||
startTime: { lte: now },
|
||||
},
|
||||
data: { status: 'CLOSED', closeTime: now },
|
||||
|
||||
@@ -12,6 +12,17 @@ export class UsersService {
|
||||
});
|
||||
}
|
||||
|
||||
async updateProfile(userId: bigint, data: { phone?: string; email?: string }) {
|
||||
const phone = data.phone?.trim() || null;
|
||||
const email = data.email?.trim() || null;
|
||||
await this.prisma.userPreference.upsert({
|
||||
where: { userId },
|
||||
create: { userId, phone, email },
|
||||
update: { phone, email },
|
||||
});
|
||||
return this.findById(userId);
|
||||
}
|
||||
|
||||
async updateLocale(userId: bigint, locale: string) {
|
||||
await this.prisma.user.update({
|
||||
where: { id: userId },
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
import { NestFactory } from '@nestjs/core';
|
||||
import { ValidationPipe } from '@nestjs/common';
|
||||
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
|
||||
import { NestExpressApplication } from '@nestjs/platform-express';
|
||||
import { join } from 'path';
|
||||
import { AppModule } from './app.module';
|
||||
|
||||
async function bootstrap() {
|
||||
const app = await NestFactory.create(AppModule);
|
||||
const app = await NestFactory.create<NestExpressApplication>(AppModule);
|
||||
|
||||
const uploadDir = process.env.UPLOAD_DIR || join(__dirname, '..', '..', 'uploads');
|
||||
app.useStaticAssets(uploadDir, { prefix: '/uploads/' });
|
||||
|
||||
app.setGlobalPrefix('api');
|
||||
app.enableCors({ origin: true, credentials: true });
|
||||
|
||||
@@ -32,10 +32,18 @@ export function generateBatchNo(prefix: string): string {
|
||||
return `${prefix}${ts}`;
|
||||
}
|
||||
|
||||
function isDecimalLike(obj: object): obj is { toJSON: () => string } {
|
||||
return (
|
||||
typeof (obj as { toJSON?: unknown }).toJSON === 'function' &&
|
||||
typeof (obj as { toFixed?: unknown }).toFixed === 'function'
|
||||
);
|
||||
}
|
||||
|
||||
export function serializeBigInt(obj: unknown): unknown {
|
||||
if (obj === null || obj === undefined) return obj;
|
||||
if (typeof obj === 'bigint') return obj.toString();
|
||||
if (obj instanceof Date) return obj.toISOString();
|
||||
if (typeof obj === 'object' && isDecimalLike(obj)) return obj.toJSON();
|
||||
if (Array.isArray(obj)) return obj.map(serializeBigInt);
|
||||
if (typeof obj === 'object') {
|
||||
const result: Record<string, unknown> = {};
|
||||
|
||||
@@ -3,7 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<link rel="icon" type="image/png" href="/logo.png" />
|
||||
<link rel="apple-touch-icon" href="/logo.png" />
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<title>TheBet365</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
BIN
apps/player/src/assets/images/banner.png
Normal file
BIN
apps/player/src/assets/images/banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 MiB |
19
apps/player/src/assets/images/banner.svg
Normal file
19
apps/player/src/assets/images/banner.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 280" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="750" y2="280" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1A1A1A"/>
|
||||
<stop offset="0.5" stop-color="#252015"/>
|
||||
<stop offset="1" stop-color="#000000"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop stop-color="#E8C96A"/>
|
||||
<stop offset="1" stop-color="#D4AF37"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="750" height="280" fill="url(#bg)"/>
|
||||
<circle cx="620" cy="80" r="120" fill="#D4AF37" opacity="0.06"/>
|
||||
<circle cx="680" cy="200" r="80" fill="#D4AF37" opacity="0.08"/>
|
||||
<text x="40" y="110" font-family="Arial, sans-serif" font-size="42" font-weight="800" fill="url(#gold)">TheBet365</text>
|
||||
<text x="40" y="160" font-family="Arial, sans-serif" font-size="22" fill="#8E8E93">足球赛事火热进行中</text>
|
||||
<rect x="40" y="190" width="140" height="4" fill="#D4AF37" opacity="0.5" rx="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1018 B |
8
apps/player/src/assets/images/empty-matches.svg
Normal file
8
apps/player/src/assets/images/empty-matches.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120" fill="none" aria-hidden="true">
|
||||
<circle cx="60" cy="60" r="48" stroke="#D4AF37" stroke-width="4" opacity="0.5"/>
|
||||
<circle cx="60" cy="60" r="22" stroke="#F0D875" stroke-width="4"/>
|
||||
<path d="M60 8 L68 32 L60 44 L52 32 Z" fill="#D4AF37"/>
|
||||
<path d="M60 112 L68 88 L60 76 L52 88 Z" fill="#D4AF37"/>
|
||||
<path d="M8 60 L32 52 L44 60 L32 68 Z" fill="#D4AF37"/>
|
||||
<path d="M112 60 L88 68 L76 60 L88 52 Z" fill="#D4AF37"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 489 B |
BIN
apps/player/src/assets/images/h5bg.png
Normal file
BIN
apps/player/src/assets/images/h5bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 MiB |
BIN
apps/player/src/assets/images/saishi.png
Normal file
BIN
apps/player/src/assets/images/saishi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
97
apps/player/src/components/AnnouncementMarquee.vue
Normal file
97
apps/player/src/components/AnnouncementMarquee.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ items: string[]; embedded?: boolean }>(),
|
||||
{ embedded: false },
|
||||
);
|
||||
|
||||
const text = computed(() => {
|
||||
const list = props.items.filter(Boolean);
|
||||
if (!list.length) return '';
|
||||
return list.join(' ◆ ');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="text" class="marquee-bar" :class="{ embedded }">
|
||||
<span class="marquee-badge">公告</span>
|
||||
<div class="marquee-viewport">
|
||||
<div class="marquee-track">
|
||||
<span class="marquee-text">{{ text }}</span>
|
||||
<span class="marquee-text" aria-hidden="true">{{ text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.marquee-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: -4px -2px 14px;
|
||||
padding: 10px 12px;
|
||||
background: #141414;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.marquee-bar.embedded {
|
||||
margin: 0;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.marquee-bar.embedded .marquee-badge {
|
||||
padding: 3px 8px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.marquee-bar.embedded .marquee-text {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.marquee-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
color: #1A1000;
|
||||
background: var(--gradient-gold);
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.marquee-viewport {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
|
||||
}
|
||||
|
||||
.marquee-track {
|
||||
display: flex;
|
||||
width: max-content;
|
||||
animation: marquee-scroll 22s linear infinite;
|
||||
}
|
||||
|
||||
.marquee-text {
|
||||
flex-shrink: 0;
|
||||
padding-right: 80px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-light);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@keyframes marquee-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
</style>
|
||||
245
apps/player/src/components/BannerCarousel.vue
Normal file
245
apps/player/src/components/BannerCarousel.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import defaultBannerImg from '../assets/images/banner.png';
|
||||
|
||||
export interface BannerItem {
|
||||
id?: string;
|
||||
linkType?: string | null;
|
||||
linkTarget?: string | null;
|
||||
translation?: { title?: string; body?: string; imageUrl?: string };
|
||||
}
|
||||
|
||||
const props = defineProps<{ banners: BannerItem[] }>();
|
||||
|
||||
const router = useRouter();
|
||||
const active = ref(0);
|
||||
const timer = ref<ReturnType<typeof setInterval> | null>(null);
|
||||
const touchStartX = ref(0);
|
||||
const touchDeltaX = ref(0);
|
||||
const FALLBACK_IMG = '/uploads/banners/welcome.svg';
|
||||
|
||||
function imageUrl(banner: BannerItem) {
|
||||
return banner.translation?.imageUrl || defaultBannerImg || FALLBACK_IMG;
|
||||
}
|
||||
|
||||
function onImgError(e: Event) {
|
||||
const img = e.target as HTMLImageElement;
|
||||
if (img.dataset.fallbackApplied) return;
|
||||
img.dataset.fallbackApplied = '1';
|
||||
img.src = defaultBannerImg || FALLBACK_IMG;
|
||||
}
|
||||
|
||||
function title(banner: BannerItem) {
|
||||
return banner.translation?.title || 'Banner';
|
||||
}
|
||||
|
||||
function goTo(index: number) {
|
||||
if (!props.banners.length) return;
|
||||
active.value = (index + props.banners.length) % props.banners.length;
|
||||
}
|
||||
|
||||
function next() {
|
||||
goTo(active.value + 1);
|
||||
}
|
||||
|
||||
function prev() {
|
||||
goTo(active.value - 1);
|
||||
}
|
||||
|
||||
function onBannerClick(banner: BannerItem) {
|
||||
if (banner.linkType === 'ROUTE' && banner.linkTarget) {
|
||||
router.push(banner.linkTarget);
|
||||
return;
|
||||
}
|
||||
if (banner.linkType === 'URL' && banner.linkTarget) {
|
||||
window.open(banner.linkTarget, '_blank');
|
||||
}
|
||||
}
|
||||
|
||||
function startAutoPlay() {
|
||||
stopAutoPlay();
|
||||
if (props.banners.length <= 1) return;
|
||||
timer.value = setInterval(next, 4500);
|
||||
}
|
||||
|
||||
function stopAutoPlay() {
|
||||
if (timer.value) {
|
||||
clearInterval(timer.value);
|
||||
timer.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function onTouchStart(e: TouchEvent) {
|
||||
touchStartX.value = e.touches[0].clientX;
|
||||
touchDeltaX.value = 0;
|
||||
stopAutoPlay();
|
||||
}
|
||||
|
||||
function onTouchMove(e: TouchEvent) {
|
||||
touchDeltaX.value = e.touches[0].clientX - touchStartX.value;
|
||||
}
|
||||
|
||||
function onTouchEnd() {
|
||||
if (touchDeltaX.value > 50) prev();
|
||||
else if (touchDeltaX.value < -50) next();
|
||||
touchDeltaX.value = 0;
|
||||
startAutoPlay();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.banners.length,
|
||||
() => {
|
||||
active.value = 0;
|
||||
startAutoPlay();
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(startAutoPlay);
|
||||
onUnmounted(stopAutoPlay);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="banners.length"
|
||||
class="carousel"
|
||||
@mouseenter="stopAutoPlay"
|
||||
@mouseleave="startAutoPlay"
|
||||
@touchstart.passive="onTouchStart"
|
||||
@touchmove.passive="onTouchMove"
|
||||
@touchend="onTouchEnd"
|
||||
>
|
||||
<div class="media">
|
||||
<div class="viewport">
|
||||
<div class="track" :style="{ transform: `translateX(-${active * 100}%)` }">
|
||||
<div
|
||||
v-for="(banner, i) in banners"
|
||||
:key="banner.id ?? i"
|
||||
class="slide"
|
||||
@click="onBannerClick(banner)"
|
||||
>
|
||||
<img
|
||||
v-if="imageUrl(banner)"
|
||||
:src="imageUrl(banner)"
|
||||
:alt="title(banner)"
|
||||
class="slide-img"
|
||||
@error="onImgError"
|
||||
/>
|
||||
<div v-else class="slide-fallback">{{ title(banner) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button v-if="banners.length > 1" class="nav prev" type="button" aria-label="上一张" @click.stop="prev">‹</button>
|
||||
<button v-if="banners.length > 1" class="nav next" type="button" aria-label="下一张" @click.stop="next">›</button>
|
||||
|
||||
<div v-if="banners.length > 1" class="dots">
|
||||
<button
|
||||
v-for="(_, i) in banners"
|
||||
:key="i"
|
||||
type="button"
|
||||
class="dot"
|
||||
:class="{ active: i === active }"
|
||||
:aria-label="`第 ${i + 1} 张`"
|
||||
@click.stop="goTo(i)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.carousel {
|
||||
position: relative;
|
||||
margin: 0 -16px 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.media {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.track {
|
||||
display: flex;
|
||||
transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.slide {
|
||||
flex: 0 0 100%;
|
||||
min-width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slide-img {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.slide-fallback {
|
||||
height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(212, 175, 55, 0.25), var(--secondary));
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.media .nav {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: var(--primary-light);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.nav.prev { left: 8px; }
|
||||
.nav.next { right: 8px; }
|
||||
|
||||
.media .dots {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.35);
|
||||
border: 2px solid transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dot.active {
|
||||
width: 22px;
|
||||
border-radius: 6px;
|
||||
background: var(--gradient-gold);
|
||||
border-color: var(--primary-light);
|
||||
box-shadow: none;
|
||||
}
|
||||
</style>
|
||||
270
apps/player/src/components/BetHistoryCard.vue
Normal file
270
apps/player/src/components/BetHistoryCard.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
|
||||
export interface BetHistoryItem {
|
||||
betNo: string;
|
||||
betType: string;
|
||||
stake: unknown;
|
||||
potentialReturn: unknown;
|
||||
actualReturn: unknown;
|
||||
status: string;
|
||||
placedAt: string;
|
||||
leagueName?: string;
|
||||
matchTitle: string;
|
||||
pickLabel: string;
|
||||
isParlay?: boolean;
|
||||
legCount?: number;
|
||||
legs?: Array<{
|
||||
marketLabel: string;
|
||||
selectionName: string;
|
||||
matchTitle: string;
|
||||
odds: unknown;
|
||||
}>;
|
||||
}
|
||||
|
||||
const props = defineProps<{ bet: BetHistoryItem }>();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const statusKey = computed(() => {
|
||||
const s = props.bet.status.toUpperCase();
|
||||
if (s === 'WON' || s === 'WIN') return 'won';
|
||||
if (s === 'LOST' || s === 'LOSE') return 'lost';
|
||||
if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
|
||||
return 'pending';
|
||||
});
|
||||
|
||||
const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
|
||||
|
||||
const placedDate = computed(() =>
|
||||
new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
}),
|
||||
);
|
||||
|
||||
const matchTitle = computed(() => {
|
||||
if (props.bet.isParlay) {
|
||||
const n = props.bet.legCount ?? props.bet.legs?.length ?? 0;
|
||||
return t('history.parlay_title', { n });
|
||||
}
|
||||
return props.bet.matchTitle;
|
||||
});
|
||||
|
||||
const pickLabel = computed(() => {
|
||||
if (props.bet.isParlay) return '';
|
||||
return props.bet.pickLabel;
|
||||
});
|
||||
|
||||
const returnLabel = computed(() =>
|
||||
statusKey.value === 'pending' ? t('history.est_return') : t('history.return'),
|
||||
);
|
||||
|
||||
const returnAmount = computed(() => {
|
||||
if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
|
||||
if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
|
||||
if (statusKey.value === 'lost') return formatMoney(0, locale.value);
|
||||
return formatMoney(props.bet.actualReturn ?? props.bet.potentialReturn, locale.value);
|
||||
});
|
||||
|
||||
const returnHighlight = computed(() => statusKey.value === 'won');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="bet-card">
|
||||
<header class="card-head">
|
||||
<div class="meta">
|
||||
<span class="sport-icon" aria-hidden="true">⚽</span>
|
||||
<span class="league">{{
|
||||
bet.isParlay ? t('history.parlay_league') : bet.leagueName || t('history.league_default')
|
||||
}}</span>
|
||||
<span class="dot">·</span>
|
||||
<span class="date">{{ placedDate }}</span>
|
||||
</div>
|
||||
<span class="status-badge" :class="statusKey">{{ statusLabel }}</span>
|
||||
</header>
|
||||
|
||||
<h3 class="match-title">{{ matchTitle }}</h3>
|
||||
<p v-if="pickLabel" class="pick-line">{{ pickLabel }}</p>
|
||||
|
||||
<div v-if="bet.isParlay && bet.legs?.length" class="parlay-legs">
|
||||
<div v-for="(leg, i) in bet.legs" :key="i" class="leg">
|
||||
<span class="leg-match">{{ leg.matchTitle }}</span>
|
||||
<span class="leg-pick">{{ leg.marketLabel }}: {{ leg.selectionName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider" />
|
||||
|
||||
<footer class="card-foot">
|
||||
<div class="money-col">
|
||||
<span class="money-label">{{ t('history.stake') }}</span>
|
||||
<span class="money-value">{{ formatMoney(bet.stake, locale) }}</span>
|
||||
</div>
|
||||
<div class="money-col align-right">
|
||||
<span class="money-label">{{ returnLabel }}</span>
|
||||
<span class="money-value" :class="{ highlight: returnHighlight }">{{ returnAmount }}</span>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bet-card {
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 14px 14px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sport-icon {
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.league {
|
||||
color: #9a9a9a;
|
||||
}
|
||||
|
||||
.dot {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
flex-shrink: 0;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.03em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status-badge.won {
|
||||
color: var(--primary-light);
|
||||
background: rgba(46, 125, 50, 0.35);
|
||||
border: 1px solid rgba(212, 175, 55, 0.25);
|
||||
}
|
||||
|
||||
.status-badge.pending {
|
||||
color: #9a9a9a;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.status-badge.lost {
|
||||
color: #ff6b6b;
|
||||
background: rgba(198, 40, 40, 0.2);
|
||||
border: 1px solid rgba(198, 40, 40, 0.35);
|
||||
}
|
||||
|
||||
.status-badge.push {
|
||||
color: #aaa;
|
||||
background: #1f1f1f;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.match-title {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
line-height: 1.3;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pick-line {
|
||||
font-size: 13px;
|
||||
color: #9a9a9a;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.parlay-legs {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.leg {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.leg-match {
|
||||
font-weight: 700;
|
||||
color: #b0b0b0;
|
||||
}
|
||||
|
||||
.leg-pick {
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: #2a2a2a;
|
||||
margin: 12px 0 10px;
|
||||
}
|
||||
|
||||
.card-foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.money-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.money-col.align-right {
|
||||
align-items: flex-end;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.money-label {
|
||||
font-size: 11px;
|
||||
color: #7a7a7a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.money-value {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.money-value.highlight {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
</style>
|
||||
@@ -32,7 +32,7 @@ async function placeBet() {
|
||||
const requestId = genId();
|
||||
if (slip.mode === 'parlay' && slip.items.length >= 2) {
|
||||
if (slip.hasSameMatch) {
|
||||
error.value = '同一场比赛不能串关';
|
||||
error.value = t('bet.parlay_same_match');
|
||||
return;
|
||||
}
|
||||
await api.post('/player/bets/parlay', {
|
||||
@@ -52,7 +52,7 @@ async function placeBet() {
|
||||
requestId,
|
||||
});
|
||||
} else {
|
||||
error.value = '请选择投注项';
|
||||
error.value = t('bet.parlay_need_more');
|
||||
return;
|
||||
}
|
||||
success.value = '下注成功！';
|
||||
@@ -70,15 +70,15 @@ async function placeBet() {
|
||||
<div v-if="show" class="overlay" @click.self="show = false">
|
||||
<div class="drawer">
|
||||
<div class="drawer-header">
|
||||
<h3>{{ t('bet.bet_slip') }} ({{ slip.count }})</h3>
|
||||
<button @click="show = false">✕</button>
|
||||
<h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
|
||||
<button class="close-btn" @click="show = false">✕</button>
|
||||
</div>
|
||||
|
||||
<div v-if="!slip.items.length" class="empty">点击赔率添加投注</div>
|
||||
|
||||
<div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
|
||||
<div class="item-name">{{ item.matchName }}</div>
|
||||
<div class="item-sel">{{ item.selectionName }} @ {{ item.odds }}</div>
|
||||
<div class="item-sel">{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span></div>
|
||||
<button class="remove" @click="slip.removeItem(item.selectionId)">移除</button>
|
||||
</div>
|
||||
|
||||
@@ -88,7 +88,7 @@ async function placeBet() {
|
||||
<label>{{ t('bet.stake') }}</label>
|
||||
<input v-model.number="slip.stake" type="number" min="1" />
|
||||
<div v-if="slip.isParlay" class="mode-tag">{{ t('bet.parlay') }} · 赔率 {{ slip.totalOdds.toFixed(2) }}</div>
|
||||
<div class="return">预计返还: {{ slip.potentialReturn.toFixed(2) }}</div>
|
||||
<div class="return">预计返还: <strong>{{ slip.potentialReturn.toFixed(2) }}</strong></div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
@@ -102,20 +102,49 @@ async function placeBet() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; align-items: flex-end; }
|
||||
.drawer { background: #1a2332; width: 100%; max-height: 80vh; border-radius: 16px 16px 0 0; padding: 16px; overflow-y: auto; }
|
||||
.drawer-header { display: flex; justify-content: space-between; margin-bottom: 16px; }
|
||||
.drawer-header button { background: none; color: var(--text-muted); font-size: 20px; }
|
||||
.slip-item { padding: 12px; background: var(--bg-hover); border-radius: 6px; margin-bottom: 8px; }
|
||||
.item-name { font-size: 13px; font-weight: 600; }
|
||||
.item-sel { font-size: 12px; color: var(--text-muted); }
|
||||
.remove { background: none; color: var(--danger); font-size: 12px; margin-top: 4px; }
|
||||
.stake-area { margin: 16px 0; }
|
||||
.stake-area label { font-size: 13px; color: var(--text-muted); display: block; margin-bottom: 4px; }
|
||||
.return { font-size: 14px; color: #ffd700; margin-top: 8px; }
|
||||
.mode-tag { font-size: 12px; color: var(--primary); margin-top: 4px; }
|
||||
.warn { color: #ff9800; font-size: 12px; margin-bottom: 8px; }
|
||||
.error { color: var(--danger); font-size: 13px; }
|
||||
.success { color: var(--primary); font-size: 13px; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 24px; }
|
||||
.overlay {
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
z-index: 200;
|
||||
display: flex; align-items: flex-end;
|
||||
}
|
||||
.drawer {
|
||||
background: linear-gradient(180deg, #222 0%, #141414 100%);
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
border-radius: 20px 20px 0 0;
|
||||
padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0));
|
||||
overflow-y: auto;
|
||||
border-top: 1px solid var(--border);
|
||||
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.drawer-header h3 { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; }
|
||||
.count { color: var(--primary-light); font-size: 20px; font-weight: 800; }
|
||||
.close-btn { background: none; color: var(--text-muted); font-size: 22px; padding: 4px; font-weight: 700; }
|
||||
.slip-item {
|
||||
padding: 14px;
|
||||
background: #111;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-name { font-size: 14px; font-weight: 800; }
|
||||
.item-sel { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-weight: 500; }
|
||||
.odds { color: var(--primary-light); font-weight: 800; }
|
||||
.remove { background: none; color: var(--danger); font-size: 13px; margin-top: 8px; font-weight: 700; }
|
||||
.stake-area { margin: 18px 0; }
|
||||
.stake-area label { font-size: 13px; color: var(--primary-light); display: block; margin-bottom: 8px; font-weight: 700; letter-spacing: 0.04em; }
|
||||
.return { font-size: 15px; color: var(--text-muted); margin-top: 12px; font-weight: 600; }
|
||||
.return strong {
|
||||
color: var(--primary-light);
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
text-shadow: none;
|
||||
}
|
||||
.mode-tag { font-size: 13px; color: var(--primary-light); font-weight: 700; margin-top: 8px; }
|
||||
.warn { color: var(--primary-light); font-size: 13px; margin-bottom: 10px; font-weight: 600; }
|
||||
.error { color: var(--danger); font-size: 14px; margin-bottom: 8px; font-weight: 600; }
|
||||
.success { color: var(--primary-light); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 32px; font-weight: 600; }
|
||||
</style>
|
||||
|
||||
90
apps/player/src/components/BottomNavIcon.vue
Normal file
90
apps/player/src/components/BottomNavIcon.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
name: 'home' | 'bet' | 'history' | 'wallet' | 'profile';
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg class="nav-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<!-- home -->
|
||||
<template v-if="name === 'home'">
|
||||
<path
|
||||
d="M4 10.5 12 4l8 6.5V20a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1v-9.5Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- bet / football -->
|
||||
<template v-else-if="name === 'bet'">
|
||||
<circle cx="12" cy="12" r="8.25" fill="none" stroke="currentColor" stroke-width="1.75" />
|
||||
<path
|
||||
d="M12 3.75 14.2 8.5 19.5 9l-3.8 3.2 1.1 5.3L12 15.5 7.2 17.5l1.1-5.3L4.5 9l5.3-.5L12 3.75Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- bet history -->
|
||||
<template v-else-if="name === 'history'">
|
||||
<path
|
||||
d="M6 4h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M8 9h8M8 12.5h8M8 16h5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- wallet -->
|
||||
<template v-else-if="name === 'wallet'">
|
||||
<path
|
||||
d="M4 7.5A2 2 0 0 1 6 5.5h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-9Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M16 12.5h4v-2h-4a1.25 1.25 0 1 0 0 2.5Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
<path d="M4 9.5h16" fill="none" stroke="currentColor" stroke-width="1.75" />
|
||||
</template>
|
||||
|
||||
<!-- profile -->
|
||||
<template v-else>
|
||||
<circle cx="12" cy="8.5" r="3.25" fill="none" stroke="currentColor" stroke-width="1.75" />
|
||||
<path
|
||||
d="M5.5 19.5c1.2-3 3.4-4.5 6.5-4.5s5.3 1.5 6.5 4.5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.75"
|
||||
stroke-linecap="round"
|
||||
/>
|
||||
</template>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
183
apps/player/src/components/CashBalanceChip.vue
Normal file
183
apps/player/src/components/CashBalanceChip.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
|
||||
const { locale, t } = useI18n();
|
||||
const open = ref(false);
|
||||
const wallet = ref<{ availableBalance?: unknown; frozenBalance?: unknown; currency?: string } | null>(null);
|
||||
|
||||
const available = computed(() => formatMoney(wallet.value?.availableBalance, locale.value));
|
||||
const frozen = computed(() => formatMoney(wallet.value?.frozenBalance, locale.value));
|
||||
function amountValue(value: unknown): number {
|
||||
if (value == null) return 0;
|
||||
if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
|
||||
if (typeof value === 'string') {
|
||||
const n = Number(value);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
if (typeof value === 'object' && typeof (value as { toString?: () => string }).toString === 'function') {
|
||||
const n = Number((value as { toString: () => string }).toString());
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
const total = computed(() =>
|
||||
formatMoney(
|
||||
amountValue(wallet.value?.availableBalance) + amountValue(wallet.value?.frozenBalance),
|
||||
locale.value,
|
||||
),
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const { data } = await api.get('/player/profile');
|
||||
wallet.value = data.data?.wallet ?? null;
|
||||
} catch {
|
||||
wallet.value = null;
|
||||
}
|
||||
});
|
||||
|
||||
function toggle() {
|
||||
open.value = !open.value;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open.value = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="cash-chip-wrap">
|
||||
<button type="button" class="cash-chip" @click="toggle">
|
||||
<span class="chip-body">
|
||||
<span class="chip-label">{{ t('wallet.cash_balance') }}</span>
|
||||
<span class="chip-amount">{{ available }}</span>
|
||||
</span>
|
||||
<span class="chevron" :class="{ open }">▾</span>
|
||||
</button>
|
||||
|
||||
<div v-if="open" class="cash-panel">
|
||||
<div class="panel-row">
|
||||
<span>{{ t('wallet.cash_balance') }}</span>
|
||||
<span>{{ total }}</span>
|
||||
</div>
|
||||
<div class="panel-divider" />
|
||||
<div class="panel-row muted">
|
||||
<span>{{ t('wallet.unsettled') }}</span>
|
||||
<span>{{ frozen }}</span>
|
||||
</div>
|
||||
<div class="panel-row highlight">
|
||||
<span>{{ t('wallet.available') }}</span>
|
||||
<span>{{ available }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="open" class="backdrop" @click="close" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cash-chip-wrap {
|
||||
position: relative;
|
||||
z-index: 120;
|
||||
}
|
||||
|
||||
.cash-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 6px 4px 6px;
|
||||
min-width: 0;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #141414;
|
||||
}
|
||||
|
||||
.chip-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.chip-label {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.chip-amount {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
text-shadow: none;
|
||||
white-space: nowrap;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
font-size: 10px;
|
||||
color: var(--primary-light);
|
||||
transition: transform 0.2s;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.chevron.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.cash-panel {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
width: min(260px, 78vw);
|
||||
padding: 12px 14px;
|
||||
z-index: 130;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #141414;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.cash-panel::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.panel-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.panel-row.muted {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.panel-row.highlight {
|
||||
color: var(--primary-light);
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel-divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--border-gold-soft), transparent);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 110;
|
||||
}
|
||||
</style>
|
||||
116
apps/player/src/components/LeagueAccordionItem.vue
Normal file
116
apps/player/src/components/LeagueAccordionItem.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<script setup lang="ts">
|
||||
import MatchBetCard from './MatchBetCard.vue';
|
||||
import saishiImg from '../assets/images/saishi.png';
|
||||
|
||||
defineProps<{
|
||||
leagueId: string;
|
||||
leagueName: string;
|
||||
expanded: boolean;
|
||||
matches: {
|
||||
id: string;
|
||||
homeTeamName: string;
|
||||
awayTeamName: string;
|
||||
homeTeamCode?: string;
|
||||
awayTeamCode?: string;
|
||||
startTime: string;
|
||||
}[];
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="league-block">
|
||||
<button type="button" class="league-row" :aria-expanded="expanded" @click="emit('toggle')">
|
||||
<span class="toggle-icon" :class="{ open: expanded }" aria-hidden="true">
|
||||
<span class="toggle-mark">{{ expanded ? '−' : '+' }}</span>
|
||||
</span>
|
||||
<span class="league-title">*{{ leagueName }}</span>
|
||||
<img :src="saishiImg" alt="" class="league-saishi" />
|
||||
</button>
|
||||
|
||||
<div v-show="expanded" class="match-panel">
|
||||
<div class="match-grid">
|
||||
<MatchBetCard
|
||||
v-for="match in matches"
|
||||
:key="match.id"
|
||||
:match="match"
|
||||
@bet="emit('bet', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.league-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.league-row {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 12px;
|
||||
background: #141414;
|
||||
border: 1px solid #2e2e2e;
|
||||
border-radius: 6px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.league-row:active {
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
flex-shrink: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #141414;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-mark {
|
||||
color: var(--primary-light);
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.league-title {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.35;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.league-saishi {
|
||||
flex-shrink: 0;
|
||||
height: 44px;
|
||||
width: auto;
|
||||
max-width: 40px;
|
||||
object-fit: contain;
|
||||
margin-left: 4px;
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.match-panel {
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
|
||||
.match-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
</style>
|
||||
32
apps/player/src/components/LocaleFlag.vue
Normal file
32
apps/player/src/components/LocaleFlag.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { getLocaleDisplay } from '../utils/localeDisplay';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{ locale: string; size?: number }>(),
|
||||
{ size: 20 },
|
||||
);
|
||||
|
||||
const countryCode = computed(() => getLocaleDisplay(props.locale).countryCode);
|
||||
const src = computed(() => `/flags/${countryCode.value}.svg`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<img
|
||||
:src="src"
|
||||
:width="size"
|
||||
:height="Math.round(size * 0.67)"
|
||||
class="locale-flag"
|
||||
:alt="countryCode"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.locale-flag {
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
border-radius: 2px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
</style>
|
||||
132
apps/player/src/components/MatchBetCard.vue
Normal file
132
apps/player/src/components/MatchBetCard.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { teamFlagUrl } from '../utils/teamFlag';
|
||||
|
||||
const props = defineProps<{
|
||||
match: {
|
||||
id: string;
|
||||
homeTeamName: string;
|
||||
awayTeamName: string;
|
||||
homeTeamCode?: string;
|
||||
awayTeamCode?: string;
|
||||
startTime: string;
|
||||
};
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ bet: [id: string] }>();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const kickoff = computed(() => {
|
||||
const d = new Date(props.match.startTime);
|
||||
return d.toLocaleString(locale.value, {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
});
|
||||
});
|
||||
|
||||
const homeFlag = computed(() => teamFlagUrl(props.match.homeTeamCode, props.match.homeTeamName));
|
||||
const awayFlag = computed(() => teamFlagUrl(props.match.awayTeamCode, props.match.awayTeamName));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<article class="match-card">
|
||||
<div class="kickoff">{{ kickoff }}</div>
|
||||
<div class="teams-stack">
|
||||
<div class="side">
|
||||
<img v-if="homeFlag" :src="homeFlag" alt="" class="flag" />
|
||||
<span class="name">{{ match.homeTeamName }}</span>
|
||||
</div>
|
||||
<span class="vs">VS</span>
|
||||
<div class="side">
|
||||
<img v-if="awayFlag" :src="awayFlag" alt="" class="flag" />
|
||||
<span class="name">{{ match.awayTeamName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
|
||||
{{ t('bet.place_bet_short') }}
|
||||
</button>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.match-card {
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 6px;
|
||||
padding: 6px 4px 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.kickoff {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
line-height: 1.25;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.teams-stack {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.side {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.flag {
|
||||
width: 22px;
|
||||
height: 15px;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.name {
|
||||
width: 100%;
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.vs {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bet-btn {
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
padding: 3px 2px;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
</style>
|
||||
150
apps/player/src/components/RobotVerify.vue
Normal file
150
apps/player/src/components/RobotVerify.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const input = ref('');
|
||||
const code = ref('');
|
||||
const canvasRef = ref<HTMLCanvasElement | null>(null);
|
||||
const honeypot = ref('');
|
||||
|
||||
function generateCode() {
|
||||
code.value = String(Math.floor(1000 + Math.random() * 9000));
|
||||
}
|
||||
|
||||
function drawCaptcha() {
|
||||
const canvas = canvasRef.value;
|
||||
if (!canvas) return;
|
||||
|
||||
const w = 108;
|
||||
const h = 44;
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
ctx.fillStyle = '#7c3aed';
|
||||
ctx.fillRect(0, 0, w, h);
|
||||
|
||||
for (let i = 0; i < 28; i++) {
|
||||
ctx.fillStyle = `rgba(255,255,255,${0.15 + Math.random() * 0.35})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(Math.random() * w, Math.random() * h, Math.random() * 2.2, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
for (let i = 0; i < 5; i++) {
|
||||
ctx.strokeStyle = `rgba(255,255,255,${0.2 + Math.random() * 0.3})`;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(Math.random() * w, Math.random() * h);
|
||||
ctx.lineTo(Math.random() * w, Math.random() * h);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(w / 2, h / 2);
|
||||
ctx.rotate((Math.random() - 0.5) * 0.12);
|
||||
ctx.font = 'italic bold 26px Arial, sans-serif';
|
||||
ctx.fillStyle = '#ffffff';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(code.value, 0, 1);
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
generateCode();
|
||||
input.value = '';
|
||||
drawCaptcha();
|
||||
}
|
||||
|
||||
function validate(): boolean {
|
||||
if (honeypot.value) {
|
||||
refresh();
|
||||
return false;
|
||||
}
|
||||
return input.value.trim() === code.value;
|
||||
}
|
||||
|
||||
onMounted(refresh);
|
||||
|
||||
defineExpose({ validate, refresh });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="captcha-row">
|
||||
<input
|
||||
v-model="honeypot"
|
||||
type="text"
|
||||
name="website"
|
||||
tabindex="-1"
|
||||
autocomplete="off"
|
||||
class="hp-field"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<input
|
||||
v-model="input"
|
||||
type="text"
|
||||
inputmode="numeric"
|
||||
maxlength="4"
|
||||
class="captcha-input"
|
||||
:placeholder="t('auth.captcha_placeholder')"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<canvas
|
||||
ref="canvasRef"
|
||||
class="captcha-canvas"
|
||||
:title="t('auth.captcha_refresh')"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@click="refresh"
|
||||
@keydown.enter="refresh"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.captcha-row {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
align-items: stretch;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.hp-field {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.captcha-input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0 14px;
|
||||
border: none;
|
||||
border-radius: 8px 0 0 8px;
|
||||
background: #ffffff;
|
||||
color: #111;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.captcha-input::placeholder {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.captcha-canvas {
|
||||
flex-shrink: 0;
|
||||
width: 108px;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
</style>
|
||||
123
apps/player/src/components/UserAvatarMenu.vue
Normal file
123
apps/player/src/components/UserAvatarMenu.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
|
||||
const { t } = useI18n();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
const open = ref(false);
|
||||
|
||||
const initial = computed(() => {
|
||||
const name = auth.user?.username ?? '?';
|
||||
return name.charAt(0).toUpperCase();
|
||||
});
|
||||
|
||||
function toggle() {
|
||||
open.value = !open.value;
|
||||
}
|
||||
|
||||
function close() {
|
||||
open.value = false;
|
||||
}
|
||||
|
||||
function goEdit() {
|
||||
close();
|
||||
router.push('/profile/edit');
|
||||
}
|
||||
|
||||
function logout() {
|
||||
close();
|
||||
auth.logout();
|
||||
router.push('/login');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="avatar-wrap">
|
||||
<button type="button" class="avatar-btn" :aria-expanded="open" @click="toggle">
|
||||
<span class="avatar-letter">{{ initial }}</span>
|
||||
</button>
|
||||
|
||||
<div v-if="open" class="avatar-menu">
|
||||
<div class="menu-user">{{ auth.user?.username }}</div>
|
||||
<button type="button" class="menu-item" @click="goEdit">{{ t('profile.edit') }}</button>
|
||||
<button type="button" class="menu-item danger" @click="logout">{{ t('auth.logout') }}</button>
|
||||
</div>
|
||||
|
||||
<div v-if="open" class="backdrop" @click="close" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.avatar-wrap {
|
||||
position: relative;
|
||||
z-index: 130;
|
||||
}
|
||||
|
||||
.avatar-btn {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
background: linear-gradient(145deg, #2a2210, #141008);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.avatar-letter {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.avatar-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 8px);
|
||||
right: 0;
|
||||
min-width: 168px;
|
||||
padding: 8px 0;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: #141414;
|
||||
box-shadow: var(--shadow);
|
||||
z-index: 140;
|
||||
}
|
||||
|
||||
.menu-user {
|
||||
padding: 8px 14px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 10px 14px;
|
||||
background: none;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.menu-item.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 120;
|
||||
}
|
||||
</style>
|
||||
169
apps/player/src/components/match-detail/CorrectScorePanel.vue
Normal file
169
apps/player/src/components/match-detail/CorrectScorePanel.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { groupCorrectScoreSelections, type CsSelection } from '../../utils/correctScoreLayout';
|
||||
|
||||
const props = defineProps<{
|
||||
marketType: string;
|
||||
homeTeamName: string;
|
||||
awayTeamName: string;
|
||||
selections: Array<{
|
||||
id: string;
|
||||
selectionCode: string;
|
||||
selectionName: string;
|
||||
odds: string;
|
||||
oddsVersion: string;
|
||||
}>;
|
||||
stakes: Record<string, number>;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:stakes': [Record<string, number>];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const columns = computed(() => groupCorrectScoreSelections(props.selections, props.marketType));
|
||||
|
||||
function setStake(sel: CsSelection, raw: string) {
|
||||
const n = Math.max(0, Number(raw) || 0);
|
||||
emit('update:stakes', { ...props.stakes, [sel.id]: n });
|
||||
}
|
||||
|
||||
function formatOdds(odds: string) {
|
||||
const n = parseFloat(odds);
|
||||
return Number.isFinite(n) ? n.toFixed(2) : odds;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="cs-panel">
|
||||
<div class="teams-bar">
|
||||
<div class="team-box">{{ homeTeamName }}</div>
|
||||
<div class="team-box">{{ awayTeamName }}</div>
|
||||
</div>
|
||||
|
||||
<div class="cols-head">
|
||||
<span>{{ t('bet.col_home') }}</span>
|
||||
<span>{{ t('bet.col_draw') }}</span>
|
||||
<span>{{ t('bet.col_away') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="cols-grid">
|
||||
<div v-for="colKey in ['home', 'draw', 'away'] as const" :key="colKey" class="col">
|
||||
<div
|
||||
v-for="sel in columns[colKey]"
|
||||
:key="sel.id"
|
||||
class="score-card"
|
||||
>
|
||||
<div class="score-line">{{ sel.scoreDisplay }}</div>
|
||||
<div class="odds-box">{{ formatOdds(sel.odds) }}</div>
|
||||
<input
|
||||
type="number"
|
||||
class="stake-input"
|
||||
min="0"
|
||||
step="1"
|
||||
inputmode="decimal"
|
||||
:value="stakes[sel.id] ?? 0"
|
||||
@input="setStake(sel, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.cs-panel {
|
||||
padding: 0 10px 14px;
|
||||
}
|
||||
|
||||
.teams-bar {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.team-box {
|
||||
padding: 10px 8px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
background: #0d0d0d;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cols-head {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.cols-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 6px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.score-card {
|
||||
background: #1c1c1c;
|
||||
border: 1px solid #333;
|
||||
border-radius: 4px;
|
||||
padding: 8px 6px 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.score-line {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.odds-box {
|
||||
display: inline-block;
|
||||
min-width: 52px;
|
||||
padding: 3px 8px;
|
||||
margin-bottom: 6px;
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
background: rgba(212, 175, 55, 0.08);
|
||||
}
|
||||
|
||||
.stake-input {
|
||||
width: 100%;
|
||||
padding: 6px 4px;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
background: #f2f2f2;
|
||||
color: #111;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.stake-input::-webkit-outer-spin-button,
|
||||
.stake-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
160
apps/player/src/components/match-detail/FeaturedMarketRow.vue
Normal file
160
apps/player/src/components/match-detail/FeaturedMarketRow.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
const props = defineProps<{
|
||||
label: string;
|
||||
expanded: boolean;
|
||||
hasMarket: boolean;
|
||||
rewardActive?: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
bet: [];
|
||||
expand: [];
|
||||
collapse: [];
|
||||
}>();
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
function onBet() {
|
||||
if (!props.hasMarket) return;
|
||||
emit('bet');
|
||||
}
|
||||
|
||||
function onExpand() {
|
||||
if (!props.hasMarket) return;
|
||||
emit('expand');
|
||||
}
|
||||
|
||||
function onCollapse() {
|
||||
emit('collapse');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="featured-wrap" :class="{ expanded, disabled: !hasMarket }">
|
||||
<div class="featured-row">
|
||||
<div class="featured-main">
|
||||
<span class="market-name">{{ label }}</span>
|
||||
<span v-if="rewardActive && hasMarket" class="reward-badge">
|
||||
🏆 {{ t('bet.reward_active') }}
|
||||
</span>
|
||||
<span v-else-if="!hasMarket" class="closed-tag">{{ t('bet.market_closed') }}</span>
|
||||
</div>
|
||||
<div class="featured-actions">
|
||||
<button type="button" class="btn-bet btn-gold-outline" :disabled="!hasMarket" @click="onBet">
|
||||
{{ t('bet.place_bet_short') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon btn-gold-outline"
|
||||
:disabled="!hasMarket"
|
||||
:aria-label="expanded ? t('bet.collapse_market') : t('bet.expand_market')"
|
||||
@click="expanded ? onCollapse() : onExpand()"
|
||||
>
|
||||
{{ expanded ? '−' : '+' }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon btn-gold-outline"
|
||||
:aria-label="t('bet.collapse_market')"
|
||||
@click="onCollapse"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="expanded && hasMarket" class="panel-slot">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.featured-wrap {
|
||||
margin-bottom: 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #3a3218;
|
||||
background: #121212;
|
||||
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
|
||||
.featured-wrap.expanded {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(212, 175, 55, 0.35),
|
||||
0 0 12px rgba(212, 175, 55, 0.15);
|
||||
}
|
||||
|
||||
.featured-wrap.disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.featured-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
padding: 12px 10px;
|
||||
}
|
||||
|
||||
.featured-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.market-name {
|
||||
display: block;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.reward-badge {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #e8c84a;
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.closed-tag {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.featured-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-bet {
|
||||
padding: 8px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.btn-bet:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-icon:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
selections: {
|
||||
id: string;
|
||||
selectionName: string;
|
||||
odds: string;
|
||||
}[];
|
||||
isSelected: (id: string) => boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ pick: [id: string] }>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="panel">
|
||||
<button
|
||||
v-for="sel in selections"
|
||||
:key="sel.id"
|
||||
type="button"
|
||||
class="odds-btn"
|
||||
:class="{ selected: isSelected(sel.id) }"
|
||||
@click="emit('pick', sel.id)"
|
||||
>
|
||||
<span class="label">{{ sel.selectionName }}</span>
|
||||
<span class="odds">{{ sel.odds }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
padding: 0 10px 12px;
|
||||
}
|
||||
|
||||
.odds-btn {
|
||||
min-width: calc(33.33% - 6px);
|
||||
flex: 1 1 calc(33.33% - 6px);
|
||||
max-width: calc(50% - 4px);
|
||||
padding: 10px 8px;
|
||||
border-radius: 6px;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.odds-btn.selected {
|
||||
border-color: var(--primary);
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
|
||||
.label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.odds {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
</style>
|
||||
84
apps/player/src/components/match-detail/MarketTypeTile.vue
Normal file
84
apps/player/src/components/match-detail/MarketTypeTile.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
defineProps<{
|
||||
label: string;
|
||||
active: boolean;
|
||||
hasMarket: boolean;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ expand: []; collapse: [] }>();
|
||||
const { t } = useI18n();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="tile" :class="{ active, disabled: !hasMarket }">
|
||||
<span class="tile-label">{{ label }}</span>
|
||||
<div class="tile-actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon btn-gold-outline"
|
||||
:disabled="!hasMarket"
|
||||
:aria-label="t('bet.expand_market')"
|
||||
@click="emit('expand')"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-icon btn-gold-outline"
|
||||
:aria-label="t('bet.collapse_market')"
|
||||
@click="emit('collapse')"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 6px;
|
||||
padding: 12px 10px;
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 6px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.tile.active {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
|
||||
}
|
||||
|
||||
.tile.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tile-label {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.25;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tile-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
274
apps/player/src/components/outright/OutrightBetModal.vue
Normal file
274
apps/player/src/components/outright/OutrightBetModal.vue
Normal file
@@ -0,0 +1,274 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../../api';
|
||||
import { formatMoney, parseAmount } from '../../utils/localeDisplay';
|
||||
|
||||
export interface OutrightPick {
|
||||
selectionId: string;
|
||||
oddsVersion: string;
|
||||
teamCode: string;
|
||||
teamName: string;
|
||||
odds: string;
|
||||
eventTitle: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean;
|
||||
pick: OutrightPick | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ close: [] }>();
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const step = ref<'form' | 'success'>('form');
|
||||
const stake = ref(1);
|
||||
const loading = ref(false);
|
||||
const error = ref('');
|
||||
const balance = ref(0);
|
||||
const successBalance = ref(0);
|
||||
const successStake = ref(0);
|
||||
|
||||
const balanceText = computed(() => formatMoney(balance.value, locale.value));
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
async (v) => {
|
||||
if (!v) return;
|
||||
step.value = 'form';
|
||||
stake.value = 1;
|
||||
error.value = '';
|
||||
try {
|
||||
const { data } = await api.get('/player/profile');
|
||||
balance.value = parseAmount(data.data?.wallet?.availableBalance);
|
||||
} catch {
|
||||
balance.value = 0;
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function close() {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
function genRequestId() {
|
||||
return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (!props.pick || stake.value <= 0) return;
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
await api.post('/player/bets/single', {
|
||||
selectionId: props.pick.selectionId,
|
||||
oddsVersion: props.pick.oddsVersion,
|
||||
stake: stake.value,
|
||||
requestId: genRequestId(),
|
||||
});
|
||||
successStake.value = stake.value;
|
||||
successBalance.value = balance.value - stake.value;
|
||||
balance.value = successBalance.value;
|
||||
step.value = 'success';
|
||||
} catch (e: unknown) {
|
||||
error.value =
|
||||
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
|
||||
t('bet.outright_bet_failed');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatOdds(odds: string) {
|
||||
const n = parseFloat(odds);
|
||||
return Number.isFinite(n) ? n.toFixed(2) : odds;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="open && pick" class="overlay" @click.self="close">
|
||||
<div class="modal">
|
||||
<template v-if="step === 'form'">
|
||||
<h3 class="title">{{ t('bet.outright_enter_stake') }}</h3>
|
||||
<p class="team">{{ pick.teamName }}</p>
|
||||
<span class="odds-badge">{{ formatOdds(pick.odds) }}</span>
|
||||
<p class="balance-line">{{ t('bet.outright_balance') }}：{{ balanceText }}</p>
|
||||
<p class="event-title">{{ pick.eventTitle }}</p>
|
||||
<input
|
||||
v-model.number="stake"
|
||||
type="number"
|
||||
class="stake-input"
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
inputmode="decimal"
|
||||
/>
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<div class="actions">
|
||||
<button type="button" class="btn-confirm" :disabled="loading" @click="submit">
|
||||
{{ t('bet.place_bet_short') }}
|
||||
</button>
|
||||
<button type="button" class="btn-cancel" :disabled="loading" @click="close">
|
||||
{{ t('bet.cancel') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<div class="success-icon">✓</div>
|
||||
<h3 class="title success-title">{{ t('bet.outright_success') }}</h3>
|
||||
<p class="team">{{ pick.teamName }}</p>
|
||||
<span class="odds-badge">{{ formatOdds(pick.odds) }}</span>
|
||||
<p class="balance-line">
|
||||
{{ t('bet.outright_stake_amount') }} : {{ successStake.toFixed(2) }}
|
||||
</p>
|
||||
<p class="balance-line">
|
||||
{{ t('bet.outright_balance') }} : {{ formatMoney(successBalance, locale) }}
|
||||
</p>
|
||||
<p class="event-title">{{ pick.eventTitle }}</p>
|
||||
<button type="button" class="btn-share" disabled>Share</button>
|
||||
<button type="button" class="btn-done" @click="close">{{ t('bet.outright_done') }}</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 200;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
padding: 20px 18px 16px;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: #b8942b;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.team {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: #c9a227;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.odds-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 10px;
|
||||
background: #c62828;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.balance-line {
|
||||
font-size: 13px;
|
||||
color: #444;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin: 8px 0 14px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.stake-input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 2px solid #5b9bd5;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
margin-bottom: 12px;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #c62828;
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn-confirm {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background: #2e9e5e;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
background: #555;
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto 4px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #2e9e5e;
|
||||
color: #2e9e5e;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.btn-share {
|
||||
width: 100%;
|
||||
margin: 12px 0 8px;
|
||||
padding: 10px;
|
||||
border-radius: 20px;
|
||||
background: #1877f2;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.btn-done {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
background: #1aa89a;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
}
|
||||
</style>
|
||||
72
apps/player/src/components/outright/OutrightOptionCard.vue
Normal file
72
apps/player/src/components/outright/OutrightOptionCard.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { teamFlagUrl } from '../../utils/teamFlag';
|
||||
|
||||
const props = defineProps<{
|
||||
teamCode: string;
|
||||
teamName: string;
|
||||
odds: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{ pick: [] }>();
|
||||
|
||||
const flag = computed(() => teamFlagUrl(props.teamCode, props.teamName));
|
||||
|
||||
function formatOdds(odds: string) {
|
||||
const n = parseFloat(odds);
|
||||
return Number.isFinite(n) ? n.toFixed(2) : odds;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button type="button" class="option-card" @click="emit('pick')">
|
||||
<img v-if="flag" :src="flag" alt="" class="flag" />
|
||||
<span class="name">{{ teamName }}</span>
|
||||
<span class="odds">[ {{ formatOdds(odds) }} ]</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.option-card {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 8px 4px 6px;
|
||||
border-radius: 6px;
|
||||
background: #1c1c1c;
|
||||
border: 1px solid #333;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.option-card:active {
|
||||
background: #252525;
|
||||
border-color: var(--border-gold-soft);
|
||||
}
|
||||
|
||||
.flag {
|
||||
width: 28px;
|
||||
height: 19px;
|
||||
object-fit: cover;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.2;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.odds {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
</style>
|
||||
188
apps/player/src/components/outright/OutrightPanel.vue
Normal file
188
apps/player/src/components/outright/OutrightPanel.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../../api';
|
||||
import OutrightOptionCard from './OutrightOptionCard.vue';
|
||||
import OutrightBetModal, { type OutrightPick } from './OutrightBetModal.vue';
|
||||
import emptyMatchesImg from '../../assets/images/empty-matches.svg';
|
||||
import saishiImg from '../../assets/images/saishi.png';
|
||||
|
||||
interface OutrightSelection {
|
||||
id: string;
|
||||
teamCode: string;
|
||||
teamName: string;
|
||||
odds: string;
|
||||
oddsVersion: string;
|
||||
}
|
||||
|
||||
interface OutrightEvent {
|
||||
id: string;
|
||||
leagueId: string;
|
||||
leagueName: string;
|
||||
title: string;
|
||||
selections: OutrightSelection[];
|
||||
}
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const loading = ref(true);
|
||||
const events = ref<OutrightEvent[]>([]);
|
||||
const expanded = ref<Set<string>>(new Set());
|
||||
const modalOpen = ref(false);
|
||||
const activePick = ref<OutrightPick | null>(null);
|
||||
|
||||
async function load() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/outrights');
|
||||
events.value = data.data ?? [];
|
||||
if (events.value.length && expanded.value.size === 0) {
|
||||
expanded.value = new Set([events.value[0].id]);
|
||||
}
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load);
|
||||
|
||||
function toggle(id: string) {
|
||||
const next = new Set(expanded.value);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
expanded.value = next;
|
||||
}
|
||||
|
||||
function openBet(event: OutrightEvent, sel: OutrightSelection) {
|
||||
activePick.value = {
|
||||
selectionId: sel.id,
|
||||
oddsVersion: sel.oddsVersion,
|
||||
teamCode: sel.teamCode,
|
||||
teamName: sel.teamName,
|
||||
odds: sel.odds,
|
||||
eventTitle: event.title,
|
||||
};
|
||||
modalOpen.value = true;
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modalOpen.value = false;
|
||||
activePick.value = null;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="outright-panel">
|
||||
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
|
||||
|
||||
<div v-else-if="events.length" class="event-list">
|
||||
<section v-for="event in events" :key="event.id" class="event-block">
|
||||
<button type="button" class="event-head" @click="toggle(event.id)">
|
||||
<span class="toggle-icon">
|
||||
<span class="toggle-mark">{{ expanded.has(event.id) ? '−' : '+' }}</span>
|
||||
</span>
|
||||
<span class="event-title">{{ event.title }}</span>
|
||||
<img :src="saishiImg" alt="" class="event-saishi" />
|
||||
</button>
|
||||
|
||||
<div v-if="expanded.has(event.id)" class="options-grid">
|
||||
<OutrightOptionCard
|
||||
v-for="sel in event.selections"
|
||||
:key="sel.id"
|
||||
:team-code="sel.teamCode"
|
||||
:team-name="sel.teamName"
|
||||
:odds="sel.odds"
|
||||
@pick="openBet(event, sel)"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty">
|
||||
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
|
||||
<p>{{ t('bet.no_outright') }}</p>
|
||||
</div>
|
||||
|
||||
<OutrightBetModal :open="modalOpen" :pick="activePick" @close="closeModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.outright-panel {
|
||||
padding: 4px 12px 0;
|
||||
}
|
||||
|
||||
.event-block {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.event-head {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px 10px;
|
||||
background: #141414;
|
||||
border: 1px solid #2e2e2e;
|
||||
border-radius: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
flex-shrink: 0;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
background: #141414;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.toggle-mark {
|
||||
color: var(--primary-light);
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.event-title {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.event-saishi {
|
||||
flex-shrink: 0;
|
||||
height: 44px;
|
||||
width: auto;
|
||||
max-width: 40px;
|
||||
object-fit: contain;
|
||||
padding-left: 8px;
|
||||
border-left: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.options-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 6px;
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
|
||||
.state,
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 48px 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
</style>
|
||||
403
apps/player/src/components/parlay/ParlayPanel.vue
Normal file
403
apps/player/src/components/parlay/ParlayPanel.vue
Normal file
@@ -0,0 +1,403 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../../api';
|
||||
import { useBetSlipStore } from '../../stores/betSlip';
|
||||
import { PARLAY_MARKET_TYPES, SELECTION_SHORT } from '../../utils/parlayColumns';
|
||||
|
||||
type TimeFilter = 'all' | 'today';
|
||||
|
||||
interface Selection {
|
||||
id: string;
|
||||
selectionCode: string;
|
||||
selectionName: string;
|
||||
odds: string;
|
||||
oddsVersion: string;
|
||||
}
|
||||
|
||||
interface Market {
|
||||
id: string;
|
||||
marketType: string;
|
||||
selections: Selection[];
|
||||
}
|
||||
|
||||
interface ParlayMatch {
|
||||
id: string;
|
||||
leagueName: string;
|
||||
homeTeamName: string;
|
||||
awayTeamName: string;
|
||||
startTime: string;
|
||||
markets: Market[];
|
||||
}
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const slip = useBetSlipStore();
|
||||
|
||||
const loading = ref(true);
|
||||
const matches = ref<ParlayMatch[]>([]);
|
||||
const timeFilter = ref<TimeFilter>('all');
|
||||
|
||||
const parlayMarketKeys = PARLAY_MARKET_TYPES.map((c) => c.key);
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/matches');
|
||||
matches.value = (data.data ?? []).filter(
|
||||
(m: ParlayMatch) => m.markets?.length && hasParlayMarkets(m),
|
||||
);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function hasParlayMarkets(m: ParlayMatch) {
|
||||
return parlayMarketKeys.some((key) => {
|
||||
const market = m.markets?.find((mk) => mk.marketType === key);
|
||||
return market && market.selections.length > 0;
|
||||
});
|
||||
}
|
||||
|
||||
function getMarket(m: ParlayMatch, marketType: string) {
|
||||
return m.markets?.find((mk) => mk.marketType === marketType);
|
||||
}
|
||||
|
||||
function dayStart(d: Date) {
|
||||
const x = new Date(d);
|
||||
x.setHours(0, 0, 0, 0);
|
||||
return x;
|
||||
}
|
||||
|
||||
function isKickoffToday(startTime: string) {
|
||||
const kick = new Date(startTime);
|
||||
const now = new Date();
|
||||
const start = dayStart(now);
|
||||
const end = new Date(start);
|
||||
end.setDate(end.getDate() + 1);
|
||||
return kick >= start && kick < end;
|
||||
}
|
||||
|
||||
const filteredMatches = computed(() => {
|
||||
if (timeFilter.value === 'all') return matches.value;
|
||||
return matches.value.filter((m) => isKickoffToday(m.startTime));
|
||||
});
|
||||
|
||||
function formatKickoff(startTime: string) {
|
||||
return new Date(startTime).toLocaleString(locale.value, {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
});
|
||||
}
|
||||
|
||||
function formatOdds(odds: string) {
|
||||
const n = parseFloat(odds);
|
||||
return Number.isFinite(n) ? n.toFixed(2) : odds;
|
||||
}
|
||||
|
||||
function selLabel(sel: Selection) {
|
||||
return SELECTION_SHORT[sel.selectionCode] ?? sel.selectionName.slice(0, 2);
|
||||
}
|
||||
|
||||
function isPicked(selectionId: string) {
|
||||
return slip.items.some((i) => i.selectionId === selectionId);
|
||||
}
|
||||
|
||||
function pickSelection(match: ParlayMatch, market: Market, sel: Selection) {
|
||||
slip.addParlayLeg({
|
||||
selectionId: sel.id,
|
||||
oddsVersion: String(sel.oddsVersion),
|
||||
matchId: match.id,
|
||||
matchName: `${match.homeTeamName} vs ${match.awayTeamName}`,
|
||||
selectionName: `${selLabel(sel)} ${formatOdds(sel.odds)}`,
|
||||
odds: parseFloat(sel.odds),
|
||||
marketType: market.marketType,
|
||||
});
|
||||
}
|
||||
|
||||
function openSlip() {
|
||||
slip.openDrawer();
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="parlay-panel">
|
||||
<header class="panel-head">
|
||||
<div class="head-title">
|
||||
<span class="layers-icon" aria-hidden="true" />
|
||||
<h2>{{ t('bet.parlay_title') }}</h2>
|
||||
</div>
|
||||
<p class="head-desc">{{ t('bet.parlay_desc') }}</p>
|
||||
<button type="button" class="slip-link btn-gold-outline" @click="openSlip">
|
||||
{{ t('bet.bet_slip') }}
|
||||
<span v-if="slip.count" class="slip-count">({{ slip.count }})</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div class="toolbar">
|
||||
<select v-model="timeFilter" class="filter-select">
|
||||
<option value="all">{{ t('bet.parlay_filter_all') }}</option>
|
||||
<option value="today">{{ t('bet.tab_today') }}</option>
|
||||
</select>
|
||||
<div class="col-headers">
|
||||
<span v-for="col in PARLAY_MARKET_TYPES" :key="col.key" class="col-head">{{ col.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
|
||||
|
||||
<div v-else-if="filteredMatches.length" class="table-wrap">
|
||||
<div v-for="match in filteredMatches" :key="match.id" class="match-row">
|
||||
<div class="match-info">
|
||||
<div class="league">{{ match.leagueName }}</div>
|
||||
<div class="teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
|
||||
<div class="time">{{ formatKickoff(match.startTime) }}</div>
|
||||
</div>
|
||||
<div class="odds-cells">
|
||||
<div
|
||||
v-for="col in PARLAY_MARKET_TYPES"
|
||||
:key="col.key"
|
||||
class="market-cell"
|
||||
>
|
||||
<template v-if="getMarket(match, col.key)?.selections.length">
|
||||
<button
|
||||
v-for="sel in getMarket(match, col.key)!.selections"
|
||||
:key="sel.id"
|
||||
type="button"
|
||||
class="odd-btn"
|
||||
:class="{ picked: isPicked(sel.id) }"
|
||||
@click="pickSelection(match, getMarket(match, col.key)!, sel)"
|
||||
>
|
||||
<span class="odd-label">{{ selLabel(sel) }}</span>
|
||||
<span class="odd-val">{{ formatOdds(sel.odds) }}</span>
|
||||
</button>
|
||||
</template>
|
||||
<span v-else class="market-empty">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty">
|
||||
<span class="empty-icon" aria-hidden="true">📅</span>
|
||||
<p>{{ t('bet.parlay_empty') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.parlay-panel {
|
||||
padding: 0 12px 16px;
|
||||
}
|
||||
|
||||
.panel-head {
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 8px;
|
||||
padding: 14px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.head-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.layers-icon {
|
||||
width: 26px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
background:
|
||||
linear-gradient(#2e9e5e, #2e9e5e) 0 0 / 100% 4px no-repeat,
|
||||
linear-gradient(#2e9e5e, #2e9e5e) 0 8px / 85% 4px no-repeat,
|
||||
linear-gradient(#2e9e5e, #2e9e5e) 0 16px / 70% 4px no-repeat;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.head-title h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.head-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.45;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.slip-link {
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.slip-count {
|
||||
margin-left: 4px;
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
margin-bottom: 8px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
flex-shrink: 0;
|
||||
min-width: 72px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
background: #141414;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
color: var(--primary-light);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.col-headers {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(52px, 1fr));
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
min-width: 360px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.col-head {
|
||||
font-size: 9px;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.table-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.match-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 10px 8px;
|
||||
background: #141414;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 6px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.match-info {
|
||||
flex-shrink: 0;
|
||||
width: 88px;
|
||||
min-width: 88px;
|
||||
}
|
||||
|
||||
.league {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.teams {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.25;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.odds-cells {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, minmax(52px, 1fr));
|
||||
gap: 4px;
|
||||
flex: 1;
|
||||
min-width: 360px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.market-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.odd-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
padding: 4px 2px;
|
||||
border-radius: 4px;
|
||||
background: #0d0d0d;
|
||||
border: 1px solid #333;
|
||||
min-height: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.odd-btn.picked {
|
||||
border-color: var(--primary);
|
||||
background: rgba(212, 175, 55, 0.15);
|
||||
}
|
||||
|
||||
.odd-label {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: var(--text-muted);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.odd-val {
|
||||
font-size: 11px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.market-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #444;
|
||||
font-size: 12px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.state,
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 48px 16px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
display: block;
|
||||
font-size: 40px;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.empty p {
|
||||
font-size: 13px;
|
||||
}
|
||||
</style>
|
||||
35
apps/player/src/composables/useAnnouncements.ts
Normal file
35
apps/player/src/composables/useAnnouncements.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { ref } from 'vue';
|
||||
import api from '../api';
|
||||
import { resolveAnnouncements } from '../constants/defaultAnnouncement';
|
||||
|
||||
function collectAnnouncementLines(data: {
|
||||
ticker?: Array<{ translation?: { title?: string; body?: string } }>;
|
||||
notices?: Array<{ translation?: { title?: string; body?: string } }>;
|
||||
} | null): string[] {
|
||||
const lines: string[] = [];
|
||||
if (!data) return lines;
|
||||
for (const item of data.ticker ?? []) {
|
||||
const text = item.translation?.body || item.translation?.title;
|
||||
if (text) lines.push(text);
|
||||
}
|
||||
for (const item of data.notices ?? []) {
|
||||
const text = item.translation?.title || item.translation?.body;
|
||||
if (text) lines.push(text);
|
||||
}
|
||||
return lines;
|
||||
}
|
||||
|
||||
export function useAnnouncements() {
|
||||
const items = ref<string[]>(resolveAnnouncements([]));
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const { data } = await api.get('/player/home');
|
||||
items.value = resolveAnnouncements(collectAnnouncementLines(data.data));
|
||||
} catch {
|
||||
items.value = resolveAnnouncements([]);
|
||||
}
|
||||
}
|
||||
|
||||
return { items, load };
|
||||
}
|
||||
8
apps/player/src/constants/defaultAnnouncement.ts
Normal file
8
apps/player/src/constants/defaultAnnouncement.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
export const DEFAULT_ANNOUNCEMENTS = [
|
||||
'欢迎光临 TheBet365 · 足球赛事火热进行中 · 理性投注，量力而行',
|
||||
];
|
||||
|
||||
export function resolveAnnouncements(items: string[]): string[] {
|
||||
const list = items.map((s) => s.trim()).filter(Boolean);
|
||||
return list.length ? list : DEFAULT_ANNOUNCEMENTS;
|
||||
}
|
||||
41
apps/player/src/constants/defaultBanner.ts
Normal file
41
apps/player/src/constants/defaultBanner.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import type { BannerItem } from '../components/BannerCarousel.vue';
|
||||
|
||||
/** 默认轮播首图：apps/player/src/assets/images/banner.png */
|
||||
import defaultBannerImg from '../assets/images/banner.png';
|
||||
|
||||
const FALLBACK_BANNER_URL = '/uploads/banners/welcome.svg';
|
||||
|
||||
export const DEFAULT_BANNER: BannerItem = {
|
||||
id: 'default',
|
||||
linkType: 'ROUTE',
|
||||
linkTarget: '/bet',
|
||||
translation: {
|
||||
title: '',
|
||||
imageUrl: defaultBannerImg,
|
||||
},
|
||||
};
|
||||
|
||||
function pickImageUrl(url?: string | null): string {
|
||||
if (!url) return defaultBannerImg;
|
||||
return url;
|
||||
}
|
||||
|
||||
export function resolveBanners(banners: BannerItem[] | undefined | null): BannerItem[] {
|
||||
const fromApi = (banners ?? []).map((banner) => ({
|
||||
...banner,
|
||||
translation: {
|
||||
...banner.translation,
|
||||
imageUrl: pickImageUrl(banner.translation?.imageUrl),
|
||||
},
|
||||
}));
|
||||
|
||||
const defaultSlide: BannerItem = {
|
||||
...DEFAULT_BANNER,
|
||||
translation: {
|
||||
...DEFAULT_BANNER.translation,
|
||||
imageUrl: defaultBannerImg || FALLBACK_BANNER_URL,
|
||||
},
|
||||
};
|
||||
|
||||
return [defaultSlide, ...fromApi];
|
||||
}
|
||||
@@ -4,13 +4,19 @@ import { useI18n } from 'vue-i18n';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useBetSlipStore } from '../stores/betSlip';
|
||||
import BetSlipDrawer from '../components/BetSlipDrawer.vue';
|
||||
import { ref } from 'vue';
|
||||
import CashBalanceChip from '../components/CashBalanceChip.vue';
|
||||
import UserAvatarMenu from '../components/UserAvatarMenu.vue';
|
||||
import LocaleFlag from '../components/LocaleFlag.vue';
|
||||
import AnnouncementMarquee from '../components/AnnouncementMarquee.vue';
|
||||
import BottomNavIcon from '../components/BottomNavIcon.vue';
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { getLocaleDisplay } from '../utils/localeDisplay';
|
||||
import { useAnnouncements } from '../composables/useAnnouncements';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const auth = useAuthStore();
|
||||
const slip = useBetSlipStore();
|
||||
const route = useRoute();
|
||||
const showSlip = ref(false);
|
||||
const slip = useBetSlipStore();
|
||||
|
||||
const locales = [
|
||||
{ code: 'zh-CN', label: '中文' },
|
||||
@@ -18,6 +24,11 @@ const locales = [
|
||||
{ code: 'ms-MY', label: 'BM' },
|
||||
];
|
||||
|
||||
const showAnnouncement = computed(() => !route.path.startsWith('/profile'));
|
||||
const { items: announcements, load: loadAnnouncements } = useAnnouncements();
|
||||
|
||||
onMounted(loadAnnouncements);
|
||||
|
||||
function setLocale(code: string) {
|
||||
locale.value = code;
|
||||
localStorage.setItem('locale', code);
|
||||
@@ -29,56 +40,164 @@ function setLocale(code: string) {
|
||||
<header class="header">
|
||||
<img src="/logo.png" alt="TheBet365" class="logo" />
|
||||
<div class="header-actions">
|
||||
<select :value="locale" @change="setLocale(($event.target as HTMLSelectElement).value)" class="lang-select">
|
||||
<option v-for="l in locales" :key="l.code" :value="l.code">{{ l.label }}</option>
|
||||
</select>
|
||||
<span class="balance">{{ auth.user?.username }}</span>
|
||||
<div class="lang-select-wrap">
|
||||
<LocaleFlag :locale="locale" :size="18" />
|
||||
<select :value="locale" @change="setLocale(($event.target as HTMLSelectElement).value)" class="lang-select">
|
||||
<option v-for="l in locales" :key="l.code" :value="l.code">
|
||||
{{ getLocaleDisplay(l.code).label }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<CashBalanceChip v-if="auth.user" />
|
||||
<UserAvatarMenu v-if="auth.user" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="showAnnouncement" class="announce-strip">
|
||||
<AnnouncementMarquee :items="announcements" embedded />
|
||||
</div>
|
||||
|
||||
<main class="main">
|
||||
<RouterView />
|
||||
</main>
|
||||
|
||||
<nav class="bottom-nav">
|
||||
<RouterLink to="/" :class="{ active: route.path === '/' }">{{ t('nav.home') }}</RouterLink>
|
||||
<RouterLink to="/football" :class="{ active: route.path.startsWith('/football') || route.path.startsWith('/match') }">{{ t('nav.football') }}</RouterLink>
|
||||
<button class="slip-btn" @click="showSlip = true">
|
||||
{{ t('bet.bet_slip') }}
|
||||
<span v-if="slip.count" class="badge">{{ slip.count }}</span>
|
||||
</button>
|
||||
<RouterLink to="/bets" :class="{ active: route.path === '/bets' }">{{ t('nav.my_bets') }}</RouterLink>
|
||||
<RouterLink to="/profile" :class="{ active: route.path === '/profile' }">{{ t('nav.profile') }}</RouterLink>
|
||||
<nav class="bottom-nav" aria-label="Main">
|
||||
<RouterLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
|
||||
<BottomNavIcon name="home" />
|
||||
<span class="nav-label">{{ t('nav.home') }}</span>
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
to="/bet"
|
||||
class="nav-item"
|
||||
:class="{ active: route.path === '/bet' || route.path.startsWith('/match') }"
|
||||
>
|
||||
<BottomNavIcon name="bet" />
|
||||
<span class="nav-label">{{ t('nav.bet') }}</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/bets" class="nav-item" :class="{ active: route.path === '/bets' }">
|
||||
<BottomNavIcon name="history" />
|
||||
<span class="nav-label">{{ t('nav.bet_history') }}</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/wallet" class="nav-item" :class="{ active: route.path === '/wallet' }">
|
||||
<BottomNavIcon name="wallet" />
|
||||
<span class="nav-label">{{ t('nav.wallet') }}</span>
|
||||
</RouterLink>
|
||||
<RouterLink to="/profile" class="nav-item" :class="{ active: route.path.startsWith('/profile') }">
|
||||
<BottomNavIcon name="profile" />
|
||||
<span class="nav-label">{{ t('nav.profile') }}</span>
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<BetSlipDrawer v-model="showSlip" />
|
||||
<BetSlipDrawer v-model="slip.drawerOpen" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 60px; }
|
||||
.layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 100dvh;
|
||||
overflow: hidden;
|
||||
background: var(--bg-body);
|
||||
}
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 12px 16px; background: #1a2332; border-bottom: 1px solid var(--border);
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(180deg, #222 0%, #1A1A1A 100%);
|
||||
border-bottom: 1px solid var(--border);
|
||||
z-index: 110;
|
||||
}
|
||||
.logo {
|
||||
height: 36px; width: auto; display: block;
|
||||
filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.2));
|
||||
}
|
||||
.header-actions { display: flex; gap: 6px; align-items: center; }
|
||||
.lang-select-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 6px 3px 5px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: #0d0d0d;
|
||||
}
|
||||
.lang-select {
|
||||
background: transparent;
|
||||
color: var(--primary-light);
|
||||
border: none;
|
||||
padding: 2px 2px 2px 0;
|
||||
width: auto;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
outline: none;
|
||||
}
|
||||
.announce-strip {
|
||||
flex-shrink: 0;
|
||||
z-index: 105;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
.logo { height: 48px; width: auto; display: block; }
|
||||
.header-actions { display: flex; gap: 12px; align-items: center; }
|
||||
.lang-select { background: var(--bg-card); color: #fff; border: 1px solid var(--border); padding: 4px 8px; border-radius: 4px; width: auto; }
|
||||
.balance { font-size: 13px; color: var(--text-muted); }
|
||||
.main { flex: 1; padding: 12px; }
|
||||
.bottom-nav {
|
||||
position: fixed; bottom: 0; left: 0; right: 0;
|
||||
display: flex; background: #1a2332; border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
background: linear-gradient(0deg, #111 0%, #1A1A1A 100%);
|
||||
border-top: 1px solid var(--border);
|
||||
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
|
||||
z-index: 100;
|
||||
padding-bottom: env(safe-area-inset-bottom, 0);
|
||||
}
|
||||
.bottom-nav a, .slip-btn {
|
||||
flex: 1; text-align: center; padding: 10px 4px; font-size: 11px;
|
||||
color: var(--text-muted); background: none; position: relative;
|
||||
.nav-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
padding: 6px 2px 8px;
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
position: relative;
|
||||
transition: color 0.2s;
|
||||
line-height: 1.2;
|
||||
min-width: 0;
|
||||
}
|
||||
.bottom-nav a.active, .slip-btn.active { color: var(--primary); }
|
||||
.badge {
|
||||
position: absolute; top: 2px; right: 20%;
|
||||
background: var(--danger); color: #fff; font-size: 10px;
|
||||
padding: 1px 5px; border-radius: 10px;
|
||||
|
||||
.nav-label {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
color: var(--primary-light);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.nav-item.active :deep(.nav-icon) {
|
||||
filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.35));
|
||||
}
|
||||
|
||||
.nav-item.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 22%;
|
||||
right: 22%;
|
||||
height: 2px;
|
||||
background: var(--primary);
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import { createI18n } from 'vue-i18n';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import router from './router/index.ts';
|
||||
import './styles.css';
|
||||
|
||||
const i18n = createI18n({
|
||||
@@ -11,22 +11,331 @@ const i18n = createI18n({
|
||||
fallbackLocale: 'en-US',
|
||||
messages: {
|
||||
'zh-CN': {
|
||||
nav: { home: '首页', football: '足球', my_bets: '我的投注', profile: '我的' },
|
||||
auth: { login: '登录', username: '账号', password: '密码' },
|
||||
wallet: { balance: '余额' },
|
||||
bet: { bet_slip: '投注单', stake: '投注金额', place_bet: '确认下注', parlay: '串关' },
|
||||
nav: { home: '主页', bet: '投注', bet_history: '历史投注', wallet: '账单', profile: '我的' },
|
||||
history: {
|
||||
league_default: '足球',
|
||||
stake: '投注 Stake',
|
||||
return: '回报 Return',
|
||||
est_return: '预计回报 Est. Return',
|
||||
parlay_title: '串关 · {n} 场',
|
||||
parlay_league: '串关 Parlay',
|
||||
empty: '暂无投注记录',
|
||||
status_won: 'WON 赢',
|
||||
status_pending: 'PENDING 待定',
|
||||
status_lost: 'LOST 输',
|
||||
status_push: 'PUSH 走盘',
|
||||
},
|
||||
auth: {
|
||||
login: '登录',
|
||||
logout: '退出登录',
|
||||
username: '账号',
|
||||
password: '密码',
|
||||
captcha_placeholder: 'Captcha',
|
||||
captcha_refresh: '点击换一张',
|
||||
captcha_wrong: '验证码错误',
|
||||
},
|
||||
wallet: {
|
||||
balance: '余额',
|
||||
cash_balance: '现金余额',
|
||||
unsettled: '未结算',
|
||||
available: '可用',
|
||||
no_records: '暂无账单记录',
|
||||
},
|
||||
bet: {
|
||||
bet_slip: '投注单',
|
||||
stake: '投注金额',
|
||||
place_bet: '确认下注',
|
||||
place_bet_short: '下注',
|
||||
parlay: '串关',
|
||||
tab_matches: '球赛',
|
||||
tab_outright: '优胜冠军',
|
||||
tab_parlay: '串关投注',
|
||||
tab_today: '今日',
|
||||
tab_early: '早盘',
|
||||
loading: '加载中…',
|
||||
no_matches: '暂无赛事',
|
||||
outright_coming: '优胜冠军玩法即将上线',
|
||||
outright_enter_stake: '请输入投注金额',
|
||||
outright_balance: '结余',
|
||||
outright_stake_amount: '投注额度',
|
||||
outright_success: '下注成功',
|
||||
outright_done: '完毕',
|
||||
outright_bet_failed: '下注失败',
|
||||
no_outright: '暂无冠军盘口',
|
||||
cancel: '取消',
|
||||
parlay_title: '串关投注',
|
||||
parlay_desc: '选择3-10场比赛来创建串关投注。组合赔率相乘可赢得更多！',
|
||||
parlay_filter_all: '全部',
|
||||
parlay_empty: '暂无可用串关赛事',
|
||||
parlay_same_match: '同一场比赛不能串关',
|
||||
parlay_need_more: '请至少选择 2 项进行串关',
|
||||
back: '返回',
|
||||
refresh: '刷新',
|
||||
download: '下载',
|
||||
reward_active: '奖励生效中!',
|
||||
market_closed: '暂未开盘',
|
||||
expand_market: '展开玩法',
|
||||
collapse_market: '收起玩法',
|
||||
market_cs: '波胆',
|
||||
market_ht_cs: '上半场波胆',
|
||||
market_sh_cs: '下半场波胆',
|
||||
market_ft_handicap: '全场 让球',
|
||||
market_ft_ou: '全场 大小',
|
||||
market_ft_1x2: '全场 独赢盘',
|
||||
market_ft_oe: '全场 单/双',
|
||||
market_ht_handicap: '半场 让球',
|
||||
market_ht_ou: '半场 大小',
|
||||
market_ht_1x2: '半场 独赢盘',
|
||||
col_home: '主场',
|
||||
col_draw: '平',
|
||||
col_away: '客场',
|
||||
cs_stake_required: '请至少在一个比分输入投注金额',
|
||||
cs_place_success: '下注成功',
|
||||
cs_place_failed: '下注失败',
|
||||
},
|
||||
profile: {
|
||||
edit: '修改资料',
|
||||
language: '语言',
|
||||
phone: '手机号',
|
||||
email: '邮箱',
|
||||
phone_placeholder: '请输入手机号',
|
||||
email_placeholder: '请输入邮箱',
|
||||
save: '保存',
|
||||
password_optional_hint: '不修改密码可留空',
|
||||
old_password_placeholder: '留空则不修改',
|
||||
new_password_placeholder: '留空则不修改',
|
||||
confirm_password_placeholder: '留空则不修改',
|
||||
old_password: '当前密码',
|
||||
new_password: '新密码',
|
||||
confirm_password: '确认新密码',
|
||||
back: '返回',
|
||||
saved: '联系方式已保存',
|
||||
save_failed: '保存失败',
|
||||
password_changed: '密码已更新',
|
||||
password_failed: '密码修改失败',
|
||||
password_mismatch: '两次新密码不一致',
|
||||
password_incomplete: '修改密码需填写当前密码、新密码及确认密码',
|
||||
},
|
||||
},
|
||||
'en-US': {
|
||||
nav: { home: 'Home', football: 'Football', my_bets: 'My Bets', profile: 'Profile' },
|
||||
auth: { login: 'Login', username: 'Username', password: 'Password' },
|
||||
wallet: { balance: 'Balance' },
|
||||
bet: { bet_slip: 'Bet Slip', stake: 'Stake', place_bet: 'Place Bet', parlay: 'Parlay' },
|
||||
nav: { home: 'Home', bet: 'Bet', bet_history: 'History', wallet: 'Wallet', profile: 'Profile' },
|
||||
history: {
|
||||
league_default: 'Football',
|
||||
stake: 'Stake 投注',
|
||||
return: 'Return 回报',
|
||||
est_return: 'Est. Return 预计回报',
|
||||
parlay_title: 'Parlay · {n} legs',
|
||||
parlay_league: 'Parlay 串关',
|
||||
empty: 'No bets yet',
|
||||
status_won: 'WON 赢',
|
||||
status_pending: 'PENDING 待定',
|
||||
status_lost: 'LOST 输',
|
||||
status_push: 'PUSH 走盘',
|
||||
},
|
||||
auth: {
|
||||
login: 'Login',
|
||||
logout: 'Log out',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
captcha_placeholder: 'Captcha',
|
||||
captcha_refresh: 'Click to refresh',
|
||||
captcha_wrong: 'Invalid captcha',
|
||||
},
|
||||
wallet: {
|
||||
balance: 'Balance',
|
||||
cash_balance: 'Cash Balance',
|
||||
unsettled: 'Unsettled',
|
||||
available: 'Available',
|
||||
no_records: 'No records',
|
||||
},
|
||||
bet: {
|
||||
bet_slip: 'Bet Slip',
|
||||
stake: 'Stake',
|
||||
place_bet: 'Place Bet',
|
||||
place_bet_short: 'Bet',
|
||||
parlay: 'Parlay',
|
||||
tab_matches: 'Matches',
|
||||
tab_outright: 'Outright',
|
||||
tab_parlay: 'Parlay',
|
||||
tab_today: 'Today',
|
||||
tab_early: 'Early',
|
||||
loading: 'Loading…',
|
||||
no_matches: 'No matches',
|
||||
outright_coming: 'Outright markets coming soon',
|
||||
outright_enter_stake: 'Enter stake',
|
||||
outright_balance: 'Balance',
|
||||
outright_stake_amount: 'Stake',
|
||||
outright_success: 'Bet placed',
|
||||
outright_done: 'Done',
|
||||
outright_bet_failed: 'Bet failed',
|
||||
no_outright: 'No outright markets',
|
||||
cancel: 'Cancel',
|
||||
parlay_title: 'Parlay',
|
||||
parlay_desc: 'Pick 3-10 matches. Combined odds multiply your potential win!',
|
||||
parlay_filter_all: 'All',
|
||||
parlay_empty: 'No matches available for parlay betting',
|
||||
parlay_same_match: 'Cannot parlay selections from the same match',
|
||||
parlay_need_more: 'Select at least 2 legs for parlay',
|
||||
back: 'Back',
|
||||
refresh: 'Refresh',
|
||||
download: 'Download',
|
||||
reward_active: 'Reward active!',
|
||||
market_closed: 'Not open',
|
||||
expand_market: 'Expand',
|
||||
collapse_market: 'Collapse',
|
||||
market_cs: 'Correct Score',
|
||||
market_ht_cs: '1H Correct Score',
|
||||
market_sh_cs: '2H Correct Score',
|
||||
market_ft_handicap: 'FT Handicap',
|
||||
market_ft_ou: 'FT O/U',
|
||||
market_ft_1x2: 'FT 1X2',
|
||||
market_ft_oe: 'FT Odd/Even',
|
||||
market_ht_handicap: 'HT Handicap',
|
||||
market_ht_ou: 'HT O/U',
|
||||
market_ht_1x2: 'HT 1X2',
|
||||
col_home: 'Home',
|
||||
col_draw: 'Draw',
|
||||
col_away: 'Away',
|
||||
cs_stake_required: 'Enter stake on at least one score',
|
||||
cs_place_success: 'Bet placed',
|
||||
cs_place_failed: 'Bet failed',
|
||||
},
|
||||
profile: {
|
||||
edit: 'Edit Profile',
|
||||
language: 'Language',
|
||||
phone: 'Phone',
|
||||
email: 'Email',
|
||||
phone_placeholder: 'Phone number',
|
||||
email_placeholder: 'Email address',
|
||||
save: 'Save',
|
||||
password_optional_hint: 'Leave password fields blank to keep current password',
|
||||
old_password_placeholder: 'Leave blank to skip',
|
||||
new_password_placeholder: 'Leave blank to skip',
|
||||
confirm_password_placeholder: 'Leave blank to skip',
|
||||
old_password: 'Current password',
|
||||
new_password: 'New password',
|
||||
confirm_password: 'Confirm password',
|
||||
back: 'Back',
|
||||
saved: 'Contact saved',
|
||||
save_failed: 'Save failed',
|
||||
password_changed: 'Password updated',
|
||||
password_failed: 'Password change failed',
|
||||
password_mismatch: 'Passwords do not match',
|
||||
password_incomplete: 'Fill current, new and confirm password to change password',
|
||||
},
|
||||
},
|
||||
'ms-MY': {
|
||||
nav: { home: 'Laman Utama', football: 'Bola Sepak', my_bets: 'Pertaruhan Saya', profile: 'Profil' },
|
||||
auth: { login: 'Log Masuk', username: 'Nama Pengguna', password: 'Kata Laluan' },
|
||||
wallet: { balance: 'Baki' },
|
||||
bet: { bet_slip: 'Slip Pertaruhan', stake: 'Jumlah', place_bet: 'Letak Pertaruhan', parlay: 'Berganda' },
|
||||
nav: {
|
||||
home: 'Laman Utama',
|
||||
bet: 'Pertaruhan',
|
||||
bet_history: 'Sejarah',
|
||||
wallet: 'Bil',
|
||||
profile: 'Profil',
|
||||
},
|
||||
history: {
|
||||
league_default: 'Bola Sepak',
|
||||
stake: 'Stake 投注',
|
||||
return: 'Return 回报',
|
||||
est_return: 'Est. Return 预计回报',
|
||||
parlay_title: 'Parlay · {n} perlawanan',
|
||||
parlay_league: 'Parlay 串关',
|
||||
empty: 'Tiada rekod pertaruhan',
|
||||
status_won: 'WON 赢',
|
||||
status_pending: 'PENDING 待定',
|
||||
status_lost: 'LOST 输',
|
||||
status_push: 'PUSH 走盘',
|
||||
},
|
||||
auth: {
|
||||
login: 'Log Masuk',
|
||||
logout: 'Log Keluar',
|
||||
username: 'Nama Pengguna',
|
||||
password: 'Kata Laluan',
|
||||
captcha_placeholder: 'Captcha',
|
||||
captcha_refresh: 'Klik untuk muat semula',
|
||||
captcha_wrong: 'Kod pengesahan salah',
|
||||
},
|
||||
wallet: {
|
||||
balance: 'Baki',
|
||||
cash_balance: 'Baki Tunai',
|
||||
unsettled: 'Belum Selesai',
|
||||
available: 'Tersedia',
|
||||
no_records: 'Tiada rekod',
|
||||
},
|
||||
bet: {
|
||||
bet_slip: 'Slip Pertaruhan',
|
||||
stake: 'Jumlah',
|
||||
place_bet: 'Letak Pertaruhan',
|
||||
place_bet_short: 'Pertaruhan',
|
||||
parlay: 'Berganda',
|
||||
tab_matches: 'Perlawanan',
|
||||
tab_outright: 'Juara',
|
||||
tab_parlay: 'Berganda',
|
||||
tab_today: 'Hari Ini',
|
||||
tab_early: 'Awal',
|
||||
loading: 'Memuatkan…',
|
||||
no_matches: 'Tiada perlawanan',
|
||||
outright_coming: 'Pasaran juara akan datang',
|
||||
outright_enter_stake: 'Masukkan jumlah',
|
||||
outright_balance: 'Baki',
|
||||
outright_stake_amount: 'Jumlah pertaruhan',
|
||||
outright_success: 'Pertaruhan berjaya',
|
||||
outright_done: 'Selesai',
|
||||
outright_bet_failed: 'Pertaruhan gagal',
|
||||
no_outright: 'Tiada pasaran juara',
|
||||
cancel: 'Batal',
|
||||
parlay_title: 'Pertaruhan Berganda',
|
||||
parlay_desc: 'Pilih 3-10 perlawanan. Gabungan odds didarab!',
|
||||
parlay_filter_all: 'Semua',
|
||||
parlay_empty: 'No matches available for parlay betting',
|
||||
parlay_same_match: 'Perlawanan sama tidak boleh berganda',
|
||||
parlay_need_more: 'Pilih sekurang-kurangnya 2 pilihan',
|
||||
back: 'Kembali',
|
||||
refresh: 'Muat semula',
|
||||
download: 'Muat turun',
|
||||
reward_active: 'Ganjaran aktif!',
|
||||
market_closed: 'Belum dibuka',
|
||||
expand_market: 'Kembang',
|
||||
collapse_market: 'Tutup',
|
||||
market_cs: 'Skor Tepat',
|
||||
market_ht_cs: 'Skor Tepat PB1',
|
||||
market_sh_cs: 'Skor Tepat PB2',
|
||||
market_ft_handicap: 'Handicap Penuh',
|
||||
market_ft_ou: 'Atas/Bawah Penuh',
|
||||
market_ft_1x2: '1X2 Penuh',
|
||||
market_ft_oe: 'Ganjil/Genap Penuh',
|
||||
market_ht_handicap: 'Handicap Separuh',
|
||||
market_ht_ou: 'Atas/Bawah Separuh',
|
||||
market_ht_1x2: '1X2 Separuh',
|
||||
col_home: 'Home',
|
||||
col_draw: 'Seri',
|
||||
col_away: 'Away',
|
||||
cs_stake_required: 'Masukkan jumlah pada sekurang-kurangnya satu skor',
|
||||
cs_place_success: 'Pertaruhan berjaya',
|
||||
cs_place_failed: 'Pertaruhan gagal',
|
||||
},
|
||||
profile: {
|
||||
edit: 'Edit Profil',
|
||||
language: 'Bahasa',
|
||||
phone: 'Telefon',
|
||||
email: 'E-mel',
|
||||
phone_placeholder: 'Nombor telefon',
|
||||
email_placeholder: 'Alamat e-mel',
|
||||
save: 'Simpan',
|
||||
password_optional_hint: 'Biarkan kosong jika tidak mahu tukar kata laluan',
|
||||
old_password_placeholder: 'Biarkan kosong untuk langkau',
|
||||
new_password_placeholder: 'Biarkan kosong untuk langkau',
|
||||
confirm_password_placeholder: 'Biarkan kosong untuk langkau',
|
||||
old_password: 'Kata laluan semasa',
|
||||
new_password: 'Kata laluan baharu',
|
||||
confirm_password: 'Sahkan kata laluan',
|
||||
back: 'Kembali',
|
||||
saved: 'Hubungan disimpan',
|
||||
save_failed: 'Gagal simpan',
|
||||
password_changed: 'Kata laluan dikemas kini',
|
||||
password_failed: 'Gagal tukar kata laluan',
|
||||
password_mismatch: 'Kata laluan tidak sepadan',
|
||||
password_incomplete: 'Isi kata laluan semasa, baharu dan pengesahan untuk menukar',
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useAuthStore } from '../stores/auth.ts';
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
@@ -11,10 +11,13 @@ const router = createRouter({
|
||||
meta: { requiresAuth: true },
|
||||
children: [
|
||||
{ path: '', component: () => import('../views/HomeView.vue') },
|
||||
{ path: 'football', component: () => import('../views/FootballView.vue') },
|
||||
{ path: 'bet', component: () => import('../views/FootballView.vue') },
|
||||
{ path: 'football', redirect: '/bet' },
|
||||
{ path: 'match/:id', component: () => import('../views/MatchDetailView.vue') },
|
||||
{ path: 'bets', component: () => import('../views/MyBetsView.vue') },
|
||||
{ path: 'wallet', component: () => import('../views/WalletView.vue') },
|
||||
{ path: 'profile', component: () => import('../views/ProfileView.vue') },
|
||||
{ path: 'profile/edit', component: () => import('../views/ProfileEditView.vue') },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@@ -25,12 +25,26 @@ export const useBetSlipStore = defineStore('betSlip', () => {
|
||||
);
|
||||
if (existing >= 0) {
|
||||
items.value.splice(existing, 1);
|
||||
if (items.value.length < 2) mode.value = 'single';
|
||||
return;
|
||||
}
|
||||
items.value.push(item);
|
||||
if (items.value.length >= 2) mode.value = 'parlay';
|
||||
}
|
||||
|
||||
/** 串关：同场只保留一个选项；再次点击已选项则取消 */
|
||||
function addParlayLeg(item: SlipItem) {
|
||||
const samePick = items.value.findIndex((i) => i.selectionId === item.selectionId);
|
||||
if (samePick >= 0) {
|
||||
items.value.splice(samePick, 1);
|
||||
if (items.value.length < 2) mode.value = 'single';
|
||||
return;
|
||||
}
|
||||
items.value = items.value.filter((i) => i.matchId !== item.matchId);
|
||||
items.value.push(item);
|
||||
mode.value = items.value.length >= 2 ? 'parlay' : 'single';
|
||||
}
|
||||
|
||||
function removeItem(selectionId: string) {
|
||||
items.value = items.value.filter((i) => i.selectionId !== selectionId);
|
||||
if (items.value.length < 2) mode.value = 'single';
|
||||
@@ -58,6 +72,16 @@ export const useBetSlipStore = defineStore('betSlip', () => {
|
||||
return new Set(matchIds).size !== matchIds.length;
|
||||
});
|
||||
|
||||
const drawerOpen = ref(false);
|
||||
|
||||
function openDrawer() {
|
||||
drawerOpen.value = true;
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
drawerOpen.value = false;
|
||||
}
|
||||
|
||||
return {
|
||||
items,
|
||||
stake,
|
||||
@@ -67,8 +91,12 @@ export const useBetSlipStore = defineStore('betSlip', () => {
|
||||
totalOdds,
|
||||
potentialReturn,
|
||||
hasSameMatch,
|
||||
drawerOpen,
|
||||
addItem,
|
||||
addParlayLeg,
|
||||
removeItem,
|
||||
clear,
|
||||
openDrawer,
|
||||
closeDrawer,
|
||||
};
|
||||
});
|
||||
|
||||
@@ -1,58 +1,299 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--primary: #D4AF37;
|
||||
--primary-dark: #A8841F;
|
||||
--primary-light: #F0D875;
|
||||
--secondary: #1A1A1A;
|
||||
--tertiary: #000000;
|
||||
--neutral: #8E8E93;
|
||||
--bg-body: #000000;
|
||||
--bg-card: #141414;
|
||||
--bg-hover: #222222;
|
||||
--bg-elevated: #2A2A2A;
|
||||
--text: #FFFFFF;
|
||||
--text-muted: #8E8E93;
|
||||
--border: #333333;
|
||||
--border-gold: #D4AF37;
|
||||
--border-gold-soft: rgba(212, 175, 55, 0.28);
|
||||
--border-w: 1px;
|
||||
--border-w-thick: 1px;
|
||||
--danger: #FF453A;
|
||||
--radius: 12px;
|
||||
--radius-sm: 8px;
|
||||
--shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
|
||||
--shadow-gold: 0 2px 12px rgba(212, 175, 55, 0.12);
|
||||
--glow-gold: 0 0 8px rgba(212, 175, 55, 0.2);
|
||||
--gradient-gold: linear-gradient(
|
||||
180deg,
|
||||
#FFF4C8 0%,
|
||||
#F0D875 18%,
|
||||
#D4AF37 50%,
|
||||
#B8942B 78%,
|
||||
#8B6914 100%
|
||||
);
|
||||
--gradient-gold-border: linear-gradient(
|
||||
180deg,
|
||||
#FFF8DC 0%,
|
||||
#E8C96A 35%,
|
||||
#A8841F 70%,
|
||||
#5C4A12 100%
|
||||
);
|
||||
--gradient-card: linear-gradient(160deg, #1E1A12 0%, #141414 40%, #0A0A0A 100%);
|
||||
}
|
||||
|
||||
/** 金色描边按钮（避免大面积实心填充） */
|
||||
.btn-gold-outline {
|
||||
background: #141414;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
color: var(--primary-light);
|
||||
font-weight: 800;
|
||||
}
|
||||
.btn-gold-outline:active:not(:disabled) {
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
border-color: var(--border-gold);
|
||||
}
|
||||
|
||||
/** 选中态：浅底 + 金边，非整块金色 */
|
||||
.tab-gold-active {
|
||||
background: rgba(212, 175, 55, 0.08) !important;
|
||||
border-color: var(--border-gold) !important;
|
||||
color: var(--primary-light) !important;
|
||||
}
|
||||
|
||||
/* 登录等关键区域：轻量金边（非厚重 PS 描边） */
|
||||
.ps-gold-frame {
|
||||
position: relative;
|
||||
border: 1px solid var(--border-gold-soft) !important;
|
||||
border-radius: var(--radius);
|
||||
background: rgba(14, 14, 14, 0.92) !important;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.ps-gold-frame::before,
|
||||
.ps-gold-frame::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ps-gold-input {
|
||||
background: #0d0d0d !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ps-gold-input:focus {
|
||||
border-color: var(--border-gold-soft) !important;
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12) !important;
|
||||
}
|
||||
|
||||
/* 主按钮：斜面浮雕 + 渐变描边 + 外发光 */
|
||||
.btn-primary {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
padding: 17px 24px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: #3D2800;
|
||||
font-weight: 900;
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
text-shadow:
|
||||
0 1px 0 rgba(255, 252, 235, 0.95),
|
||||
0 -1px 0 rgba(120, 85, 15, 0.35);
|
||||
transition: transform 0.12s ease;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border-radius: calc(var(--radius-sm) + 3px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#FFFCE8 0%,
|
||||
#F7E08A 12%,
|
||||
#D4AF37 35%,
|
||||
#8B6914 55%,
|
||||
#5C4A12 72%,
|
||||
#E8C040 90%,
|
||||
#FFF8DC 100%
|
||||
);
|
||||
z-index: -2;
|
||||
box-shadow:
|
||||
0 0 14px rgba(255, 210, 70, 0.55),
|
||||
0 0 28px rgba(212, 175, 55, 0.28),
|
||||
0 6px 14px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
.btn-primary::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
border-radius: calc(var(--radius-sm) - 1px);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#FFFBE8 0%,
|
||||
#FFE566 6%,
|
||||
#F0D050 22%,
|
||||
#D4AF37 48%,
|
||||
#B8860B 72%,
|
||||
#8B6914 100%
|
||||
);
|
||||
z-index: -1;
|
||||
box-shadow:
|
||||
inset 0 2px 0 rgba(255, 255, 255, 0.95),
|
||||
inset 0 4px 10px rgba(255, 240, 180, 0.45),
|
||||
inset 0 -2px 0 rgba(90, 65, 12, 0.85),
|
||||
inset 0 -6px 14px rgba(45, 32, 6, 0.5);
|
||||
}
|
||||
|
||||
.btn-primary:active:not(:disabled) {
|
||||
transform: translateY(2px) scale(0.985);
|
||||
}
|
||||
|
||||
.btn-primary:active:not(:disabled)::after {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#E8C040 0%,
|
||||
#C9962A 40%,
|
||||
#8B6914 100%
|
||||
);
|
||||
box-shadow:
|
||||
inset 0 4px 10px rgba(35, 24, 4, 0.65),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
|
||||
.btn-primary:active:not(:disabled)::before {
|
||||
box-shadow:
|
||||
0 0 10px rgba(255, 200, 50, 0.35),
|
||||
0 2px 6px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
filter: saturate(0.4);
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #0f1419;
|
||||
color: #e8eaed;
|
||||
min-height: 100vh;
|
||||
}
|
||||
:root {
|
||||
--primary: #00a826;
|
||||
--primary-dark: #008a1f;
|
||||
--bg-card: #1a2332;
|
||||
--bg-hover: #243044;
|
||||
--text-muted: #8b95a5;
|
||||
--border: #2d3a4d;
|
||||
--danger: #ff4444;
|
||||
background:
|
||||
radial-gradient(ellipse 120% 60% at 50% -10%, rgba(212, 175, 55, 0.14), transparent 55%),
|
||||
var(--bg-body);
|
||||
color: var(--text);
|
||||
overflow: hidden;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
input {
|
||||
font-family: inherit;
|
||||
background: var(--bg-card);
|
||||
background: #0D0D0D;
|
||||
border: 1px solid var(--border);
|
||||
color: #fff;
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
padding: 14px 16px;
|
||||
border-radius: var(--radius-sm);
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
border-color: var(--border-gold-soft);
|
||||
}
|
||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
input:-webkit-autofill:active {
|
||||
-webkit-text-fill-color: var(--text);
|
||||
caret-color: var(--text);
|
||||
box-shadow: 0 0 0 1000px #0a0a0a inset;
|
||||
border: 1px solid var(--border);
|
||||
transition: background-color 99999s ease-out 0s;
|
||||
}
|
||||
|
||||
.odds-btn {
|
||||
background: var(--bg-card);
|
||||
background: #161616;
|
||||
border: 1px solid var(--border);
|
||||
color: #fff;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
color: var(--text);
|
||||
padding: 12px 14px;
|
||||
border-radius: var(--radius-sm);
|
||||
text-align: center;
|
||||
min-width: 70px;
|
||||
min-width: 78px;
|
||||
transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
|
||||
}
|
||||
.odds-btn.selected { background: var(--primary); border-color: var(--primary); }
|
||||
.odds-btn .label { font-size: 11px; color: var(--text-muted); }
|
||||
.odds-btn .value { font-size: 15px; font-weight: 700; color: #ffd700; }
|
||||
|
||||
.odds-btn:active { transform: scale(0.96); }
|
||||
|
||||
.odds-btn.selected {
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.odds-btn.selected::before,
|
||||
.odds-btn.selected::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.odds-btn.selected .label,
|
||||
.odds-btn.selected .value {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.odds-btn .label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.odds-btn .value {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
text-shadow: 0 0 8px rgba(212, 175, 55, 0.5);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
margin-bottom: 8px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
margin-bottom: 14px;
|
||||
padding: 4px 0 4px 12px;
|
||||
border-left: 3px solid var(--border-gold);
|
||||
color: var(--primary-light);
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
86
apps/player/src/utils/correctScoreLayout.ts
Normal file
86
apps/player/src/utils/correctScoreLayout.ts
Normal file
@@ -0,0 +1,86 @@
|
||||
/** 与后台 settlement 模板顺序一致，用于列内排序 */
|
||||
export const FT_CORRECT_SCORE_ORDER = [
|
||||
'SCORE_1_0', 'SCORE_2_0', 'SCORE_2_1', 'SCORE_3_0', 'SCORE_3_1', 'SCORE_3_2',
|
||||
'SCORE_4_0', 'SCORE_4_1', 'SCORE_4_2', 'SCORE_4_3', 'OTHER_HOME',
|
||||
'SCORE_0_0', 'SCORE_1_1', 'SCORE_2_2', 'SCORE_3_3', 'SCORE_4_4', 'OTHER_DRAW',
|
||||
'SCORE_0_1', 'SCORE_0_2', 'SCORE_1_2', 'SCORE_0_3', 'SCORE_1_3', 'SCORE_2_3',
|
||||
'SCORE_0_4', 'SCORE_1_4', 'SCORE_2_4', 'SCORE_3_4', 'OTHER_AWAY',
|
||||
];
|
||||
|
||||
export const HT_CORRECT_SCORE_ORDER = [
|
||||
'SCORE_1_0', 'SCORE_2_0', 'SCORE_2_1', 'SCORE_3_0', 'OTHER_HOME',
|
||||
'SCORE_0_0', 'SCORE_1_1', 'SCORE_2_2', 'OTHER_DRAW',
|
||||
'SCORE_0_1', 'SCORE_0_2', 'SCORE_1_2', 'SCORE_0_3', 'OTHER_AWAY',
|
||||
];
|
||||
|
||||
export type CsColumn = 'home' | 'draw' | 'away';
|
||||
|
||||
export interface CsSelection {
|
||||
id: string;
|
||||
selectionCode: string;
|
||||
selectionName: string;
|
||||
odds: string;
|
||||
oddsVersion: string;
|
||||
scoreDisplay: string;
|
||||
}
|
||||
|
||||
export function isCorrectScoreMarket(marketType: string) {
|
||||
return marketType.includes('CORRECT_SCORE');
|
||||
}
|
||||
|
||||
function orderForMarket(marketType: string) {
|
||||
if (marketType === 'FT_CORRECT_SCORE') return FT_CORRECT_SCORE_ORDER;
|
||||
return HT_CORRECT_SCORE_ORDER;
|
||||
}
|
||||
|
||||
export function parseScoreCode(code: string): { display: string; column: CsColumn } | null {
|
||||
if (code === 'OTHER_HOME') return { display: '其它', column: 'home' };
|
||||
if (code === 'OTHER_DRAW') return { display: '其它', column: 'draw' };
|
||||
if (code === 'OTHER_AWAY') return { display: '其它', column: 'away' };
|
||||
const m = code.match(/^SCORE_(\d+)_(\d+)$/);
|
||||
if (!m) return null;
|
||||
const h = Number(m[1]);
|
||||
const a = Number(m[2]);
|
||||
if (h > a) return { display: `${h}:${a}`, column: 'home' };
|
||||
if (h < a) return { display: `${h}:${a}`, column: 'away' };
|
||||
return { display: `${h}:${a}`, column: 'draw' };
|
||||
}
|
||||
|
||||
function sortByTemplate(items: CsSelection[], template: string[]) {
|
||||
return [...items].sort((a, b) => {
|
||||
const ia = template.indexOf(a.selectionCode);
|
||||
const ib = template.indexOf(b.selectionCode);
|
||||
return (ia === -1 ? 999 : ia) - (ib === -1 ? 999 : ib);
|
||||
});
|
||||
}
|
||||
|
||||
export function groupCorrectScoreSelections(
|
||||
selections: Array<{
|
||||
id: string;
|
||||
selectionCode: string;
|
||||
selectionName: string;
|
||||
odds: string;
|
||||
oddsVersion: string;
|
||||
}>,
|
||||
marketType: string,
|
||||
) {
|
||||
const template = orderForMarket(marketType);
|
||||
const home: CsSelection[] = [];
|
||||
const draw: CsSelection[] = [];
|
||||
const away: CsSelection[] = [];
|
||||
|
||||
for (const sel of selections) {
|
||||
const parsed = parseScoreCode(sel.selectionCode);
|
||||
if (!parsed) continue;
|
||||
const row: CsSelection = { ...sel, scoreDisplay: parsed.display };
|
||||
if (parsed.column === 'home') home.push(row);
|
||||
else if (parsed.column === 'draw') draw.push(row);
|
||||
else away.push(row);
|
||||
}
|
||||
|
||||
return {
|
||||
home: sortByTemplate(home, template),
|
||||
draw: sortByTemplate(draw, template),
|
||||
away: sortByTemplate(away, template),
|
||||
};
|
||||
}
|
||||
2
apps/player/src/utils/localeDisplay.js
Normal file
2
apps/player/src/utils/localeDisplay.js
Normal file
@@ -0,0 +1,2 @@
|
||||
// 兼容旧缓存：转发到 TypeScript 源文件
|
||||
export { getLocaleDisplay, parseAmount, sumAmounts, formatMoney } from './localeDisplay.ts';
|
||||
55
apps/player/src/utils/localeDisplay.ts
Normal file
55
apps/player/src/utils/localeDisplay.ts
Normal file
@@ -0,0 +1,55 @@
|
||||
export interface LocaleDisplay {
|
||||
countryCode: 'cn' | 'us' | 'my';
|
||||
currency: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const LOCALE_DISPLAY: Record<string, LocaleDisplay> = {
|
||||
'zh-CN': { countryCode: 'cn', currency: 'CNY', label: '中文' },
|
||||
'en-US': { countryCode: 'us', currency: 'USD', label: 'English' },
|
||||
'ms-MY': { countryCode: 'my', currency: 'MYR', label: 'BM' },
|
||||
};
|
||||
|
||||
export function getLocaleDisplay(locale: string): LocaleDisplay {
|
||||
return LOCALE_DISPLAY[locale] ?? LOCALE_DISPLAY['en-US'];
|
||||
}
|
||||
|
||||
export function parseAmount(amount: unknown): number {
|
||||
if (amount == null) return 0;
|
||||
if (typeof amount === 'number') return Number.isFinite(amount) ? amount : 0;
|
||||
if (typeof amount === 'string') {
|
||||
const n = Number(amount);
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
if (typeof amount === 'object') {
|
||||
const value = amount as { toString?: () => string; d?: number[] };
|
||||
if (typeof value.toString === 'function') {
|
||||
const n = Number(value.toString());
|
||||
if (Number.isFinite(n)) return n;
|
||||
}
|
||||
if (Array.isArray(value.d) && value.d.length) {
|
||||
const n = Number(value.d.join(''));
|
||||
return Number.isFinite(n) ? n : 0;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
export function sumAmounts(...amounts: unknown[]): number {
|
||||
return amounts.reduce<number>((sum, item) => sum + parseAmount(item), 0);
|
||||
}
|
||||
|
||||
export function formatMoney(amount: unknown, locale: string): string {
|
||||
const value = parseAmount(amount);
|
||||
const { currency } = getLocaleDisplay(locale);
|
||||
try {
|
||||
return new Intl.NumberFormat(locale, {
|
||||
style: 'currency',
|
||||
currency,
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(value);
|
||||
} catch {
|
||||
return `${getLocaleDisplay(locale).currency} ${value.toFixed(2)}`;
|
||||
}
|
||||
}
|
||||
33
apps/player/src/utils/marketCatalog.ts
Normal file
33
apps/player/src/utils/marketCatalog.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
/** 详情页展示顺序（与产品设计稿一致） */
|
||||
export const FEATURED_MARKET_TYPES = [
|
||||
'FT_CORRECT_SCORE',
|
||||
'HT_CORRECT_SCORE',
|
||||
'SH_CORRECT_SCORE',
|
||||
] as const;
|
||||
|
||||
export const GRID_MARKET_TYPES = [
|
||||
'FT_HANDICAP',
|
||||
'FT_OVER_UNDER',
|
||||
'FT_1X2',
|
||||
'FT_ODD_EVEN',
|
||||
'HT_HANDICAP',
|
||||
'HT_OVER_UNDER',
|
||||
'HT_1X2',
|
||||
] as const;
|
||||
|
||||
export type CatalogMarketType =
|
||||
| (typeof FEATURED_MARKET_TYPES)[number]
|
||||
| (typeof GRID_MARKET_TYPES)[number];
|
||||
|
||||
export const MARKET_I18N_KEY: Record<string, string> = {
|
||||
FT_CORRECT_SCORE: 'bet.market_cs',
|
||||
HT_CORRECT_SCORE: 'bet.market_ht_cs',
|
||||
SH_CORRECT_SCORE: 'bet.market_sh_cs',
|
||||
FT_HANDICAP: 'bet.market_ft_handicap',
|
||||
FT_OVER_UNDER: 'bet.market_ft_ou',
|
||||
FT_1X2: 'bet.market_ft_1x2',
|
||||
FT_ODD_EVEN: 'bet.market_ft_oe',
|
||||
HT_HANDICAP: 'bet.market_ht_handicap',
|
||||
HT_OVER_UNDER: 'bet.market_ht_ou',
|
||||
HT_1X2: 'bet.market_ht_1x2',
|
||||
};
|
||||
23
apps/player/src/utils/parlayColumns.ts
Normal file
23
apps/player/src/utils/parlayColumns.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
/** 串关列表表头与玩法类型 */
|
||||
export const PARLAY_MARKET_TYPES = [
|
||||
{ key: 'FT_HANDICAP', label: 'FT.HDP' },
|
||||
{ key: 'FT_OVER_UNDER', label: 'FT.O/U' },
|
||||
{ key: 'FT_1X2', label: 'FT.1X2' },
|
||||
{ key: 'FT_ODD_EVEN', label: 'FT.O/E' },
|
||||
{ key: 'HT_HANDICAP', label: '1H.HDP' },
|
||||
{ key: 'HT_OVER_UNDER', label: '1H.O/U' },
|
||||
{ key: 'HT_1X2', label: '1H.1X2' },
|
||||
] as const;
|
||||
|
||||
export type ParlayMarketType = (typeof PARLAY_MARKET_TYPES)[number]['key'];
|
||||
|
||||
/** 选项简称（串关格内展示） */
|
||||
export const SELECTION_SHORT: Record<string, string> = {
|
||||
HOME: '主',
|
||||
AWAY: '客',
|
||||
DRAW: '和',
|
||||
OVER: '大',
|
||||
UNDER: '小',
|
||||
ODD: '单',
|
||||
EVEN: '双',
|
||||
};
|
||||
94
apps/player/src/utils/teamFlag.ts
Normal file
94
apps/player/src/utils/teamFlag.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
/** 球队 code / 名称 → ISO 3166-1 alpha-2，用于 flagcdn 国旗图 */
|
||||
const CODE_TO_ISO: Record<string, string> = {
|
||||
MEX: 'mx',
|
||||
USA: 'us',
|
||||
CAN: 'ca',
|
||||
BRA: 'br',
|
||||
ARG: 'ar',
|
||||
ENG: 'gb',
|
||||
MUN: 'gb',
|
||||
CHE: 'gb',
|
||||
LIV: 'gb',
|
||||
MCI: 'gb',
|
||||
CZE: 'cz',
|
||||
KOR: 'kr',
|
||||
BIH: 'ba',
|
||||
PAR: 'py',
|
||||
RSA: 'za',
|
||||
SUI: 'ch',
|
||||
SCO: 'gb-sct',
|
||||
TUR: 'tr',
|
||||
CZE: 'cz',
|
||||
BIH: 'ba',
|
||||
FRA: 'fr',
|
||||
ESP: 'es',
|
||||
ENG: 'gb',
|
||||
GER: 'de',
|
||||
POR: 'pt',
|
||||
NED: 'nl',
|
||||
NOR: 'no',
|
||||
BEL: 'be',
|
||||
COL: 'co',
|
||||
JPN: 'jp',
|
||||
MAR: 'ma',
|
||||
CRO: 'hr',
|
||||
SEN: 'sn',
|
||||
};
|
||||
|
||||
const NAME_TO_ISO: Record<string, string> = {
|
||||
Mexico: 'mx',
|
||||
'South Africa': 'za',
|
||||
'United States': 'us',
|
||||
USA: 'us',
|
||||
Canada: 'ca',
|
||||
Brazil: 'br',
|
||||
Switzerland: 'ch',
|
||||
Scotland: 'gb-sct',
|
||||
Turkey: 'tr',
|
||||
'South Korea': 'kr',
|
||||
Paraguay: 'py',
|
||||
墨西哥: 'mx',
|
||||
美国: 'us',
|
||||
加拿大: 'ca',
|
||||
曼联: 'gb',
|
||||
切尔西: 'gb',
|
||||
墨西哥: 'mx',
|
||||
南非: 'za',
|
||||
捷克: 'cz',
|
||||
韩国: 'kr',
|
||||
波黑: 'ba',
|
||||
巴拉圭: 'py',
|
||||
瑞士: 'ch',
|
||||
巴西: 'br',
|
||||
苏格兰: 'gb-sct',
|
||||
土耳其: 'tr',
|
||||
法国: 'fr',
|
||||
阿根廷: 'ar',
|
||||
法国: 'fr',
|
||||
西班牙: 'es',
|
||||
英格兰: 'gb',
|
||||
德国: 'de',
|
||||
葡萄牙: 'pt',
|
||||
荷兰: 'nl',
|
||||
挪威: 'no',
|
||||
比利时: 'be',
|
||||
哥伦比亚: 'co',
|
||||
日本: 'jp',
|
||||
摩洛哥: 'ma',
|
||||
克罗地亚: 'hr',
|
||||
塞内加尔: 'sn',
|
||||
};
|
||||
|
||||
export function teamFlagUrl(code?: string, name?: string): string {
|
||||
const key = (code ?? '').toUpperCase();
|
||||
if (key && CODE_TO_ISO[key]) {
|
||||
return `https://flagcdn.com/w40/${CODE_TO_ISO[key]}.png`;
|
||||
}
|
||||
if (name && NAME_TO_ISO[name]) {
|
||||
return `https://flagcdn.com/w40/${NAME_TO_ISO[name]}.png`;
|
||||
}
|
||||
if (key.length === 2) {
|
||||
return `https://flagcdn.com/w40/${key.toLowerCase()}.png`;
|
||||
}
|
||||
return '';
|
||||
}
|
||||
@@ -1,66 +1,293 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, computed, onMounted, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { useBetSlipStore } from '../stores/betSlip';
|
||||
import LeagueAccordionItem from '../components/LeagueAccordionItem.vue';
|
||||
import OutrightPanel from '../components/outright/OutrightPanel.vue';
|
||||
import ParlayPanel from '../components/parlay/ParlayPanel.vue';
|
||||
import emptyMatchesImg from '../assets/images/empty-matches.svg';
|
||||
|
||||
const router = useRouter();
|
||||
const matches = ref<Match[]>([]);
|
||||
type MainTab = 'matches' | 'outright' | 'parlay';
|
||||
type TimeTab = 'today' | 'early';
|
||||
|
||||
interface Match {
|
||||
id: string;
|
||||
leagueId?: string;
|
||||
homeTeamName: string;
|
||||
awayTeamName: string;
|
||||
homeTeamCode?: string;
|
||||
awayTeamCode?: string;
|
||||
startTime: string;
|
||||
leagueName: string;
|
||||
markets?: Array<{ marketType: string; selections: Selection[] }>;
|
||||
}
|
||||
|
||||
interface Selection {
|
||||
id: string;
|
||||
selectionCode: string;
|
||||
selectionName: string;
|
||||
odds: string;
|
||||
oddsVersion: string;
|
||||
interface LeagueGroup {
|
||||
leagueId: string;
|
||||
leagueName: string;
|
||||
matches: Match[];
|
||||
}
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const slip = useBetSlipStore();
|
||||
|
||||
const mainTab = ref<MainTab>('matches');
|
||||
const timeTab = ref<TimeTab>('early');
|
||||
const matches = ref<Match[]>([]);
|
||||
const loading = ref(true);
|
||||
const expandedLeagues = ref<Set<string>>(new Set());
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await api.get('/player/matches');
|
||||
matches.value = data.data;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/matches');
|
||||
matches.value = data.data ?? [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
function dayStart(d: Date) {
|
||||
const x = new Date(d);
|
||||
x.setHours(0, 0, 0, 0);
|
||||
return x;
|
||||
}
|
||||
|
||||
function isKickoffToday(startTime: string) {
|
||||
const kick = new Date(startTime);
|
||||
const now = new Date();
|
||||
const start = dayStart(now);
|
||||
const end = new Date(start);
|
||||
end.setDate(end.getDate() + 1);
|
||||
return kick >= start && kick < end;
|
||||
}
|
||||
|
||||
const filteredMatches = computed(() => {
|
||||
if (mainTab.value !== 'matches') return [];
|
||||
return matches.value.filter((m) => {
|
||||
const today = isKickoffToday(m.startTime);
|
||||
return timeTab.value === 'today' ? today : !today;
|
||||
});
|
||||
});
|
||||
|
||||
const leagueGroups = computed<LeagueGroup[]>(() => {
|
||||
const map = new Map<string, LeagueGroup>();
|
||||
for (const m of filteredMatches.value) {
|
||||
const id = m.leagueId ?? m.leagueName;
|
||||
if (!map.has(id)) {
|
||||
map.set(id, { leagueId: id, leagueName: m.leagueName, matches: [] });
|
||||
}
|
||||
map.get(id)!.matches.push(m);
|
||||
}
|
||||
return [...map.values()];
|
||||
});
|
||||
|
||||
watch(leagueGroups, (groups) => {
|
||||
const ids = new Set(expandedLeagues.value);
|
||||
for (const id of [...ids]) {
|
||||
if (!groups.some((g) => g.leagueId === id)) ids.delete(id);
|
||||
}
|
||||
if (ids.size !== expandedLeagues.value.size) expandedLeagues.value = ids;
|
||||
});
|
||||
|
||||
function isLeagueExpanded(leagueId: string) {
|
||||
return expandedLeagues.value.has(leagueId);
|
||||
}
|
||||
|
||||
function toggleLeague(leagueId: string) {
|
||||
const next = new Set(expandedLeagues.value);
|
||||
if (next.has(leagueId)) next.delete(leagueId);
|
||||
else next.add(leagueId);
|
||||
expandedLeagues.value = next;
|
||||
}
|
||||
|
||||
function selectMainTab(tab: MainTab) {
|
||||
mainTab.value = tab;
|
||||
}
|
||||
|
||||
function goMatch(id: string) {
|
||||
router.push(`/match/${id}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="title">足球赛事</h2>
|
||||
<div v-for="match in matches" :key="match.id" class="card">
|
||||
<div class="league">{{ match.leagueName }}</div>
|
||||
<div class="teams" @click="goMatch(match.id)">
|
||||
{{ match.homeTeamName }} vs {{ match.awayTeamName }}
|
||||
</div>
|
||||
<div class="time">{{ new Date(match.startTime).toLocaleString() }}</div>
|
||||
|
||||
<div v-if="match.markets?.length" class="odds-row">
|
||||
<template v-for="market in match.markets.filter(m => m.marketType === 'FT_1X2')" :key="market.marketType">
|
||||
<div v-for="sel in market.selections" :key="sel.id" class="odds-btn" @click="goMatch(match.id)">
|
||||
<div class="label">{{ sel.selectionName }}</div>
|
||||
<div class="value">{{ sel.odds }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="bet-page">
|
||||
<div class="main-tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="main-tab"
|
||||
:class="{ active: mainTab === 'matches', 'tab-gold-active': mainTab === 'matches' }"
|
||||
@click="selectMainTab('matches')"
|
||||
>
|
||||
<span class="tab-icon">⚽</span>
|
||||
{{ t('bet.tab_matches') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="main-tab"
|
||||
:class="{ active: mainTab === 'outright', 'tab-gold-active': mainTab === 'outright' }"
|
||||
@click="selectMainTab('outright')"
|
||||
>
|
||||
<span class="tab-icon">🏆</span>
|
||||
{{ t('bet.tab_outright') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="main-tab parlay-tab"
|
||||
:class="{ active: mainTab === 'parlay', 'tab-gold-active': mainTab === 'parlay' }"
|
||||
@click="selectMainTab('parlay')"
|
||||
>
|
||||
<span class="tab-icon">+</span>
|
||||
{{ t('bet.tab_parlay') }}
|
||||
<span v-if="slip.count" class="tab-badge">{{ slip.count }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div v-if="!matches.length" class="empty">暂无赛事</div>
|
||||
|
||||
<template v-if="mainTab === 'matches'">
|
||||
<div class="time-tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="time-tab"
|
||||
:class="{ active: timeTab === 'today', 'tab-gold-active': timeTab === 'today' }"
|
||||
@click="timeTab = 'today'"
|
||||
>
|
||||
{{ t('bet.tab_today') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="time-tab"
|
||||
:class="{ active: timeTab === 'early', 'tab-gold-active': timeTab === 'early' }"
|
||||
@click="timeTab = 'early'"
|
||||
>
|
||||
{{ t('bet.tab_early') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
|
||||
|
||||
<div v-else-if="leagueGroups.length" class="league-list">
|
||||
<LeagueAccordionItem
|
||||
v-for="group in leagueGroups"
|
||||
:key="group.leagueId"
|
||||
:league-id="group.leagueId"
|
||||
:league-name="group.leagueName"
|
||||
:matches="group.matches"
|
||||
:expanded="isLeagueExpanded(group.leagueId)"
|
||||
@toggle="toggleLeague(group.leagueId)"
|
||||
@bet="goMatch"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty">
|
||||
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
|
||||
<p>{{ t('bet.no_matches') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<OutrightPanel v-else-if="mainTab === 'outright'" />
|
||||
|
||||
<ParlayPanel v-else-if="mainTab === 'parlay'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.title { font-size: 18px; margin-bottom: 16px; }
|
||||
.league { font-size: 11px; color: var(--primary); margin-bottom: 4px; }
|
||||
.teams { font-weight: 600; cursor: pointer; margin-bottom: 4px; }
|
||||
.time { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
|
||||
.odds-row { display: flex; gap: 8px; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 40px; }
|
||||
.bet-page {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.main-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.main-tab {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 12px 8px;
|
||||
border-radius: 10px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #2a2a2a;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-tab.active {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tab-badge {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
min-width: 16px;
|
||||
padding: 0 4px;
|
||||
border-radius: 8px;
|
||||
background: #1a1000;
|
||||
color: var(--primary-light);
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.time-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 0 12px 14px;
|
||||
}
|
||||
|
||||
.time-tab {
|
||||
flex: 1;
|
||||
padding: 10px 16px;
|
||||
border-radius: 999px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
background: #141414;
|
||||
border: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
.time-tab.active {
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.league-list {
|
||||
padding: 4px 12px 0;
|
||||
}
|
||||
|
||||
.state,
|
||||
.placeholder,
|
||||
.empty {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 48px 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.parlay-tab.tab-gold-active {
|
||||
flex: 1.15;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,29 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import api from '../api';
|
||||
import emptyMatchesImg from '../assets/images/empty-matches.svg';
|
||||
import BannerCarousel from '../components/BannerCarousel.vue';
|
||||
import { resolveBanners } from '../constants/defaultBanner';
|
||||
|
||||
const router = useRouter();
|
||||
const home = ref<{ banners: unknown[]; hotMatches: Match[]; ticker: unknown[] } | null>(null);
|
||||
const home = ref<{
|
||||
banners: Banner[];
|
||||
hotMatches: Match[];
|
||||
ticker: ContentItem[];
|
||||
notices: ContentItem[];
|
||||
} | null>(null);
|
||||
|
||||
interface ContentItem {
|
||||
translation?: { title?: string; body?: string; imageUrl?: string };
|
||||
}
|
||||
|
||||
interface Banner {
|
||||
id?: string;
|
||||
linkType?: string | null;
|
||||
linkTarget?: string | null;
|
||||
translation?: { title?: string; body?: string; imageUrl?: string };
|
||||
}
|
||||
|
||||
interface Match {
|
||||
id: string;
|
||||
@@ -12,9 +31,10 @@ interface Match {
|
||||
awayTeamName: string;
|
||||
startTime: string;
|
||||
isHot: boolean;
|
||||
markets?: Array<{ marketType: string; selections: Array<{ id: string; selectionName: string; odds: string; oddsVersion: string }> }>;
|
||||
}
|
||||
|
||||
const displayBanners = computed(() => resolveBanners(home.value?.banners));
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await api.get('/player/home');
|
||||
home.value = data.data;
|
||||
@@ -27,13 +47,7 @@ function goMatch(id: string) {
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="home?.banners?.length" class="banner card">
|
||||
{{ (home.banners[0] as { translation?: { title?: string } })?.translation?.title || 'Welcome' }}
|
||||
</div>
|
||||
|
||||
<div v-if="home?.ticker?.length" class="ticker">
|
||||
{{ (home.ticker[0] as { translation?: { body?: string } })?.translation?.body }}
|
||||
</div>
|
||||
<BannerCarousel :banners="displayBanners" />
|
||||
|
||||
<h2 class="section-title">热门赛事</h2>
|
||||
<div v-for="match in home?.hotMatches || []" :key="match.id" class="card match-card" @click="goMatch(match.id)">
|
||||
@@ -41,17 +55,18 @@ function goMatch(id: string) {
|
||||
<div class="match-time">{{ new Date(match.startTime).toLocaleString() }}</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!home?.hotMatches?.length" class="empty">暂无赛事</div>
|
||||
<div v-if="home && !home.hotMatches?.length" class="empty">
|
||||
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
|
||||
<p>暂无赛事</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.banner { background: linear-gradient(135deg, #1a472a, #0f1419); padding: 24px; font-size: 18px; font-weight: 600; }
|
||||
.ticker { background: #243044; padding: 8px 12px; font-size: 12px; margin-bottom: 12px; border-radius: 4px; overflow: hidden; white-space: nowrap; }
|
||||
.section-title { font-size: 16px; margin-bottom: 12px; }
|
||||
.match-card { cursor: pointer; }
|
||||
.match-card:hover { background: var(--bg-hover); }
|
||||
.match-teams { font-weight: 600; margin-bottom: 4px; }
|
||||
.match-time { font-size: 12px; color: var(--text-muted); }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 40px; }
|
||||
.match-card { cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; }
|
||||
.match-card:active { border-color: var(--border-gold-soft); }
|
||||
.match-teams { font-weight: 800; margin-bottom: 8px; font-size: 16px; }
|
||||
.match-time { font-size: 13px; color: var(--text-muted); font-weight: 500; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 40px 20px; font-weight: 600; }
|
||||
.empty-icon { width: 96px; height: 96px; margin-bottom: 14px; }
|
||||
</style>
|
||||
|
||||
@@ -3,16 +3,24 @@ import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import RobotVerify from '../components/RobotVerify.vue';
|
||||
import loginBg from '../assets/images/h5bg.png';
|
||||
|
||||
const { t } = useI18n();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
|
||||
const username = ref('player1');
|
||||
const password = ref('Player@123');
|
||||
const error = ref('');
|
||||
const loading = ref(false);
|
||||
|
||||
async function submit() {
|
||||
if (!captchaRef.value?.validate()) {
|
||||
error.value = t('auth.captcha_wrong');
|
||||
captchaRef.value?.refresh();
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
error.value = '';
|
||||
try {
|
||||
@@ -27,15 +35,15 @@ async function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<img src="/logo.png" alt="TheBet365" class="logo" />
|
||||
<form @submit.prevent="submit" class="login-form">
|
||||
<div class="login-page" :style="{ backgroundImage: `url(${loginBg})` }">
|
||||
<form @submit.prevent="submit" class="login-form ps-gold-frame">
|
||||
<label>{{ t('auth.username') }}</label>
|
||||
<input v-model="username" required />
|
||||
<input v-model="username" class="ps-gold-input" required />
|
||||
<label>{{ t('auth.password') }}</label>
|
||||
<input v-model="password" type="password" required />
|
||||
<input v-model="password" class="ps-gold-input" type="password" required />
|
||||
<RobotVerify ref="captchaRef" />
|
||||
<p v-if="error" class="error">{{ error }}</p>
|
||||
<button type="submit" class="btn-primary" :disabled="loading">
|
||||
<button type="submit" class="btn-login btn-gold-outline" :disabled="loading">
|
||||
{{ t('auth.login') }}
|
||||
</button>
|
||||
</form>
|
||||
@@ -44,11 +52,53 @@ async function submit() {
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
min-height: 100vh; display: flex; flex-direction: column;
|
||||
align-items: center; justify-content: center; padding: 24px;
|
||||
height: 100%;
|
||||
min-height: 100dvh;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 34vh 20px max(28px, env(safe-area-inset-bottom));
|
||||
background-color: var(--tertiary);
|
||||
background-size: cover;
|
||||
background-position: center top;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.btn-login {
|
||||
margin-top: 4px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
.btn-login:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--danger);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.logo { height: 80px; width: auto; margin-bottom: 32px; }
|
||||
.login-form { width: 100%; max-width: 320px; display: flex; flex-direction: column; gap: 12px; }
|
||||
label { font-size: 13px; color: var(--text-muted); }
|
||||
.error { color: var(--danger); font-size: 13px; }
|
||||
</style>
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { useBetSlipStore } from '../stores/betSlip';
|
||||
import { teamFlagUrl } from '../utils/teamFlag';
|
||||
import {
|
||||
FEATURED_MARKET_TYPES,
|
||||
GRID_MARKET_TYPES,
|
||||
MARKET_I18N_KEY,
|
||||
} from '../utils/marketCatalog';
|
||||
import FeaturedMarketRow from '../components/match-detail/FeaturedMarketRow.vue';
|
||||
import MarketTypeTile from '../components/match-detail/MarketTypeTile.vue';
|
||||
import MarketSelectionsPanel from '../components/match-detail/MarketSelectionsPanel.vue';
|
||||
import CorrectScorePanel from '../components/match-detail/CorrectScorePanel.vue';
|
||||
import { isCorrectScoreMarket } from '../utils/correctScoreLayout';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
const slip = useBetSlipStore();
|
||||
const match = ref<MatchDetail | null>(null);
|
||||
|
||||
interface MatchDetail {
|
||||
id: string;
|
||||
homeTeamName: string;
|
||||
awayTeamName: string;
|
||||
startTime: string;
|
||||
markets: Market[];
|
||||
}
|
||||
|
||||
interface Market {
|
||||
id: string;
|
||||
@@ -32,20 +37,137 @@ interface Selection {
|
||||
oddsVersion: string;
|
||||
}
|
||||
|
||||
const marketLabels: Record<string, string> = {
|
||||
FT_1X2: '全场独赢',
|
||||
FT_HANDICAP: '全场让球',
|
||||
FT_OVER_UNDER: '全场大小',
|
||||
FT_ODD_EVEN: '全场单双',
|
||||
HT_1X2: '半场独赢',
|
||||
FT_CORRECT_SCORE: '波胆',
|
||||
};
|
||||
interface MatchDetail {
|
||||
id: string;
|
||||
homeTeamName: string;
|
||||
awayTeamName: string;
|
||||
homeTeamCode?: string;
|
||||
awayTeamCode?: string;
|
||||
startTime: string;
|
||||
markets: Market[];
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await api.get(`/player/matches/${route.params.id}`);
|
||||
match.value = data.data;
|
||||
const match = ref<MatchDetail | null>(null);
|
||||
const loading = ref(true);
|
||||
const expandedKey = ref<string | null>(null);
|
||||
const correctScoreStakes = ref<Record<string, number>>({});
|
||||
const placingCs = ref(false);
|
||||
const csMessage = ref('');
|
||||
|
||||
const marketsByType = computed(() => {
|
||||
const map = new Map<string, Market>();
|
||||
for (const m of match.value?.markets ?? []) {
|
||||
map.set(m.marketType, m);
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
const homeFlag = computed(() =>
|
||||
teamFlagUrl(match.value?.homeTeamCode, match.value?.homeTeamName),
|
||||
);
|
||||
const awayFlag = computed(() =>
|
||||
teamFlagUrl(match.value?.awayTeamCode, match.value?.awayTeamName),
|
||||
);
|
||||
|
||||
const kickoff = computed(() => {
|
||||
if (!match.value) return '';
|
||||
return new Date(match.value.startTime).toLocaleString(locale.value, {
|
||||
day: '2-digit',
|
||||
month: '2-digit',
|
||||
year: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: true,
|
||||
});
|
||||
});
|
||||
|
||||
function marketLabel(marketType: string) {
|
||||
const key = MARKET_I18N_KEY[marketType];
|
||||
return key ? t(key) : marketType;
|
||||
}
|
||||
|
||||
function expandKey(marketType: string) {
|
||||
return marketType;
|
||||
}
|
||||
|
||||
function isExpanded(marketType: string) {
|
||||
return expandedKey.value === expandKey(marketType);
|
||||
}
|
||||
|
||||
function openMarket(marketType: string) {
|
||||
if (!marketsByType.value.has(marketType)) return;
|
||||
expandedKey.value = expandKey(marketType);
|
||||
}
|
||||
|
||||
function closeMarket() {
|
||||
expandedKey.value = null;
|
||||
}
|
||||
|
||||
function clearMarketSlip(marketType: string) {
|
||||
if (!match.value) return;
|
||||
const toRemove = slip.items.filter(
|
||||
(i) => i.matchId === match.value!.id && i.marketType === marketType,
|
||||
);
|
||||
for (const item of toRemove) slip.removeItem(item.selectionId);
|
||||
if (isCorrectScoreMarket(marketType)) {
|
||||
const market = marketsByType.value.get(marketType);
|
||||
if (market) {
|
||||
const next = { ...correctScoreStakes.value };
|
||||
for (const s of market.selections) delete next[s.id];
|
||||
correctScoreStakes.value = next;
|
||||
}
|
||||
}
|
||||
if (expandedKey.value === expandKey(marketType)) expandedKey.value = null;
|
||||
}
|
||||
|
||||
function genRequestId() {
|
||||
return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
|
||||
}
|
||||
|
||||
async function placeCorrectScoreBets(marketType: string) {
|
||||
const market = marketsByType.value.get(marketType);
|
||||
if (!market || !match.value) return;
|
||||
const entries = market.selections.filter((s) => (correctScoreStakes.value[s.id] ?? 0) > 0);
|
||||
if (!entries.length) {
|
||||
csMessage.value = t('bet.cs_stake_required');
|
||||
return;
|
||||
}
|
||||
placingCs.value = true;
|
||||
csMessage.value = '';
|
||||
try {
|
||||
for (const sel of entries) {
|
||||
await api.post('/player/bets/single', {
|
||||
selectionId: sel.id,
|
||||
oddsVersion: String(sel.oddsVersion),
|
||||
stake: correctScoreStakes.value[sel.id],
|
||||
requestId: genRequestId(),
|
||||
});
|
||||
}
|
||||
csMessage.value = t('bet.cs_place_success');
|
||||
const next = { ...correctScoreStakes.value };
|
||||
for (const sel of entries) delete next[sel.id];
|
||||
correctScoreStakes.value = next;
|
||||
} catch (e: unknown) {
|
||||
csMessage.value =
|
||||
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
|
||||
t('bet.cs_place_failed');
|
||||
} finally {
|
||||
placingCs.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function loadMatch() {
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get(`/player/matches/${route.params.id}`);
|
||||
match.value = data.data;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadMatch);
|
||||
|
||||
function isSelected(id: string) {
|
||||
return slip.items.some((i) => i.selectionId === id);
|
||||
}
|
||||
@@ -54,7 +176,7 @@ function toggleSelection(sel: Selection, market: Market) {
|
||||
if (!match.value) return;
|
||||
slip.addItem({
|
||||
selectionId: sel.id,
|
||||
oddsVersion: sel.oddsVersion,
|
||||
oddsVersion: String(sel.oddsVersion),
|
||||
matchId: match.value.id,
|
||||
matchName: `${match.value.homeTeamName} vs ${match.value.awayTeamName}`,
|
||||
selectionName: sel.selectionName,
|
||||
@@ -63,40 +185,226 @@ function toggleSelection(sel: Selection, market: Market) {
|
||||
});
|
||||
}
|
||||
|
||||
const groupedMarkets = computed(() => {
|
||||
if (!match.value) return [];
|
||||
return match.value.markets;
|
||||
});
|
||||
function onPickSelection(selId: string, marketType: string) {
|
||||
const market = marketsByType.value.get(marketType);
|
||||
const sel = market?.selections.find((s) => s.id === selId);
|
||||
if (market && sel) toggleSelection(sel, market);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="match">
|
||||
<div class="match-header card">
|
||||
<h2>{{ match.homeTeamName }} vs {{ match.awayTeamName }}</h2>
|
||||
<p class="time">{{ new Date(match.startTime).toLocaleString() }}</p>
|
||||
</div>
|
||||
|
||||
<div v-for="market in groupedMarkets" :key="market.id" class="card market-group">
|
||||
<h3>{{ marketLabels[market.marketType] || market.marketType }}</h3>
|
||||
<div class="selections">
|
||||
<button
|
||||
v-for="sel in market.selections"
|
||||
:key="sel.id"
|
||||
class="odds-btn"
|
||||
:class="{ selected: isSelected(sel.id) }"
|
||||
@click="toggleSelection(sel, market)"
|
||||
>
|
||||
<div class="label">{{ sel.selectionName }}</div>
|
||||
<div class="value">{{ sel.odds }}</div>
|
||||
<div class="detail-page">
|
||||
<header class="toolbar">
|
||||
<button type="button" class="btn-back btn-gold-outline" @click="router.back()">{{ t('bet.back') }}</button>
|
||||
<div class="toolbar-right">
|
||||
<button type="button" class="btn-tool btn-gold-outline" :aria-label="t('bet.refresh')" @click="loadMatch">
|
||||
↻
|
||||
</button>
|
||||
<button type="button" class="btn-tool btn-gold-outline" :aria-label="t('bet.download')">↓</button>
|
||||
<span class="fifa-badge">FIFA</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
|
||||
|
||||
<template v-else-if="match">
|
||||
<section class="match-hero">
|
||||
<p class="kickoff">{{ kickoff }}</p>
|
||||
<div class="flags-row">
|
||||
<img v-if="homeFlag" :src="homeFlag" alt="" class="flag-lg" />
|
||||
<span class="vs-pill">vs</span>
|
||||
<img v-if="awayFlag" :src="awayFlag" alt="" class="flag-lg" />
|
||||
</div>
|
||||
<div class="teams-row">
|
||||
<span class="team-name">{{ match.homeTeamName }}</span>
|
||||
<span class="vs-text">VS</span>
|
||||
<span class="team-name">{{ match.awayTeamName }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="markets-section">
|
||||
<FeaturedMarketRow
|
||||
v-for="marketType in FEATURED_MARKET_TYPES"
|
||||
:key="marketType"
|
||||
:label="marketLabel(marketType)"
|
||||
:has-market="marketsByType.has(marketType)"
|
||||
:expanded="isExpanded(marketType)"
|
||||
:reward-active="marketsByType.has(marketType)"
|
||||
@bet="isCorrectScoreMarket(marketType) ? placeCorrectScoreBets(marketType) : openMarket(marketType)"
|
||||
@expand="openMarket(marketType)"
|
||||
@collapse="clearMarketSlip(marketType)"
|
||||
>
|
||||
<CorrectScorePanel
|
||||
v-if="marketsByType.get(marketType) && isCorrectScoreMarket(marketType)"
|
||||
:market-type="marketType"
|
||||
:home-team-name="match.homeTeamName"
|
||||
:away-team-name="match.awayTeamName"
|
||||
:selections="marketsByType.get(marketType)!.selections"
|
||||
v-model:stakes="correctScoreStakes"
|
||||
/>
|
||||
<MarketSelectionsPanel
|
||||
v-else-if="marketsByType.get(marketType)"
|
||||
:selections="marketsByType.get(marketType)!.selections"
|
||||
:is-selected="isSelected"
|
||||
@pick="onPickSelection($event, marketType)"
|
||||
/>
|
||||
</FeaturedMarketRow>
|
||||
|
||||
<p v-if="csMessage" class="cs-toast">{{ csMessage }}</p>
|
||||
|
||||
<div class="market-grid">
|
||||
<template v-for="marketType in GRID_MARKET_TYPES" :key="marketType">
|
||||
<MarketTypeTile
|
||||
:label="marketLabel(marketType)"
|
||||
:has-market="marketsByType.has(marketType)"
|
||||
:active="isExpanded(marketType)"
|
||||
@expand="openMarket(marketType)"
|
||||
@collapse="clearMarketSlip(marketType)"
|
||||
/>
|
||||
<MarketSelectionsPanel
|
||||
v-if="isExpanded(marketType) && marketsByType.get(marketType)"
|
||||
class="grid-panel"
|
||||
:selections="marketsByType.get(marketType)!.selections"
|
||||
:is-selected="isSelected"
|
||||
@pick="onPickSelection($event, marketType)"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.match-header h2 { font-size: 18px; margin-bottom: 4px; }
|
||||
.time { color: var(--text-muted); font-size: 13px; }
|
||||
.market-group h3 { font-size: 14px; margin-bottom: 12px; color: var(--text-muted); }
|
||||
.selections { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.detail-page {
|
||||
margin: 0 -16px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px 12px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-back {
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn-tool {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 6px;
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.fifa-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-muted);
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.match-hero {
|
||||
text-align: center;
|
||||
padding: 8px 16px 20px;
|
||||
}
|
||||
|
||||
.kickoff {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--primary-light);
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.flags-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.flag-lg {
|
||||
width: 72px;
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.vs-pill {
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.teams-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
font-size: 22px;
|
||||
font-weight: 900;
|
||||
color: var(--primary-light);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.vs-text {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.markets-section {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.market-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.grid-panel {
|
||||
grid-column: 1 / -1;
|
||||
margin-top: -4px;
|
||||
margin-bottom: 4px;
|
||||
padding: 0 4px 8px;
|
||||
background: #101010;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.state {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cs-toast {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--primary-light);
|
||||
padding: 4px 12px 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,62 +1,59 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
|
||||
|
||||
const bets = ref<{ items: Bet[]; total: number }>({ items: [], total: 0 });
|
||||
const { t } = useI18n();
|
||||
|
||||
interface Bet {
|
||||
betNo: string;
|
||||
betType: string;
|
||||
stake: string;
|
||||
totalOdds: string;
|
||||
potentialReturn: string;
|
||||
actualReturn: string;
|
||||
status: string;
|
||||
placedAt: string;
|
||||
selections: Array<{ selectionNameSnapshot: string; odds: string; resultStatus?: string }>;
|
||||
}
|
||||
const bets = ref<{ items: BetHistoryItem[]; total: number }>({ items: [], total: 0 });
|
||||
const loading = ref(true);
|
||||
|
||||
onMounted(load);
|
||||
|
||||
async function load() {
|
||||
const { data } = await api.get('/player/bets');
|
||||
bets.value = data.data;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get('/player/bets');
|
||||
bets.value = data.data ?? { items: [], total: 0 };
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2>我的投注</h2>
|
||||
<div v-for="bet in bets.items" :key="bet.betNo" class="card bet-card">
|
||||
<div class="bet-header">
|
||||
<span class="bet-no">{{ bet.betNo }}</span>
|
||||
<span :class="['status', bet.status.toLowerCase()]">{{ bet.status }}</span>
|
||||
</div>
|
||||
<div v-for="(sel, i) in bet.selections" :key="i" class="sel">
|
||||
{{ sel.selectionNameSnapshot }} @ {{ sel.odds }}
|
||||
<span v-if="sel.resultStatus"> → {{ sel.resultStatus }}</span>
|
||||
</div>
|
||||
<div class="bet-footer">
|
||||
<span>{{ bet.betType }} · 投注 {{ bet.stake }}</span>
|
||||
<span v-if="bet.status === 'WON'">返还 {{ bet.actualReturn }}</span>
|
||||
<span v-else-if="bet.status === 'PENDING'">预计 {{ bet.potentialReturn }}</span>
|
||||
</div>
|
||||
<div class="time">{{ new Date(bet.placedAt).toLocaleString() }}</div>
|
||||
</div>
|
||||
<div v-if="!bets.items.length" class="empty">暂无投注</div>
|
||||
<div class="history-page">
|
||||
<h2 class="page-title">{{ t('nav.bet_history') }}</h2>
|
||||
|
||||
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
|
||||
|
||||
<template v-else-if="bets.items.length">
|
||||
<BetHistoryCard v-for="bet in bets.items" :key="bet.betNo" :bet="bet" />
|
||||
</template>
|
||||
|
||||
<div v-else class="state">{{ t('history.empty') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h2 { margin-bottom: 16px; }
|
||||
.bet-header { display: flex; justify-content: space-between; margin-bottom: 8px; }
|
||||
.bet-no { font-size: 12px; color: var(--text-muted); }
|
||||
.status { font-size: 12px; font-weight: 600; }
|
||||
.status.pending { color: #ff9800; }
|
||||
.status.won { color: var(--primary); }
|
||||
.status.lost { color: var(--danger); }
|
||||
.sel { font-size: 13px; margin-bottom: 4px; }
|
||||
.bet-footer { font-size: 13px; margin-top: 8px; display: flex; justify-content: space-between; }
|
||||
.time { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 40px; }
|
||||
.history-page {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: var(--text);
|
||||
margin-bottom: 16px;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.state {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
padding: 56px 20px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
||||
271
apps/player/src/views/ProfileEditView.vue
Normal file
271
apps/player/src/views/ProfileEditView.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
|
||||
const username = ref('');
|
||||
const phone = ref('');
|
||||
const email = ref('');
|
||||
const oldPassword = ref('');
|
||||
const newPassword = ref('');
|
||||
const confirmPassword = ref('');
|
||||
const message = ref('');
|
||||
const error = ref('');
|
||||
const saving = ref(false);
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await api.get('/player/profile');
|
||||
const user = data.data;
|
||||
username.value = user?.username ?? '';
|
||||
phone.value = user?.preferences?.phone ?? '';
|
||||
email.value = user?.preferences?.email ?? '';
|
||||
});
|
||||
|
||||
function wantsPasswordChange() {
|
||||
return !!(oldPassword.value || newPassword.value || confirmPassword.value);
|
||||
}
|
||||
|
||||
async function saveAll() {
|
||||
error.value = '';
|
||||
message.value = '';
|
||||
|
||||
if (wantsPasswordChange()) {
|
||||
if (!oldPassword.value || !newPassword.value || !confirmPassword.value) {
|
||||
error.value = t('profile.password_incomplete');
|
||||
return;
|
||||
}
|
||||
if (newPassword.value !== confirmPassword.value) {
|
||||
error.value = t('profile.password_mismatch');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
saving.value = true;
|
||||
const parts: string[] = [];
|
||||
|
||||
try {
|
||||
await api.patch('/player/profile', {
|
||||
phone: phone.value.trim() || undefined,
|
||||
email: email.value.trim() || undefined,
|
||||
});
|
||||
parts.push(t('profile.saved'));
|
||||
} catch (e: unknown) {
|
||||
error.value =
|
||||
(e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
|
||||
t('profile.save_failed');
|
||||
saving.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
if (wantsPasswordChange()) {
|
||||
try {
|
||||
await api.post('/player/auth/change-password', {
|
||||
oldPassword: oldPassword.value,
|
||||
newPassword: newPassword.value,
|
||||
});
|
||||
oldPassword.value = '';
|
||||
newPassword.value = '';
|
||||
confirmPassword.value = '';
|
||||
parts.push(t('profile.password_changed'));
|
||||
} catch (e: unknown) {
|
||||
error.value =
|
||||
(e as { response?: { data?: { message?: string } } })?.response?.data?.message ||
|
||||
t('profile.password_failed');
|
||||
saving.value = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
message.value = parts.join(' · ');
|
||||
saving.value = false;
|
||||
}
|
||||
|
||||
function back() {
|
||||
router.push('/profile');
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="edit-page">
|
||||
<header class="page-head">
|
||||
<button type="button" class="back-btn" @click="back">← {{ t('profile.back') }}</button>
|
||||
<h2 class="page-title">{{ t('profile.edit') }}</h2>
|
||||
</header>
|
||||
|
||||
<form class="form-card" @submit.prevent="saveAll">
|
||||
<div class="field">
|
||||
<label>{{ t('auth.username') }}</label>
|
||||
<input :value="username" class="readonly" disabled />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ t('profile.phone') }}</label>
|
||||
<input v-model="phone" type="tel" class="field-input" :placeholder="t('profile.phone_placeholder')" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ t('profile.email') }}</label>
|
||||
<input v-model="email" type="email" class="field-input" :placeholder="t('profile.email_placeholder')" />
|
||||
</div>
|
||||
|
||||
<p class="field-hint">{{ t('profile.password_optional_hint') }}</p>
|
||||
<div class="field">
|
||||
<label>{{ t('profile.old_password') }}</label>
|
||||
<input
|
||||
v-model="oldPassword"
|
||||
type="password"
|
||||
class="field-input"
|
||||
autocomplete="current-password"
|
||||
:placeholder="t('profile.old_password_placeholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ t('profile.new_password') }}</label>
|
||||
<input
|
||||
v-model="newPassword"
|
||||
type="password"
|
||||
class="field-input"
|
||||
autocomplete="new-password"
|
||||
:placeholder="t('profile.new_password_placeholder')"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>{{ t('profile.confirm_password') }}</label>
|
||||
<input
|
||||
v-model="confirmPassword"
|
||||
type="password"
|
||||
class="field-input"
|
||||
autocomplete="new-password"
|
||||
:placeholder="t('profile.confirm_password_placeholder')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-action btn-gold-outline" :disabled="saving">
|
||||
{{ t('profile.save') }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p v-if="message" class="msg ok">{{ message }}</p>
|
||||
<p v-if="error" class="msg err">{{ error }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.edit-page {
|
||||
padding: 8px 0 12px;
|
||||
}
|
||||
|
||||
.page-head {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 6px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
margin: 4px 0 10px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.field-input,
|
||||
.readonly {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 9px 11px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: #0a0a0a;
|
||||
color: var(--text);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--border-gold-soft);
|
||||
box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
|
||||
.field-input:-webkit-autofill,
|
||||
.field-input:-webkit-autofill:hover,
|
||||
.field-input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: var(--text);
|
||||
box-shadow: 0 0 0 1000px #0a0a0a inset;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.field-input::placeholder {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.readonly {
|
||||
opacity: 0.55;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
width: 100%;
|
||||
margin-top: 4px;
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.btn-action:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.msg {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.msg.ok {
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.msg.err {
|
||||
color: var(--danger);
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +1,30 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useRouter, RouterLink } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import api from '../api';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
import LocaleFlag from '../components/LocaleFlag.vue';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
const profile = ref<{ wallet?: { availableBalance: string; frozenBalance: string } } | null>(null);
|
||||
const transactions = ref<unknown[]>([]);
|
||||
const auth = useAuthStore();
|
||||
|
||||
const locales = [
|
||||
{ code: 'zh-CN', label: '中文' },
|
||||
{ code: 'en-US', label: 'EN' },
|
||||
{ code: 'ms-MY', label: 'BM' },
|
||||
] as const;
|
||||
|
||||
const profile = ref<{
|
||||
username?: string;
|
||||
wallet?: { availableBalance: string; frozenBalance: string };
|
||||
} | null>(null);
|
||||
|
||||
onMounted(async () => {
|
||||
const [prof, txns] = await Promise.all([
|
||||
api.get('/player/profile'),
|
||||
api.get('/player/wallet/transactions'),
|
||||
]);
|
||||
profile.value = prof.data.data;
|
||||
transactions.value = txns.data.data.items;
|
||||
const { data } = await api.get('/player/profile');
|
||||
profile.value = data.data;
|
||||
});
|
||||
|
||||
async function changeLocale(code: string) {
|
||||
@@ -33,54 +40,200 @@ function logout() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="card profile-card">
|
||||
<div class="username">{{ auth.user?.username }}</div>
|
||||
<div class="profile-page">
|
||||
<div class="summary-card">
|
||||
<p class="username">{{ profile?.username }}</p>
|
||||
<div class="balance-row">
|
||||
<span>{{ t('wallet.balance') }}</span>
|
||||
<span class="amount">{{ profile?.wallet?.availableBalance ?? '0' }}</span>
|
||||
<span class="balance-label">
|
||||
<LocaleFlag :locale="locale" :size="16" />
|
||||
{{ t('wallet.balance') }}
|
||||
</span>
|
||||
<span class="amount">{{ formatMoney(profile?.wallet?.availableBalance, locale) }}</span>
|
||||
</div>
|
||||
<div class="frozen">冻结: {{ profile?.wallet?.frozenBalance ?? '0' }}</div>
|
||||
<p class="frozen">
|
||||
{{ t('wallet.unsettled') }}: {{ formatMoney(profile?.wallet?.frozenBalance, locale) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>语言</h3>
|
||||
<div class="lang-btns">
|
||||
<button @click="changeLocale('zh-CN')" :class="{ active: locale === 'zh-CN' }">中文</button>
|
||||
<button @click="changeLocale('en-US')" :class="{ active: locale === 'en-US' }">English</button>
|
||||
<button @click="changeLocale('ms-MY')" :class="{ active: locale === 'ms-MY' }">BM</button>
|
||||
</div>
|
||||
</div>
|
||||
<section class="settings-group">
|
||||
<RouterLink to="/profile/edit" class="settings-cell">
|
||||
<span class="cell-label">{{ t('profile.edit') }}</span>
|
||||
<span class="cell-chevron" aria-hidden="true">›</span>
|
||||
</RouterLink>
|
||||
|
||||
<div class="card">
|
||||
<h3>账变记录</h3>
|
||||
<div v-for="tx in transactions as Array<{ transactionType: string; amount: string; createdAt: string }>" :key="(tx as { transactionId?: string }).transactionId" class="tx-row">
|
||||
<span>{{ tx.transactionType }}</span>
|
||||
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">{{ tx.amount }}</span>
|
||||
<span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
|
||||
<div class="settings-cell settings-cell--stack">
|
||||
<div class="cell-head">
|
||||
<span class="cell-label">{{ t('profile.language') }}</span>
|
||||
</div>
|
||||
<div class="lang-segment" role="group" :aria-label="t('profile.language')">
|
||||
<button
|
||||
v-for="item in locales"
|
||||
:key="item.code"
|
||||
type="button"
|
||||
class="lang-opt"
|
||||
:class="{ active: locale === item.code }"
|
||||
@click="changeLocale(item.code)"
|
||||
>
|
||||
<LocaleFlag :locale="item.code" :size="14" />
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button class="btn-logout" @click="logout">退出登录</button>
|
||||
<button type="button" class="logout-btn" @click="logout">
|
||||
{{ t('auth.logout') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.profile-card { margin-bottom: 12px; }
|
||||
.username { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
|
||||
.balance-row { display: flex; justify-content: space-between; font-size: 16px; }
|
||||
.amount { color: #ffd700; font-weight: 700; }
|
||||
.frozen { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
|
||||
h3 { font-size: 14px; margin-bottom: 12px; }
|
||||
.lang-btns { display: flex; gap: 8px; }
|
||||
.lang-btns button {
|
||||
flex: 1; padding: 8px; background: var(--bg-hover); color: #fff;
|
||||
border-radius: 6px; border: 1px solid var(--border);
|
||||
.profile-page {
|
||||
padding: 8px 0 12px;
|
||||
}
|
||||
|
||||
.summary-card {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-light);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.balance-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.balance-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: var(--primary-light);
|
||||
font-weight: 800;
|
||||
font-size: 20px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.frozen {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
margin-top: 6px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.settings-group {
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
background: none;
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.settings-cell:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.settings-cell:active {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.settings-cell--stack {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 12px 16px 14px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.cell-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cell-label {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.cell-chevron {
|
||||
color: var(--text-muted);
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.lang-segment {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.lang-opt {
|
||||
flex: 1;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
min-height: 34px;
|
||||
padding: 0 6px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background: #0a0a0a;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.lang-opt.active {
|
||||
border-color: var(--border-gold-soft);
|
||||
color: var(--primary-light);
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
}
|
||||
|
||||
.logout-btn {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
min-height: 44px;
|
||||
padding: 0 16px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
color: var(--danger);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logout-btn:active {
|
||||
background: rgba(255, 69, 58, 0.08);
|
||||
}
|
||||
.lang-btns button.active { border-color: var(--primary); color: var(--primary); }
|
||||
.tx-row { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
|
||||
.pos { color: var(--primary); }
|
||||
.neg { color: var(--danger); }
|
||||
.tx-time { width: 100%; font-size: 11px; color: var(--text-muted); }
|
||||
.btn-logout { width: 100%; margin-top: 16px; padding: 12px; background: var(--bg-card); color: var(--danger); border-radius: 6px; border: 1px solid var(--border); }
|
||||
</style>
|
||||
|
||||
54
apps/player/src/views/WalletView.vue
Normal file
54
apps/player/src/views/WalletView.vue
Normal file
@@ -0,0 +1,54 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import api from '../api';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
|
||||
const { t, locale } = useI18n();
|
||||
const transactions = ref<
|
||||
Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
|
||||
>([]);
|
||||
|
||||
onMounted(async () => {
|
||||
const { data } = await api.get('/player/wallet/transactions');
|
||||
transactions.value = data.data.items ?? [];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h2 class="section-title">{{ t('nav.wallet') }}</h2>
|
||||
<div v-if="transactions.length" class="card">
|
||||
<div
|
||||
v-for="tx in transactions"
|
||||
:key="tx.transactionId ?? tx.createdAt"
|
||||
class="tx-row"
|
||||
>
|
||||
<span>{{ tx.transactionType }}</span>
|
||||
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
|
||||
{{ formatMoney(tx.amount, locale) }}
|
||||
</span>
|
||||
<span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty">{{ t('wallet.no_records') }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tx-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tx-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
|
||||
.neg { color: var(--danger); font-weight: 700; }
|
||||
.tx-time { width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
|
||||
.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
|
||||
</style>
|
||||
10
apps/player/src/vite-env.d.ts
vendored
10
apps/player/src/vite-env.d.ts
vendored
@@ -3,3 +3,13 @@ declare module '*.vue' {
|
||||
const component: DefineComponent<object, object, unknown>;
|
||||
export default component;
|
||||
}
|
||||
|
||||
declare module '*.svg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.png' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"strict": true,
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
"paths": { "@/*": ["./src/*"] }
|
||||
},
|
||||
|
||||
@@ -4,11 +4,16 @@ import { resolve } from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
resolve: {
|
||||
// 避免删除 src 内过期 .js 后仍优先请求 index.js 导致 404
|
||||
extensions: ['.ts', '.tsx', '.mjs', '.js', '.mts', '.jsx', '.json', '.vue'],
|
||||
},
|
||||
publicDir: resolve(__dirname, '../../packages/shared/public'),
|
||||
server: {
|
||||
port: 5173,
|
||||
proxy: {
|
||||
'/api': { target: 'http://localhost:3000', changeOrigin: true },
|
||||
'/uploads': { target: 'http://localhost:3000', changeOrigin: true },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
||||
<rect width="32" height="32" rx="6" fill="#1a2332"/>
|
||||
<text x="16" y="22" text-anchor="middle" font-family="Arial, Helvetica, sans-serif" font-size="14" font-weight="800" fill="#00a826">T</text>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32">
|
||||
<image xlink:href="/logo.png" width="32" height="32" preserveAspectRatio="xMidYMid meet" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 278 B After Width: | Height: | Size: 205 B |
4
packages/shared/public/flags/cn.svg
Normal file
4
packages/shared/public/flags/cn.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20">
|
||||
<rect width="30" height="20" fill="#DE2910"/>
|
||||
<polygon fill="#FFDE00" points="7,4 8.2,7.5 12,7.5 8.9,9.7 10.1,13.2 7,11 3.9,13.2 5.1,9.7 2,7.5 5.8,7.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 226 B |
8
packages/shared/public/flags/my.svg
Normal file
8
packages/shared/public/flags/my.svg
Normal file
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20">
|
||||
<rect width="30" height="6.67" fill="#CC0001"/>
|
||||
<rect y="6.67" width="30" height="6.66" fill="#FFF"/>
|
||||
<rect y="13.33" width="30" height="6.67" fill="#CC0001"/>
|
||||
<rect width="15" height="10" fill="#010066"/>
|
||||
<circle cx="7.5" cy="6.5" r="2.8" fill="#FFCC00"/>
|
||||
<circle cx="8.2" cy="6.5" r="2.2" fill="#010066"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 388 B |
5
packages/shared/public/flags/us.svg
Normal file
5
packages/shared/public/flags/us.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 20">
|
||||
<rect width="30" height="20" fill="#B22234"/>
|
||||
<path fill="#FFF" d="M0 1.54h30V3.08H0zm0 3.08h30v1.54H0zm0 3.08h30v1.54H0zm0 3.08h30v1.54H0zm0 3.08h30V15.4H0zm0 3.08h30V20H0z"/>
|
||||
<rect width="12" height="10.77" fill="#3C3B6E"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 300 B |
15
packages/shared/public/site.webmanifest
Normal file
15
packages/shared/public/site.webmanifest
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "TheBet365",
|
||||
"short_name": "TheBet365",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/logo.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any"
|
||||
}
|
||||
],
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#000000",
|
||||
"display": "standalone"
|
||||
}
|
||||
14
uploads/banners/hot-matches.svg
Normal file
14
uploads/banners/hot-matches.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 280" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="bg3" x1="750" y1="0" x2="0" y2="280" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#141414"/>
|
||||
<stop offset="1" stop-color="#000"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="750" height="280" fill="url(#bg3)"/>
|
||||
<circle cx="600" cy="140" r="90" fill="#D4AF37" opacity="0.08"/>
|
||||
<text x="40" y="95" font-family="Arial, sans-serif" font-size="36" font-weight="800" fill="#D4AF37">热门赛事</text>
|
||||
<text x="40" y="150" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#FFFFFF">五大联赛 · 天天有球</text>
|
||||
<text x="40" y="195" font-family="Arial, sans-serif" font-size="18" fill="#8E8E93">独赢 · 让球 · 大小 · 串关</text>
|
||||
<rect x="40" y="215" width="120" height="4" fill="#D4AF37" rx="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 873 B |
18
uploads/banners/promo.svg
Normal file
18
uploads/banners/promo.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 280" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="bg2" x1="0" y1="0" x2="750" y2="280" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0A0A0A"/>
|
||||
<stop offset="0.5" stop-color="#1A1208"/>
|
||||
<stop offset="1" stop-color="#000"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gold2" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop stop-color="#F0D875"/>
|
||||
<stop offset="1" stop-color="#D4AF37"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="750" height="280" fill="url(#bg2)"/>
|
||||
<rect x="520" y="40" width="180" height="180" rx="90" stroke="#D4AF37" stroke-width="3" opacity="0.25"/>
|
||||
<text x="40" y="100" font-family="Arial, sans-serif" font-size="38" font-weight="800" fill="url(#gold2)">首存礼遇</text>
|
||||
<text x="40" y="155" font-family="Arial, sans-serif" font-size="22" fill="#F5F5F7">新会员专属 · 限时开放</text>
|
||||
<text x="40" y="200" font-family="Arial, sans-serif" font-size="18" fill="#8E8E93">立即登录参与热门赛事</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
19
uploads/banners/welcome.svg
Normal file
19
uploads/banners/welcome.svg
Normal file
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 750 280" fill="none">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="750" y2="280" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#1A1A1A"/>
|
||||
<stop offset="0.5" stop-color="#252015"/>
|
||||
<stop offset="1" stop-color="#000000"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="gold" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop stop-color="#E8C96A"/>
|
||||
<stop offset="1" stop-color="#D4AF37"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="750" height="280" fill="url(#bg)"/>
|
||||
<circle cx="620" cy="80" r="120" fill="#D4AF37" opacity="0.06"/>
|
||||
<circle cx="680" cy="200" r="80" fill="#D4AF37" opacity="0.08"/>
|
||||
<text x="40" y="110" font-family="Arial, sans-serif" font-size="42" font-weight="800" fill="url(#gold)">TheBet365</text>
|
||||
<text x="40" y="160" font-family="Arial, sans-serif" font-size="22" fill="#8E8E93">足球赛事火热进行中</text>
|
||||
<rect x="40" y="190" width="140" height="4" fill="#D4AF37" opacity="0.5" rx="2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1018 B |
0
uploads/contents/.gitkeep
Normal file
0
uploads/contents/.gitkeep
Normal file
0
uploads/teams/.gitkeep
Normal file
0
uploads/teams/.gitkeep
Normal file
Reference in New Issue
Block a user