og/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 全面重构首页UI，新增侧边栏、动态游戏列表及路单展示，并更新相关API。

Browse Source
This commit is contained in:
li
2026-01-17 19:28:42 +08:00
parent 71def0f3c7
commit 9da637b131
2 changed files with 545 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index.vue
+540 -245
View File
@@ -1,264 +1,559 @@
<template>
<view class="index">
<u-navbar title="" bgColor="#000" :placeholder="true" :fixed="true" leftIcon="" height="60">
<view slot="center">
<u--image :showLoading="false" :src="titlePng" width="350px" height="45px" mode="scaleToFill"
class="ezlogo"></u--image>
<u--image :showLoading="false" :src="require('static/images/service_icon.png')" width="100%"
height="auto" mode="widthFix" class="service_icon" @click="goRouter()"></u--image>
</view>
</u-navbar>
<u-swiper class="swiper" :list="list" bgColor="#000" radius="0" imgMode="scaleToFill" height="39vw"
interval="4000" @tap="goPaht"></u-swiper>
<view style="min-height: 38px">
<u-notice-bar v-if="showNotice" :text="text" bgColor="#252627" color="#eee" speed="40"></u-notice-bar>
</view>
<!-- <u--image :showLoading="false" :src="
require(`static/images/${
language == 'tw' ? 'tw' : 'en'
}_advertisement_v2.jpg`)
" width="100%" height="auto" mode="widthFix" @tap="goPaht('baccarat')"></u--image>
<view style="margin-top: 5px; margin-bottom: 5px">
<u--image :showLoading="false" :src="require('static/images/title-ez.png')" width="100%" height="auto"
mode="widthFix"></u--image>
</view> -->
<view class="triple">
<view class="triple-item">
<img :src="require(`static/images/click.png`)" @click="goPaht('other')" alt="">
<p>{{ $lang.flagshipHall }}</p>
<view class="page-container">
<!-- Top Header Area -->
<view class="top-header">
<image class="header-bg" src="/static/images/login_bg.png" mode="aspectFill"></image>
<view class="status-bar"></view>
<!-- User Info Row -->
<view class="user-bar">
<view class="left-info" @click="goPage('/pages/user/index')">
<u-icon name="arrow-left" color="#f4c46f" size="20" v-if="false"></u-icon>
<view class="user-avatar">
<u-icon name="account-fill" color="#fff" size="24"></u-icon>
</view>
<text class="username">{{ userInfo.username || 'Guest' }}</text>
<view class="balance-pill">
<u-icon name="rmb-circle-fill" color="#f4c46f" size="16"></u-icon>
<text class="balance-text">{{ userInfo.money || '0.00' }}</text>
</view>
</view>
<view class="right-actions">
<u-icon name="server-fill" color="#fff" size="24" @click="goService" style="margin-right: 15px;"></u-icon>
<u-icon name="grid-fill" color="#fff" size="24" @click="goPage('/pages/user/index')"></u-icon>
</view>
</view>
<view class="triple-item">
<img :src="require(`static/images/triple.png`)" @click="goPaht('other')" alt="">
<p>{{ $lang.liveHall }}</p>
</view>
<!--
<view class="triple-item">
<img :src="require(`static/images/triple.png`)" @click="goPaht('triple')" alt="">
<p>{{ $lang.liveHall }}</p>
<!-- Banner Area -->
<view class="banner-area">
<u-swiper :list="bannerList" height="140" radius="8" indicator indicatorMode="line" circular></u-swiper>
</view>
-->
</view>
<view class="list">
<u--image :showLoading="false" :src="require('static/images/game_1.png')" width="100%" height="auto"
mode="widthFix"></u--image>
<view class="box">
<view class="text">{{ $lang.baccarat }}</view>
<view class="text">{{ $lang.niuniu }}</view>
</view>
<view class="left link" @tap="goPaht('baccarat')"></view>
<view class="right link" @tap="goPaht('nn')"></view>
</view>
<view class="list">
<u--image :showLoading="false" :src="require('static/images/game_3.png')" width="100%" height="auto"
mode="widthFix"></u--image>
<view class="box">
<view class="text">{{ $lang.longhu }}</view>
<view class="text">{{ $lang.sedie }}</view>
</view>
<view class="left link" @tap="goPaht('longhu')"></view>
<view class="right link" @tap="goPaht('toning')"></view>
</view>
<view class="list">
<u--image :showLoading="false" :src="require('static/images/game_2.png')" width="100%" height="auto"
mode="widthFix"></u--image>
<view class="box">
<view class="text">{{ $lang.sicbo }}</view>
<view class="text">{{ $lang.threecard }}</view>
</view>
<view class="left link" @tap="goPaht('dice')"></view>
<view class="right link" @tap="goPaht('threecard')"></view>
</view>
<view class="mb10"></view>
<!--
<view class="list" @tap="goPaht('other')">
<u--image
:showLoading="false"
:src="require('static/images/game_4.png')"
width="100%"
height="auto"
mode="widthFix"
></u--image>
<view class="box">
<view class="text">{{ $lang.buyu }}</view>
<view class="text">{{ $lang.qipai }}</view>
</view>
</view>-->
<!--<view class="mb60"></view>-->
<!-- Main Content Layout -->
<view class="main-body">
<!-- Left Sidebar -->
<scroll-view scroll-y class="sidebar">
<view
class="sidebar-item"
v-for="(cat, index) in categories"
:key="index"
:class="{ active: currentCategory === cat.id }"
@click="switchCategory(cat.id)"
>
<view class="icon-box">
<!-- Use local images or u-icons based on category -->
<image :src="cat.icon" mode="widthFix" style="width: 24px; height: 24px;" v-if="cat.icon" />
<u-icon :name="cat.uIcon" color="#ccc" size="28" v-else></u-icon>
</view>
<text class="cat-name">{{ cat.name }}</text>
<text class="cat-count">({{ getCategoryCount(cat.id) }})</text>
</view>
<!-- Online Count Bottom -->
<view class="online-count-box">
<text class="label">在线人数</text>
<text class="count">2506</text>
</view>
</scroll-view>
<!-- <u--image :showLoading="false" :src="
require(`static/images/${language == 'tw' ? 'tw' : 'en'}_slots-ez.png`)
" width="100%" height="auto" mode="widthFix" @tap="goPaht('other')"></u--image> -->
<view class="mb80"></view>
</view>
<!-- Right Content Area -->
<scroll-view scroll-y class="content-area">
<view class="table-list">
<view class="loading-state" v-if="loading">
<u-loading-icon color="#f4c46f" vertical text="Loading..."></u-loading-icon>
</view>
<view
class="game-card"
v-for="(item, index) in filteredTables"
:key="index"
@click="enterGame(item)"
>
<!-- Card Header -->
<view class="card-header">
<view class="header-left">
<text class="table-name">{{ item.table_name }}</text>
</view>
<view class="header-right">
<text class="limit-info">上限:50000 下限:20</text>
<view class="status-dot" :class="{ 'is-live': item.status===1 }"></view>
</view>
</view>
<!-- Roadmap Visualization (Body) -->
<view class="card-body">
<!-- Roadmap Grid (Zhupan / Bead Plate) -->
<!-- Assuming 6 rows x N columns -->
<view class="roadmap-grid">
<!-- Render grid cells -->
<view
v-for="(cell, cIdx) in item.beadRoad"
:key="cIdx"
class="road-cell"
:style="{
left: ((cell.show_x - 1) * cellWidth) + 'px',
top: ((cell.show_y - 1) * cellHeight) + 'px'
}"
:class="getCellClass(cell.result)"
>
<text class="cell-text" v-if="item.game_id !== 4 && item.game_id !== 5">{{ getResultText(cell.result) }}</text>
<!-- NN/ThreeCard specialized display could go here -->
</view>
</view>
<!-- Center Overlay Status -->
<view class="center-overlay" v-if="true">
<view class="status-badge-lg" :class="getStatusClass(item.bet_status)">
<u-icon name="hourglass" size="20" color="#fff" v-if="item.bet_status == 1"></u-icon>
<u-icon name="lock" size="20" color="#fff" v-else-if="item.bet_status == 2"></u-icon>
<u-icon name="play-circle" size="20" color="#fff" v-else></u-icon>
<text class="status-text-lg">
{{ getStatusText(item.bet_status) }}
</text>
<text class="countdown-text" v-if="item.countdown > 0">{{ item.countdown }}s</text>
</view>
</view>
</view>
</view>
<view style="height: 60px;"></view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import {
mapState
} from "vuex";
export default {
data() {
return {
showNotice: true,
};
},
computed: {
...mapState({
language: (state) => state.app.language,
$lang: (state) => state.app.lang[state.app.language],
titlePng: (state) => state.app.titlePng,
userInfo: (state) => state.app.userInfo,
loginType: (state) => state.app.loginType,
customServiceUrl: (state) => state.app.customServiceUrl,
showAd: (state) => {
const userInfo = state.app.userInfo;
let show = false;
if (userInfo.pay_channel) {
show = true;
}
return show;
},
text: (state) => {
let text = "";
const language = state.app.language;
if (language == "cn") {
text =
"首储活动（真人视讯）🔥 新人首存赠【10%】 五倍流水上限【1688】 回存送【5%】 两倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5网页版 正式上线了 欢迎来爆庄哦......首储活动（真人视讯）🔥 新人首存赠【10%】 五倍流水上限【1688】 回存送【5%】 两倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5网页版 正式上线了 欢迎来爆庄哦...";
} else if (language == "tw") {
text =
"首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦......首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦...";
} else if (language == "en") {
text =
"首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦......首儲活動（真人視訊）🔥 新人首存贈【10%】 五倍流水上限【1688】 回存送【5%】 兩倍流水 上限【888】 🔥 ONLINE GAMING 🔥 H5網頁版 正式上線了 歡迎來爆莊哦...";
} else if (language == "kr") {
text =
"존귀한 고객님, ONLINE GAMING 에 오신 것을 환영합니다. 만약 당신이 새로운 게이머라면 애플 자체 브라우저나 구글 브라우저로 우리의 웹 주소를 열고 데스크톱 생성 아이콘을 클릭하면 더 편리한 조작 체험과 시각 효과를 가져다 줄 수 있습니다......귀한 고객🔥 ONLINE GAMING 🔥 H5 웹버전이 정식으로 오픈되었습니다. 폭장에 오신 것을 환영합니다......";
} else if (language == "yn") {
text =
"Chào mừng bạn đến ONLINE GAMING, nếu bạn là người chơi mới, xin vui lòng sử dụng trình duyệt của Apple hoặc Google Explorer để mở địa chỉ web của chúng tôi bằng cách nhấp vào để tạo biểu tượng máy tính để bàn sẽ mang lại cho bạn một kinh nghiệm hoạt động thuận tiện hơn và hiệu ứng hình ảnh.... Quý khách hàng 🔥 ONLINE GAMING 🔥 Trang web H5 chính thức lên mạng, chào mừng đến với trang web bùng nổ......";
}
return text;
},
list: (state) => {
const language = state.app.language;
const lang = (language == "tw" || language == 'cn') ? "tw" : "en";
let list = [
`/static/images/${lang}_banner_ac1.png`,
`/static/images/${lang}_banner_2-ez-v3.png`,
];
return list;
},
}),
},
onShow() {
this.showNotice = false;
if (this.$route.query.logout && this.$route.query.logout == '1') {
localStorage.removeItem("userInfo");
this.$router.replace({
path: "/"
});
}
setTimeout(() => {
this.showNotice = true;
}, 100);
},
methods: {
// this.baseApi
goPaht(type) {
if (type == "other") {
window.location.href =
`${this.$baseApi.gameUrl}/?token=${this.userInfo.api_token}&language=${this.language}#/${type}`;
} else if(type == 'triple'){
window.location.href =
`${this.$baseApi.tripleUrl}/?token=${this.userInfo.api_token}`;
import { mapState } from "vuex";
export default {
data() {
return {
userInfo: {},
bannerList: [
// Using placeholders or static assets
// '/static/images/banner_cn.png',
'https://cdn.uviewui.com/uview/swiper/swiper1.png',
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
],
currentCategory: 0, // 0 = All or default category
categories: [
/*
{ id: 0, name: '国际厅', uIcon: 'grid', gameIds: [1,2,3,4,5] },
{ id: 1, name: '旗舰厅', uIcon: 'star', gameIds: [1] },
*/
// Mapping based on common IDs: 1=Baccarat, 2=DT, 4=Bull, 5=ThreeCard
{ id: 1, name: '百家乐', uIcon: 'chrome-circle-fill', gameIds: [1] },
{ id: 2, name: '龙虎', uIcon: 'heart-fill', gameIds: [2] },
{ id: 4, name: '牛牛', uIcon: 'thumb-up-fill', gameIds: [4] },
// { id: 5, name: '金花/其他', uIcon: 'plus-circle-fill', gameIds: [5] }, // Grouping others
],
allTables: [],
loading: false,
timer: null,
// Roadmap config
cellWidth: 16.5, // slightly adjusted for mobile fit
cellHeight: 17,
};
},
computed: {
...mapState({
storeUserInfo: (state) => state.app.userInfo,
language: (state) => state.app.language,
}),
filteredTables() {
if (!this.allTables.length) return [];
const currentCatParams = this.categories.find(c => c.id === this.currentCategory);
if (!currentCatParams) return this.allTables;
return this.allTables.filter(t => currentCatParams.gameIds.includes(t.game_id));
}
},
onShow() {
// Sync userInfo
this.userInfo = this.storeUserInfo || {};
this.startPolling();
},
onHide() {
this.stopPolling();
},
methods: {
goPage(url) {
uni.navigateTo({ url });
},
goService() {
// Mock service
const url = this.$store.state.app.customServiceUrl;
if(url) window.open(url, '_blank');
},
switchCategory(id) {
this.currentCategory = id;
},
getCategoryCount(id) {
if (!this.allTables) return 0;
const cat = this.categories.find(c => c.id === id);
if (!cat) return 0;
return this.allTables.filter(t => cat.gameIds.includes(t.game_id)).length;
},
startPolling() {
this.loadData();
this.timer = setInterval(() => {
this.loadData();
}, 3000);
},
stopPolling() {
if(this.timer) clearInterval(this.timer);
},
async loadData() {
if(!this.userInfo.id) return;
try {
const res = await this.$api.getAllTable({
user_id: this.userInfo.id,
api_token: this.userInfo.api_token
});
if (res.Success && res.Data) {
this.processData(res.Data);
}
} catch(e) {
console.error(e);
}
else {
window.location.href =
`${this.$baseApi.gameUrl}/?token=${this.userInfo.api_token}&language=${this.language}#/${type}`;
}
},
goRouter() {
let url = this.customServiceUrl + '&visiter_id=' + this.userInfo.username + '&visiter_name=' + this
.userInfo.username;
window.open(url, '_blank');
}
},
};
},
processData(data) {
// Transform data for UI
this.allTables = data.map(item => {
// Extract Bead Road (showRoad usually)
// Note: In helper.php, waybill() returns { showRoad, bigRoad ... }
let beadRoad = [];
if (item.ludan && item.ludan.waybill && item.ludan.waybill.showRoad) {
beadRoad = item.ludan.waybill.showRoad;
}
// Adjust roadmap to keep latest on screen (simple truncation logic for demo)
// Real logic might need scrolling or windowing
// For card display, we usually show last X columns
return {
...item,
beadRoad: beadRoad,
// Mock countdown if not provided
countdown: item.countdown || 15
};
});
},
// Visual Helpers
getCellClass(result) {
// 1=Banker(Red), 2=Player(Blue), 3=Tie(Green)
if (result === 1) return 'cell-red';
if (result === 2) return 'cell-blue';
if (result === 3) return 'cell-green';
return '';
},
getResultText(result) {
if (result === 1) return '庄';
if (result === 2) return '闲';
if (result === 3) return '和';
return '';
},
getStatusClass(status) {
// 1: betting, 2: dealing/disabled
if (status === 1) return 'status-betting';
return 'status-dealing';
},
getStatusText(status) {
if (status === 1) return '下注中';
if (status === 2) return '发牌中';
return '准备中';
},
enterGame(item) {
let type = 'baccarat';
if (item.game_id == 2) type = 'longhu';
if (item.game_id == 4) type = 'nn';
if (item.game_id == 5) type = 'threecard';
window.location.href = `${this.$baseApi.gameUrl}/?token=${this.userInfo.api_token}&language=${this.language}#/${type}`;
}
}
};
</script>
<style lang="scss" scoped>
.index {
.ezlogo {
margin-left: -25px;
}
/* Global Layout */
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: #0c0c0d;
color: #fff;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.service_icon {
width: 26px;
position: absolute;
right: 0;
top: 2px;
margin: 15px 8px;
}
/* Header */
.top-header {
flex-shrink: 0;
position: relative;
/* background-image removed, using image tag instead */
padding-bottom: 5px;
overflow: hidden;
.list {
padding: 5px 5px;
position: relative;
&:last-child {
margin-bottom: 30px;
}
.link {
position: absolute;
width: 50%;
height: 100%;
top: 0;
&.left {
left: 0;
}
&.right {
right: 0;
}
}
.box {
color: #f4c46f;
font-size: medium;
font-weight: 600;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding-top: 5px;
.text {
flex: 1;
text-align: center;
}
}
}
.triple{
display: flex;
text-align: center;
.header-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.status-bar {
height: var(--status-bar-height);
width: 100%;
&-item{
width: 50%;
padding: 2%;
img{
width: 100%;
// height: 110px;
}
p{
color: #fff;
font-weight: bold;
}
position: relative;
z-index: 1;
}
.user-bar {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
.left-info {
display: flex;
align-items: center;
gap: 10px;
.username {
font-size: 14px;
font-weight: bold;
color: #fff;
}
.balance-pill {
background: rgba(0,0,0,0.5);
border: 1px solid #f4c46f;
border-radius: 12px;
padding: 2px 8px;
display: flex;
align-items: center;
gap: 5px;
.balance-text {
color: #f4c46f;
font-size: 12px;
font-weight: bold;
}
}
}
}
}
.banner-area {
position: relative;
z-index: 1;
padding: 5px 10px;
}
}
/* Body Layout */
.main-body {
flex: 1;
display: flex;
overflow: hidden;
/* Sidebar styles */
.sidebar {
width: 80px;
background-color: #161618;
border-right: 1px solid #1f1f1f;
display: flex;
flex-direction: column;
.sidebar-item {
padding: 15px 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-bottom: 1px solid #222;
transition: all 0.3s;
&.active {
background-color: #f4c46f;
.cat-name, .cat-count {
color: #000;
font-weight: bold;
}
// Could change icon color via filter if using svg
}
.icon-box {
margin-bottom: 5px;
}
.cat-name {
font-size: 12px;
color: #999;
margin-bottom: 2px;
}
.cat-count {
font-size: 10px;
color: #666;
}
}
.online-count-box {
margin-top: auto;
padding: 20px 5px;
text-align: center;
.label { font-size: 10px; color: #666; display: block; }
.count { font-size: 14px; color: #f4c46f; font-weight: bold; }
}
}
/* Content styles */
.content-area {
flex: 1;
background-color: #0c0c0d;
padding: 10px;
.game-card {
background-color: #1e1e1e;
border-radius: 6px;
margin-bottom: 12px;
border: 1px solid #333;
overflow: hidden;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
background: #252627;
padding: 5px 10px;
border-bottom: 1px solid #333;
height: 30px;
.table-name {
font-size: 13px;
color: #fff;
font-weight: bold;
}
.header-right {
display: flex;
align-items: center;
gap: 8px;
.limit-info {
font-size: 10px;
color: #999;
}
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: #666;
&.is-live { background-color: #0f0; }
}
}
}
.card-body {
position: relative;
height: 110px; // Fixed height for roadmap
background: #fff; // White background for roadmap grid
.roadmap-grid {
width: 100%;
height: 100%;
position: relative;
// Grid background lines
background-size: 16.5px 17px;
background-image:
linear-gradient(to right, #ccc 1px, transparent 1px),
linear-gradient(to bottom, #ccc 1px, transparent 1px);
.road-cell {
position: absolute;
width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(0,0,0,0.1);
&.cell-red {
background-color: #fff;
border: 2px solid #d0021b;
color: #d0021b;
}
&.cell-blue {
background-color: #fff;
border: 2px solid #4a90e2;
color: #4a90e2;
}
&.cell-green {
background-color: #fff;
border: 2px solid #7ed321;
color: #7ed321;
}
.cell-text {
font-size: 9px;
font-weight: bold;
}
}
}
.center-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.status-badge-lg {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 20px;
background: rgba(0,0,0,0.7);
border-radius: 8px;
// Backdrop gradient
background: radial-gradient(circle, rgba(169,134,60,0.95) 0%, rgba(0,0,0,0.8) 100%);
color: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.5);
width: 100px;
&.status-dealing {
// background: radial-gradient(circle, rgba(200,50,50,0.9) 0%, rgba(0,0,0,0.8) 100%);
}
.status-text-lg {
font-size: 14px;
font-weight: bold;
margin-top: 5px;
text-shadow: 1px 1px 2px #000;
}
.countdown-text {
font-size: 16px;
color: #fff;
margin-top: 2px;
font-family: monospace;
font-weight: bold;
}
}
}
}
}
}
}
</style>
request/api.js
+5 -1
View File
@@ -14,7 +14,7 @@ let api = {
},
// 注册
register: async (params) => {
console.log(params)
console.log(params)
return await ajax.post("/doregister", params);
},
// usdt申请提现
@@ -62,6 +62,10 @@ let api = {
return await ajax.post("/user_money", params);
},
getAllTable: async (params) => {
return await ajax.post("/all_table", params);
},
// --------------- https://qpapi.ez888.net/api/game -------------------
//第三方上分
gameUpper: async (params) => {