小程序基本页面完成

dist/dev/mp-weixin/pages/mine/mine.js

@@ -3,8 +3,51 @@ const common_vendor = require("../../common/vendor.js");
 const _sfc_main = {
   __name: "mine",
   setup(__props) {
+    const isLoggedIn = common_vendor.ref(false);
+    const userInfo = common_vendor.ref({
+      nickName: "",
+      avatarUrl: ""
+    });
+    const points = common_vendor.ref(900);
+    const toggleLogin = () => {
+      if (isLoggedIn.value) {
+        isLoggedIn.value = false;
+        userInfo.value = { nickName: "", avatarUrl: "" };
+        common_vendor.index.showToast({ title: "已退出登录", icon: "none" });
+      } else {
+        isLoggedIn.value = true;
+        userInfo.value = {
+          nickName: "测试用户",
+          // Using a placeholder or one of the existing images as a mock avatar
+          avatarUrl: "/static/images/tab_mine_active.png"
+        };
+        common_vendor.index.showToast({ title: "登录成功", icon: "success" });
+      }
+    };
+    const handleRecharge = () => {
+      if (!isLoggedIn.value) {
+        common_vendor.index.showToast({ title: "请先登录", icon: "none" });
+        return;
+      }
+      common_vendor.index.showToast({ title: "充值功能开发中", icon: "none" });
+    };
+    const handleHistory = () => {
+      if (!isLoggedIn.value) {
+        common_vendor.index.showToast({ title: "请先登录", icon: "none" });
+        return;
+      }
+      common_vendor.index.showToast({ title: "记录功能开发中", icon: "none" });
+    };
     return (_ctx, _cache) => {
-      return {};
+      return {
+        a: isLoggedIn.value && userInfo.value.avatarUrl ? userInfo.value.avatarUrl : "/static/images/tab_mine_active.png",
+        b: common_vendor.t(isLoggedIn.value ? userInfo.value.nickName || "微信用户" : "游客"),
+        c: common_vendor.t(isLoggedIn.value ? points.value : 0),
+        d: common_vendor.o(handleRecharge),
+        e: common_vendor.o(handleHistory),
+        f: common_vendor.t(isLoggedIn.value ? "退出登录" : "登录"),
+        g: common_vendor.o(toggleLogin)
+      };
     };
   }
 };

dist/dev/mp-weixin/pages/mine/mine.wxml

@@ -1 +1 @@
-<view class="page-mine"><view class="page-title-card"><text class="page-title-text">量化选股大师</text></view><view class="content-area"><text class="title">个人中心</text><text class="sub">这里后续可以展示用户信息和设置</text></view></view>
+<view class="page-mine"><view class="user-card"><view class="avatar-container"><image class="avatar" src="{{a}}" mode="aspectFill"></image></view><view class="user-info"><text class="username">{{b}}</text></view></view><view class="section-card"><view class="card-header"><view class="header-icon-box"><text class="header-icon-text">🪙</text></view><text class="header-title">积分值</text></view><view class="card-content points-content"><text class="points-value">积分值：{{c}}</text><view class="points-actions"><button class="mini-btn" bindtap="{{d}}">充值</button><button class="mini-btn" bindtap="{{e}}">积分记录</button></view></view></view><view class="section-card"><view class="card-header"><view class="header-icon-box"><text class="header-icon-text">📝</text></view><text class="header-title">交易记录</text></view><view class="card-content transaction-content"><text class="empty-text">暂无交易记录</text></view></view><view class="action-area"><button class="main-btn" bindtap="{{g}}">{{f}}</button></view></view>

dist/dev/mp-weixin/pages/mine/mine.wxss

@@ -4,29 +4,132 @@
   flex-direction: column;
   background: #f5f6fb;
   min-height: 100vh;
+  padding: 30rpx;
+  box-sizing: border-box;
 }
