Browse Source

feat: 启动充电页展示用户余额与低余额提醒,支持充值后返回本页并刷新余额

- 页面展示当前余额及去充值入口(30元以下红色低余额提醒,不强制拦截)
- 充值与余额不足入口均带 back 标记,支付成功后返回启动充电页自动刷新

Co-Authored-By: Claude Code <noreply@anthropic.com>
skyline 1 ngày trước cách đây
mục cha
commit
4e859b802f
1 tập tin đã thay đổi với 43 bổ sung2 xóa
  1. 43 2
      charge-front/src/pages-charge/appointment/appointment.vue

+ 43 - 2
charge-front/src/pages-charge/appointment/appointment.vue

@@ -197,6 +197,39 @@
           </view>
         </view>
       </template>
+      <!-- 当前余额 + 低余额提醒,点击去充值(充值后返回本页) -->
+      <view
+          class="mt-20 block flex-align-center pl-30 pr-30 pt-30 pb-30"
+          @click="to('/pages-user/wallet-recharge/wallet-recharge?back=1')"
+      >
+        <view class="flex-column">
+          <view class="flex-align-center">
+            <view class="fs-28 color-000">当前余额</view>
+            <view
+                class="ml-64 fs-26"
+                :style="{ color: isLowBalance ? '#f43636' : '#333' }"
+            >{{ balanceText }}
+            </view
+            >
+          </view>
+          <view
+              class="fs-24 mt-8"
+              style="color: #f43636"
+              v-if="isLowBalance"
+          >余额较少,可能无法完成本次充电,建议先充值
+          </view
+          >
+        </view>
+        <view class="ml-auto flex-align-center">
+          <view
+              class="fs-24 mr-10"
+              :style="{ color: isLowBalance ? '#f43636' : '#999' }"
+          >去充值
+          </view
+          >
+          <uni-icons type="right" size="16" color="rgba(0,0,0,0.4)"></uni-icons>
+        </view>
+      </view>
       <view class="pt-60 pb-80"></view>
       <style-bottom-view>
         <view class="pt-20 pl-40 pr-40 pb-20 bg-fff flex">
@@ -221,7 +254,7 @@
               }}
             </style-button>
 
-            <style-button v-else type="primary" size="small" @click="to('/pages-user/wallet-recharge/wallet-recharge')">
+            <style-button v-else type="primary" size="small" @click="to('/pages-user/wallet-recharge/wallet-recharge?back=1')">
               余额不足,请充值
             </style-button>
           </template>
@@ -319,7 +352,7 @@ import {
 
 import {fetchProfile, listStationAvailableRightsAndCoupons} from "@/api/user";
 import {onLoad, onShow} from "@dcloudio/uni-app";
-import {ref} from "vue";
+import {computed, ref} from "vue";
 import ChargeMachine from "../machines/charge-machine/charge-machine.vue";
 import PriceDesc from "../machines/price-desc/price-desc.vue";
 import StationChargeCoupon from "@/components/station-charge-coupon/station-charge-coupon.vue";
@@ -384,6 +417,14 @@ const activity = ref();
 
 const balance = ref(0);
 
+// 低余额提醒阈值(元),余额低于该值时在页面提示用户充值
+const LOW_BALANCE_THRESHOLD = 30;
+// 余额是否过低(余额为 0 时由底部“余额不足,请充值”按钮处理,不在此重复提示)
+const isLowBalance = computed(
+    () => Number(balance.value) > 0 && Number(balance.value) < LOW_BALANCE_THRESHOLD
+);
+const balanceText = computed(() => `${Number(balance.value).toFixed(2)}元`);
+
 
 const refreshUserBalance = () => {
   let user = getApp<any>().globalData.user