outsource/mahjong_group
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改首页

Browse Source
This commit is contained in:
zpc 2025-09-10 23:11:48 +08:00
parent 4b6f7641b6
commit 56f89e9ae2
8 changed files with 471 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
components/index/MahjongCard.vue
View File

@ -1,81 +1,70 @@
<template> <template>
<view class="grid-item" @click="handleCardClick"> <view class="grid" @click="handleCardClick">
<uni-card margin="0px" padding="0px" spacing="0px"> <view class="grid-item">
<view <view style="height: 251rpx;">
style="position:absolute;top:0;right:0;width:100%; background: linear-gradient(to bottom, rgba(255, 108, 0, 0.9), rgba(255, 108, 0, 0.7));box-shadow: 0 2px 8px rgba(235,135,58, 0.3);z-index:999;border-radius:4px 4px 0 0;font-size:24rpx;color:#fff;font-weight: 500; opacity: 0.7;">
<text style="padding-left:10rpx;">{{ item.status }}</text>
</view>
<view class="item-content column">
<!-- 麻将桌区域 -->
<view class="mahjong-table">
<!-- 九宫格布局 -->
<view style="width:300rpx;height: 300rpx;">
<view class="nine-grid-container"> <view class="nine-grid-container">
<!-- 第一行 --> <view></view>
<view class="grid-cell"></view> <view class="item">
<view class="grid-cell" :class="getCellClass(0)"> <view class="item-avatar">
<view v-if="getPlayerAtPosition(0)" class="player-avatar"> <image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
<image :src="getPlayerAtPosition(0).avatar || ''" class="avatar-img"></image> </image>
</view>
<view v-else-if="canJoinAtPosition(0)" class="join-button" @click.stop="handleJoin">
<text class="join-text">+</text>
</view> </view>
</view> </view>
<view class="grid-cell"></view> <view></view>
<view class="item">
<!-- 第二行 --> <view class="item-avatar">
<view class="grid-cell" :class="getCellClass(1)"> <image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
<view v-if="getPlayerAtPosition(1)" class="player-avatar"> </image>
<image :src="getPlayerAtPosition(1).avatar || ''" class="avatar-img"></image>
</view>
<view v-else-if="canJoinAtPosition(1)" class="join-button" @click.stop="handleJoin">
<text class="join-text">+</text>
</view> </view>
</view> </view>
<view class="grid-cell center-cell"> <view></view>
<!-- 麻将桌背景图 --> <view class="item">
<image src="/static/9.png" class="table-bg" mode=""></image> <view class="item-avatar">
</view> <image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
<view class="grid-cell" :class="getCellClass(2)"> </image>
<view v-if="getPlayerAtPosition(2)" class="player-avatar">
<image :src="getPlayerAtPosition(2).avatar || ''" class="avatar-img"></image>
</view>
<view v-else-if="canJoinAtPosition(2)" class="join-button" @click.stop="handleJoin">
<text class="join-text">+</text>
</view> </view>
</view> </view>
<view></view>
<!-- 第三行 --> <view class="item">
<view class="grid-cell"></view> <view class="item-avatar">
<view class="grid-cell" :class="getCellClass(3)"> <image src="@@:app/static/add.png" class="avatar-img" mode="aspectFit">
<view v-if="getPlayerAtPosition(3)" class="player-avatar"> </image>
<image :src="getPlayerAtPosition(3).avatar || ''" class="avatar-img"></image>
</view>
<view v-else-if="canJoinAtPosition(3)" class="join-button" @click.stop="handleJoin">
<text class="join-text">+</text>
</view> </view>
</view> </view>
<view class="grid-cell"></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>
</view> </view>
</view> </view>
<!-- 信息区域 -->
<view class="info-section">
<text class="info-text" style="font-size: 26rpx;font-weight: 600;color: #FA690B;">{{
item.description }}</text>
<text class="info-text" style="margin-top: -7rpx;">{{ item.room }}</text>
<text class="info-text" style="font-size: 22rpx;font-weight: 600;line-height:28rpx;">2025-09-06</text>
<text class="info-text" style="font-size: 22rpx;font-weight: 600;line-height:28rpx;">{{ item.time }}</text>
<text class="info-text" style="color:#FA690B;line-height:30rpx;margin-top:6rpx;">{{ item.requirements }}</text>
</view> </view>
</view> </view>
</uni-card>
</view>
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits, computed } from 'vue' import {
defineProps,
defineEmits,
computed
} from 'vue'
// 定义 props // 定义 props
const props = defineProps({ const props = defineProps({
@ -90,14 +79,12 @@ const props = defineProps({
room: '', room: '',
requirements: '', requirements: '',
personCount: 4, //总人数 personCount: 4, //总人数
joinPerson: [ joinPerson: [{
{
id: 1, id: 1,
name: '张三', name: '张三',
avatar: '', avatar: '',
phone: '', phone: '',
} }], //已加入人
],//已加入人
}) })
} }
}) })
@ -107,7 +94,10 @@ const emit = defineEmits(['click', 'join'])
// 计算属性：获取玩家位置布局 // 计算属性：获取玩家位置布局
const playerPositions = computed(() => { const playerPositions = computed(() => {
const { personCount, joinPerson } = props.item const {
personCount,
joinPerson
} = props.item
const joinedCount = joinPerson.length const joinedCount = joinPerson.length
// 根据总人数确定布局 // 根据总人数确定布局
@ -149,7 +139,10 @@ const getPlayerAtPosition = (position) => {
// 判断指定位置是否可以加入 // 判断指定位置是否可以加入
const canJoinAtPosition = (position) => { const canJoinAtPosition = (position) => {
const { personCount, joinPerson } = props.item const {
personCount,
joinPerson
} = props.item
const joinedCount = joinPerson.length const joinedCount = joinPerson.length
// 如果已满员，不能加入 // 如果已满员，不能加入
@ -183,6 +176,22 @@ const handleJoin = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.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
}
.item-content { .item-content {
height: 540rpx; height: 540rpx;
color: white; color: white;
@ -190,6 +199,20 @@ const handleJoin = () => {
font-size: 32rpx; font-size: 32rpx;
} }
.item {
display: flex;
align-content: center;
justify-content: center;
align-items: center;
}
.item-avatar {
width: 60rpx;
height: 60rpx;
background-color: #60AA72;
border-radius: 50rpx;
}
.mahjong-table { .mahjong-table {
width: 100%; width: 100%;
background-color: #D4D4D4; background-color: #D4D4D4;
@ -214,8 +237,9 @@ const handleJoin = () => {
grid-template-rows: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20rpx;
box-sizing: border-box; box-sizing: border-box;
background: url('@@:app/static/index_logo.png') no-repeat center center;
background-size: 50%;
} }
/* 网格单元格 */ /* 网格单元格 */
@ -266,10 +290,10 @@ const handleJoin = () => {
} }
.avatar-img { .avatar-img {
width: 100%;
height: 100%;
background-color: aqua;
border-radius: 50%; border-radius: 50%;
width: 60rpx;
height: 60rpx;
} }
/* 加入按钮 */ /* 加入按钮 */

8
pages/index/index.vue
View File

@ -4,10 +4,13 @@
<z-paging ref="pagePaging" v-model="dataList" @query="queryList" :refresher-enabled="true" <z-paging ref="pagePaging" v-model="dataList" @query="queryList" :refresher-enabled="true"
:loading-more-enabled="true" :auto="true" :empty-view-text="'暂无麻将局数据'" :empty-view-img="'/static/empty.png'" :loading-more-enabled="true" :auto="true" :empty-view-text="'暂无麻将局数据'" :empty-view-img="'/static/empty.png'"
:refresher-threshold="80" :loading-more-threshold="50" style="flex: 1; width: 95%; margin-top: 10rpx;"> :refresher-threshold="80" :loading-more-threshold="50" style="flex: 1; width: 95%; margin-top: 10rpx;">
<template #top>
<view style="z-index: 100;position: sticky;top :0;"> <view style="z-index: 100;position: sticky;top :0;">
<view :style="{ height: statusBarHeight + 'px' }" style="background-color: #fff;" class="status-bar"> <view :style="{ height: statusBarHeight + 'px' }" style="background-color: #fff;"
class="status-bar">
</view> </view>
</view> </view>
</template>
<view style="z-index: 100;margin-top:10rpx;height:532rpx;"> <view style="z-index: 100;margin-top:10rpx;height:532rpx;">
<view style="width: 100%;width:100%;display:flex;justify-content: center;" <view style="width: 100%;width:100%;display:flex;justify-content: center;"
@ -16,7 +19,8 @@
<swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000"> <swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000">
<swiper-item v-for="(item, index) in homeData.advertList" :key="index"> <swiper-item v-for="(item, index) in homeData.advertList" :key="index">
<image :src="item.imageUrl" mode="scaleToFill" class="slide-img" <image :src="item.imageUrl" mode="scaleToFill" class="slide-img"
style="border-radius:25rpx;"> </image> style="border-radius:25rpx;">
</image>
</swiper-item> </swiper-item>
</swiper> </swiper>
</view> </view>

BIN
static/tabbar/appointment.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
static/tabbar/appointment_s.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
static/tabbar/home.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
static/tabbar/home_s.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
static/tabbar/me.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.5 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/tabbar/me_s.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.6 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB