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

33

Browse Source
This commit is contained in:
zpc 2025-09-13 10:43:32 +08:00
parent ea51b8b508
commit 35ee8ea96c
4 changed files with 153 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components.d.ts vendored
View File

@ -10,6 +10,7 @@ declare module 'vue' {
export interface GlobalComponents {
Container: typeof import('./components/com/page/container.vue')['default']
ContainerBase: typeof import('./components/com/page/container-base.vue')['default']
LabelField: typeof import('./components/com/appointment/label-field.vue')['default']
MahjongCard: typeof import('./components/index/MahjongCard.vue')['default']
NoData: typeof import('./components/com/page/no-data.vue')['default']
NoEmpty: typeof import('./components/com/index/NoEmpty.vue')['default']
@ -18,6 +19,7 @@ declare module 'vue' {
ReservationPopup: typeof import('./components/com/index/ReservationPopup.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
TimeSelectCell: typeof import('./components/com/appointment/time-select-cell.vue')['default']
UniNavBar: typeof import('./components/uni-nav-bar/uni-nav-bar.vue')['default']
UniStatusBar: typeof import('./components/uni-nav-bar/uni-status-bar.vue')['default']
}

45
components/com/appointment/label-field.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<view class="label-field">
<view class="spacer-20"></view>
<view class="flex-1">
<text class="label-field__label">{{ label }}</text>
<view class="label-field__body">
<slot />
</view>
</view>
<view class="spacer-20"></view>
</view>
</template>
<script setup>
const props = defineProps({
label: { type: String, default: '' }
})
</script>
<style scoped lang="scss">
.label-field {
width: 100%;
display: flex;
}
.spacer-20 { width: 20rpx; }
.flex-1 { flex: 1; }
.label-field__label {
font-size: 26rpx;
margin-top: 20rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #515151;
text-align: left;
font-style: normal;
text-transform: none;
}
.label-field__body {
width: 100%;
margin-top: 10rpx;
}
</style>

78
components/com/appointment/time-select-cell.vue Normal file
View File

@ -0,0 +1,78 @@
<template>
<view class="row time-row">
<view class="label-wrap">
<text class="label-text">{{ label }}</text>
</view>
<view class="value-wrap">
<view class="cell-box" @click="onSelect">
<view class="content-flex">
<slot />
</view>
<view class="icon-wrap">
<image :src="icon" class="icon-img"></image>
</view>
</view>
</view>
</view>
</template>
<script setup>
const props = defineProps({
label: { type: String, default: '' },
icon: { type: String, default: '' }
})
const emit = defineEmits(['select'])
const onSelect = () => emit('select')
</script>
<style scoped lang="scss">
.time-row {
display: flex;
}
.label-wrap {
width: 130rpx;
line-height: 50rpx;
height: 60rpx;
}
.label-text {
font-size: 28rpx;
color: #515151;
font-weight: 500;
text-transform: none;
font-style: normal;
font-family: PingFang SC, PingFang SC;
}
.value-wrap {
flex: 1;
line-height: 60rpx;
height: 60rpx;
}
.cell-box {
height: 50rpx;
line-height: 50rpx;
border-radius: 15rpx;
border: 2rpx solid #515151;
padding-left: 20rpx;
display: flex;
}
.content-flex {
flex: 1;
}
.icon-wrap {
width: 70rpx;
display: flex;
justify-content: center;
align-items: center;
}
.icon-img {
width: 40rpx;
height: 40rpx;
}
</style>

95
pages/appointment/appointment-page.vue
View File

@ -7,46 +7,13 @@
<view class=""
style="width: 90%; background-color: #FFFFFF; border-radius: 10rpx; margin: 30rpx auto 0; display: flex; justify-content: center; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);">
<view class="column" style="width: 95%; margin-bottom: 20rpx; margin-top: 25rpx;">
<view class="row" style="display: flex;">
<view style="width:130rpx;line-height:50rpx;height: 60rpx;">
<text
style="font-size: 28rpx;color: #515151;text-transform:none;font-style: normal;font-family: PingFang SC, PingFang SC;">开始时间</text>
</view>
<view class="" style="flex: 1;line-height: 60rpx;height: 60rpx;">
<view
style="height:50rpx;line-height: 50rpx;border-radius:15rpx;border:2rpx solid #515151;padding-left: 20rpx;display: flex;"
@click="openUpDatesTimePicker()">
<view style="flex: 1;">{{ getDayDescription(startTimeStr) }}</view>
<view style="width:70rpx;display: flex;justify-content: center;align-items: center;">
<image src="@@:app/static/time_start.png" style="width: 40rpx;height: 40rpx;">
</image>
</view>
</view>
</view>
</view>
<time-select-cell label="开始时间" icon="@@:app/static/time_start.png" @select="openUpDatesTimePicker">
{{ getDayDescription(startTimeStr) }}
</time-select-cell>
<view style="height:20rpx;"></view>
<view class="row" style="display: flex;">
<view style="width:130rpx;line-height:50rpx;height: 60rpx;">
<text
style="font-size: 28rpx;color: #515151;text-transform: none;font-style: normal;font-family: PingFang SC, PingFang SC;">结束时间</text>
</view>
<view class="" style="flex: 1;line-height: 60rpx;height: 60rpx;">
<view
style="height:50rpx;line-height: 50rpx;border-radius:15rpx;border:2rpx solid #515151;padding-left: 20rpx;display: flex;"
@click="openUpDatesTimePickerEnd()">
<view style="flex: 1;">{{ getDayDescription(endTimeStr) }}</view>
<view style="width:70rpx;display: flex;justify-content: center;align-items: center;">
<image src="@@:app/static/time_end.png" style="width: 40rpx;height: 40rpx;">
</image>
</view>
</view>
</view>
</view>
<time-select-cell label="结束时间" icon="@@:app/static/time_end.png" @select="openUpDatesTimePickerEnd">
{{ getDayDescription(endTimeStr) }}
</time-select-cell>
</view>
</view>
@ -54,43 +21,34 @@
<view class="column"
style="width: 90%; border-radius: 10rpx; margin: 40rpx auto 0; background-color: #FFFFFF; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.1);">
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">组局名称</text>
<view class=""
style="width: 89%; background-color: white; margin: 20rpx auto 0; height: 70rpx; border-radius: 10rpx; display: flex; align-items: center; padding-left: 20rpx; border: 1rpx solid #515151;">
<input class="uni-input" placeholder="请输入组局名称" style="font-size: 24rpx; width: 100%;" />
</view>
<label-field label="组局名称">
<view class="" style="width:100%;margin-top: 10rpx;">
<input class="uni-input" placeholder="请输入组局名称" style="font-size: 24rpx; width: 89%;" />
</view>
</label-field>
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">房间</text>
<label-field label="房间">
<uni-data-select class="custom-select" v-model="roomValue" :localdata="range" @change="change"></uni-data-select>
</label-field>
<view class="" style="width: 92%; margin: 20rpx auto 0; border-radius: 50rpx;">
<uni-data-select class="custom-select" v-model="roomValue" :localdata="range"
@change="change"></uni-data-select>
</view>
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">人数</text>
<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
<label-field label="人数">
<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
</view>
</label-field>
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">玩法类型</text>
<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
<label-field label="玩法类型">
<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
</view>
</label-field>
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">具体规则</text>
<view class="" style="width: 92%; margin: 20rpx auto 0;border-radius: 50rpx;">
<label-field label="具体规则">
<uni-data-select v-model="peopleValue" :localdata="peopleRange" @change="change"></uni-data-select>
</view>
</label-field>
<text style="font-size: 26rpx; margin-top: 20rpx; margin-left: 20rpx;">其他补充</text>
<view class=""
style="width: 89%; background-color: white; border-radius: 10rpx; margin: 20rpx auto 20rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx; border: 1rpx solid #515151;">
<input class="uni-input" placeholder="请输入补充信息" style="font-size: 24rpx; width: 100%;" />
</view>
<label-field label="其他补充">
<view class="" style="width: 89%; background-color: white; border-radius: 10rpx; height: 70rpx; display: flex; align-items: center; padding-left: 20rpx; border: 1rpx solid #515151;">
<input class="uni-input" placeholder="请输入补充信息" style="font-size: 24rpx; width: 100%;" />
</view>
</label-field>
</view>
@ -204,6 +162,9 @@
import { ref } from 'vue';
import { getDayDescription } from '@/common/system/timeUtile';
import { union } from 'lodash';
import TimeSelectCell from '@/components/com/appointment/time-select-cell.vue'
import LabelField from '@/components/com/appointment/label-field.vue'
const _containerBase = ref(null)
const startTimeStr = ref(0)
const endTimeStr = ref(0)