2323
This commit is contained in:
zpc
parent
56f89e9ae2
commit
429192cdd2
36
common/server/getReservationList.json
Normal file
36
common/server/getReservationList.json
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
{
|
||||
"participants": [
|
||||
{
|
||||
"id": 7,
|
||||
"reservation_id": 3,
|
||||
"user_id": 3796,
|
||||
"role": 1,
|
||||
"join_time": "2025/09/03 04:05:40",
|
||||
"status": 0,
|
||||
"userName": "闪光大帕鲁",
|
||||
"avatarImage": "https://admin-1308826010.cos.ap-shanghai.myqcloud.com/users20250908/20250908152502_6366.png",
|
||||
"userBlackStatus": 0
|
||||
}
|
||||
],
|
||||
"id": 3,
|
||||
"title": "测试1",
|
||||
"room_id": 3,
|
||||
"room_name": "306小包间",
|
||||
"start_time": "2025/09/13 21:09:43",
|
||||
"end_time": "2025/09/13 21:34:43",
|
||||
"duration_minutes": 25,
|
||||
"player_count": 4,
|
||||
"game_type": "扑克",
|
||||
"game_rule": "跑得快",
|
||||
"extra_info": "11", // 备注
|
||||
"is_smoking": 1, //是否禁烟：0=不禁烟，1=禁烟
|
||||
"gender_limit": 2, // 性别限制：0=不限，1=男，2=女
|
||||
"credit_limit": 0, // 最低信誉分
|
||||
"min_age": 0, //最小年龄
|
||||
"max_age": 0, //最大年龄限制，0=不限
|
||||
"deposit_fee": 0, //鸽子费（保证金）
|
||||
"status": 0, //状态：0=待开始，1=进行中，2=已结束，3=取消
|
||||
"created_at": "2025/09/03 00:21:16",
|
||||
"updated_at": "2025/09/03 21:10:21",
|
||||
"remarks": "" // 备注
|
||||
}
|
||||
|
|
@ -4,7 +4,8 @@ import {
|
|||
import {
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
import { getReservationList } from '@/common/server/interface/sq'
|
||||
import { parseTimeString, formatTime, calculateTimeRange } from '@/common/system/timeUtile'
|
||||
// 响应式数据定义
|
||||
// 首页核心数据（banner + 通知）
|
||||
export const homeData = ref(null);
|
||||
|
|
@ -62,5 +63,93 @@ export const preloadHomeData = async () => {
|
|||
|
||||
// 私有工具函数
|
||||
const shouldUseCache = () => {
|
||||
return homeData.value && Date.now() - lastLoadTime < CACHE_TIMEOUT;
|
||||
};
|
||||
return homeData.value && Date.now() - lastLoadTime < CACHE_TIMEOUT;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取预约记录
|
||||
* @param {*} index
|
||||
* @returns
|
||||
*/
|
||||
export const getReservation = async (index = 1, size = 20) => {
|
||||
const res = await getReservationList(index, size);
|
||||
if (res != null && res.length > 0) {
|
||||
// {
|
||||
// id: '',
|
||||
// status: '',
|
||||
// description: '',
|
||||
// time: '',
|
||||
// room: '',
|
||||
// requirements: '',
|
||||
// personCount: 4, //总人数
|
||||
// joinPerson: [{
|
||||
// id: 1,
|
||||
// name: '张三',
|
||||
// avatar: '',
|
||||
// phone: '',
|
||||
// }], //已加入人
|
||||
// }
|
||||
//[{"participants":[{"id":7,"reservation_id":3,"user_id":3796,"role":1,"join_time":"2025/09/03 04:05:40",
|
||||
// "status":0,"userName":"闪光大帕鲁","avatarImage":"https://admin-1308826010.cos.ap-shanghai.myqcloud.com/
|
||||
// users20250908/20250908152502_6366.png","userBlackStatus":0}],
|
||||
// "id":3,"title":"测试1","room_id":3,"room_name":"306小包间",
|
||||
// "start_time":"2025/09/13 21:09:43","end_time":"2025/09/13 21:34:43",
|
||||
// "duration_minutes":25,"player_count":4,"game_type":"扑克","game_rule":"跑得快",
|
||||
// "extra_info":"11","is_smoking":1,"gender_limit":2,"credit_limit":0.0,"min_age":0,"max_age":0,"deposit_fee":0.00,"status":0,"created_at":"2025/09/03 00:21:16","updated_at":"2025/09/03 21:10:21","remarks":""}]
|
||||
console.log("记录", res);
|
||||
var list = res.map(item => {
|
||||
let start_time = parseTimeString(item.start_time);
|
||||
let end_time = parseTimeString(item.end_time);
|
||||
let timeStr = calculateTimeRange(start_time, end_time);
|
||||
let time = formatTime(start_time, "HH:MM") + " ~ " + formatTime(end_time, "HH:MM") + " 共" + timeStr;
|
||||
let requirementsList = [item.game_type, item.game_rule];
|
||||
if (item.is_smoking == 1) {
|
||||
requirementsList.push("禁烟");
|
||||
}
|
||||
if (item.gender_limit == 1) {
|
||||
requirementsList.push("男性");
|
||||
}
|
||||
if (item.gender_limit == 2) {
|
||||
requirementsList.push("女性");
|
||||
}
|
||||
if (item.credit_limit > 0) {
|
||||
requirementsList.push("信誉分≧" + item.credit_limit);
|
||||
}
|
||||
if (item.min_age > 0) {
|
||||
requirementsList.push("最小年龄≧" + item.min_age);
|
||||
}
|
||||
if (item.max_age > 0) {
|
||||
requirementsList.push("最大年龄≦" + item.max_age);
|
||||
}
|
||||
if (item.deposit_fee > 0) {
|
||||
requirementsList.push("鸽子费≧" + item.deposit_fee);
|
||||
}
|
||||
let requirements = requirementsList.join(",");
|
||||
return {
|
||||
id: item.id,
|
||||
status: item.status,
|
||||
description: item.title,
|
||||
dateStr: formatTime(start_time, "yyyy-MM-dd"),
|
||||
time: time,
|
||||
room: item.room_name,
|
||||
requirements: requirements,
|
||||
extra_info: item.extra_info,
|
||||
personCount: item.player_count,
|
||||
joinPerson: item.participants.map(participant => {
|
||||
return {
|
||||
id: participant.id,
|
||||
name: participant.userName,
|
||||
avatar: participant.avatarImage,
|
||||
userBlackStatus: participant.userBlackStatus,
|
||||
joinTime: participant.join_time,
|
||||
role: participant.role,
|
||||
};
|
||||
}),
|
||||
};
|
||||
|
||||
});
|
||||
|
||||
return list;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
|
|
|||
17
common/server/interface/sq.js
Normal file
17
common/server/interface/sq.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import request from '@/common/system/request';
|
||||
|
||||
/**
|
||||
* 获取预约记录
|
||||
* @param {number} index
|
||||
* @param {number} size
|
||||
* @returns
|
||||
*/
|
||||
export const getReservationList = async (index = 1, size = 20) => {
|
||||
console.log('getReservationList', index, size);
|
||||
|
||||
const res = await request.get("sq/GetReservationList", { pageIndex: index, pageSize: size });
|
||||
if (res.code == 0) {
|
||||
return res.data;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
75
common/system/timeUtile.js
Normal file
75
common/system/timeUtile.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
/**
|
||||
* 将时间字符串格式化为时间对象
|
||||
* @param {string} timeStr - 时间字符串，格式：2025/09/03 04:05:40
|
||||
* @returns {Date} 时间对象
|
||||
*/
|
||||
function parseTimeString(timeStr) {
|
||||
// 支持多种分隔符
|
||||
const normalizedStr = timeStr.replace(/[\/\-]/g, '/');
|
||||
return new Date(normalizedStr);
|
||||
}
|
||||
|
||||
/**
|
||||
* 将时间对象格式化为指定格式的字符串
|
||||
* @param {Date} date - 时间对象
|
||||
* @param {string} format - 格式字符串，如：yyyy-mm-dd HH:MM:ss
|
||||
* @returns {string} 格式化后的时间字符串
|
||||
*/
|
||||
function formatTime(date, format) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
|
||||
return format
|
||||
.replace('yyyy', year)
|
||||
.replace('mm', month)
|
||||
.replace('dd', day)
|
||||
.replace('HH', hours)
|
||||
.replace('MM', minutes)
|
||||
.replace('ss', seconds);
|
||||
}
|
||||
|
||||
/**
|
||||
* 计算两个时间对象的时间差（不返回秒）
|
||||
* @param {Date} time1 - 开始时间
|
||||
* @param {Date} time2 - 结束时间
|
||||
* @returns {string} 时间差描述，如：4小时 或 4小时10分钟
|
||||
*/
|
||||
function calculateTimeRange(time1, time2) {
|
||||
// 确保time2晚于time1，否则交换
|
||||
let startTime = time1;
|
||||
let endTime = time2;
|
||||
|
||||
if (time1 > time2) {
|
||||
startTime = time2;
|
||||
endTime = time1;
|
||||
}
|
||||
|
||||
const diffMs = endTime - startTime;
|
||||
const diffMinutes = Math.floor(diffMs / (1000 * 60));
|
||||
const diffHours = Math.floor(diffMinutes / 60);
|
||||
const remainingMinutes = diffMinutes % 60;
|
||||
|
||||
let result = '';
|
||||
|
||||
if (diffHours > 0) {
|
||||
result += `${diffHours}小时`;
|
||||
}
|
||||
|
||||
if (remainingMinutes > 0) {
|
||||
if (result) result += ' ';
|
||||
result += `${remainingMinutes}分钟`;
|
||||
}
|
||||
|
||||
// 如果时间差为0，返回0分钟
|
||||
if (!result) {
|
||||
return '0分钟';
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export { parseTimeString, formatTime, calculateTimeRange }
|
||||
|
|
@ -1,333 +1,417 @@
|
|||
<template>
|
||||
<view class="grid" @click="handleCardClick">
|
||||
<view class="grid-item">
|
||||
<view style="height: 251rpx;">
|
||||
<!-- 麻将桌区域 -->
|
||||
<view class="mahjong-table-section">
|
||||
<!-- 状态标签 -->
|
||||
<view class="status-tag">
|
||||
{{ statusName }}
|
||||
</view>
|
||||
|
||||
<!-- 九宫格麻将桌 -->
|
||||
<view class="nine-grid-container">
|
||||
<view></view>
|
||||
<view class="item">
|
||||
<view class="item-avatar">
|
||||
<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
|
||||
</image>
|
||||
<view v-if="getJoinPlayerAtPosition(1)" class="item-avatar">
|
||||
<image :src="getPlayerAtPosition(0)" class="avatar-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view></view>
|
||||
|
||||
<view class="item">
|
||||
<view class="item-avatar">
|
||||
<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
|
||||
</image>
|
||||
<view v-if="getJoinPlayerAtPosition(2)" class="item-avatar">
|
||||
<image :src="getPlayerAtPosition(1)" class="avatar-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view></view>
|
||||
|
||||
<view class="item">
|
||||
<view class="item-avatar">
|
||||
<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
|
||||
</image>
|
||||
<view v-if="getJoinPlayerAtPosition(3)" class="item-avatar">
|
||||
<image :src="getPlayerAtPosition(2)" class="avatar-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view></view>
|
||||
|
||||
<view class="item">
|
||||
<view class="item-avatar">
|
||||
<image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
|
||||
</image>
|
||||
<view v-if="getJoinPlayerAtPosition(4)" class="item-avatar">
|
||||
<image :src="getPlayerAtPosition(3)" class="avatar-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view></view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 100%;display: flex;align-items: center;justify-content: center;">
|
||||
<view style="width: 90%;">
|
||||
<view
|
||||
style="color: #000000;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 28rpx;text-align: left;font-style: normal;text-transform: none;">
|
||||
{{item.description}}
|
||||
</view>
|
||||
<view
|
||||
style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
|
||||
{{item.time}}
|
||||
</view>
|
||||
<view
|
||||
style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
|
||||
{{item.room}}
|
||||
</view>
|
||||
<view
|
||||
style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 18rpx;color: #575757;text-align: left;font-style: normal;text-transform: none;">
|
||||
{{item.requirements}}
|
||||
</view>
|
||||
|
||||
<!-- 信息区域 -->
|
||||
<view class="info-section">
|
||||
<view class="info-content">
|
||||
<view class="info-title">{{ item.description }}</view>
|
||||
<view class="info-text">{{ item.dateStr }}</view>
|
||||
<view class="info-text">{{ item.time }}</view>
|
||||
<view class="info-text">{{ item.room }}</view>
|
||||
<view class="info-text">{{ item.requirements }}</view>
|
||||
<view class="info-text">{{ item.extra_info }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
defineProps,
|
||||
defineEmits,
|
||||
computed
|
||||
} from 'vue'
|
||||
import { defineProps, defineEmits, computed } from 'vue'
|
||||
|
||||
// 定义 props
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
id: '',
|
||||
status: '',
|
||||
description: '',
|
||||
time: '',
|
||||
room: '',
|
||||
requirements: '',
|
||||
personCount: 4, //总人数
|
||||
joinPerson: [{
|
||||
id: 1,
|
||||
name: '张三',
|
||||
avatar: '',
|
||||
phone: '',
|
||||
}], //已加入人
|
||||
})
|
||||
// ==================== Props 定义 ====================
|
||||
const props = defineProps({
|
||||
item: {
|
||||
type: Object,
|
||||
required: true,
|
||||
default: () => ({
|
||||
id: '',
|
||||
status: '',
|
||||
description: '',
|
||||
dateStr:'',
|
||||
time: '',
|
||||
room: '',
|
||||
requirements: '',
|
||||
extra_info: '',
|
||||
personCount: 4, // 总人数
|
||||
joinPerson: [{
|
||||
id: 1,
|
||||
name: '张三',
|
||||
avatar: '',
|
||||
phone: '',
|
||||
}], // 已加入人员
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// ==================== Emits 定义 ====================
|
||||
const emit = defineEmits(['click', 'join'])
|
||||
|
||||
// ==================== 计算属性 ====================
|
||||
/**
|
||||
* 获取玩家位置布局
|
||||
* 根据总人数确定不同的布局方式
|
||||
*/
|
||||
const playerPositions = computed(() => {
|
||||
const { personCount, joinPerson } = props.item
|
||||
const joinedCount = joinPerson.length
|
||||
|
||||
// 根据总人数确定布局
|
||||
if (personCount === 2) {
|
||||
// 2人局：第二行左边和右边
|
||||
return {
|
||||
positions: [null, joinPerson[0] || null, joinPerson[1] || null, null],
|
||||
joinPositions: [null, !joinPerson[0], !joinPerson[1], null]
|
||||
}
|
||||
})
|
||||
|
||||
// 定义 emits
|
||||
const emit = defineEmits(['click', 'join'])
|
||||
|
||||
// 计算属性：获取玩家位置布局
|
||||
const playerPositions = computed(() => {
|
||||
const {
|
||||
personCount,
|
||||
joinPerson
|
||||
} = props.item
|
||||
const joinedCount = joinPerson.length
|
||||
|
||||
// 根据总人数确定布局
|
||||
if (personCount === 2) {
|
||||
// 2人局：第二行左边和右边
|
||||
return {
|
||||
positions: [null, joinPerson[0] || null, joinPerson[1] || null, null],
|
||||
joinPositions: [null, !joinPerson[0], !joinPerson[1], null]
|
||||
}
|
||||
} else if (personCount === 3) {
|
||||
// 3人局：第一行中间、第二行左边和右边
|
||||
return {
|
||||
positions: [joinPerson[2] || null, joinPerson[0] || null, joinPerson[1] || null, null],
|
||||
joinPositions: [!joinPerson[2], !joinPerson[0], !joinPerson[1], null]
|
||||
}
|
||||
} else {
|
||||
// 4人局：标准布局（上、左、右、下）
|
||||
return {
|
||||
positions: [
|
||||
joinPerson[2] || null, // 第一行中间
|
||||
joinPerson[0] || null, // 第二行左边
|
||||
joinPerson[1] || null, // 第二行右边
|
||||
joinPerson[3] || null // 第三行中间
|
||||
],
|
||||
joinPositions: [
|
||||
!joinPerson[2], // 第一行中间
|
||||
!joinPerson[0], // 第二行左边
|
||||
!joinPerson[1], // 第二行右边
|
||||
!joinPerson[3] // 第三行中间
|
||||
]
|
||||
}
|
||||
} else if (personCount === 3) {
|
||||
// 3人局：第一行中间、第二行左边和右边
|
||||
return {
|
||||
positions: [joinPerson[2] || null, joinPerson[0] || null, joinPerson[1] || null, null],
|
||||
joinPositions: [!joinPerson[2], !joinPerson[0], !joinPerson[1], null]
|
||||
}
|
||||
})
|
||||
|
||||
// 获取指定位置的玩家
|
||||
const getPlayerAtPosition = (position) => {
|
||||
return playerPositions.value.positions[position]
|
||||
}
|
||||
|
||||
// 判断指定位置是否可以加入
|
||||
const canJoinAtPosition = (position) => {
|
||||
const {
|
||||
personCount,
|
||||
joinPerson
|
||||
} = props.item
|
||||
const joinedCount = joinPerson.length
|
||||
|
||||
// 如果已满员，不能加入
|
||||
if (joinedCount >= personCount) {
|
||||
return false
|
||||
} else {
|
||||
// 4人局：标准布局（上、左、右、下）
|
||||
return {
|
||||
positions: [
|
||||
joinPerson[2] || null, // 第一行中间
|
||||
joinPerson[0] || null, // 第二行左边
|
||||
joinPerson[1] || null, // 第二行右边
|
||||
joinPerson[3] || null // 第三行中间
|
||||
],
|
||||
joinPositions: [
|
||||
!joinPerson[2], // 第一行中间
|
||||
!joinPerson[0], // 第二行左边
|
||||
!joinPerson[1], // 第二行右边
|
||||
!joinPerson[3] // 第三行中间
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 直接使用计算属性中的 joinPositions
|
||||
return playerPositions.value.joinPositions[position]
|
||||
/**
|
||||
* 状态名称计算
|
||||
* 0=待开始，1=进行中，2=已结束，3=取消
|
||||
*/
|
||||
const statusName = computed(() => {
|
||||
const { status, personCount, joinPerson } = props.item
|
||||
const count = joinPerson.length
|
||||
|
||||
if (status === 0) {
|
||||
return personCount === count ? "待开始" : "组局中..."
|
||||
} else if (status === 1) {
|
||||
return "进行中"
|
||||
} else if (status === 2) {
|
||||
return "已结束"
|
||||
} else if (status === 3) {
|
||||
return "取消"
|
||||
}
|
||||
return "其它"
|
||||
})
|
||||
|
||||
// ==================== 方法函数 ====================
|
||||
/**
|
||||
* 获取指定位置的玩家头像
|
||||
* @param {number} position - 位置索引
|
||||
* @returns {string} 头像URL
|
||||
*/
|
||||
const getPlayerAtPosition = (position) => {
|
||||
if (playerPositions.value.positions[position] == null) {
|
||||
return "@@:app/static/add.png"
|
||||
}
|
||||
return playerPositions.value.positions[position].avatar
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断指定位置是否显示玩家
|
||||
* @param {number} index - 位置索引
|
||||
* @returns {boolean} 是否显示
|
||||
*/
|
||||
const getJoinPlayerAtPosition = (index) => {
|
||||
const personCount = props.item.personCount
|
||||
|
||||
if (personCount === 2) {
|
||||
// 2人局：第二行左边和右边
|
||||
return [2, 3].includes(index)
|
||||
} else if (personCount === 3) {
|
||||
// 3人局：第一行中间、第二行左边和右边
|
||||
return [1, 2, 3].includes(index)
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断指定位置是否可以加入
|
||||
* @param {number} position - 位置索引
|
||||
* @returns {boolean} 是否可以加入
|
||||
*/
|
||||
const canJoinAtPosition = (position) => {
|
||||
const { personCount, joinPerson } = props.item
|
||||
const joinedCount = joinPerson.length
|
||||
|
||||
// 如果已满员，不能加入
|
||||
if (joinedCount >= personCount) {
|
||||
return false
|
||||
}
|
||||
|
||||
// 获取单元格样式类
|
||||
const getCellClass = (position) => {
|
||||
if (getPlayerAtPosition(position)) {
|
||||
return 'player-cell'
|
||||
} else if (canJoinAtPosition(position)) {
|
||||
return 'join-cell'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
// 直接使用计算属性中的 joinPositions
|
||||
return playerPositions.value.joinPositions[position]
|
||||
}
|
||||
|
||||
// 处理卡片点击事件
|
||||
const handleCardClick = () => {
|
||||
emit('click', props.item)
|
||||
/**
|
||||
* 获取单元格样式类
|
||||
* @param {number} position - 位置索引
|
||||
* @returns {string} 样式类名
|
||||
*/
|
||||
const getCellClass = (position) => {
|
||||
if (getPlayerAtPosition(position)) {
|
||||
return 'player-cell'
|
||||
} else if (canJoinAtPosition(position)) {
|
||||
return 'join-cell'
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
// 处理加入按钮点击事件
|
||||
const handleJoin = () => {
|
||||
emit('join', props.item)
|
||||
}
|
||||
// ==================== 事件处理 ====================
|
||||
/**
|
||||
* 处理卡片点击事件
|
||||
*/
|
||||
const handleCardClick = () => {
|
||||
emit('click', props.item)
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理加入按钮点击事件
|
||||
*/
|
||||
const handleJoin = () => {
|
||||
emit('join', props.item)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.grid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
// ==================== 主容器样式 ====================
|
||||
.grid {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 320rpx;
|
||||
height: 400rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -4rpx 12rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
|
||||
border-radius: 27rpx 27rpx 27rpx 27rpx;
|
||||
border: 4rpx solid #006C1A
|
||||
}
|
||||
.grid-item {
|
||||
width: 320rpx;
|
||||
height: 460rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -4rpx 12rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
|
||||
border-radius: 27rpx;
|
||||
border: 4rpx solid #006C1A;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
height: 540rpx;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
// ==================== 麻将桌区域样式 ====================
|
||||
.mahjong-table-section {
|
||||
height: 251rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
left: 16rpx;
|
||||
top: 0;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
height: 30rpx;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.item-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #60AA72;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
/* 九宫格容器 */
|
||||
.nine-grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: url('@@:app/static/index_logo.png') no-repeat center center;
|
||||
background-size: 50%;
|
||||
}
|
||||
|
||||
.mahjong-table {
|
||||
width: 100%;
|
||||
background-color: #D4D4D4;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.item {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
position: absolute;
|
||||
left: 15rpx;
|
||||
top: 15rpx;
|
||||
font-size: 16rpx;
|
||||
color: black;
|
||||
z-index: 10;
|
||||
}
|
||||
.item-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: #60AA72;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
/* 九宫格容器 */
|
||||
.nine-grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: 1fr 1fr 1fr;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
background: url('@@:app/static/index_logo.png') no-repeat center center;
|
||||
background-size: 50%;
|
||||
}
|
||||
.avatar-img {
|
||||
border-radius: 50%;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
/* 网格单元格 */
|
||||
.grid-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
// ==================== 信息区域样式 ====================
|
||||
.info-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 玩家头像单元格 */
|
||||
.player-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.info-content {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
/* 中心单元格（麻将桌） */
|
||||
.center-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.info-title {
|
||||
color: #000000;
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* 加入按钮单元格 */
|
||||
.join-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.info-text {
|
||||
font-family: PingFang SC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 20rpx;
|
||||
color: #575757;
|
||||
text-align: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 麻将桌背景图 */
|
||||
.table-bg {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
// ==================== 网格单元格样式 ====================
|
||||
/* 网格单元格 */
|
||||
.grid-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 玩家头像 */
|
||||
.player-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
/* 玩家头像单元格 */
|
||||
.player-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
/* 中心单元格（麻将桌） */
|
||||
.center-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
border-radius: 50%;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
}
|
||||
/* 加入按钮单元格 */
|
||||
.join-cell {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 加入按钮 */
|
||||
.join-button {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
// ==================== 其他组件样式 ====================
|
||||
.item-content {
|
||||
height: 540rpx;
|
||||
color: white;
|
||||
border-radius: 10rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.join-button:hover {
|
||||
transform: scale(1.1);
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.mahjong-table {
|
||||
width: 100%;
|
||||
background-color: #D4D4D4;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.join-text {
|
||||
color: black;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* 麻将桌背景图 */
|
||||
.table-bg {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.info-section {
|
||||
padding: 10rpx;
|
||||
}
|
||||
/* 玩家头像 */
|
||||
.player-avatar {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 24rpx;
|
||||
color: black;
|
||||
display: block;
|
||||
}
|
||||
/* 加入按钮 */
|
||||
.join-button {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.join-button:hover {
|
||||
transform: scale(1.1);
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.join-text {
|
||||
color: black;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -187,7 +187,8 @@ import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
|||
import MahjongCard from '@/components/index/MahjongCard.vue'
|
||||
import {
|
||||
homeData,
|
||||
preloadHomeData
|
||||
preloadHomeData,
|
||||
getReservation
|
||||
} from '@/common/server/index'
|
||||
import {
|
||||
configData,
|
||||
|
|
@ -222,7 +223,7 @@ const userInfo = ref(null)
|
|||
// 初始化模拟数据
|
||||
const initMockData = () => {
|
||||
mockData.value = []
|
||||
for (let i = 1; i <= 50; i++) {
|
||||
for (let i = 1; i <= 20; i++) {
|
||||
// 随机生成不同人数的麻将局
|
||||
const personCount = [2, 3, 4][Math.floor(Math.random() * 3)]
|
||||
const joinedCount = Math.floor(Math.random() * (personCount + 1))
|
||||
|
|
@ -233,7 +234,7 @@ const initMockData = () => {
|
|||
joinPerson.push({
|
||||
id: j + 1,
|
||||
name: `玩家${j + 1}`,
|
||||
avatar: '',
|
||||
avatar: 'https://admin-1308826010.cos.ap-shanghai.myqcloud.com/app/static/userlogo.png',
|
||||
phone: `138****${String(j + 1).padStart(4, '0')}`
|
||||
})
|
||||
}
|
||||
|
|
@ -254,26 +255,15 @@ const initMockData = () => {
|
|||
|
||||
// 分页查询方法
|
||||
const queryList = (pageNo, pageSize) => {
|
||||
console.log(`加载第${pageNo}页，每页${pageSize}条数据`)
|
||||
console.log(`加载第${pageNo}页，每页${pageSize}条数据333`)
|
||||
getReservation(pageNo, pageSize).then(res => {
|
||||
if (res != null && res.length > 0) {
|
||||
pagePaging.value.complete(res)
|
||||
} else {
|
||||
pagePaging.value.complete([])
|
||||
}
|
||||
});
|
||||
|
||||
// 模拟网络请求延迟
|
||||
setTimeout(() => {
|
||||
const startIndex = (pageNo - 1) * pageSize
|
||||
const endIndex = startIndex + pageSize
|
||||
const pageData = mockData.value.slice(startIndex, endIndex)
|
||||
|
||||
// 调用 z-paging 的完成方法
|
||||
pagePaging.value.complete(pageData)
|
||||
|
||||
// 如果是第一页，显示加载完成提示
|
||||
// if (pageNo === 1) {
|
||||
// uni.showToast({
|
||||
// title: '刷新成功',
|
||||
// icon: 'success',
|
||||
// duration: 1500
|
||||
// })
|
||||
// }
|
||||
}, 100) // 模拟1秒网络延迟
|
||||
}
|
||||
|
||||
// 手动刷新
|
||||
|
|
@ -321,12 +311,14 @@ const handleJoin = (item) => {
|
|||
// 生命周期
|
||||
onMounted(() => {
|
||||
// 初始化模拟数据
|
||||
initMockData()
|
||||
|
||||
})
|
||||
|
||||
onLoad(async () => {
|
||||
if (!homeData.value) preloadHomeData();
|
||||
if (!configData.value) preloadConfigData();
|
||||
// initMockData();
|
||||
// initMockData();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user