-.page-title-card {
+
+/* User Card */
+.user-card {
   background: #ffffff;
-  padding: 30rpx 0;
-  text-align: center;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  border-radius: 0;
+  border-radius: 20rpx;
+  padding: 40rpx;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  margin-bottom: 30rpx;
 }
-.content-area {
-  padding: 32rpx;
+.avatar-container {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #eee;
+  flex-shrink: 0;
 }
-.page-title-text {
-  font-size: 36rpx;
-  font-weight: 800;
-  color: #3F51F7;
-  letter-spacing: 2rpx;
+.avatar {
+  width: 100%;
+  height: 100%;
+}
+.user-info {
+  margin-left: 30rpx;
+  flex: 1;
 }
-.title {
+.username {
   font-size: 36rpx;
   font-weight: bold;
-  margin-bottom: 20rpx;
+  color: #333;
+}
+
+/* Section Cards */
+.section-card {
+  background: #ffffff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  margin-bottom: 30rpx;
+}
+.card-header {
+  background: #3F51F7; /* Main Blue */
+  padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+}
+.header-icon-box {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15rpx;
+}
+.header-icon-text {
+  font-size: 32rpx;
+  color: #fff;
+}
+.header-title {
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+.card-content {
+  padding: 30rpx;
+  background: #fff;
 }
-.sub {
+
+/* Points Content */
+.points-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.points-value {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: 500;
+}
+.points-actions {
+  display: flex;
+  gap: 20rpx;
+}
+.mini-btn {
+  background: #3F51F7;
+  color: #fff;
+  font-size: 24rpx;
+  padding: 10rpx 30rpx;
+  border-radius: 30rpx;
+  line-height: 2;
+  margin: 0;
+  border: none;
+}
+.mini-btn::after {
+  border: none;
+}
+
+/* Transaction Content */
+.transaction-content {
+  display: flex;
+  justify-content: center;
+  padding: 60rpx 30rpx;
+}
+.empty-text {
+  color: #999;
   font-size: 28rpx;
-  color: #888;
+}
+
+/* Bottom Action */
+.action-area {
+  margin-top: 40rpx;
+}
+.main-btn {
+  background: #3F51F7;
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 50rpx;
+  padding: 10rpx 0;
+  width: 100%;
+  box-shadow: 0 4rpx 10rpx rgba(63, 81, 247, 0.3);
+  line-height: 2.5;
+}
+.main-btn:active {
+  opacity: 0.9;
 }

src/pages/mine/mine.vue

@@ -1,18 +1,104 @@
 <template>
   <view class="page-mine">
-    <!-- 顶部标题卡片 -->
-    <view class="page-title-card">
-      <text class="page-title-text">量化选股大师</text>
+    <!-- User Info Card -->
+    <view class="user-card">
+      <view class="avatar-container">
+        <!-- Default avatar if not logged in or no avatar -->
+        <image 
+          class="avatar" 
+          :src="isLoggedIn && userInfo.avatarUrl ? userInfo.avatarUrl : '/static/images/tab_mine_active.png'" 
+          mode="aspectFill"
+        ></image>
+      </view>
+      <view class="user-info">
+        <text class="username">{{ isLoggedIn ? (userInfo.nickName || '微信用户') : '游客' }}</text>
+      </view>
     </view>
-    <view class="content-area">
-      <text class="title">个人中心</text>
-      <text class="sub">这里后续可以展示用户信息和设置</text>
+
+    <!-- Points Card -->
+    <view class="section-card">
+      <view class="card-header">
+        <view class="header-icon-box">
+          <text class="header-icon-text">🪙</text>
+        </view>
+        <text class="header-title">积分值</text>
+      </view>
+      <view class="card-content points-content">
+        <text class="points-value">积分值：{{ isLoggedIn ? points : 0 }}</text>
+        <view class="points-actions">
+          <button class="mini-btn" @click="handleRecharge">充值</button>
+          <button class="mini-btn" @click="handleHistory">积分记录</button>
+        </view>
+      </view>
+    </view>
+
+    <!-- Transaction Record Card -->
+    <view class="section-card">
+      <view class="card-header">
+        <view class="header-icon-box">
+          <text class="header-icon-text">📝</text>
+        </view>
+        <text class="header-title">交易记录</text>
+      </view>
+      <view class="card-content transaction-content">
+        <text class="empty-text">暂无交易记录</text>
+      </view>
     </view>
+
+    <!-- Login/Logout Button -->
+    <view class="action-area">
+      <button class="main-btn" @click="toggleLogin">
+        {{ isLoggedIn ? '退出登录' : '登录' }}
+      </button>
+    </view>
+
   </view>
 </template>
 
 <script setup>
-// Logic for mine page
+import { ref } from 'vue'
+
+const isLoggedIn = ref(false)
+const userInfo = ref({
+  nickName: '',
+  avatarUrl: ''
+})
+const points = ref(900)
+
+const toggleLogin = () => {
+  if (isLoggedIn.value) {
+    // Logout
+    isLoggedIn.value = false
+    userInfo.value = { nickName: '', avatarUrl: '' }
+    uni.showToast({ title: '已退出登录', icon: 'none' })
+  } else {
+    // Login Simulation
+    // In a real app, use uni.getUserProfile or similar
+    isLoggedIn.value = true
+    userInfo.value = {
+      nickName: '测试用户', 
+      // Using a placeholder or one of the existing images as a mock avatar
+      avatarUrl: '/static/images/tab_mine_active.png' 
+    }
+    uni.showToast({ title: '登录成功', icon: 'success' })
+  }
+}
+
+const handleRecharge = () => {
+  if (!isLoggedIn.value) {
+    uni.showToast({ title: '请先登录', icon: 'none' })
+    return
+  }
+  uni.showToast({ title: '充值功能开发中', icon: 'none' })
+}
+
+const handleHistory = () => {
+  if (!isLoggedIn.value) {
+    uni.showToast({ title: '请先登录', icon: 'none' })
+    return
+  }
+  uni.showToast({ title: '记录功能开发中', icon: 'none' })
+}
 </script>
 
 <style>
@@ -21,34 +107,148 @@
   flex-direction: column;
   background: #f5f6fb;
   min-height: 100vh;
+  padding: 30rpx;
+  box-sizing: border-box;
 }
 
-.page-title-card {
+/* User Card */
+.user-card {
   background: #ffffff;
-  padding: 30rpx 0;
-  text-align: center;
-  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
-  border-radius: 0;
+  border-radius: 20rpx;
+  padding: 40rpx;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  margin-bottom: 30rpx;
 }
 
-.content-area {
-  padding: 32rpx;
+.avatar-container {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  overflow: hidden;
+  background-color: #eee;
+  flex-shrink: 0;
 }
 
-.page-title-text {
-  font-size: 36rpx;
-  font-weight: 800;
-  color: #3F51F7;
-  letter-spacing: 2rpx;
+.avatar {
+  width: 100%;
+  height: 100%;
+}
+
+.user-info {
+  margin-left: 30rpx;
+  flex: 1;
 }
 
-.title {
+.username {
   font-size: 36rpx;
   font-weight: bold;
-  margin-bottom: 20rpx;
+  color: #333;
+}
+
+/* Section Cards */
+.section-card {
+  background: #ffffff;
+  border-radius: 20rpx;
+  overflow: hidden;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  margin-bottom: 30rpx;
+}
+
+.card-header {
+  background: #3F51F7; /* Main Blue */
+  padding: 20rpx 30rpx;
+  display: flex;
+  align-items: center;
+}
+
+.header-icon-box {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15rpx;
+}
+
+.header-icon-text {
+  font-size: 32rpx;
+  color: #fff;
+}
+
+.header-title {
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: bold;
+}
+
+.card-content {
+  padding: 30rpx;
+  background: #fff;
+}
+
+/* Points Content */
+.points-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.points-value {
+  font-size: 32rpx;
+  color: #333;
+  font-weight: 500;
+}
+
+.points-actions {
+  display: flex;
+  gap: 20rpx;
 }
-.sub {
+
+.mini-btn {
+  background: #3F51F7;
+  color: #fff;
+  font-size: 24rpx;
+  padding: 10rpx 30rpx;
+  border-radius: 30rpx;
+  line-height: 2;
+  margin: 0;
+  border: none;
+}
+.mini-btn::after {
+  border: none;
+}
+
+/* Transaction Content */
+.transaction-content {
+  display: flex;
+  justify-content: center;
+  padding: 60rpx 30rpx;
+}
+
+.empty-text {
+  color: #999;
   font-size: 28rpx;
-  color: #888;
+}
+
+/* Bottom Action */
+.action-area {
+  margin-top: 40rpx;
+}
+
+.main-btn {
+  background: #3F51F7;
+  color: #fff;
+  font-size: 32rpx;
+  border-radius: 50rpx;
+  padding: 10rpx 0;
+  width: 100%;
+  box-shadow: 0 4rpx 10rpx rgba(63, 81, 247, 0.3);
+  line-height: 2.5;
+}
+
+.main-btn:active {
+  opacity: 0.9;
 }
 </style>