Browse Source

feat: SVIP页面添加;充值、提现、买金、卖金、存料、提料等页面改为webview;

ext.zhangbin71 2 months ago
parent
commit
2181793d39

+ 4 - 1
App.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { ref, computed, watch, nextTick } from "vue";
 import { onLoad, onShow, onLaunch } from "@dcloudio/uni-app";
+import { useAppStore } from "@/stores/app";
+
+const appStore = useAppStore();
 // onLoad 接受 A 页面传递的参数
 onLoad((option) => {
 });
@@ -11,7 +14,7 @@ onShow(() => {
 
 onLaunch(async () => {
   // console.log("app 页面 onLaunch");
-
+	await appStore.GET_WX_CONFIG();
 });
 </script>
 

+ 22 - 0
api/payment.js

@@ -0,0 +1,22 @@
+import request from "@/utils/request.js";
+
+/**
+ * 创建支付订单
+ * @param {Object} data - 支付订单参数
+ * @param {string} data.goodsId - 商品ID
+ * @param {number} data.amount - 支付金额
+ * @param {string} data.payType - 支付方式(wxpay/alipay)
+ */
+export function createPaymentOrder(params) {
+  return request.post("wxpay/v2/jsapi/pay", params);
+}
+
+/**
+ * 查询订单支付状态
+ * @param {string} orderNo - 订单编号
+ */
+export function queryPaymentStatus(orderNo) {
+  return request.get("wxpay/v2/order/query", {
+    orderNo,
+  });
+}

+ 6 - 0
api/svip.js

@@ -24,4 +24,10 @@ export function svipBuy(data) {
  */
 export function levelGrowthList() {
   return request.get("user/level/benefits");
+}
+
+
+// 保存用户开通SVIP记录
+export function svipsaveAPI(data) {
+  return request.post("svip/save", data);
 }

+ 209 - 0
components/payment/WechatPayment.vue

@@ -0,0 +1,209 @@
+<template>
+  <!-- 支付加载提示 -->
+  <view v-if="showPayLoading" class="pay-loading-mask">
+    <view class="pay-loading-box">
+      <view class="loading-spinner"></view>
+      <text class="loading-text">处理支付中...</text>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref, getCurrentInstance } from "vue";
+import { createPaymentOrder, queryPaymentStatus } from "@/api/payment";
+import { generateCustomId } from "@/utils/util.js";
+
+// 组件实例
+const instance = getCurrentInstance();
+
+// 状态管理
+const orderNo = ref("");
+const orderId = ref("");
+const showPayLoading = ref(false);
+const paymentInProgress = ref(false);
+
+// 回调函数存储
+const callbacks = ref({
+  onUniPayCreate: null,
+  onUniPaySuccess: null,
+  onUniPayCancel: null,
+  onUniPayFail: null,
+});
+
+/**
+ * 发起微信支付
+ * @param {Object} options - 支付参数
+ * @param {number} options.amount - 支付金额(分)
+ * @param {string} options.description - 商品描述
+ * @param {string} options.openId - 用户openId
+ * @param {string} options.orderPrefix - 订单号前缀
+ * @param {Function} options.onUniPayCreate - 订单创建成功回调
+ * @param {Function} options.onUniPaySuccess - 支付成功回调
+ * @param {Function} options.onUniPayCancel - 取消支付回调
+ * @param {Function} options.onUniPayFail - 支付失败回调
+ */
+const createUniPay = async (options) => {
+  // 防止重复发起支付
+  if (paymentInProgress.value) return;
+
+  try {
+    paymentInProgress.value = true;
+    showPayLoading.value = true;
+
+    // 保存回调函数
+    Object.keys(callbacks.value).forEach((key) => {
+      callbacks.value[key] =
+        options[key] && typeof options[key] === "function"
+          ? options[key]
+          : () => {};
+    });
+
+    // 生成订单号(使用公共组件)
+    orderNo.value = generateCustomId(options.orderPrefix || "WX");
+
+    // 调用后端创建支付订单
+    const { data: payRes } = await createPaymentOrder({
+      amount: options.amount,
+      description: options.description,
+      openId: options.openId,
+      orderNo: orderNo.value,
+    });
+
+    // 订单创建成功,触发回调
+    callbacks.value.onUniPayCreate({
+      out_trade_no: orderNo.value,
+      ...payRes,
+    });
+
+    // 调起微信支付
+    await uni.requestPayment({
+      provider: "wxpay",
+      timeStamp: payRes.timeStamp.toString(),
+      nonceStr: payRes.nonceStr,
+      package: payRes.package,
+      signType: payRes.signType,
+      paySign: payRes.paySign,
+      success: () => {
+        confirmPaymentStatus();
+      },
+      fail: (err) => {
+        showPayLoading.value = false;
+        paymentInProgress.value = false;
+        if (err.errMsg && err.errMsg.includes("cancel")) {
+          callbacks.value.onUniPayCancel(err);
+        } else {
+          callbacks.value.onUniPayFail(err);
+        }
+      },
+    });
+  } catch (err) {
+    showPayLoading.value = false;
+    paymentInProgress.value = false;
+    console.error("支付流程异常:", err);
+    callbacks.value.onUniPayFail(err);
+  }
+};
+
+/**
+ * 确认支付状态(轮询查询)
+ */
+const confirmPaymentStatus = async () => {
+  try {
+    let checkCount = 0;
+    const maxCheckCount = 10; // 最多查询10次
+    const checkInterval = 1000; // 每次查询间隔1秒
+
+    const checkStatus = async () => {
+      // 超过最大查询次数,视为超时
+      if (checkCount >= maxCheckCount) {
+        showPayLoading.value = false;
+        paymentInProgress.value = false;
+        callbacks.value.onUniPayFail(
+          new Error("支付结果查询超时,请稍后查看订单状态")
+        );
+        return;
+      }
+
+      checkCount++;
+
+      try {
+        // 查询支付状态
+        const res = await queryPaymentStatus(orderNo.value);
+        // 根据后端返回的支付状态进行处理
+        if (res.code === 200) {
+          showPayLoading.value = false;
+          paymentInProgress.value = false;
+          callbacks.value.onUniPaySuccess({
+            ...res.data,
+            out_trade_no: orderNo.value,
+          });
+        }
+      } catch (err) {
+        // 查询接口出错,重试
+        console.error(`第${checkCount}次查询支付状态失败:`, err);
+        setTimeout(checkStatus, checkInterval);
+      }
+    };
+
+    // 开始第一次查询
+    checkStatus();
+  } catch (err) {
+    showPayLoading.value = false;
+    paymentInProgress.value = false;
+    console.error("确认支付状态异常:", err);
+    callbacks.value.onUniPayFail(err);
+  }
+};
+
+// 对外暴露方法
+defineExpose({
+  createUniPay,
+});
+</script>
+
+<style scoped>
+/* 支付加载提示样式 */
+.pay-loading-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+.pay-loading-box {
+  background-color: white;
+  padding: 30rpx 40rpx;
+  border-radius: 16rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.loading-spinner {
+  width: 50rpx;
+  height: 50rpx;
+  border: 4rpx solid #eee;
+  border-top-color: #07c160;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 20rpx;
+}
+
+.loading-text {
+  color: #333;
+  font-size: 28rpx;
+}
+
+/* 旋转动画 */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

+ 8 - 2
pages.json

@@ -205,6 +205,12 @@
 				"navigationBarBackgroundColor": "#ffe079",
 				"navigationBarTextStyle": "black"
 			}
+		},
+		{
+			"path": "pages/SVIP/SVIP",
+			"style": {
+				"navigationBarTitleText": "SVIP权益"
+			}
 		}
 	],
 	"subPackages": [
@@ -304,7 +310,7 @@
 					}
 				},
 				{
-					"path": "bank_card_manage/index",
+					"path": "card_page/index",
 					"style": {
 						"navigationBarTitleText": "卡包管理",
 						"navigationBarBackgroundColor": "#ffe079",
@@ -319,7 +325,7 @@
 					}
 				},
 				{
-					"path": "bank_card_manage/create",
+					"path": "card_page/create",
 					"style": {
 						"navigationBarTitleText": "卡包编辑",
 						"navigationBarBackgroundColor": "#ffe079",

+ 379 - 0
pages/SVIP/SVIP.vue

@@ -0,0 +1,379 @@
+<template>
+  <view class="level-container">
+    <!-- 顶部会员信息区域 -->
+    <view class="vip-info">
+      <view class="flex-between vip-box">
+        <view class="flex_2">
+          <view class="flex-between">
+            <view class="vip-text">
+              <view class="vip-title">SVIP会员</view>
+              <view class="vip-desc"
+                >会员等级 {{ appStore?.$userInfo?.level || 0 }}</view
+              >
+            </view>
+            <view class="point-info">
+              <text class="point-text">{{
+                appStore?.$userInfo?.integral || 0
+              }}</text>
+              <text class="point-desc">会员贝币</text>
+            </view>
+          </view>
+          <view>
+            <view class="growth-info">
+              <text>成长值 {{ appStore?.$userInfo?.experience || 0 }}</text>
+              <text class="growth-progress">
+                {{ appStore?.$userInfo?.experience || 0 }}/{{
+                  appStore?.$userInfo?.experienceCount || 0
+                }}
+              </text>
+            </view>
+            <up-line-progress
+              :percentage="percentExperience"
+              activeColor="#d6c3a3"
+              inactiveColor="#808080"
+              height="6"
+              :showText="false"
+            ></up-line-progress>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- SVIP尊享权益 -->
+    <view class="vip-benefit">
+      <view class="task-title">SVIP尊享权益</view>
+      <view class="task-item" v-for="(task, index) in taskList" :key="index">
+        <image class="task-icon" :src="task.icon"></image>
+        <view class="task-desc flex-center-between flex_1">
+          <text class="task-name">{{ task.name }}</text>
+          <text class="task-reward flex_1">{{ task.reward }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- SVIP购买按钮(仅非SVIP用户显示) -->
+    <view class="svip-price" v-if="!isSvip">
+      <view class="flex-center" @click="handlePayOpen">
+        <view class="svip-price-btn">
+          <text class="svip-price-name">年费会员¥</text>
+          <text class="svip-price-num">{{ totalPrice }}</text>
+        </view>
+      </view>
+    </view>
+
+    <WechatPayment ref="wechatPaymentRef" />
+  </view>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useAppStore } from "@/stores/app";
+import { svipPrice, svipsaveAPI } from "@/api/svip";
+import { getUserInfo } from "@/api/user";
+// 引入封装的微信支付组件(替换原paymentCommon)
+import WechatPayment from "@/components/payment/WechatPayment.vue";
+// 引入后端接口(按需补充:如“创建会员订单”“标记SVIP身份”的接口)
+// import { createVipOrder, markUserSvip } from "@/api/vip";
+import { onLoad } from "@dcloudio/uni-app";
+
+// 状态管理
+const appStore = useAppStore();
+const wechatPaymentRef = ref(null); // 微信支付组件引用
+const totalPrice = ref(0); // 会员价格(单位:元,从接口获取)
+const orderId = ref(""); // 后端生成的会员订单ID(用于后续标记SVIP)
+
+// 计算是否为SVIP用户
+const isSvip = computed(() => {
+  return appStore.isLogin && !!appStore?.$userInfo?.svip;
+});
+// 获取用户信息
+async function fetchUserInfo() {
+  const { data } = await getUserInfo();
+  appStore.UPDATE_USERINFO(data);
+}
+// 会员权益列表
+const taskList = ref([
+  {
+    name: "每日福利",
+    reward: "200成长值",
+    icon: "https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/svip/%E8%B7%AF%E5%BE%84733%403x.png",
+  },
+  {
+    name: "回收特权",
+    reward: "回收价+0.3/克",
+    icon: "https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/svip/huishoutequan.png",
+  },
+  {
+    name: "整点秒杀",
+    reward: "抄底补贴,限时抢购",
+    icon: "https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/svip/zhengdianmiaosha.png",
+  },
+  {
+    name: "超级工具",
+    reward: "自动回收,金价预警使用权限",
+    icon: "https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/svip/chaojigongju.png",
+  },
+  {
+    name: "邮费减半",
+    reward: "邮费全部五折",
+    icon: "https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/svip/youfeijianban.png",
+  },
+  {
+    name: "专属服务群",
+    reward: "专属福利,优先传达",
+    icon: "https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/svip/zhuanshufuli.png",
+  },
+]);
+
+// 成长值进度百分比
+const percentExperience = computed(() => {
+  if (!appStore.isLogin) return 0;
+  const current = appStore.$userInfo.experience || 0;
+  const target = appStore.$userInfo.experienceCount || 1; // 避免除以0
+  const percent = Math.floor((current / target) * 100);
+  return percent > 100 ? 100 : percent;
+});
+
+// 页面加载时获取会员价格
+onLoad(() => {
+  getSvipPrice();
+});
+
+/**
+ * 获取SVIP会员价格(单位:元)
+ */
+const getSvipPrice = async () => {
+  try {
+    const res = await svipPrice();
+    totalPrice.value = Number(res.data) || 99; // 默认99元,防止接口返回异常
+  } catch (err) {
+    totalPrice.value = 99; // 兜底价格
+  }
+};
+
+/**
+ * 点击“开通会员”触发:发起微信支付
+ */
+const handlePayOpen = async () => {
+  // 1. 前置校验:是否登录、是否已为SVIP
+  if (!appStore.isLogin) {
+    uni.showToast({ title: "未登录", icon: "none" });
+    console.log("未登录");
+    return;
+  }
+  if (isSvip.value) {
+    uni.showToast({ title: "已经是svip会员", icon: "none" });
+    console.log("已经是svip会员");
+    return;
+  }
+  console.log("没有openId:", appStore?.$userInfo);
+
+  // 2. 校验用户openId(微信支付必需)
+  const userOpenId = appStore?.$userInfo?.openId; // 假设用户信息中存储了openId
+  if (!userOpenId) {
+    uni.showToast({ title: "用户openId获取失败", icon: "none" });
+    console.log("没有openId:");
+    return;
+  }
+
+  // 3. 调用微信支付组件的支付方法
+  wechatPaymentRef.value.createUniPay({
+    // 支付金额:元转分(微信支付要求单位为“分”)
+    amount: Math.round(totalPrice.value * 100),
+    description: `SVIP年费会员(¥${totalPrice.value})`, // 商品描述(显示在微信支付账单中)
+    openId: userOpenId, // 微信支付必需:用户的微信openId
+    orderPrefix: "SVIP", // 订单号前缀(与公共组件generateCustomId匹配)
+
+    /**
+     * 回调1:支付订单创建成功(用户尚未支付)
+     * 作用:记录后端生成的会员订单ID,用于后续支付成功后标记SVIP
+     */
+    onUniPayCreate: async (payRes) => {
+      console.log("会员支付订单创建成功:", payRes);
+      try {
+      } catch (err) {
+        console.error("创建会员订单异常:", err);
+      }
+    },
+
+    /**
+     * 回调2:支付成功(核心逻辑)
+     * 作用:通知后端标记用户为SVIP,刷新用户状态
+     */
+    onUniPaySuccess: async (payStatusRes) => {
+      console.log("SVIP会员支付成功:", payStatusRes);
+      try {
+        const res = await svipsaveAPI({
+          orderId: payStatusRes.out_trade_no,
+          price: totalPrice.value,
+          payType: "weixin",
+        });
+
+        appStore.USERINFO();
+      } catch (err) {
+        console.error("标记SVIP身份异常:", err);
+      }
+    },
+
+    /**
+     * 回调3:用户取消支付
+     */
+    onUniPayCancel: () => {
+      console.log("用户取消SVIP支付");
+    },
+
+    /**
+     * 回调4:支付失败(如网络异常、余额不足等)
+     */
+    onUniPayFail: (err) => {
+      const errMsg = err.message || "支付失败,请重新尝试";
+
+      console.error("SVIP会员支付失败:", err);
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.level-container {
+  color: black;
+  position: relative;
+  top: -130rpx;
+}
+
+/* 顶部会员信息 */
+.vip-info {
+  color: #dfd7bc;
+  margin-bottom: -25rpx;
+  overflow: hidden;
+  background-image: url("https://sb-admin.oss-cn-shenzhen.aliyuncs.com/shuibei-mini/svip/svip-bg.jpg");
+  background-size: 100%;
+  background-repeat: no-repeat;
+  height: 450rpx;
+
+  .vip-box {
+    margin: 200rpx 90rpx 100rpx 265rpx;
+  }
+}
+.vip-avatar {
+  width: 151rpx;
+  height: 161rpx;
+  margin-right: 70rpx;
+  margin-top: 50rpx;
+}
+.vip-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  margin-bottom: 8rpx;
+}
+.vip-desc {
+  font-size: 24rpx;
+  margin-bottom: 12rpx;
+}
+.growth-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 20rpx;
+  margin-bottom: 5rpx;
+  font-size: 20rpx;
+}
+.point-info {
+  text-align: right;
+}
+.point-text {
+  font-size: 40rpx;
+  font-weight: bold;
+  display: block;
+}
+.point-desc {
+  font-size: 20rpx;
+  opacity: 0.8;
+}
+
+/* VIP尊享权益 */
+.vip-benefit {
+  padding: 30rpx;
+}
+.task-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  margin: 32rpx 0 16rpx 0;
+}
+.task-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 30rpx;
+  border: 1px solid #f2f2f2;
+  border-radius: 8rpx;
+  margin-bottom: 16rpx;
+  background-color: #f4f3f1;
+  .task-icon {
+    width: 70rpx;
+    height: 70rpx;
+    margin-right: 30rpx;
+  }
+}
+.task-desc {
+  .task-name {
+    font-size: 28rpx;
+    font-weight: bold;
+    margin-right: 30rpx;
+    width: 160rpx;
+    text-align: center;
+  }
+  .task-reward {
+    font-size: 24rpx;
+    color: #5d5c5a;
+  }
+}
+
+/* SVIP购买按钮 */
+.svip-price {
+  .svip-price-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    text-align: center;
+  }
+  .flex-center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .svip-price-btn {
+    margin-top: 20rpx;
+    display: inline-block;
+    border: 1px solid #fdfdf9;
+    border-radius: 20rpx;
+    padding: 40rpx 100rpx;
+    background-color: #fee1a9;
+    color: #080604;
+    font-size: 24rpx;
+    cursor: pointer;
+    .svip-price-num {
+      font-size: 40rpx;
+      font-weight: bold;
+      margin-left: 10rpx;
+    }
+  }
+}
+
+/* 工具类(如果项目中没有全局flex工具类,需保留) */
+.flex-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-center-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex_1 {
+  flex: 1;
+}
+.flex_2 {
+  flex: 2;
+}
+</style>

+ 6 - 6
pages/VIP/VIP.vue

@@ -213,12 +213,12 @@ const taskList = ref([
     btnText: "立即前往",
     url: "/pages/users/vault/rechargeGold",
   },
-  {
-    name: "攒金",
-    reward: "每攒1克,获得20成长值,20贝币",
-    btnText: "立即前往",
-    url: "/pages/users/utils/wool/index",
-  },
+  // {
+  //   name: "攒金",
+  //   reward: "每攒1克,获得20成长值,20贝币",
+  //   btnText: "立即前往",
+  //   url: "/pages/users/utils/wool/index",
+  // },
   {
     name: "消费",
     reward: "每消费1元工费,获得1成长值,1贝币",

+ 56 - 11
pages/user/index.vue

@@ -74,17 +74,17 @@
         </view>
       </view>
 
-      <view class="wallet-actions">
-        <view class="wallet-btn withdraw" @click="recharge">充值</view>
-        <view class="wallet-btn recharge" @click="withdraw">提现</view>
+      <view class="wallet-actions" v-if="tradeList&&tradeList.length>0">
+        <view class="wallet-btn withdraw" @click="goDetail(tradeList[0].jumpUrl)">{{tradeList[0].iconName}}</view>
+        <view class="wallet-btn recharge" @click="goDetail(tradeList[1].jumpUrl)">{{tradeList[1].iconName}}</view>
       </view>
 
-      <view class="functions">
-        <view class="function-item" v-for="item in mainFunctions" :key="item.name" @click="handleFunctionClick(item.pageUrl)">
+      <view class="functions" v-if="useList&&useList.length>0">
+        <view class="function-item" v-for="item in useList" :key="item.iconName" @click="goDetail(item.jumpUrl)">
           <view class="function-icon">
             <image class="img" :src="item.src" mode="widthFix"></image>
           </view>
-          <text class="function-name">{{ item.name }}</text>
+          <text class="function-name">{{ item.iconName }}</text>
         </view>
       </view>
     </view>
@@ -152,7 +152,7 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
 import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
 import { isHttpsImage } from "@/utils/util";
@@ -180,8 +180,8 @@ const wallet = ref({
 const mainFunctions = ref([
   { src: '/static/images/setting/mailiao.png', name: '买料',pageUrl:'/pages/users/vault/rechargeGold' },
   { src: '/static/images/setting/mailiao2.png', name: '卖料',pageUrl:'/pages/users/vault/storeMetal/index' },
-  { src: '/static/images/setting/cunliao.png', name: '存料',pageUrl:'/pages/users/vault/storeMetal/goldBullionStock?type=savegold' },
-  { src: '/static/images/setting/tiliao.png', name: '提料',pageUrl:'/pages/users/vault/storeMetal/metalExchange?type=materialdeduction' }
+  { src: '/static/images/setting/cunliao.png', name: '存料',pageUrl:'/pages/users/vault/storeMetal/goldBullionStock' },
+  { src: '/static/images/setting/tiliao.png', name: '提料',pageUrl:'/pages/users/vault/storeMetal/metalExchange' }
 ])
 
 // 最近访问的商家
@@ -219,6 +219,35 @@ onShow(() => {
   getHistoryList()
 })
 
+const wxConfig = ref({});
+const tradeList = ref([]);
+const useList = ref([])
+watch(
+  () => appStore.wxConfig,
+  (newVal) => {
+    const configDate = newVal || appStore.$wxConfig;
+    wxConfig.value = configDate;
+	const list = JSON.parse(configDate.essentialFunctions);
+    tradeList.value = [list[0],list[1]];
+	useList.value = [{
+		...list[2],
+		src: '/static/images/setting/mailiao.png'
+	},{
+		...list[3],
+		src: '/static/images/setting/mailiao2.png'
+	},{
+		...list[4],
+		src: '/static/images/setting/cunliao.png',
+		iconName: '存料'
+	},{
+		...list[5],
+		src: '/static/images/setting/tiliao.png'
+	}]
+	console.log(tradeList.value)
+  },
+  { deep: true, immediate: true }
+);
+
 // 编辑资料
 const editProfile = () => {
   uni.showToast({
@@ -254,7 +283,7 @@ const recharge = () => {
   if(!isLogin){
     toLogin();
   }else{
-    uni.navigateTo({ url:"/pages/users/vault/recharge" });
+    uni.navigateTo({ url:`/pages/webview/index?path=${'/pages/users/vault/rechargeRmb'}` });
   }
 }
 
@@ -263,10 +292,26 @@ const withdraw = () => {
   if(!isLogin){
     toLogin();
   }else{
-    uni.navigateTo({ url:"/pages/users/vault/withdraw" });
+    uni.navigateTo({ url:`/pages/webview/index?path=${'/pages/users/vault/withdraw'}` });
   }
 }
 
+const goDetail = (url) => {
+	console.log(url)
+	const webviewPageUrl = `/pages/webview/index?path=${url}`;
+	uni.navigateTo({
+	  url: webviewPageUrl,
+	  fail: (err) => {
+	    console.error("跳转到webview页面失败:", err);
+	    uni.showToast({
+	      title: "跳转失败,请重试",
+	      icon: "none",
+	      duration: 1500,
+	    });
+	  },
+	});
+}
+
 // 功能点击
 const handleFunctionClick = (url) => {
   console.log(url)

pages/users/bank_card_manage/create.vue → pages/users/card_page/create.vue


+ 3 - 2
pages/users/bank_card_manage/index.vue

@@ -128,7 +128,7 @@ const selectCard = async (card) => {
 const editCard = (card) => {
   const queryStr = `id=${card.id}&bankName=${card.bankName}&accountNumber=${card.accountNumber}&accountType=${card.accountType}&name=${card.accountName}&isDefault=${card.isDefault}`;
   uni.navigateTo({
-    url: `/pages/users/bank_card_manage/create?${queryStr}`,
+    url: `/pages/users/card_page/create?${queryStr}`,
   });
   isEditing.value = true;
   currentEditIndex.value = bankCards.value.findIndex((c) => c.id === card.id);
@@ -160,7 +160,8 @@ async function confirmDeleteCard() {
 }
 
 const addNewCard = () => {
-  uni.navigateTo({ url: "/pages/users/bank_card_manage/create" });
+	console.log('create')
+  uni.navigateTo({ url: "/pages/users/card_page/create" });
   isEditing.value = false;
   cardForm.bankName = "";
   cardForm.cardNumber = "";

+ 2 - 2
pages/users/vault/withdraw.vue

@@ -19,7 +19,7 @@
         <view class="account-item" @click="goToBankManage">
           <view class="account-info">
             <view class="bank-icon">
-              <!-- <text class="iconfont icon-qianbao">🏦</text> -->
+              <!-- <text class="iconfont icon-qianbao"></text> -->
               <text
                 :style="{
                   color:
@@ -162,7 +162,7 @@ const withdrawAll = () => {
 const goToBankManage = () => {
   // 跳转到银行卡管理页面
   uni.navigateTo({
-    url: "/pages/users/bank_card_manage/index",
+    url: "/pages/users/card_page/index",
   });
 };