Bladeren bron

fix: 客服浮标非工作时间用原生contact拉起会话 & 充值档位活动标签展示

- 客服浮标:替换uni.showModal为自定义弹窗,确认按钮使用open-type="contact"确保用户手势直接触发客服会话,避免wx.openCustomerServiceConversation在modal回调中静默失败
- 充值页:档位卡片右上角展示label活动标签(橙红渐变角标),非空时显示

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
skyline 2 dagen geleden
bovenliggende
commit
f7c7ad12fc
2 gewijzigde bestanden met toevoegingen van 130 en 24 verwijderingen
  1. 111 22
      car-wash-mp/src/components/custom-service/index.vue
  2. 19 2
      car-wash-mp/src/pages-user/wallet/recharge.vue

+ 111 - 22
car-wash-mp/src/components/custom-service/index.vue

@@ -14,6 +14,26 @@
       </view>
       <view class="contact-btn" @click.stop="handleContactClick" />
     </movable-view>
+
+    <!-- 非工作时间确认弹窗 -->
+    <view v-if="confirmVisible" class="confirm-overlay" @click.stop="confirmVisible = false">
+      <view class="confirm-dialog" @click.stop>
+        <view class="confirm-title">客服提示</view>
+        <view class="confirm-msg">客服在线时间 9:30~21:30,当前留言可能会延迟回复</view>
+        <view class="confirm-actions">
+          <view class="confirm-cancel" @click="confirmVisible = false">取消</view>
+          <button
+            class="confirm-ok"
+            open-type="contact"
+            send-message-title="YesWash洗车客服"
+            session-from=""
+            @click="confirmVisible = false"
+          >
+            继续留言
+          </button>
+        </view>
+      </view>
+    </view>
   </movable-area>
 </template>
 
@@ -21,6 +41,7 @@
 import { ref } from 'vue'
 
 const POS_KEY = 'kefuPos'
+const confirmVisible = ref(false)
 
 /** 客服在线时间 9:30 ~ 21:30 */
 const isInServiceHours = (): boolean => {
@@ -69,32 +90,18 @@ function onTouchEnd() {
   uni.setStorageSync(POS_KEY, { x: snapX, y: snapY })
 }
 
-const openCustomerService = () => {
-  // #ifdef MP-WEIXIN
-  wx.openCustomerServiceConversation({
-    sessionFrom: '',
-    showMessageCard: true,
-    sendMessageTitle: 'YesWash洗车客服'
-  })
-  // #endif
-}
-
 const handleContactClick = () => {
   if (isInServiceHours()) {
-    openCustomerService()
+    // #ifdef MP-WEIXIN
+    wx.openCustomerServiceConversation({
+      sessionFrom: '',
+      showMessageCard: true,
+      sendMessageTitle: 'YesWash洗车客服'
+    })
+    // #endif
     return
   }
-  uni.showModal({
-    title: '客服提示',
-    content: '客服在线时间 9:30~21:30,当前留言可能会延迟回复',
-    cancelText: '取消',
-    confirmText: '继续留言',
-    success: (res) => {
-      if (res.confirm) {
-        openCustomerService()
-      }
-    }
-  })
+  confirmVisible.value = true
 }
 </script>
 
@@ -146,4 +153,86 @@ const handleContactClick = () => {
   padding: 0;
   margin: 0;
 }
+
+.confirm-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: auto;
+}
+
+.confirm-dialog {
+  width: 560rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  overflow: hidden;
+}
+
+.confirm-title {
+  padding: 48rpx 32rpx 0;
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #1A1A1A;
+  text-align: center;
+}
+
+.confirm-msg {
+  padding: 28rpx 32rpx 36rpx;
+  font-size: 28rpx;
+  color: #666666;
+  text-align: center;
+  line-height: 1.6;
+}
+
+.confirm-actions {
+  display: flex;
+  border-top: 1rpx solid #EEEEEE;
+}
+
+.confirm-cancel {
+  flex: 1;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: #666666;
+  border-right: 1rpx solid #EEEEEE;
+
+  &:active {
+    background: #F5F5F5;
+  }
+}
+
+.confirm-ok {
+  flex: 1;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: #C6171E;
+  font-weight: 500;
+  background: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  line-height: 96rpx;
+
+  &::after {
+    border: none;
+  }
+
+  &:active {
+    background: #F5F5F5;
+  }
+}
 </style>

+ 19 - 2
car-wash-mp/src/pages-user/wallet/recharge.vue

@@ -10,6 +10,7 @@
         :class="['amount-item', { active: state.chosenIdx === index }]"
         @click="handleRechargeClick(item, index)"
       >
+        <view v-if="item.label" class="activity-label">{{ item.label }}</view>
         <view class="amount-text">{{ (item.rechargeAmount / 100).toFixed(0) }}元</view>
         <view v-if="item.grantsAmount > 0" class="gift-tag">
           <uv-icon name="gift" size="12"></uv-icon>
@@ -188,6 +189,7 @@ const confirm = () => {
 }
 
 .amount-item {
+  position: relative;
   background-color: $uni-bg-color-card;
   padding: 24rpx 12rpx;
   text-align: center;
@@ -202,6 +204,7 @@ const confirm = () => {
   gap: 8rpx;
   box-sizing: border-box;
   transition: transform 0.15s ease, background-color 0.15s ease;
+  overflow: hidden;
 
   &:active {
     transform: scale(0.96);
@@ -215,6 +218,21 @@ const confirm = () => {
   }
 }
 
+.activity-label {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 6rpx 16rpx;
+  font-size: 20rpx;
+  font-weight: 600;
+  color: #FFFFFF;
+  background: linear-gradient(135deg, #FF6B3D, #FF3D3D);
+  border-radius: 0 12rpx 0 16rpx;
+  line-height: 1.2;
+  white-space: nowrap;
+  z-index: 1;
+}
+
 .amount-text {
   font-size: 32rpx;
   font-weight: $uni-font-weight-bold;
@@ -281,7 +299,7 @@ const confirm = () => {
 
   .gift-tip {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 10rpx;
     margin-top: 20rpx;
     padding: 16rpx 20rpx;
@@ -289,7 +307,6 @@ const confirm = () => {
     border-radius: 12rpx;
 
     .gift-tip-icon {
-      margin-top: 6rpx;
       flex-shrink: 0;
     }