重构彩票面板：调整按钮布局，恢复购物车（无清空全部按钮），清空选号同步清空购物车
This commit is contained in:
@@ -194,7 +194,7 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{{-- 操作按鈕行（机选 + 清除 + 加入购物车） --}}
|
||||
{{-- 操作按钮行（机选1注 + 机选3注 + 清空选号） --}}
|
||||
<div style="display:flex; gap:8px; margin-bottom:12px;">
|
||||
<button @click="doQuickPick(1)"
|
||||
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||||
@@ -202,7 +202,16 @@
|
||||
cursor:pointer; transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.background='#dbeafe'; this.style.borderColor='#93c5fd'"
|
||||
onmouseout="this.style.background='#f0f6ff'; this.style.borderColor='#c0d8ef'">
|
||||
<EFBFBD> 机选
|
||||
🎲 机选
|
||||
</button>
|
||||
<button @click="doQuickPick(3)"
|
||||
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||||
background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; border:none;
|
||||
box-shadow:0 3px 10px rgba(217,119,6,.25); cursor:pointer;
|
||||
transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 5px 14px rgba(217,119,6,.35)'"
|
||||
onmouseout="this.style.transform=''; this.style.boxShadow='0 3px 10px rgba(217,119,6,.25)'">
|
||||
🎰 机选 3 注
|
||||
</button>
|
||||
<button type="button" @click.prevent="selectedReds=[]; selectedBlue=null; cart=[];"
|
||||
style="flex:1; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||||
@@ -212,64 +221,58 @@
|
||||
onmouseout="this.style.background='#f9fafb'">
|
||||
🗑 清空选号
|
||||
</button>
|
||||
<button @click="addToCart()" :disabled="selectedReds.length !== 3 || !selectedBlue"
|
||||
style="flex:1.3; padding:10px 0; border-radius:10px; font-size:13px; font-weight:bold;
|
||||
cursor:pointer; transition:all .15s; font-family:inherit; border:none;"
|
||||
:style="selectedReds.length === 3 && selectedBlue ?
|
||||
'background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; box-shadow:0 3px 10px rgba(217,119,6,.3);' :
|
||||
'background:#f3f4f6; color:#9ca3af; cursor:not-allowed;'">
|
||||
＋ 加入购物车
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 购物车（待购清单） --}}
|
||||
<div x-show="cart.length > 0"
|
||||
style="background:#fff7f7; border:1px solid #fecaca; border-radius:8px; padding:10px; margin-bottom:10px;">
|
||||
<div style="font-size:12px; font-weight:bold; color:#b91c1c; margin-bottom:6px;">
|
||||
📋 待购清单（<span x-text="cart.length"></span> 注，
|
||||
💰 <span x-text="cart.length * 100"></span> 金币）
|
||||
</div>
|
||||
<div style="max-height:100px; overflow-y:auto;">
|
||||
<template x-for="(item, idx) in cart" :key="idx">
|
||||
<div
|
||||
style="display:flex; align-items:center; justify-content:space-between;
|
||||
font-size:11px; color:#6b7280; padding:2px 0; border-bottom:1px dashed #fee2e2;">
|
||||
<span>
|
||||
注<span x-text="idx+1"></span>：
|
||||
<template x-for="r in item.reds" :key="r">
|
||||
<span
|
||||
style="display:inline-block; width:20px; height:20px; border-radius:50%; background:#dc2626;
|
||||
color:#fff; font-size:10px; text-align:center; line-height:20px; margin:0 1px;"
|
||||
x-text="String(r).padStart(2,'0')"></span>
|
||||
</template>
|
||||
{{-- 购票结果提示 --}}
|
||||
<div id="lottery-buy-msg"
|
||||
style="display:none; border-radius:8px; padding:8px 12px; text-align:center;
|
||||
margin-bottom:4px; font-size:12px; font-weight:bold;">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- ─── 购物车（待购清单） ─── --}}
|
||||
<div x-show="isOpen && cart.length > 0"
|
||||
style="padding:10px 14px; border-top:1px solid #fee2e2;">
|
||||
<div style="font-size:12px; font-weight:bold; color:#b91c1c; margin-bottom:6px;">
|
||||
🧺 待购清单（<span x-text="cart.length"></span> 注）
|
||||
</div>
|
||||
<div style="max-height:120px; overflow-y:auto;">
|
||||
<template x-for="(item, idx) in cart" :key="idx">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between;
|
||||
font-size:11px; padding:4px 0; border-bottom:1px dashed #fee2e2;">
|
||||
<div style="display:flex; align-items:center; gap:3px;">
|
||||
<span style="color:#9ca3af; min-width:28px;" x-text="'注'+(idx+1)"></span>
|
||||
<template x-for="(r, $ri) in item.reds" :key="$ri">
|
||||
<span
|
||||
style="display:inline-block; width:20px; height:20px; border-radius:50%; background:#2563eb;
|
||||
color:#fff; font-size:10px; text-align:center; line-height:20px; margin-left:4px;"
|
||||
x-text="item.blue"></span>
|
||||
</span>
|
||||
<button @click="cart.splice(idx,1)"
|
||||
style="color:#dc2626; background:none; border:none; cursor:pointer; font-size:12px;">✕</button>
|
||||
style="width:18px; height:18px; border-radius:50%; background:#dc2626;
|
||||
color:#fff; font-size:9px; text-align:center; line-height:18px;"
|
||||
x-text="String(r).padStart(2,'0')"></span>
|
||||
</template>
|
||||
<span
|
||||
style="width:18px; height:18px; border-radius:50%; background:#2563eb;
|
||||
color:#fff; font-size:9px; text-align:center; line-height:18px; margin-left:2px;"
|
||||
x-text="item.blue"></span>
|
||||
<span x-show="item.quick" style="color:#9ca3af; font-size:10px;">机选</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<button @click="submitCart()" :disabled="buying"
|
||||
style="width:100%; border:none; border-radius:12px; padding:13px 0; font-size:14px; font-weight:bold; cursor:pointer; transition:all .2s; font-family:inherit; margin-top:10px;"
|
||||
:style="buying
|
||||
?
|
||||
'background:#e0e8f0; color:#99a8b8; cursor:not-allowed; box-shadow:none;' :
|
||||
'background:linear-gradient(135deg,#dc2626,#e11d48); color:#fff; box-shadow:0 4px 14px rgba(220,38,38,.3);'"
|
||||
onmouseover="if(!this.disabled) this.style.transform='translateY(-1px)'; if(!this.disabled) this.style.boxShadow='0 6px 16px rgba(220,38,38,.4)'"
|
||||
onmouseout="if(!this.disabled) this.style.transform=''; if(!this.disabled) this.style.boxShadow='0 4px 14px rgba(220,38,38,.3)'">
|
||||
<span
|
||||
x-text="buying ? '🔄 提交中…' : '🎟️ 确认购买 ' + cart.length + ' 注（共 ' + (cart.length*100).toLocaleString() + ' 金币）'"></span>
|
||||
</button>
|
||||
{{-- 内联购买结果提示 --}}
|
||||
<div id="lottery-buy-msg"
|
||||
style="display:none; border-radius:8px; padding:8px 12px; text-align:center;
|
||||
margin-top:8px; font-size:12px; font-weight:bold;">
|
||||
</div>
|
||||
{{-- 删除单条 --}}
|
||||
<button @click="cart.splice(idx,1)"
|
||||
style="background:none; border:none; color:#9ca3af; cursor:pointer;
|
||||
font-size:14px; line-height:1; padding:0 2px;"
|
||||
title="移除">×</button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{{-- 确认购买 --}}
|
||||
<button @click="submitCart()"
|
||||
:disabled="buying"
|
||||
style="margin-top:8px; width:100%; padding:10px 0; border-radius:10px; font-size:13px;
|
||||
font-weight:bold; background:linear-gradient(135deg,#dc2626,#b91c1c);
|
||||
color:#fff; border:none; cursor:pointer; transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.opacity='0.88'"
|
||||
onmouseout="this.style.opacity='1'">
|
||||
<span x-text="buying ? '⏳ 购买中…' : '✅ 确认购买（' + cart.length + ' 注）'"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 停售/已开奖时的提示 --}}
|
||||
@@ -360,15 +363,6 @@
|
||||
<div
|
||||
style="padding:10px 14px; background:#fff; border-top:1px solid #fee2e2;
|
||||
display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
|
||||
<button @click="doQuickPick(3)" x-show="isOpen"
|
||||
style="padding:9px 18px; border-radius:20px; font-size:12px; font-weight:bold;
|
||||
background:linear-gradient(135deg,#d97706,#f59e0b); color:#fff; border:none;
|
||||
box-shadow:0 3px 10px rgba(217,119,6,.25); cursor:pointer;
|
||||
transition:all .15s; font-family:inherit;"
|
||||
onmouseover="this.style.transform='translateY(-1px)'; this.style.boxShadow='0 5px 14px rgba(217,119,6,.35)'"
|
||||
onmouseout="this.style.transform=''; this.style.boxShadow='0 3px 10px rgba(217,119,6,.25)'">
|
||||
<EFBFBD> 机选 3 注
|
||||
</button>
|
||||
<button @click="loadData()"
|
||||
style="padding:9px 18px; border-radius:20px; font-size:12px; font-weight:bold;
|
||||
background:#f0f6ff; color:#336699; border:1.5px solid #c0d8ef;
|
||||
|
||||
Reference in New Issue
Block a user