From 1f735c5c53f5b3f72aebd938d97f70bd4ee5b7f8 Mon Sep 17 00:00:00 2001
From: Lufaneng <Lufaneng@foxmail.com>
Date: Mon, 15 Sep 2025 15:33:29 +0800
Subject: [PATCH] 1

---
 pages/consumption/consumption.vue |   2 +-
 pages/mine/mine.vue               | 866 +++++++++++++++---------------
 2 files changed, 421 insertions(+), 447 deletions(-)

diff --git a/pages/consumption/consumption.vue b/pages/consumption/consumption.vue
index a0578d8..b6ad248 100644
--- a/pages/consumption/consumption.vue
+++ b/pages/consumption/consumption.vue
@@ -49,7 +49,7 @@
               negative: item.amount < 0,
             }"
           >
-            {{ item.amount > 0 ? "+" : "" }}¥{{
+            {{ item.amount > 0 ? "+" : "-" }}¥{{
               Math.abs(item.amount).toFixed(2)
             }}
           </view>
diff --git a/pages/mine/mine.vue b/pages/mine/mine.vue
index 255f32d..eb9f9af 100644
--- a/pages/mine/mine.vue
+++ b/pages/mine/mine.vue
@@ -1,457 +1,431 @@
 <template>
-  <view class="container">
-    <!-- 顶部标题 -->
-    <view class="header">
-      <view class="header-title">管理您的账户信息和服务</view>
-    </view>
-
-    <!-- 用户信息卡片 -->
-    <view class="user-card">
-      <view class="user-info">
-        <image
+	<view class="container">
+		<!-- 顶部标题 -->
+		<view class="header">
+			<view class="header-title">管理您的账户信息和服务</view>
+		</view>
+
+		<!-- 用户信息卡片 -->
+		<view class="user-card">
+			<view class="user-info">
+				<div class="avatar"></div>
+				<!--        <image
           class="avatar"
           src="/static/imgs/avatar.png"
           mode="aspectFill"
-        ></image>
-        <view class="user-details">
-          <view class="username">
-            张三
-            <u-icon
-              name="checkmark-circle-fill"
-              color="#ffa500"
-              size="16"
-            ></u-icon>
-          </view>
-          <view class="user-id">用户ID: U12345678</view>
-          <view class="membership">
-            会员等级: 年会员 (有效期至: 2026-05-15)
-          </view>
-        </view>
-      </view>
-      <view class="edit-btn" @click="editProfile">
-        <text>点击编辑资料</text>
-      </view>
-    </view>
-
-    <!-- 账户余额 -->
-    <view class="balance-card">
-      <view class="balance-header">
-        <view class="balance-label">账户余额</view>
-        <u-button type="default" size="small" shape="round" @click="recharge">
-          充值
-        </u-button>
-      </view>
-      <view class="balance-amount">¥50.00</view>
-    </view>
-
-    <!-- 会员套餐 -->
-    <view class="membership-section">
-      <view class="membership-grid">
-        <view
-          class="membership-item"
-          :class="{ active: selectedPlan === 'monthly' }"
-          @click="selectPlan('monthly')"
-        >
-          <view class="tag new">新人特惠</view>
-          <view class="plan-name">包月会员</view>
-          <view class="plan-price">¥120</view>
-        </view>
-        <view
-          class="membership-item"
-          :class="{ active: selectedPlan === 'season' }"
-          @click="selectPlan('season')"
-        >
-          <view class="tag popular">最受欢迎</view>
-          <view class="plan-name">包季会员</view>
-          <view class="plan-price">¥300</view>
-          <view class="plan-discount">立减¥60</view>
-        </view>
-        <view
-          class="membership-item"
-          :class="{ active: selectedPlan === 'yearly' }"
-          @click="selectPlan('yearly')"
-        >
-          <view class="tag yearly">年度首享</view>
-          <view class="plan-name">包年会员</view>
-          <view class="plan-price">¥1000</view>
-          <view class="plan-discount">立减¥440</view>
-        </view>
-      </view>
-    </view>
-
-    <!-- 支付方式 -->
-    <view class="payment-section">
-      <view
-        class="payment-item"
-        :class="{ active: selectedPayment === 'alipay' }"
-        @click="selectPayment('alipay')"
-      >
-        <view class="payment-info">
-          <u-icon name="alipay-circle-fill" color="#1677ff" size="24"></u-icon>
-          <text class="payment-name">支付宝</text>
-        </view>
-        <u-icon
-          :name="
-            selectedPayment === 'alipay'
-              ? 'checkmark-circle-fill'
-              : 'radio-button-off'
-          "
-          :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
-          size="20"
-        ></u-icon>
-      </view>
-      <view
-        class="payment-item"
-        :class="{ active: selectedPayment === 'wechat' }"
-        @click="selectPayment('wechat')"
-      >
-        <view class="payment-info">
-          <u-icon name="weixin-fill" color="#07c160" size="24"></u-icon>
-          <text class="payment-name">支付宝</text>
-        </view>
-        <u-icon
-          :name="
-            selectedPayment === 'wechat'
-              ? 'checkmark-circle-fill'
-              : 'radio-button-off'
-          "
-          :color="selectedPayment === 'wechat' ? '#ff3333' : '#ccc'"
-          size="20"
-        ></u-icon>
-      </view>
-    </view>
-
-    <!-- 底部按钮 -->
-    <view class="bottom-section">
-      <u-button
-        type="primary"
-        size="large"
-        @click="confirmPayment"
-        :loading="paying"
-      >
-        确认支付
-      </u-button>
-      <view class="agreement">
-        购买前请仔细阅读
-        <text class="link" @click="showAgreement">《会员服务协议》</text>
-      </view>
-    </view>
-  </view>
+        ></image> -->
+				<view class="user-details">
+					<view class="username">
+						张三
+						<u-icon name="checkmark-circle-fill" color="#ffa500" size="16"></u-icon>
+					</view>
+					<view class="user-id">用户ID: U12345678</view>
+					<view class="membership">
+						会员等级: 年会员 (有效期至: 2026-05-15)
+					</view>
+				</view>
+			</view>
+			<view class="edit-btn" @click="editProfile">
+				<text>点击编辑资料</text>
+			</view>
+		</view>
+
+		<!-- 账户余额 -->
+		<view class="balance-card">
+			<div>
+
+				<view class="balance-header">
+					<view class="balance-label">账户余额</view>
+				</view>
+				<view class="balance-amount">¥50.00</view>
+			</div>
+			<uv-button type="primary" color="#fff" customStyle="color:#000;width:90px" shape="circle" @click="recharge">
+				充值
+			</uv-button>
+		</view>
+
+		<!-- 会员套餐 -->
+		<view class="membership-section">
+			<view class="membership-grid">
+				<view class="membership-item" :class="{ active: selectedPlan === 'monthly' }"
+					@click="selectPlan('monthly')">
+					<view class="tag">新人特惠</view>
+					<view class="plan-name">包月会员</view>
+					<view class="plan-price">¥120</view>
+				</view>
+				<view class="membership-item" :class="{ active: selectedPlan === 'season' }"
+					@click="selectPlan('season')">
+					<view class="tag">最受欢迎</view>
+					<view class="plan-name">包季会员</view>
+					<view class="plan-price">¥300</view>
+					<view class="plan-discount">立减¥60</view>
+				</view>
+				<view class="membership-item" :class="{ active: selectedPlan === 'yearly' }"
+					@click="selectPlan('yearly')">
+					<view class="tag">年度首享</view>
+					<view class="plan-name">包年会员</view>
+					<view class="plan-price">¥1000</view>
+					<view class="plan-discount">立减¥440</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 支付方式 -->
+		<view class="payment-section">
+			<view class="payment-item" :class="{ active: selectedPayment === 'alipay' }"
+				@click="selectPayment('alipay')">
+				<view class="payment-info">
+					<uv-icon name="shopping-cart-fill" color="#1677ff" size="24"></uv-icon>
+					<text class="payment-name">支付宝</text>
+				</view>
+				<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'alipay' ? '#ff3333' : '#ccc'"
+					size="20"></uv-icon>
+			</view>
+			<view class="payment-item" :class="{ active: selectedPayment === 'wechat' }"
+				@click="selectPayment('wechat')">
+				<view class="payment-info">
+					<uv-icon name="weixin-fill" color="#07c160" size="24"></uv-icon>
+					<text class="payment-name">微信</text>
+				</view>
+				<uv-icon name="checkmark-circle-fill" :color="selectedPayment === 'wechat' ? '#ff3333' : '#ccc'"
+					size="20"></uv-icon>
+			</view>
+		</view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-section">
+			<uv-button type="primary" size="large" @click="confirmPayment" :loading="paying">
+				确认支付
+			</uv-button>
+			<view class="agreement">
+				购买前请仔细阅读
+				<text class="link" @click="showAgreement">《会员服务协议》</text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script setup>
-import { ref } from "vue";
-import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
-import { useAuthStore, useUserStore } from "@/store";
-import RPC from "@/utils/request";
-
-const modal = ref(null);
-const authStore = useAuthStore();
-const userStore = useUserStore();
-
-// 响应式数据
-const selectedPlan = ref("season"); // 默认选中包季会员
-const selectedPayment = ref("alipay"); // 默认选中支付宝
-const paying = ref(false);
-
-// 选择会员套餐
-const selectPlan = (plan) => {
-  selectedPlan.value = plan;
-};
-
-// 选择支付方式
-const selectPayment = (payment) => {
-  selectedPayment.value = payment;
-};
-
-// 编辑资料
-const editProfile = () => {
-  uni.navigateTo({
-    url: "/pagesA/edit-profile/edit-profile",
-  });
-};
-
-// 充值
-const recharge = () => {
-  uni.navigateTo({
-    url: "/pages/recharge/recharge",
-  });
-};
-
-// 确认支付
-const confirmPayment = async () => {
-  if (!selectedPlan.value) {
-    uni.showToast({
-      title: "请选择会员套餐",
-      icon: "none",
-    });
-    return;
-  }
-
-  if (!selectedPayment.value) {
-    uni.showToast({
-      title: "请选择支付方式",
-      icon: "none",
-    });
-    return;
-  }
-
-  paying.value = true;
-  try {
-    const params = {
-      plan: selectedPlan.value,
-      paymentMethod: selectedPayment.value,
-    };
-
-    // 这里调用支付API
-    // const result = await RPC.post('/api/payment', params)
-
-    uni.showToast({
-      title: "正在跳转支付...",
-      icon: "loading",
-      duration: 2000,
-    });
-
-    // 模拟支付过程
-    setTimeout(() => {
-      uni.showToast({
-        title: "支付成功",
-        icon: "success",
-      });
-      paying.value = false;
-    }, 2000);
-  } catch (error) {
-    console.error("支付失败:", error);
-    uni.showToast({
-      title: "支付失败，请重试",
-      icon: "none",
-    });
-    paying.value = false;
-  }
-};
-
-// 显示协议
-const showAgreement = () => {
-  uni.navigateTo({
-    url: "/pages/agreement/agreement",
-  });
-};
+	import {
+		ref
+	} from "vue";
+	import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
+	import {
+		useAuthStore,
+		useUserStore
+	} from "@/store";
+	import RPC from "@/utils/request";
+
+	const modal = ref(null);
+	const authStore = useAuthStore();
+	const userStore = useUserStore();
+
+	// 响应式数据
+	const selectedPlan = ref("season"); // 默认选中包季会员
+	const selectedPayment = ref("alipay"); // 默认选中支付宝
+	const paying = ref(false);
+
+	// 选择会员套餐
+	const selectPlan = (plan) => {
+		selectedPlan.value = plan;
+	};
+
+	// 选择支付方式
+	const selectPayment = (payment) => {
+		selectedPayment.value = payment;
+	};
+
+	// 编辑资料
+	const editProfile = () => {
+		uni.navigateTo({
+			url: "/pagesA/edit-profile/edit-profile",
+		});
+	};
+
+	// 充值
+	const recharge = () => {
+		uni.navigateTo({
+			url: "/pages/recharge/recharge",
+		});
+	};
+
+	// 确认支付
+	const confirmPayment = async () => {
+		if (!selectedPlan.value) {
+			uni.showToast({
+				title: "请选择会员套餐",
+				icon: "none",
+			});
+			return;
+		}
+
+		if (!selectedPayment.value) {
+			uni.showToast({
+				title: "请选择支付方式",
+				icon: "none",
+			});
+			return;
+		}
+
+		paying.value = true;
+		try {
+			const params = {
+				plan: selectedPlan.value,
+				paymentMethod: selectedPayment.value,
+			};
+
+			// 这里调用支付API
+			// const result = await RPC.post('/api/payment', params)
+
+			uni.showToast({
+				title: "正在跳转支付...",
+				icon: "loading",
+				duration: 2000,
+			});
+
+			// 模拟支付过程
+			setTimeout(() => {
+				uni.showToast({
+					title: "支付成功",
+					icon: "success",
+				});
+				paying.value = false;
+			}, 2000);
+		} catch (error) {
+			console.error("支付失败:", error);
+			uni.showToast({
+				title: "支付失败，请重试",
+				icon: "none",
+			});
+			paying.value = false;
+		}
+	};
+
+	// 显示协议
+	const showAgreement = () => {
+		uni.navigateTo({
+			url: "/pages/agreement/agreement",
+		});
+	};
 </script>
 
 <style lang="scss" scoped>
-.container {
-  font-size: 14px;
-  min-height: 100vh;
-  background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%);
-  padding-bottom: 120px;
-}
-
-.header {
-  padding: 20px 16px 16px;
-
-  .header-title {
-    color: white;
-    font-size: 18px;
-    font-weight: 500;
-  }
-}
-
-.user-card {
-  margin: 0 16px 16px;
-  background: white;
-  border-radius: 12px;
-  padding: 16px;
-
-  .user-info {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-
-    .avatar {
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      margin-right: 12px;
-    }
-
-    .user-details {
-      flex: 1;
-
-      .username {
-        display: flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 18px;
-        font-weight: bold;
-        color: #333;
-        margin-bottom: 4px;
-      }
-
-      .user-id {
-        font-size: 12px;
-        color: #999;
-        margin-bottom: 2px;
-      }
-
-      .membership {
-        font-size: 12px;
-        color: #999;
-      }
-    }
-  }
-
-  .edit-btn {
-    text-align: right;
-    color: #4285f4;
-    font-size: 14px;
-  }
-}
-
-.balance-card {
-  margin: 0 16px 16px;
-  background: linear-gradient(135deg, #4285f4 0%, #6fa8f5 100%);
-  border-radius: 12px;
-  padding: 20px;
-  color: white;
-
-  .balance-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 8px;
-
-    .balance-label {
-      font-size: 14px;
-      opacity: 0.9;
-    }
-  }
-
-  .balance-amount {
-    font-size: 32px;
-    font-weight: bold;
-  }
-}
-
-.membership-section {
-  margin: 0 16px 24px;
-
-  .membership-grid {
-    display: flex;
-    gap: 8px;
-
-    .membership-item {
-      flex: 1;
-      background: white;
-      border-radius: 12px;
-      padding: 16px 12px;
-      text-align: center;
-      position: relative;
-      border: 2px solid transparent;
-      transition: all 0.3s;
-
-      &.active {
-        border-color: #4285f4;
-        background-color: #f0f7ff;
-      }
-
-      .tag {
-        position: absolute;
-        top: -6px;
-        left: 50%;
-        transform: translateX(-50%);
-        padding: 2px 8px;
-        border-radius: 8px;
-        font-size: 10px;
-        color: white;
-
-        &.new {
-          background: #ff6b6b;
-        }
-
-        &.popular {
-          background: #ff3333;
-        }
-
-        &.yearly {
-          background: #ff3333;
-        }
-      }
-
-      .plan-name {
-        font-size: 14px;
-        color: #333;
-        margin: 12px 0 8px;
-      }
-
-      .plan-price {
-        font-size: 20px;
-        font-weight: bold;
-        color: #ff3333;
-        margin-bottom: 4px;
-      }
-
-      .plan-discount {
-        font-size: 12px;
-        color: #999;
-      }
-    }
-  }
-}
-
-.payment-section {
-  margin: 0 16px 24px;
-
-  .payment-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: white;
-    border-radius: 12px;
-    padding: 16px;
-    margin-bottom: 8px;
-    border: 1px solid #e5e5e5;
-    transition: all 0.3s;
-
-    &.active {
-      border-color: #4285f4;
-      background-color: #f0f7ff;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .payment-info {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-
-      .payment-name {
-        font-size: 14px;
-        color: #333;
-      }
-    }
-  }
-}
-
-.bottom-section {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: white;
-  padding: 16px;
-  border-top: 1px solid #e5e5e5;
-
-  .agreement {
-    text-align: center;
-    font-size: 12px;
-    color: #999;
-    margin-top: 12px;
-
-    .link {
-      color: #4285f4;
-    }
-  }
-}
+	.container {
+		font-size: 14px;
+		background: linear-gradient(180deg, #7b9cdb 0%, #f8f8f8 40%);
+		padding-bottom: 120px;
+	}
+
+	.header {
+		padding: 20px 16px 16px;
+
+		.header-title {
+			color: white;
+			font-size: 18px;
+			font-weight: 500;
+		}
+	}
+
+	.user-card {
+		margin: 0 16px 16px;
+		background: white;
+		border-radius: 12px;
+		padding: 16px;
+		position: relative;
+
+		.user-info {
+			display: flex;
+			align-items: center;
+			// margin-bottom: 12px;
+
+			.avatar {
+				width: 60px;
+				height: 60px;
+				border-radius: 50%;
+				margin-right: 12px;
+				background-color: skyblue;
+				overflow: hidden;
+
+				.img {
+					width: 100%;
+					height: 100%;
+				}
+
+			}
+
+			.user-details {
+				flex: 1;
+
+				.username {
+					display: flex;
+					align-items: center;
+					gap: 4px;
+					font-size: 18px;
+					font-weight: bold;
+					color: #333;
+					margin-bottom: 4px;
+				}
+
+				.user-id {
+					font-size: 12px;
+					color: #999;
+					margin-bottom: 2px;
+				}
+
+				.membership {
+					font-size: 12px;
+					color: #999;
+				}
+			}
+		}
+
+		.edit-btn {
+			text-align: right;
+			color: #4285f4;
+			font-size: 14px;
+			position: absolute;
+			top: 10px;
+			right: 20px;
+		}
+	}
+
+	.balance-card {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 0 16px 16px;
+		background: linear-gradient(135deg, #4285f4 0%, #6fa8f5 100%);
+		border-radius: 12px;
+		padding: 16px;
+		color: white;
+
+		.balance-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 6px;
+
+			.balance-label {
+				font-size: 14px;
+				opacity: 0.9;
+			}
+		}
+
+		.balance-amount {
+			font-size: 28px;
+			font-weight: bold;
+		}
+	}
+
+	.membership-section {
+		margin: 0 16px 16px;
+
+		.membership-grid {
+			display: flex;
+			gap: 8px;
+
+			.membership-item {
+				flex: 1;
+				background: white;
+				border-radius: 12px;
+				padding: 16px 12px;
+				text-align: center;
+				position: relative;
+				border: 2px solid transparent;
+				transition: all 0.3s;
+				overflow: hidden;
+
+				&.active {
+					border-color: #4285f4;
+					background-color: #f0f7ff;
+				}
+
+				.tag {
+					position: absolute;
+					top: 0px;
+					left: 0;
+					padding: 2px 8px;
+					border-radius: 0 0 10px 0;
+					font-size: 10px;
+					color: white;
+					background: #ff3333;
+				}
+
+				.plan-name {
+					font-size: 14px;
+					color: #333;
+					margin: 12px 0 8px;
+				}
+
+				.plan-price {
+					font-size: 20px;
+					font-weight: bold;
+					color: #ff3333;
+					margin-bottom: 4px;
+				}
+
+				.plan-discount {
+					font-size: 12px;
+					color: #999;
+				}
+			}
+		}
+	}
+
+	.payment-section {
+		margin: 0 16px 24px;
+
+		.payment-item {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background: white;
+			border-radius: 12px;
+			padding: 16px;
+			margin-bottom: 8px;
+			border: 1px solid #e5e5e5;
+			transition: all 0.3s;
+
+			&.active {
+				border-color: #4285f4;
+				background-color: #f0f7ff;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.payment-info {
+				display: flex;
+				align-items: center;
+				gap: 12px;
+
+				.payment-name {
+					font-size: 14px;
+					color: #333;
+				}
+			}
+		}
+	}
+
+	.bottom-section {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: white;
+		padding: 16px;
+		border-top: 1px solid #e5e5e5;
+
+		.agreement {
+			text-align: center;
+			font-size: 12px;
+			color: #999;
+			margin-top: 12px;
+
+			.link {
+				color: #4285f4;
+			}
+		}
+	}
 </style>
\ No newline at end of file