fix(order): 解决移动端弹窗因 CSS display !important 导致 Vue v-show 隐藏失效无法关闭问题
- 根因定位：.mobile-popup-form 设置了 display: flex !important，该样式在 CSS 特异性中强于 Vue v-show 生成的行内 style="display: none;"；当弹窗点击关闭后，Vue 将变量置为 false 并完成退场动画，但由于样式强制 flex，弹窗退场后立刻以 flex 状态重新暴露在屏幕上（即“又弹出一个”），且由于此时 Vue 响应式状态已是 false，再次点击关闭按钮不会触发状态改变（即“第二次无法关闭”） - 解耦容器与弹窗：移除 .mobile-popup-form 根节点上的 display: flex !important 与 overflow 强覆盖，弹窗内部增加 .popup-inner 容器承载垂直 flex 列布局与吸顶/吸底/滚动分区 - 严格验证：运行全量检查 ./scripts/check.sh，Go测试、MySQL测试、TypeScript检查及Vite生产构建 100% 通过
This commit is contained in:
yml2213
@@ -216,11 +216,19 @@
|
|||||||
|
|
||||||
/* ========== Popups ========== */
|
/* ========== Popups ========== */
|
||||||
.mobile-popup-form {
|
.mobile-popup-form {
|
||||||
display: flex !important;
|
|
||||||
flex-direction: column !important;
|
|
||||||
max-height: 85vh;
|
max-height: 85vh;
|
||||||
max-height: 85dvh;
|
max-height: 85dvh;
|
||||||
overflow: hidden !important;
|
overflow: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popup-inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
max-height: 85vh;
|
||||||
|
max-height: 85dvh;
|
||||||
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -594,104 +594,106 @@ async function copyListingCode() {
|
|||||||
class="mobile-popup-form"
|
class="mobile-popup-form"
|
||||||
@close="markPopupClosed"
|
@close="markPopupClosed"
|
||||||
>
|
>
|
||||||
<header class="popup-header">
|
<div class="popup-inner">
|
||||||
<h3>修改结账方案</h3>
|
<header class="popup-header">
|
||||||
<button
|
<h3>修改结账方案</h3>
|
||||||
type="button"
|
<button
|
||||||
class="popup-close"
|
type="button"
|
||||||
aria-label="关闭"
|
class="popup-close"
|
||||||
@click.stop.prevent="closeCounterPopup"
|
aria-label="关闭"
|
||||||
>
|
@click.stop.prevent="closeCounterPopup"
|
||||||
<van-icon name="cross" :size="18" />
|
>
|
||||||
</button>
|
<van-icon name="cross" :size="18" />
|
||||||
</header>
|
</button>
|
||||||
<div class="popup-body">
|
</header>
|
||||||
<p class="form-hint-info">
|
<div class="popup-body">
|
||||||
{{
|
<p class="form-hint-info">
|
||||||
checkoutRoundLabel
|
{{
|
||||||
}}。可填实际哈夫币消耗（允许超过发布量），打超按比例从押金扣。提案将交给对方确认。
|
checkoutRoundLabel
|
||||||
</p>
|
}}。可填实际哈夫币消耗（允许超过发布量），打超按比例从押金扣。提案将交给对方确认。
|
||||||
<div class="counter-input-card">
|
</p>
|
||||||
<div class="counter-input-row">
|
<div class="counter-input-card">
|
||||||
<label class="counter-label" for="counter-consumable">物资/损耗金额</label>
|
<div class="counter-input-row">
|
||||||
<div class="counter-input-wrapper">
|
<label class="counter-label" for="counter-consumable">物资/损耗金额</label>
|
||||||
<input
|
<div class="counter-input-wrapper">
|
||||||
id="counter-consumable"
|
<input
|
||||||
v-model.number="counterForm.consumableAmountYuan"
|
id="counter-consumable"
|
||||||
type="number"
|
v-model.number="counterForm.consumableAmountYuan"
|
||||||
placeholder="0"
|
type="number"
|
||||||
class="counter-input-control"
|
placeholder="0"
|
||||||
/>
|
class="counter-input-control"
|
||||||
<span class="counter-unit">元</span>
|
/>
|
||||||
|
<span class="counter-unit">元</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="counter-input-row">
|
||||||
|
<label class="counter-label" for="counter-coin">实际消耗哈夫币</label>
|
||||||
|
<div class="counter-input-wrapper">
|
||||||
|
<input
|
||||||
|
id="counter-coin"
|
||||||
|
v-model.number="counterForm.coin_consumed_m"
|
||||||
|
type="number"
|
||||||
|
placeholder="0"
|
||||||
|
class="counter-input-control"
|
||||||
|
/>
|
||||||
|
<span class="counter-unit">M</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="counter-input-row">
|
||||||
|
<label class="counter-label" for="counter-deposit-deduct">押金赔付(损坏等)</label>
|
||||||
|
<div class="counter-input-wrapper">
|
||||||
|
<input
|
||||||
|
id="counter-deposit-deduct"
|
||||||
|
v-model.number="counterForm.depositDeductAmountYuan"
|
||||||
|
type="number"
|
||||||
|
placeholder="0"
|
||||||
|
class="counter-input-control"
|
||||||
|
/>
|
||||||
|
<span class="counter-unit">元</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="counter-input-row">
|
|
||||||
<label class="counter-label" for="counter-coin">实际消耗哈夫币</label>
|
|
||||||
<div class="counter-input-wrapper">
|
|
||||||
<input
|
|
||||||
id="counter-coin"
|
|
||||||
v-model.number="counterForm.coin_consumed_m"
|
|
||||||
type="number"
|
|
||||||
placeholder="0"
|
|
||||||
class="counter-input-control"
|
|
||||||
/>
|
|
||||||
<span class="counter-unit">M</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="counter-input-row">
|
|
||||||
<label class="counter-label" for="counter-deposit-deduct">押金赔付(损坏等)</label>
|
|
||||||
<div class="counter-input-wrapper">
|
|
||||||
<input
|
|
||||||
id="counter-deposit-deduct"
|
|
||||||
v-model.number="counterForm.depositDeductAmountYuan"
|
|
||||||
type="number"
|
|
||||||
placeholder="0"
|
|
||||||
class="counter-input-control"
|
|
||||||
/>
|
|
||||||
<span class="counter-unit">元</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 实时结算试算预览（仅展示当前角色自身收支，完全屏蔽平台服务费） -->
|
<!-- 实时结算试算预览（仅展示当前角色自身收支，完全屏蔽平台服务费） -->
|
||||||
<CheckoutTrialPreview :simulation="checkoutSimulation" variant="mobile" />
|
<CheckoutTrialPreview :simulation="checkoutSimulation" variant="mobile" />
|
||||||
<van-field
|
<van-field
|
||||||
v-model="counterForm.reason"
|
v-model="counterForm.reason"
|
||||||
rows="2"
|
rows="2"
|
||||||
autosize
|
autosize
|
||||||
required
|
required
|
||||||
label="修改原因"
|
label="修改原因"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="请说明调整原因（必填）"
|
placeholder="请说明调整原因（必填）"
|
||||||
class="popup-field"
|
class="popup-field"
|
||||||
/>
|
/>
|
||||||
<van-field
|
<van-field
|
||||||
v-model="counterForm.evidenceText"
|
v-model="counterForm.evidenceText"
|
||||||
rows="2"
|
rows="2"
|
||||||
autosize
|
autosize
|
||||||
label="扣款证据"
|
label="扣款证据"
|
||||||
type="textarea"
|
type="textarea"
|
||||||
placeholder="证据链接（每行一个）"
|
placeholder="证据链接（每行一个）"
|
||||||
class="popup-field"
|
class="popup-field"
|
||||||
/>
|
/>
|
||||||
<div class="evidence-upload-row">
|
<div class="evidence-upload-row">
|
||||||
<span>上传新证据截图：</span>
|
<span>上传新证据截图：</span>
|
||||||
<input type="file" accept="image/*" @change="handleCounterEvidenceUpload" />
|
<input type="file" accept="image/*" @change="handleCounterEvidenceUpload" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<footer class="popup-footer">
|
||||||
|
<van-button
|
||||||
|
type="warning"
|
||||||
|
block
|
||||||
|
round
|
||||||
|
:loading="countering"
|
||||||
|
loading-text="提交中..."
|
||||||
|
@click="handleCounterCheckout"
|
||||||
|
class="popup-submit"
|
||||||
|
>
|
||||||
|
提交给对方确认
|
||||||
|
</van-button>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<footer class="popup-footer">
|
|
||||||
<van-button
|
|
||||||
type="warning"
|
|
||||||
block
|
|
||||||
round
|
|
||||||
:loading="countering"
|
|
||||||
loading-text="提交中..."
|
|
||||||
@click="handleCounterCheckout"
|
|
||||||
class="popup-submit"
|
|
||||||
>
|
|
||||||
提交给对方确认
|
|
||||||
</van-button>
|
|
||||||
</footer>
|
|
||||||
</van-popup>
|
</van-popup>
|
||||||
|
|
||||||
<!-- POPUP: Renter Reject Counter Proposal Reason -->
|
<!-- POPUP: Renter Reject Counter Proposal Reason -->
|
||||||
@@ -702,44 +704,46 @@ async function copyListingCode() {
|
|||||||
class="mobile-popup-form"
|
class="mobile-popup-form"
|
||||||
@close="markPopupClosed"
|
@close="markPopupClosed"
|
||||||
>
|
>
|
||||||
<header class="popup-header">
|
<div class="popup-inner">
|
||||||
<h3>拒绝修正扣款说明</h3>
|
<header class="popup-header">
|
||||||
<button
|
<h3>拒绝修正扣款说明</h3>
|
||||||
type="button"
|
<button
|
||||||
class="popup-close"
|
type="button"
|
||||||
aria-label="关闭"
|
class="popup-close"
|
||||||
@click.stop.prevent="closeRejectPopup"
|
aria-label="关闭"
|
||||||
>
|
@click.stop.prevent="closeRejectPopup"
|
||||||
<van-icon name="cross" :size="18" />
|
>
|
||||||
</button>
|
<van-icon name="cross" :size="18" />
|
||||||
</header>
|
</button>
|
||||||
<div class="popup-body">
|
</header>
|
||||||
<p class="form-hint-info">
|
<div class="popup-body">
|
||||||
拒绝号主的修正提案后，订单将立即自动发起争议，由客服介入根据证据判定。
|
<p class="form-hint-info">
|
||||||
</p>
|
拒绝号主的修正提案后，订单将立即自动发起争议，由客服介入根据证据判定。
|
||||||
<van-field
|
</p>
|
||||||
v-model="rejectReason"
|
<van-field
|
||||||
rows="3"
|
v-model="rejectReason"
|
||||||
autosize
|
rows="3"
|
||||||
label="拒绝原因"
|
autosize
|
||||||
type="textarea"
|
label="拒绝原因"
|
||||||
placeholder="请详细叙述拒绝号主扣款的理由，这些信息将被客服作为判定依据"
|
type="textarea"
|
||||||
class="popup-field"
|
placeholder="请详细叙述拒绝号主扣款的理由，这些信息将被客服作为判定依据"
|
||||||
/>
|
class="popup-field"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<footer class="popup-footer">
|
||||||
|
<van-button
|
||||||
|
type="danger"
|
||||||
|
block
|
||||||
|
round
|
||||||
|
:loading="rejectingCheckout"
|
||||||
|
loading-text="发起争议中..."
|
||||||
|
@click="handleRejectCheckout"
|
||||||
|
class="popup-submit"
|
||||||
|
>
|
||||||
|
提交原因并提起争议
|
||||||
|
</van-button>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<footer class="popup-footer">
|
|
||||||
<van-button
|
|
||||||
type="danger"
|
|
||||||
block
|
|
||||||
round
|
|
||||||
:loading="rejectingCheckout"
|
|
||||||
loading-text="发起争议中..."
|
|
||||||
@click="handleRejectCheckout"
|
|
||||||
class="popup-submit"
|
|
||||||
>
|
|
||||||
提交原因并提起争议
|
|
||||||
</van-button>
|
|
||||||
</footer>
|
|
||||||
</van-popup>
|
</van-popup>
|
||||||
|
|
||||||
<!-- POPUP: Create Generic Order Dispute -->
|
<!-- POPUP: Create Generic Order Dispute -->
|
||||||
@@ -750,67 +754,69 @@ async function copyListingCode() {
|
|||||||
class="mobile-popup-form"
|
class="mobile-popup-form"
|
||||||
@close="markPopupClosed"
|
@close="markPopupClosed"
|
||||||
>
|
>
|
||||||
<header class="popup-header">
|
<div class="popup-inner">
|
||||||
<h3>发起申诉争议</h3>
|
<header class="popup-header">
|
||||||
<button
|
<h3>发起申诉争议</h3>
|
||||||
type="button"
|
<button
|
||||||
class="popup-close"
|
type="button"
|
||||||
aria-label="关闭"
|
class="popup-close"
|
||||||
@click.stop.prevent="closeDisputePopup"
|
aria-label="关闭"
|
||||||
>
|
@click.stop.prevent="closeDisputePopup"
|
||||||
<van-icon name="cross" :size="18" />
|
>
|
||||||
</button>
|
<van-icon name="cross" :size="18" />
|
||||||
</header>
|
</button>
|
||||||
<div class="popup-body">
|
</header>
|
||||||
<van-field v-if="!isCheckoutDisputeStage" label="申诉类型" class="popup-field">
|
<div class="popup-body">
|
||||||
<template #input>
|
<van-field v-if="!isCheckoutDisputeStage" label="申诉类型" class="popup-field">
|
||||||
<select v-model="disputeType" class="custom-select">
|
<template #input>
|
||||||
<option value="cannot_login">无法登录</option>
|
<select v-model="disputeType" class="custom-select">
|
||||||
<option value="false_description">虚假描述</option>
|
<option value="cannot_login">无法登录</option>
|
||||||
<option value="account_banned">账号被封</option>
|
<option value="false_description">虚假描述</option>
|
||||||
<option value="asset_loss">资产损失</option>
|
<option value="account_banned">账号被封</option>
|
||||||
<option value="haf_coin_dispute">哈夫币争议</option>
|
<option value="asset_loss">资产损失</option>
|
||||||
<option value="handoff_timeout">超时未交接</option>
|
<option value="haf_coin_dispute">哈夫币争议</option>
|
||||||
<option value="return_timeout">超时未归还</option>
|
<option value="handoff_timeout">超时未交接</option>
|
||||||
</select>
|
<option value="return_timeout">超时未归还</option>
|
||||||
</template>
|
</select>
|
||||||
</van-field>
|
</template>
|
||||||
<van-field
|
</van-field>
|
||||||
v-model="disputeDescription"
|
<van-field
|
||||||
rows="3"
|
v-model="disputeDescription"
|
||||||
autosize
|
rows="3"
|
||||||
label="经过说明"
|
autosize
|
||||||
type="textarea"
|
label="经过说明"
|
||||||
placeholder="请在此描述您的诉求、事件经过、时间点等详细情况"
|
type="textarea"
|
||||||
class="popup-field"
|
placeholder="请在此描述您的诉求、事件经过、时间点等详细情况"
|
||||||
/>
|
class="popup-field"
|
||||||
<van-field
|
/>
|
||||||
v-model="disputeEvidenceText"
|
<van-field
|
||||||
rows="2"
|
v-model="disputeEvidenceText"
|
||||||
autosize
|
rows="2"
|
||||||
label="证据列表"
|
autosize
|
||||||
type="textarea"
|
label="证据列表"
|
||||||
placeholder="证据链接（每行一个）"
|
type="textarea"
|
||||||
class="popup-field"
|
placeholder="证据链接（每行一个）"
|
||||||
/>
|
class="popup-field"
|
||||||
<div class="evidence-upload-row">
|
/>
|
||||||
<span>上传证据截图：</span>
|
<div class="evidence-upload-row">
|
||||||
<input type="file" accept="image/*" @change="handleEvidenceUpload" />
|
<span>上传证据截图：</span>
|
||||||
|
<input type="file" accept="image/*" @change="handleEvidenceUpload" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<footer class="popup-footer">
|
||||||
|
<van-button
|
||||||
|
type="warning"
|
||||||
|
block
|
||||||
|
round
|
||||||
|
:loading="disputing"
|
||||||
|
loading-text="正在发起申诉..."
|
||||||
|
@click="handleCreateDispute"
|
||||||
|
class="popup-submit"
|
||||||
|
>
|
||||||
|
提交申诉客服仲裁
|
||||||
|
</van-button>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<footer class="popup-footer">
|
|
||||||
<van-button
|
|
||||||
type="warning"
|
|
||||||
block
|
|
||||||
round
|
|
||||||
:loading="disputing"
|
|
||||||
loading-text="正在发起申诉..."
|
|
||||||
@click="handleCreateDispute"
|
|
||||||
class="popup-submit"
|
|
||||||
>
|
|
||||||
提交申诉客服仲裁
|
|
||||||
</van-button>
|
|
||||||
</footer>
|
|
||||||
</van-popup>
|
</van-popup>
|
||||||
</main>
|
</main>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user