yml/hfb_sys
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化摸大红前台交互与主题按钮样式

Browse Source 
列表改为滚动触底自动分页，详情与订单页铺满主内容区，按钮统一为橙色主题描边/实心样式。
This commit is contained in:
yml2213
2026-07-16 19:40:37 +08:00
parent 6d61027318
commit 094a91c985
5 changed files with 427 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/features/mohong/views/MohongOrderDetailView.vue
+122 -25
View File
@@ -141,7 +141,9 @@ function openChat() {
<h1>{{ statusText }}</h1>
<p class="sub">订单号 {{ order.order_no }} · {{ formatDateTime(order.created_at) }}</p>
</div>
<el-button @click="router.push('/mohong/orders')">返回列表</el-button>
<button type="button" class="toolbar-btn outline" @click="router.push('/mohong/orders')">
返回列表
</button>
</header>
<div class="layout">
@@ -164,7 +166,7 @@ function openChat() {
<div v-if="order.copy_text" class="copy-box">
<div class="copy-head">
<h3>订单信息（发给客服）</h3>
<el-button type="primary" plain size="small" @click="copyText">一键复制</el-button>
<button type="button" class="btn outline sm" @click="copyText">一键复制</button>
</div>
<pre>{{ order.copy_text }}</pre>
</div>
@@ -177,27 +179,38 @@ function openChat() {
<aside class="side-card">
<h3>操作</h3>
<el-button
<button
v-if="order.status === 'pending_payment'"
type="primary"
color="#ff6a00"
:loading="acting"
type="button"
class="btn solid"
:disabled="acting"
@click="handlePay"
>
去支付
</el-button>
<el-button
{{ acting ? '处理中...' : '去支付' }}
</button>
<button
v-if="order.status === 'pending_payment'"
:loading="acting"
type="button"
class="btn outline"
:disabled="acting"
@click="handleCancel"
>
取消订单
</el-button>
<el-button v-if="order.conversation_id" type="primary" plain @click="openChat">
</button>
<button
v-if="order.conversation_id"
type="button"
class="btn outline"
@click="openChat"
>
进入订单群
</el-button>
<el-button v-if="order.copy_text" plain @click="copyText">复制订单信息</el-button>
<el-button plain @click="router.push('/mohong')">继续选购</el-button>
</button>
<button v-if="order.copy_text" type="button" class="btn outline" @click="copyText">
复制订单信息
</button>
<button type="button" class="btn outline" @click="router.push('/mohong')">
继续选购
</button>
</aside>
</div>
</template>
@@ -213,9 +226,11 @@ function openChat() {
<div class="pay-way-options">
<button type="button" class="pay-way-option" @click="choosePayWay('WXZF')">
<strong>微信支付</strong>
<small>使用微信扫码完成支付</small>
</button>
<button type="button" class="pay-way-option" @click="choosePayWay('ZFBZF')">
<strong>支付宝支付</strong>
<small>使用支付宝扫码完成支付</small>
</button>
</div>
</el-dialog>
@@ -225,6 +240,7 @@ function openChat() {
title="订单支付"
width="520px"
append-to-body
class="mohong-pay-dialog"
@closed="cashier.stopPaymentPolling"
>
<div v-if="cashier.activePayment.value" class="pay-dialog-body">
@@ -238,13 +254,14 @@ function openChat() {
</div>
</div>
<template #footer>
<el-button
type="primary"
:loading="cashier.checkingPayment.value"
<button
type="button"
class="btn solid"
:disabled="cashier.checkingPayment.value"
@click="cashier.refreshPaymentStatus(false)"
>
我已支付，刷新状态
</el-button>
{{ cashier.checkingPayment.value ? '查询中...' : '我已支付，刷新状态' }}
</button>
</template>
</el-dialog>
</section>
@@ -253,7 +270,6 @@ function openChat() {
<style scoped>
.order-detail-page {
width: 100%;
max-width: 1100px;
display: grid;
gap: 18px;
}
@@ -263,6 +279,7 @@ function openChat() {
justify-content: space-between;
align-items: flex-start;
gap: 12px;
width: 100%;
}
.eyebrow {
@@ -274,7 +291,8 @@ function openChat() {
.page-header h1 {
margin: 0 0 6px;
font-size: 28px;
font-size: 24px;
font-weight: 800;
color: #17233d;
}
@@ -284,11 +302,65 @@ function openChat() {
font-size: 13px;
}
.toolbar-btn,
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: 36px;
padding: 0 14px;
border-radius: 10px;
border: 1px solid transparent;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.toolbar-btn.outline,
.btn.outline {
border-color: rgba(255, 106, 0, 0.32);
background: #fff8f2;
color: #ff6a00;
}
.toolbar-btn.outline:hover,
.btn.outline:hover:not(:disabled) {
border-color: #ff6a00;
background: #fff3e8;
box-shadow: 0 4px 12px rgba(255, 106, 0, 0.1);
}
.btn.solid {
background: #ff6a00;
border-color: #ff6a00;
color: #fff;
box-shadow: 0 4px 12px rgba(255, 106, 0, 0.2);
}
.btn.solid:hover:not(:disabled) {
background: #e55d00;
border-color: #e55d00;
}
.btn.sm {
height: 30px;
padding: 0 12px;
font-size: 12px;
}
.btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
grid-template-columns: minmax(0, 1fr) 280px;
gap: 16px;
align-items: start;
width: 100%;
}
.main-card,
@@ -388,11 +460,11 @@ function openChat() {
.side-card {
display: grid;
gap: 10px;
align-content: start;
}
.side-card :deep(.el-button) {
.side-card .btn {
width: 100%;
margin: 0;
}
.pay-way-options {
@@ -401,6 +473,8 @@ function openChat() {
}
.pay-way-option {
display: grid;
gap: 4px;
width: 100%;
padding: 14px 16px;
border: 1px solid #e7edf6;
@@ -408,6 +482,29 @@ function openChat() {
background: #fff;
text-align: left;
cursor: pointer;
transition:
border-color 0.2s,
background 0.2s;
}
.pay-way-option:hover {
border-color: #ff6a00;
background: #fff8f2;
}
.pay-way-option strong {
color: #17233d;
font-size: 15px;
}
.pay-way-option small {
color: #8a94a6;
font-size: 12px;
}
.mohong-pay-dialog :deep(.el-dialog__footer) {
display: flex;
justify-content: center;
}
.pay-dialog-body {