kellan/consumer-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 61 Wiki Activity

开关门状态显示页样式调整

Browse Source
This commit is contained in:
kk
2026-07-13 17:27:06 +08:00
parent 580350cb33
commit 42c2b8de07
5 changed files with 53 additions and 787 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/door-panel/door-panel.vue
+53 -46
View File
@@ -20,8 +20,8 @@
<view class="icon-door-right"></view>
</view>
</view>
<text class="door-state-title">柜门已打开</text>
<text class="door-state-desc">请取走商品后随手关门</text>
<text class="door-state-title">门锁已打开</text>
<text class="door-state-desc">请先拉开柜门，取走商品后随手关门</text>
<view class="door-state-divider"></view>
<view class="door-steps">
<view class="step-item">
@@ -193,6 +193,7 @@ export default {
const maxRetries = 30;
const interval = 2000;
let remaining = maxRetries;
let lastStep = '';
while (remaining > 0) {
if (this.step === 'complete' || this.cancelled) return;
@@ -206,18 +207,24 @@ export default {
const ret = res.data || {};
if (ret.code === 0 && Array.isArray(ret.data) && ret.data.length > 0) {
const latestStatus = ret.data[0].status;
let newStep = '';
if (latestStatus === 101) {
remaining = maxRetries;
this.step = 'opened';
newStep = 'opened';
} else if (latestStatus === 103) {
remaining = maxRetries;
this.step = 'closed';
newStep = 'closed';
} else if (latestStatus === 201) {
this.step = 'complete';
this.fetchOrder(flowId);
return;
}
// 状态真正变化时才重置计数器
if (newStep && newStep !== lastStep) {
this.step = newStep;
lastStep = newStep;
remaining = maxRetries;
}
}
} catch (e) {
console.error('[door-panel] 轮询失败:', e);
@@ -344,7 +351,7 @@ export default {
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(160deg, #0a1628 0%, #132743 40%, #1a3a5c 100%);
background: #fff;
z-index: 3000;
display: flex;
align-items: center;
@@ -371,20 +378,22 @@ export default {
align-items: center;
justify-content: center;
margin-bottom: 48rpx;
/* 动效环 scale(1.6) 会超出容器，预留空间避免被裁剪 */
margin-top: 60rpx;
}
.door-state-ring {
position: absolute;
width: 180rpx;
height: 180rpx;
border-radius: 50%;
border: 4rpx solid rgba(41, 121, 255, 0.4);
border: 4rpx solid rgba(41, 121, 255, 0.3);
animation: ring-pulse 2s ease-out infinite;
}
.warning-ring {
border-color: rgba(250, 173, 20, 0.4);
border-color: rgba(250, 173, 20, 0.3);
}
.success-ring {
border-color: rgba(82, 196, 26, 0.4);
border-color: rgba(82, 196, 26, 0.3);
}
@keyframes ring-pulse {
0% { transform: scale(0.8); opacity: 1; }
@@ -404,7 +413,7 @@ export default {
.icon-door-left {
width: 28rpx;
height: 56rpx;
background: rgba(41, 121, 255, 0.9);
background: #2979ff;
border-radius: 6rpx;
transform: perspective(200rpx) rotateY(25deg);
animation: door-left-open 0.8s ease-out forwards;
@@ -412,7 +421,7 @@ export default {
.icon-door-right {
width: 28rpx;
height: 56rpx;
background: rgba(41, 121, 255, 0.9);
background: #2979ff;
border-radius: 6rpx;
transform: perspective(200rpx) rotateY(-25deg);
animation: door-right-open 0.8s ease-out forwards;
@@ -435,7 +444,7 @@ export default {
.lock-body {
width: 48rpx;
height: 36rpx;
background: rgba(250, 173, 20, 0.9);
background: #faad14;
border-radius: 6rpx;
position: absolute;
bottom: 0;
@@ -443,7 +452,7 @@ export default {
.lock-hole {
width: 28rpx;
height: 24rpx;
border: 5rpx solid rgba(250, 173, 20, 0.9);
border: 5rpx solid #faad14;
border-radius: 14rpx 14rpx 0 0;
border-bottom: none;
position: absolute;
@@ -456,8 +465,8 @@ export default {
.icon-check {
width: 40rpx;
height: 24rpx;
border-left: 5rpx solid #fff;
border-bottom: 5rpx solid #fff;
border-left: 5rpx solid #52c41a;
border-bottom: 5rpx solid #52c41a;
transform: rotate(-45deg);
margin-top: -8rpx;
}
@@ -466,13 +475,13 @@ export default {
.door-state-title {
font-size: 44rpx;
font-weight: bold;
color: #fff;
color: #333;
margin-bottom: 16rpx;
letter-spacing: 4rpx;
}
.door-state-desc {
font-size: 28rpx;
color: rgba(255, 255, 255, 0.5);
color: #999;
margin-bottom: 48rpx;
}
@@ -480,7 +489,7 @@ export default {
.door-state-divider {
width: 80rpx;
height: 4rpx;
background: linear-gradient(90deg, transparent, rgba(41, 121, 255, 0.6), transparent);
background: linear-gradient(90deg, transparent, #2979ff, transparent);
border-radius: 2rpx;
margin-bottom: 48rpx;
}
@@ -500,46 +509,45 @@ export default {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 2rpx solid rgba(255, 255, 255, 0.15);
background: #f5f5f5;
border: 2rpx solid #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
font-size: 22rpx;
color: rgba(255, 255, 255, 0.35);
color: #999;
}
.step-dot.active {
background: rgba(41, 121, 255, 0.2);
background: rgba(41, 121, 255, 0.1);
border-color: #2979ff;
color: #2979ff;
box-shadow: 0 0 16rpx rgba(41, 121, 255, 0.3);
}
.step-dot.done {
background: rgba(41, 121, 255, 0.15);
border-color: rgba(41, 121, 255, 0.5);
color: rgba(41, 121, 255, 0.8);
background: rgba(41, 121, 255, 0.1);
border-color: #2979ff;
color: #2979ff;
font-size: 20rpx;
}
.step-text {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.45);
color: #999;
white-space: nowrap;
}
.step-line {
width: 60rpx;
height: 2rpx;
background: rgba(255, 255, 255, 0.1);
background: #e0e0e0;
margin-bottom: 36rpx;
}
.step-line.done {
background: rgba(41, 121, 255, 0.4);
background: #2979ff;
}
/* ====== 订单卡片 ====== */
.door-order-card {
width: 100%;
background: rgba(255, 255, 255, 0.06);
border: 1rpx solid rgba(255, 255, 255, 0.08);
background: #f8f8f8;
border: 1rpx solid #f0f0f0;
border-radius: 20rpx;
padding: 24rpx 30rpx;
margin-top: 16rpx;
@@ -555,13 +563,13 @@ export default {
padding: 12rpx 0;
}
.door-product-item + .door-product-item {
border-top: 1rpx solid rgba(255, 255, 255, 0.06);
border-top: 1rpx solid #f0f0f0;
}
.door-product-img {
width: 80rpx;
height: 80rpx;
border-radius: 10rpx;
background: rgba(255, 255, 255, 0.1);
background: #f0f0f0;
flex-shrink: 0;
}
.door-product-info {
@@ -573,14 +581,14 @@ export default {
}
.door-product-name {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.85);
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.door-product-price {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.45);
color: #999;
}
.door-order-row {
display: flex;
@@ -589,29 +597,29 @@ export default {
padding: 16rpx 0;
}
.door-order-row + .door-order-row {
border-top: 1rpx solid rgba(255, 255, 255, 0.06);
border-top: 1rpx solid #f0f0f0;
}
.door-order-row.total {
border-top: 1rpx solid rgba(255, 255, 255, 0.1);
border-top: 1rpx solid #e0e0e0;
margin-top: 8rpx;
padding-top: 20rpx;
}
.door-order-label {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.5);
color: #999;
}
.door-order-value {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.9);
color: #333;
}
.door-price {
font-size: 36rpx;
font-weight: bold;
color: #ff6b6b;
color: #e4393c;
}
.door-order-loading {
font-size: 26rpx;
color: rgba(255, 255, 255, 0.4);
color: #999;
text-align: center;
padding: 16rpx 0;
}
@@ -633,16 +641,15 @@ export default {
background: linear-gradient(135deg, #2979ff, #1e60e0);
border-radius: 48rpx;
letter-spacing: 2rpx;
box-shadow: 0 8rpx 24rpx rgba(41, 121, 255, 0.35);
}
/* ====== 关闭按钮 ====== */
.door-btn-close {
font-size: 30rpx;
color: rgba(255, 255, 255, 0.85);
color: #2979ff;
padding: 24rpx 100rpx;
background: rgba(41, 121, 255, 0.15);
border: 1rpx solid rgba(41, 121, 255, 0.4);
background: #fff;
border: 2rpx solid #2979ff;
border-radius: 48rpx;
letter-spacing: 2rpx;
}