我的卡包

src/api/user.ts

@@ -20,6 +20,15 @@ export function fetchProfile() {
   });
 }
 
+/**
+ * 查询我的权益和优惠券
+ */
+export function fetchRightsAndCoupons() {
+  return userHttp.get("/account/listRightsAndCoupons").then((res) => {
+    return res;
+  });
+}
+
 export function fetchCollectList() {
   if (getApp<any>().globalData.collectIds) {
     return Promise.resolve(getApp<any>().globalData.collectIds);

src/pages-charge/card/card.vue

@@ -0,0 +1,264 @@
+<template>
+  <view class="page pt-20 pr-40 pl-40">
+    <view class="tab-list flex-align-end">
+      <view class="fs-28 color-666 mt-20 w50" :class="mode===0?'active':''" @click="changeTab(0)">权益卡</view>
+      <view class="fs-28 color-666 mt-20 w50" :class="mode===1?'active':''" @click="changeTab(1)">优惠券</view>
+    </view>
+    <view v-if="mode===0">
+      <view
+          class="item mt-20"
+          v-for="(item, index) in list"
+          :key="index"
+      >
+        <image
+            class="full-percent"
+            src="/pages-charge/static/discount-bg.png"
+        ></image>
+        <view class="absolute-full flex pt-8 pb-8">
+          <view class="left flex-column flex-justify-center pl-48">
+            <view class="flex-align-end">
+              <image
+                  class="width-92"
+                  src="/pages-charge/static/discount-coupon.png"
+                  mode="widthFix"
+              ></image>
+              <view class="fs-48 lh-58 color-000 fw-500 ml-16"
+              >{{ item.discountAmount }}折</view
+              >
+              <view class="fs-26 color-999 ml-16" v-if="mode === 0"
+              >充电服务费</view
+              >
+            </view>
+            <view class="flex-align-center" v-if="mode === 0">
+              <view class="fs-26 color-999 mt-24"
+              >权益余额{{ ((item.rightsBalance||0)/100).toFixed(2) }}元｜</view
+              >
+              <view class="fs-26 color-999 mt-24"
+              >{{ item.endTime }}到期</view
+              >
+            </view>
+            <block >
+              <view class="fs-26 color-999 mt-24">{{ item.remark }}</view>
+              <view
+                  class="fs-26 color-999 mt-8"
+                  @click.stop="
+                to(`/pages-common/activity/activity?id=${item.activityId}`)
+              "
+              >
+                <text>有效期{{ item.validity }}天，</text>
+                <text class="color-primary">详细规则</text>
+                <text class="fs-24 ml-4 color-primary">>></text>
+              </view>
+            </block>
+          </view>
+<!--          <view v-if="mode === 0" class="right width-80 flex-center">
+            <style-checkbox
+                :size="48"
+                :checked="checkIndex === index"
+                :iconsize="17"
+            ></style-checkbox>
+          </view>-->
+<!--          <view
+              v-if="mode === 1"
+              class="right flex-center"
+              :style="{
+            width: '210rpx',
+            borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
+          }"
+          >
+            <view class="btn flex-center fs-28" @click.stop="toCharge(index)"
+            >前往充值</view
+            >
+          </view>-->
+        </view>
+      </view>
+    </view>
+
+
+    <view v-else-if="mode===1">
+      <view
+          class="item mt-20"
+          v-for="(item, index) in couponList"
+          :key="index"
+      >
+        <image
+            class="full-percent"
+            src="/pages-charge/static/discount-bg.png"
+        ></image>
+        <view class="absolute-full flex pt-8 pb-8">
+          <view class="left flex-column flex-justify-center pl-48">
+            <view class="flex-align-end">
+              <image
+                  class="width-92"
+                  src="/pages-charge/static/discount-coupon.png"
+                  mode="widthFix"
+              ></image>
+              <view>{{item.couponName}}</view>
+              <view class="fs-48 lh-58 color-000 fw-500 ml-16"
+              >{{ item.discount }}折</view
+              >
+<!--              <view class="fs-26 color-999 ml-16"
+              >优惠券</view
+              >-->
+            </view>
+            <view class="flex-align-center" >
+              <view class="fs-26 color-999 mt-24"
+              >消费门槛金额{{ ((item.minServiceMoney||0)/100).toFixed(2) }}元｜</view
+              >
+              <view class="fs-26 color-999 mt-24"
+              >{{ item.end }}到期</view
+              >
+            </view>
+            <block v-if="mode === 1">
+              <view class="fs-26 color-999 mt-24">{{ item.remark }}</view>
+              <view
+                  class="fs-26 color-999 mt-8"
+                  @click.stop="
+                to(`/pages-common/activity/activity?id=${item.activityId}`)
+              "
+              >
+                <text>有效期{{ item.validity }}天，</text>
+                <text class="color-primary">详细规则</text>
+                <text class="fs-24 ml-4 color-primary">>></text>
+              </view>
+            </block>
+          </view>
+<!--          <view v-if="mode === 0" class="right width-80 flex-center">
+            <style-checkbox
+                :size="48"
+                :checked="checkIndex === index"
+                :iconsize="17"
+            ></style-checkbox>
+          </view>-->
+          <view
+              v-if="mode === 1"
+              class="right flex-center"
+              :style="{
+            width: '210rpx',
+            borderLeft: '1px dashed rgba(0, 0, 0, 0.10)',
+          }"
+          >
+            <view class="btn flex-center fs-28"
+            >{{ item.discount }}折</view
+            >
+          </view>
+        </view>
+      </view>
+    </view>
+
+  </view>
+</template>
+
+<script setup lang="ts">
+import { onLoad, onShow,onPullDownRefresh } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { to } from "../../utils/navigate";
+import { fetchProfile,fetchRightsAndCoupons } from "@/api/user";
+
+const mode = ref(0);
+const list = ref<any[]>([]);
+const couponList = ref<any[]>([]);
+const activity = ref();
+const checkIndex = ref(-1);
+const needRefresh = ref(false);
+
+/*
+const toCharge = (index: number) => {
+  needRefresh.value = true;
+  to(
+    "/pages-user/wallet-recharge/wallet-recharge?back=1&value=" +
+      list.value[index].amountMin
+  );
+};
+*/
+
+onPullDownRefresh(() => {
+  loadData();
+});
+
+const changeTab = (tab:number) => {
+  mode.value = tab;
+}
+
+
+/*
+onLoad((options: any) => {
+  if (getApp<any>().globalData.user) {
+    if (getApp<any>().globalData.user.userRechargeRightsList.length) {
+      setUserRecharge(getApp<any>().globalData.user.userRechargeRightsList);
+      checkIndex.value = options.index ? Number(options.index) : 0;
+    } else {
+      const _activity = getApp<any>().globalData.user.activityList.find(
+        (item: any) => item.id === options.id
+      );
+      _activity.rechargeRightsList.forEach((item: any) => {
+        item.discountFormat = Number((Number(item.discount) / 10).toFixed(2));
+      });
+      list.value = _activity.rechargeRightsList;
+      activity.value = _activity;
+      mode.value = 1;
+    }
+  }
+});
+*/
+const loadData = ()=>{
+  uni.showLoading({
+    title: "加载中",
+  });
+  fetchRightsAndCoupons().then((res) => {
+    uni.stopPullDownRefresh();
+    console.log(res)
+    uni.hideLoading();
+    let {userCouponList,userRechargeRightsList}  = res;
+    list.value = userRechargeRightsList;
+    couponList.value = userCouponList;
+  });
+}
+
+onShow(() => {
+ loadData();
+
+
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+  min-height: 100vh;
+  width: 100%;
+  background-color: #f6f7fa;
+  .item {
+    position: relative;
+    height: 240rpx;
+    border-radius: 20rpx;
+    overflow: hidden;
+    background: #fff;
+    .left {
+      flex-grow: 1;
+    }
+    .right {
+      flex-shrink: 0;
+      .btn {
+        border-radius: 8rpx;
+        border: 1px solid var(--color-primary);
+        color: var(--color-primary);
+        width: 144rpx;
+        height: 56rpx;
+      }
+    }
+  }
+
+  .tab-list{
+    width: 100%;
+
+    .w50{
+      width: 50%;
+      text-align: center;
+    }
+
+    .active{
+      color: var(--color-primary);
+    }
+  }
+}
+</style>

src/pages.json

@@ -1,194 +1,200 @@
-{
-  "entryPagePath": "pages/map/map",
-  "pages": [
-    {
-      "path": "pages/map/map",
-      "style": {
-        "disableScroll": true
-      }
-    },
-    {
-      "path": "pages/list/list"
-    },
-    {
-      "path": "pages/user/user"
-    },
-    {
-      "path": "pages/index/index"
-    }
-  ],
-  "subPackages": [
-    {
-      "root": "pages-charge",
-      "pages": [
-        {
-          "path": "machines/machines",
-          "style": {
-            "navigationBarTitleText": "",
-            "navigationStyle": "default",
-            "navigationBarBackgroundColor": "#ffffff"
-          }
-        },
-        {
-          "path": "codeing/codeing",
-          "style": {
-            "navigationBarTitleText": "编码充电",
-            "navigationStyle": "default"
-          }
-        },
-        {
-          "path": "order/order",
-          "style": {
-            "navigationStyle": "default",
-            "navigationBarTitleText": "充电费用"
-          }
-        },
-        {
-          "path": "ordering/ordering",
-          "style": {
-            "navigationBarTitleText": "充电",
-            "navigationStyle": "default",
-            "disableScroll": true
-          }
-        },
-        {
-          "path": "orders/orders",
-          "style": {
-            "navigationStyle": "default",
-            "navigationBarTitleText": "充电订单",
-            "enablePullDownRefresh": true
-          }
-        },
-        {
-          "path": "search/search"
-        },
-        {
-          "path": "appointment/appointment",
-          "style": {
-            "navigationBarTitleText": "预约充电",
-            "navigationStyle": "default",
-            "navigationBarBackgroundColor": "#F6F7FA"
-          }
-        },
-        {
-          "path": "discount/discount",
-          "style": {
-            "navigationBarTitleText": "选择充电优惠",
-            "navigationStyle": "default",
-            "navigationBarBackgroundColor": "#F6F7FA"
-          }
-        },
-        {
-          "path": "camera/camera",
-          "style": {
-            "navigationBarTextStyle": "white",
-            "disableScroll": true
-          }
-        }
-      ]
-    },
-    {
-      "root": "pages-user",
-      "pages": [
-        {
-          "path": "collect/collect",
-          "style": {
-            "navigationStyle": "default",
-            "navigationBarTitleText": "我的收藏",
-            "navigationBarBackgroundColor": "#F5F5F5"
-          }
-        },
-        {
-          "path": "profile/profile",
-          "style": {
-            "navigationStyle": "default",
-            "navigationBarTitleText": "个人信息"
-          }
-        },
-        {
-          "path": "profile-edit/profile-edit",
-          "style": {
-            "navigationStyle": "default",
-            "navigationBarTitleText": ""
-          }
-        },
-        {
-          "path": "wallet/wallet",
-          "style": {
-            "enablePullDownRefresh": true
-          }
-        },
-        {
-          "path": "wallet-refund/wallet-refund",
-          "style": {
-            "disableScroll": true
-          }
-        },
-        {
-          "path": "wallet-recharge/wallet-recharge",
-          "style": {
-            "navigationStyle": "default",
-            "navigationBarTitleText": "我的钱包",
-            "enablePullDownRefresh": true
-          }
-        }
-      ]
-    },
-    {
-      "root": "pages-common",
-      "pages": [
-        {
-          "path": "contact/contact",
-          "style": {
-            "navigationStyle": "default",
-            "navigationBarTitleText": "联系我们",
-            "navigationBarBackgroundColor": "#ffffff"
-          }
-        },
-        {
-          "path": "invoice/invoice",
-          "style": {
-            "navigationStyle": "default",
-            "navigationBarTitleText": "发票详情",
-            "navigationBarBackgroundColor": "#F6F7FA"
-          }
-        },
-        {
-          "path": "activity/activity",
-          "style": {
-          }
-        }
-      ]
-    }
-  ],
-  "preloadRule": {
-    "pages/map/map": {
-      "network": "all",
-      "packages": ["pages-charge"]
-    }
-  },
-  "globalStyle": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "uni-app",
-    "navigationBarBackgroundColor": "#ffffff",
-    "backgroundColor": "#ffffff",
-    "navigationStyle": "custom",
-    "usingComponents": {
-      "navigation-bar": "./wxcomponents/navigation-bar/index"
-    }
-  },
-  "easycom": {
-    "autoscan": true
-  },
-  "tabBar": {
-    "custom": true,
-    "list": [
-      {
-        "pagePath": "pages/map/map"
-      },
-      {
-        "pagePath": "pages/user/user"
-      }
-    ]
-  }
-}
+{
+  "entryPagePath": "pages/map/map",
+  "pages": [
+    {
+      "path": "pages/map/map",
+      "style": {
+        "disableScroll": true
+      }
+    },
+    {
+      "path": "pages/list/list"
+    },
+    {
+      "path": "pages/user/user"
+    },
+    {
+      "path": "pages/index/index"
+    }
+  ],
+  "subPackages": [
+    {
+      "root": "pages-charge",
+      "pages": [
+        {
+          "path": "machines/machines",
+          "style": {
+            "navigationBarTitleText": "",
+            "navigationStyle": "default",
+            "navigationBarBackgroundColor": "#ffffff"
+          }
+        },
+        {
+          "path": "codeing/codeing",
+          "style": {
+            "navigationBarTitleText": "编码充电",
+            "navigationStyle": "default"
+          }
+        },
+        {
+          "path": "order/order",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "充电费用"
+          }
+        },
+        {
+          "path": "ordering/ordering",
+          "style": {
+            "navigationBarTitleText": "充电",
+            "navigationStyle": "default",
+            "disableScroll": true
+          }
+        },
+        {
+          "path": "orders/orders",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "充电订单",
+            "enablePullDownRefresh": true
+          }
+        },
+        {
+          "path": "search/search"
+        },
+        {
+          "path": "appointment/appointment",
+          "style": {
+            "navigationBarTitleText": "预约充电",
+            "navigationStyle": "default",
+            "navigationBarBackgroundColor": "#F6F7FA"
+          }
+        },
+        {
+          "path": "discount/discount",
+          "style": {
+            "navigationBarTitleText": "选择充电优惠",
+            "navigationStyle": "default",
+            "navigationBarBackgroundColor": "#F6F7FA"
+          }
+        },
+        {
+          "path": "camera/camera",
+          "style": {
+            "navigationBarTextStyle": "white",
+            "disableScroll": true
+          }
+        },
+        {
+          "path": "card/card",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "我的卡包",
+            "enablePullDownRefresh": true
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages-user",
+      "pages": [
+        {
+          "path": "collect/collect",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "我的收藏",
+            "navigationBarBackgroundColor": "#F5F5F5"
+          }
+        },
+        {
+          "path": "profile/profile",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "个人信息"
+          }
+        },
+        {
+          "path": "profile-edit/profile-edit",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": ""
+          }
+        },
+        {
+          "path": "wallet/wallet"
+
+        },
+        {
+          "path": "wallet-refund/wallet-refund",
+          "style": {
+            "disableScroll": true
+          }
+        },
+        {
+          "path": "wallet-recharge/wallet-recharge",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "我的钱包",
+            "enablePullDownRefresh": true
+          }
+        }
+      ]
+    },
+    {
+      "root": "pages-common",
+      "pages": [
+        {
+          "path": "contact/contact",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "联系我们",
+            "navigationBarBackgroundColor": "#ffffff"
+          }
+        },
+        {
+          "path": "invoice/invoice",
+          "style": {
+            "navigationStyle": "default",
+            "navigationBarTitleText": "发票详情",
+            "navigationBarBackgroundColor": "#F6F7FA"
+          }
+        },
+        {
+          "path": "activity/activity",
+          "style": {
+          }
+        }
+      ]
+    }
+  ],
+  "preloadRule": {
+    "pages/map/map": {
+      "network": "all",
+      "packages": ["pages-charge"]
+    }
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#ffffff",
+    "backgroundColor": "#ffffff",
+    "navigationStyle": "custom",
+    "usingComponents": {
+      "navigation-bar": "./wxcomponents/navigation-bar/index"
+    }
+  },
+  "easycom": {
+    "autoscan": true
+  },
+  "tabBar": {
+    "custom": true,
+    "list": [
+      {
+        "pagePath": "pages/map/map"
+      },
+      {
+        "pagePath": "pages/user/user"
+      }
+    ]
+  }
+}

