87 lines
3.1 KiB
Plaintext
87 lines
3.1 KiB
Plaintext
<!-- 创建房间页面 -->
|
||
<custom-navbar title="创建房间" />
|
||
<view class="container" style="margin-top: {{navbarHeight}}px;">
|
||
<view class="form-card">
|
||
<!-- 房间名称 -->
|
||
<view class="form-item">
|
||
<text class="label">房间名称</text>
|
||
<input class="input" placeholder="如：周五麻将局" model:value="{{roomName}}" maxlength="20" />
|
||
</view>
|
||
|
||
<!-- 游戏类型 -->
|
||
<view class="form-item">
|
||
<text class="label">游戏类型</text>
|
||
<view class="game-type-selector">
|
||
<view class="type-option {{gameType === item.value ? 'active' : ''}}"
|
||
wx:for="{{gameTypes}}" wx:key="value"
|
||
data-value="{{item.value}}"
|
||
bindtap="onGameTypeChange">
|
||
{{item.label}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 桌位费 -->
|
||
<view class="form-item">
|
||
<text class="label">桌位费</text>
|
||
<input class="input" type="number" placeholder="默认为0" value="{{tableFee}}" bindinput="onTableFeeInput" />
|
||
</view>
|
||
|
||
<!-- 快捷设置 -->
|
||
<view class="form-item">
|
||
<view class="label-row">
|
||
<text class="label">快捷输入设置</text>
|
||
<text class="label-hint">（进入房间的所有用户将使用此设置）</text>
|
||
</view>
|
||
<view class="quick-settings-list">
|
||
<view class="quick-setting-item" wx:for="{{quickSettings}}" wx:key="index">
|
||
<input class="quick-input" type="digit" placeholder="输入数值" value="{{item}}"
|
||
data-index="{{index}}" bindinput="onQuickSettingInput" />
|
||
<view class="remove-btn" bindtap="removeQuickSetting" data-index="{{index}}">×</view>
|
||
</view>
|
||
<view class="add-btn" bindtap="addQuickSetting">
|
||
<text class="add-icon">+</text>
|
||
<text class="add-text">添加</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<button class="submit-btn" bindtap="createRoom" disabled="{{creating}}">
|
||
{{creating ? '创建中...' : '创建房间'}}
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 创建成功弹出层 -->
|
||
<view class="modal-mask" wx:if="{{showSuccessModal}}" catchtap="closeModal">
|
||
<view class="modal-content" catchtap="stopPropagation">
|
||
<view class="modal-header">
|
||
<view class="success-icon">✓</view>
|
||
<text class="success-title">创建成功！</text>
|
||
</view>
|
||
|
||
<view class="modal-body">
|
||
<view class="code-section">
|
||
<text class="code-label">房间号</text>
|
||
<text class="code-value">{{roomCode}}</text>
|
||
</view>
|
||
|
||
<!-- 二维码区域 -->
|
||
<view class="qrcode-section">
|
||
<image wx:if="{{qrcodeUrl}}" src="{{qrcodeUrl}}" class="qrcode-image" mode="aspectFit"></image>
|
||
<view wx:else class="qrcode-loading">生成中...</view>
|
||
<text class="invite-code">邀请码：{{inviteCode}}</text>
|
||
<button class="copy-btn" bindtap="copyInviteCode">复制</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="modal-footer">
|
||
<button class="footer-btn share-btn" open-type="share">
|
||
<text>分享给好友</text>
|
||
</button>
|
||
<button class="footer-btn enter-btn" bindtap="goToRoom">
|
||
<text>进入房间</text>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view> |