355 lines
12 KiB
Vue
355 lines
12 KiB
Vue
<template>
|
||
<view class="content">
|
||
|
||
|
||
<!-- 使用 z-paging 组件实现分页功能 -->
|
||
<z-paging ref="paging" v-model="dataList" @query="queryList" :refresher-enabled="true"
|
||
: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;">
|
||
<view style="z-index: 100;position: sticky;top :0;">
|
||
<view class="" style="width: 100%; height: 386rpx; background-color: antiquewhite;">
|
||
<swiper class="img-swiper" :indicator-dots="false" circular autoplay interval="3000">
|
||
<swiper-item v-for="(item, index) in imgList" :key="index">
|
||
<image :src="item" mode="widthFix" class="slide-img"></image>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
<view style="height: 10rpx;background-color: #fff;"></view>
|
||
</view>
|
||
<view class="grid-container">
|
||
<view class="grid-item" v-for="(item, index) in dataList" :key="index" @click="openPop()">
|
||
<view class="item-content column">
|
||
|
||
<view class="center"
|
||
style="width: 100%; height: 400rpx; background-color: #D4D4D4; border-radius: 10rpx 10rpx 0 0; position: relative;">
|
||
|
||
<text
|
||
style="position: absolute; left: 15rpx; top: 15rpx; font-size: 16rpx; color: black;">{{
|
||
item.status }}</text>
|
||
|
||
<image src="/static/9.png" style="width: 100rpx; height: 100rpx; position: absolute;"
|
||
mode=""></image>
|
||
|
||
<view class=""
|
||
style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; top: 50rpx; border-radius: 50%;">
|
||
<image src=""
|
||
style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
|
||
</image>
|
||
</view>
|
||
|
||
<view class=""
|
||
style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; left: 30rpx; border-radius: 50%;">
|
||
<image src=""
|
||
style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
|
||
</image>
|
||
</view>
|
||
|
||
<view class=""
|
||
style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; right: 30rpx; border-radius: 50%;">
|
||
<image src=""
|
||
style="width: 100%; height: 100%; background-color: aqua; border-radius: 50%;">
|
||
</image>
|
||
</view>
|
||
|
||
<view class="center"
|
||
style="width: 60rpx; height: 60rpx; background-color: white; position: absolute; bottom: 50rpx; border-radius: 50%;">
|
||
<!-- <image src="" style="width: 100%; height: 100%; border-radius: 50%;"></image> -->
|
||
<text style="color: black;">+</text>
|
||
</view>
|
||
|
||
|
||
</view>
|
||
|
||
<text style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">{{
|
||
item.description }}</text>
|
||
<text style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">{{
|
||
item.time }}</text>
|
||
<text style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">{{
|
||
item.room }}</text>
|
||
<text style="font-size: 24rpx; color: black; margin-top: 10rpx; margin-left: 10rpx;">{{
|
||
item.requirements }}</text>
|
||
|
||
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
|
||
|
||
<uni-popup ref="cardInfo" type="center">
|
||
|
||
<view class="column center"
|
||
style="width: 680rpx; background-color: white; border-radius: 10rpx; padding: 20rpx;">
|
||
|
||
<text style="">预约信息</text>
|
||
|
||
<view class="column"
|
||
style="width: 100%; height: 180rpx; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx;">
|
||
<view class="row" style="margin-top: 20rpx; align-items: center; margin-left: 20rpx;">
|
||
<text style="font-size: 22rpx;">发起者</text>
|
||
<image src=""
|
||
style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx;"
|
||
mode=""></image>
|
||
<text style="font-size: 20rpx; margin-left: 15rpx;">苏家辉</text>
|
||
</view>
|
||
<view class="row" style="margin-top: 30rpx; align-items: center; margin-left: 20rpx;">
|
||
<text style="font-size: 22rpx;">参与者</text>
|
||
|
||
<view class="row" v-for="(item, index) in 3" :key="index" style="align-items: center;">
|
||
|
||
<view class="" style="position: relative; width: 50rpx; height: 50rpx; display: flex;">
|
||
<image src="" @click="openUserPop()"
|
||
style="width: 50rpx; height: 50rpx; background-color: antiquewhite; border-radius: 50%; margin-left: 20rpx; position: absolute;"
|
||
mode=""></image>
|
||
|
||
<view class="center"
|
||
style="width: 50rpx; height: 20rpx; background-color: #FFB7B7; position: absolute; left: 40%; top: -10rpx;">
|
||
<text style="font-size: 10rpx;">黑名单</text>
|
||
</view>
|
||
</view>
|
||
|
||
<text
|
||
style="font-size: 20rpx; margin-left: 30rpx; width: 100rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">树下的胖子</text>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
<view class="column"
|
||
style="width: 100%; height: 180rpx; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx;font-size: 22rpx;">
|
||
|
||
<view class="row" style="justify-content: space-between; margin: 20rpx;">
|
||
<text>开始时间</text>
|
||
<text>2025/08/27 15：30</text>
|
||
</view>
|
||
<view class="row" style="justify-content: space-between; margin: 0 20rpx; 0">
|
||
<text>结束时间</text>
|
||
<text>2025/08/27 17：30</text>
|
||
</view>
|
||
|
||
<text style="margin: 30rpx 20rpx; 0">合计：2小时</text>
|
||
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">房间号：304号-大包，30元/小时</text>
|
||
<text style="margin: 10rpx 20rpx;">人数：3人</text>
|
||
<text style="margin: 10rpx 20rpx;">玩法类型：扑克</text>
|
||
<text style="margin: 10rpx 20rpx;">具体规则：斗地主</text>
|
||
<text style="margin: 10rpx 20rpx 20rpx;">补充信息：无</text>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">是否禁烟：禁烟</text>
|
||
<text style="margin: 10rpx 20rpx;">性别：不限</text>
|
||
<text style="margin: 10rpx 20rpx 20rpx;">信誉：≧4.0</text>
|
||
</view>
|
||
|
||
<view class="column"
|
||
style="width: 100%; background-color: #E3E2E2; margin-top: 20rpx; border-radius: 10rpx; font-size: 22rpx;">
|
||
<text style="margin: 20rpx 20rpx 10rpx; font-size: 24rpx;">鸽子费：0元</text>
|
||
<text
|
||
style="margin: 10rpx 20rpx 20rpx; color: #9F9F9F;">组局成功后若有牌友未赴约，其鸽子费平均分给其他牌友。组局成功或失败后鸽子费将全额返还。</text>
|
||
</view>
|
||
|
||
<view class="row" style="width: 100%; margin-top: 30rpx;">
|
||
<view class="center" @click="clasePop()"
|
||
style="height: 80rpx; flex: 1; background-color: #9F9F9F; border-radius: 10rpx;">
|
||
<text style="font-size: 24rpx; font-weight: 600; color: white;">关闭</text>
|
||
</view>
|
||
<view class="center"
|
||
style="height: 80rpx; flex: 3; background-color: #1989FA; border-radius: 10rpx; margin-left: 20rpx;">
|
||
<text style="font-size: 24rpx; font-weight: 600; color: white;">参与组局</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
|
||
|
||
|
||
<uni-popup ref="userInfo" type="center">
|
||
|
||
<view class="column" style="width: 500rpx; background-color: white; padding: 20rpx;">
|
||
|
||
<image @click="closeUserPop()" src="/static/ic_close.png"
|
||
style="width: 20rpx; height: 20rpx; margin-left: auto;" mode="">
|
||
</image>
|
||
|
||
<view class="row" style="align-items: center;">
|
||
|
||
<image src="" style="width: 80rpx; height: 80rpx; background-color: aquamarine; border-radius: 50%;"
|
||
mode="">
|
||
</image>
|
||
|
||
<view class="column" style="font-size: 24rpx; margin-left: 20rpx;">
|
||
|
||
<text>树下的胖子</text>
|
||
<text style="margin-top: 10rpx;">男，30岁，已参与20次，信誉5.0</text>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx;">
|
||
<text style="font-size: 24rpx;">Ta的评分 </text>
|
||
<text style="font-size: 40rpx; color: #ED3535; margin-left: 10rpx;">4.6</text>
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx;">
|
||
<text style="font-size: 24rpx;">牌品</text>
|
||
<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="rateValue" @change="onChange" />
|
||
</view>
|
||
|
||
<view class="row" style="align-items: center; margin-top: 20rpx;">
|
||
<text style="font-size: 24rpx;">牌技</text>
|
||
<uni-rate style="margin-left: 20rpx;" :readonly="true" v-model="rateValue" @change="onChange" />
|
||
</view>
|
||
|
||
<text style="font-size: 24rpx; margin-top: 20rpx;">鸽子数 0次</text>
|
||
|
||
|
||
</view>
|
||
|
||
</uni-popup>
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, onMounted } from 'vue'
|
||
import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
||
|
||
// 响应式数据
|
||
const title = ref('Hello')
|
||
const imgList = ref([1, 2, 3, 4, 5])
|
||
const dataList = ref([]) // 分页数据列表
|
||
const rateValue = ref(3.5)
|
||
const mockData = ref([]) // 模拟数据源
|
||
|
||
// 组件引用
|
||
const paging = ref(null)
|
||
const cardInfo = ref(null)
|
||
const userInfo = ref(null)
|
||
|
||
// 初始化模拟数据
|
||
const initMockData = () => {
|
||
mockData.value = []
|
||
for (let i = 1; i <= 50; i++) {
|
||
mockData.value.push({
|
||
id: i,
|
||
title: `麻将局 ${i}`,
|
||
status: '组局中',
|
||
time: '20：00 ~ 04：30 共8小时30分钟',
|
||
room: '304包厢-大包，4人',
|
||
description: '休闲局，随便来',
|
||
requirements: '不可吸烟、性别不限、信誉≧4.0'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 分页查询方法
|
||
const queryList = (pageNo, pageSize) => {
|
||
console.log(`加载第${pageNo}页，每页${pageSize}条数据`)
|
||
|
||
// 模拟网络请求延迟
|
||
setTimeout(() => {
|
||
const startIndex = (pageNo - 1) * pageSize
|
||
const endIndex = startIndex + pageSize
|
||
const pageData = mockData.value.slice(startIndex, endIndex)
|
||
|
||
// 调用 z-paging 的完成方法
|
||
paging.value.complete(pageData)
|
||
|
||
// 如果是第一页，显示加载完成提示
|
||
if (pageNo === 1) {
|
||
uni.showToast({
|
||
title: '刷新成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
}
|
||
}, 100) // 模拟1秒网络延迟
|
||
}
|
||
|
||
// 手动刷新
|
||
const refreshData = () => {
|
||
paging.value.reload()
|
||
}
|
||
|
||
// 清空数据
|
||
const clearData = () => {
|
||
paging.value.clear()
|
||
}
|
||
|
||
// 弹窗相关方法
|
||
const openPop = () => {
|
||
cardInfo.value.open()
|
||
}
|
||
|
||
const clasePop = () => {
|
||
cardInfo.value.close()
|
||
}
|
||
|
||
const openUserPop = () => {
|
||
userInfo.value.open()
|
||
}
|
||
|
||
const closeUserPop = () => {
|
||
userInfo.value.close()
|
||
}
|
||
|
||
const onChange = (e) => {
|
||
console.log('rate发生改变:' + JSON.stringify(e))
|
||
}
|
||
|
||
// 生命周期
|
||
onMounted(() => {
|
||
// 初始化模拟数据
|
||
initMockData()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.img-swiper {
|
||
width: 100%;
|
||
height: 386rpx;
|
||
}
|
||
|
||
.slide-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
background-color: aqua;
|
||
}
|
||
|
||
/* 网格容器 - 2列布局 */
|
||
.grid-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
/* 2列，每列宽度相等 */
|
||
gap: 20rpx;
|
||
/* 网格间距（行列间距相同） */
|
||
padding: 0 10rpx;
|
||
}
|
||
|
||
/* 网格项内容 */
|
||
.item-content {
|
||
height: 630rpx;
|
||
background-color: #E6E6E6;
|
||
color: white;
|
||
border-radius: 10rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
</style> |