src/pages/user/user.vue

@@ -1,228 +1,232 @@
-<template>
-  <navigation-bar title="个人中心"></navigation-bar>
-
-  <image src="/static/images/user-bg.png" mode="widthFix" class="bg" />
-
-  <block v-if="user && user.mobilePhone">
-    <view class="container" :style="containerStyle">
-      <view class="header flex-column">
-        <view class="flex-grow flex-center">
-          <image
-            src="/static/images/user/round.png"
-            mode="heightFix"
-            style="height: 100%"
-          />
-        </view>
-        <view class="main flex-shrink">
-          <view
-            class="avatar"
-            @click="toPage(2)"
-            :style="{
-              'background-image': `url(${user.avatar})`,
-            }"
-          ></view>
-          <view class="phone fs-40 fw-500">{{ user.mobilePhoneFormat }}</view>
-          <view class="money flex-align-center" @click="toPage(-1)">
-            <uni-icons
-              type="wallet-filled"
-              size="24"
-              color="var(--color-primary)"
-            ></uni-icons>
-            <view class="color-primary ml-12" style="font-size: 16px"
-              >我的钱包</view
-            >
-            <view class="fs-40 fw-500 ml-auto mt-12 color-primary">¥</view>
-            <view class="fs-60 fw-500 ml-12 mr-48 color-primary">{{
-              user.balance
-            }}</view>
-          </view>
-        </view>
-      </view>
-
-      <view class="body">
-        <block v-for="(item, index) in menu" :key="index">
-          <view
-            class="menu flex-align-center"
-            v-if="
-              index !== menu.length - 1 || user.mobilePhone === '15986907592'
-            "
-            @click="toPage(index)"
-          >
-            <image src="/static/images/user/{{index + 1}}.png"></image>
-            <view>{{ item.title }}</view>
-            <view class="ml-auto">
-              <uni-icons
-                type="right"
-                size="12"
-                color="rgba(0,0,0,0.4)"
-              ></uni-icons>
-            </view>
-          </view>
-        </block>
-      </view>
-    </view>
-  </block>
-</template>
-
-<script setup lang="ts">
-import { fetchContact } from "@/api";
-import { fetchProfile } from "@/api/user";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import { ref } from "vue";
-const containerStyle = ref({});
-const user = ref<any>({
-  avatar: "",
-});
-const service = ref("");
-const menu = ref([
-  {
-    title: "充电订单",
-    path: "/pages-charge/orders/orders",
-  },
-  {
-    title: "我的收藏",
-    path: "/pages-user/collect/collect",
-  },
-  {
-    title: "个人信息",
-    path: "/pages-user/profile/profile",
-  },
-  {
-    title: "联系我们",
-    path: "/pages-common/contact/contact",
-  },
-  {
-    title: "常见问题",
-    path: "/pages-common/contact/contact",
-  },
-  {
-    title: "电站列表",
-    path: "/pages/list/list",
-  },
-]);
-const toPage = (index: number) => {
-  if (index < 0) {
-    uni.navigateTo({
-      url: "/pages-user/wallet/wallet",
-    });
-    return;
-  }
-  if (index === 3) {
-    uni.makePhoneCall({
-      phoneNumber: service.value,
-    });
-    return;
-  }
-  const item = menu.value[index];
-  uni.navigateTo({
-    url: item.path + (index === 4 ? `?service=${service.value}` : ""),
-  });
-};
-
-onLoad(() => {
-  const bound = uni.getMenuButtonBoundingClientRect();
-  containerStyle.value = {
-    top: `${bound.bottom + 10}px`,
-  };
-  fetchContact().then((res) => {
-    if (res && res.mobile) {
-      service.value = res.mobile;
-    }
-  });
-});
-onShow(() => {
-  fetchProfile().then((res) => {
-    res.mobilePhoneFormat =
-      res.mobilePhone.slice(0, 3) + "****" + res.mobilePhone.slice(7);
-    res.avatar = res.avatar
-      ? res.avatar
-      : "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
-    user.value = res;
-  });
-});
-</script>
-
-<style lang="scss">
-@import "../../styles/dialog.scss";
-.bg {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 660rpx;
-}
-
-.container {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100vh;
-  width: 100%;
-  overflow-y: auto;
-}
-
-.header {
-  height: 400rpx;
-  width: 100%;
-
-  .main {
-    height: 334rpx;
-    background: rgba(254, 255, 255, 0.7);
-    border-radius: 40rpx 40rpx 0 0;
-    position: relative;
-    text-align: center;
-
-    .avatar {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      top: -50rpx;
-      width: 110rpx;
-      height: 110rpx;
-      border: 2rpx solid #ffffff;
-      filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
-      background-size: cover;
-      background-repeat: no-repeat;
-      border-radius: 50%;
-    }
-
-    .phone {
-      padding-top: 78rpx;
-      color: #000;
-    }
-
-    .money {
-      width: 690rpx;
-      height: 118rpx;
-      background: #feffff;
-      border-radius: 120rpx;
-      margin: 0 auto;
-      margin-top: 30rpx;
-      color: #000000;
-      padding: 0 24rpx 0 40rpx;
-    }
-  }
-}
-
-.body {
-  width: 100%;
-  background-color: #fff;
-  padding: 0rpx 30rpx;
-
-  .menu {
-    background-color: #fff;
-    height: 120rpx;
-    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
-
-    image {
-      width: 52rpx;
-      height: 52rpx;
-      margin-right: 20rpx;
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-}
-</style>
+<template>
+  <navigation-bar title="个人中心"></navigation-bar>
+
+  <image src="/static/images/user-bg.png" mode="widthFix" class="bg" />
+
+  <block v-if="user && user.mobilePhone">
+    <view class="container" :style="containerStyle">
+      <view class="header flex-column">
+        <view class="flex-grow flex-center">
+          <image
+            src="/static/images/user/round.png"
+            mode="heightFix"
+            style="height: 100%"
+          />
+        </view>
+        <view class="main flex-shrink">
+          <view
+            class="avatar"
+            @click="toPage(2)"
+            :style="{
+              'background-image': `url(${user.avatar})`,
+            }"
+          ></view>
+          <view class="phone fs-40 fw-500">{{ user.mobilePhoneFormat }}</view>
+          <view class="money flex-align-center" @click="toPage(-1)">
+            <uni-icons
+              type="wallet-filled"
+              size="24"
+              color="var(--color-primary)"
+            ></uni-icons>
+            <view class="color-primary ml-12" style="font-size: 16px"
+              >我的钱包</view
+            >
+            <view class="fs-40 fw-500 ml-auto mt-12 color-primary">¥</view>
+            <view class="fs-60 fw-500 ml-12 mr-48 color-primary">{{
+              user.balance
+            }}</view>
+          </view>
+        </view>
+      </view>
+
+      <view class="body">
+        <block v-for="(item, index) in menu" :key="index">
+          <view
+            class="menu flex-align-center"
+            v-if="
+              index !== menu.length - 1 || user.mobilePhone === '15986907592'
+            "
+            @click="toPage(index)"
+          >
+            <image :src="'/static/images/user/'+index+'.png'"></image>
+            <view>{{ item.title }}</view>
+            <view class="ml-auto">
+              <uni-icons
+                type="right"
+                size="12"
+                color="rgba(0,0,0,0.4)"
+              ></uni-icons>
+            </view>
+          </view>
+        </block>
+      </view>
+    </view>
+  </block>
+</template>
+
+<script setup lang="ts">
+import { fetchContact } from "@/api";
+import { fetchProfile } from "@/api/user";
+import { onLoad, onShow } from "@dcloudio/uni-app";
+import { ref } from "vue";
+const containerStyle = ref({});
+const user = ref<any>({
+  avatar: "",
+});
+const service = ref("");
+const menu = ref([
+  {
+    title: "我的卡包",
+    path: "/pages-charge/card/card",
+  },
+  {
+    title: "充电订单",
+    path: "/pages-charge/orders/orders",
+  },
+  {
+    title: "我的收藏",
+    path: "/pages-user/collect/collect",
+  },
+  {
+    title: "个人信息",
+    path: "/pages-user/profile/profile",
+  },
+  {
+    title: "联系我们",
+    path: "/pages-common/contact/contact",
+  },
+  {
+    title: "常见问题",
+    path: "/pages-common/contact/contact",
+  },
+  {
+    title: "电站列表",
+    path: "/pages/list/list",
+  },
+]);
+const toPage = (index: number) => {
+  if (index < 0) {
+    uni.navigateTo({
+      url: "/pages-user/wallet/wallet",
+    });
+    return;
+  }
+  if (index === 3) {
+    uni.makePhoneCall({
+      phoneNumber: service.value,
+    });
+    return;
+  }
+  const item = menu.value[index];
+  uni.navigateTo({
+    url: item.path + (index === 4 ? `?service=${service.value}` : ""),
+  });
+};
+
+onLoad(() => {
+  const bound = uni.getMenuButtonBoundingClientRect();
+  containerStyle.value = {
+    top: `${bound.bottom + 10}px`,
+  };
+  fetchContact().then((res) => {
+    if (res && res.mobile) {
+      service.value = res.mobile;
+    }
+  });
+});
+onShow(() => {
+  fetchProfile().then((res) => {
+    res.mobilePhoneFormat =
+      res.mobilePhone.slice(0, 3) + "****" + res.mobilePhone.slice(7);
+    res.avatar = res.avatar
+      ? res.avatar
+      : "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
+    user.value = res;
+  });
+});
+</script>
+
+<style lang="scss">
+@import "../../styles/dialog.scss";
+.bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 660rpx;
+}
+
+.container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100vh;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.header {
+  height: 400rpx;
+  width: 100%;
+
+  .main {
+    height: 334rpx;
+    background: rgba(254, 255, 255, 0.7);
+    border-radius: 40rpx 40rpx 0 0;
+    position: relative;
+    text-align: center;
+
+    .avatar {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: -50rpx;
+      width: 110rpx;
+      height: 110rpx;
+      border: 2rpx solid #ffffff;
+      filter: drop-shadow(0px 4rpx 8rpx rgba(0, 24, 60, 0.1));
+      background-size: cover;
+      background-repeat: no-repeat;
+      border-radius: 50%;
+    }
+
+    .phone {
+      padding-top: 78rpx;
+      color: #000;
+    }
+
+    .money {
+      width: 690rpx;
+      height: 118rpx;
+      background: #feffff;
+      border-radius: 120rpx;
+      margin: 0 auto;
+      margin-top: 30rpx;
+      color: #000000;
+      padding: 0 24rpx 0 40rpx;
+    }
+  }
+}
+
+.body {
+  width: 100%;
+  background-color: #fff;
+  padding: 0rpx 30rpx;
+
+  .menu {
+    background-color: #fff;
+    height: 120rpx;
+    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
+
+    image {
+      width: 52rpx;
+      height: 52rpx;
+      margin-right: 20rpx;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}
+</style>

src/utils/infinite-scroll.ts

@@ -69,6 +69,6 @@ export function useInfiniteScroll<T = any>(
     hasNext,
     list,
     refresh,
-    next,
+    next
   });
 }