first commit

pages/usercenter/index.js

@@ -0,0 +1,160 @@
+// pages/usercenter/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    userInfo: {
+      avatarUrl: 'https://img.yzcdn.cn/vant/cat.jpeg',
+      nickName: '美丽用户',
+      phone: '138****8888',
+      level: '黄金会员',
+      points: 520
+    },
+    
+    // 我的预约
+    appointmentList: [],
+    
+    // 功能列表
+    functionList: [
+      { id: 1, name: '我的预约', icon: 'calendar', url: '/pages/appointment/index' },
+      { id: 2, name: '会员卡', icon: 'card', url: '/pages/member/index' },
+      { id: 3, name: '优惠券', icon: 'discount', url: '/pages/coupon/index' },
+      { id: 4, name: '积分商城', icon: 'shop', url: '/pages/points/index' }
+    ],
+    
+    // 服务列表
+    serviceList: [
+      { id: 1, name: '联系客服', icon: 'service', type: 'contact' },
+      { id: 2, name: '意见反馈', icon: 'chat', url: '/pages/feedback/index' },
+      { id: 3, name: '关于我们', icon: 'info-circle', url: '/pages/about/index' },
+      { id: 4, name: '设置', icon: 'setting', url: '/pages/settings/index' }
+    ]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    // 获取用户信息
+    const userInfo = wx.getStorageSync('userInfo');
+    if (userInfo) {
+      this.setData({
+        'userInfo.nickName': userInfo.nickName,
+        'userInfo.avatarUrl': userInfo.avatarUrl
+      });
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
+      this.getTabBar().init();
+    }
+    
+    // 获取预约列表
+    const appointmentList = wx.getStorageSync('appointmentList') || [];
+    this.setData({ appointmentList });
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  },
+  
+  /**
+   * 跳转到功能页面
+   */
+  goToFunction(e) {
+    const url = e.currentTarget.dataset.url;
+    const type = e.currentTarget.dataset.type;
+    
+    if (type === 'contact') {
+      this.contactCustomerService();
+      return;
+    }
+    
+    if (url) {
+      wx.navigateTo({
+        url: url
+      });
+    }
+  },
+  
+  /**
+   * 联系客服
+   */
+  contactCustomerService() {
+    wx.makePhoneCall({
+      phoneNumber: '400-123-4567'
+    });
+  },
+  
+  /**
+   * 查看预约详情
+   */
+  viewAppointmentDetail(e) {
+    const id = e.currentTarget.dataset.id;
+    wx.navigateTo({
+      url: `/pages/appointment/index?appointmentId=${id}`
+    });
+  },
+  
+  /**
+   * 取消预约
+   */
+  cancelAppointment(e) {
+    const id = e.currentTarget.dataset.id;
+    const appointmentList = this.data.appointmentList.filter(item => item.id !== id);
+    
+    // 更新本地存储
+    wx.setStorageSync('appointmentList', appointmentList);
+    
+    this.setData({ appointmentList });
+    
+    wx.showToast({
+      title: '已取消预约',
+      icon: 'success'
+    });
+  }
+})

pages/usercenter/index.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "navigation-bar": "/components/navigation-bar/navigation-bar",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  }
+}

pages/usercenter/index.wxml

@@ -0,0 +1,91 @@
+<!--pages/usercenter/index.wxml-->
+<navigation-bar title="个人中心" back="{{false}}" color="black" background="#FFF"></navigation-bar>
+
+<scroll-view class="usercenter-container" scroll-y>
+  <!-- 用户信息 -->
+  <view class="user-info">
+    <image src="{{userInfo.avatarUrl}}" mode="aspectFill" class="user-avatar"></image>
+    <view class="user-detail">
+      <view class="user-name">{{userInfo.nickName}}</view>
+      <view class="user-level">{{userInfo.level}}</view>
+      <view class="user-phone">{{userInfo.phone}}</view>
+    </view>
+    <view class="user-points">
+      <text class="points-value">{{userInfo.points}}</text>
+      <text class="points-label">积分</text>
+    </view>
+  </view>
+
+  <!-- 我的预约 -->
+  <view class="section my-appointments" wx:if="{{appointmentList.length > 0}}">
+    <view class="section-header">
+      <text class="section-title">我的预约</text>
+      <view class="section-more" bindtap="goToFunction" data-url="/pages/appointment/index">
+        <text>查看全部</text>
+        <t-icon name="chevron-right" size="32rpx" color="#999" />
+      </view>
+    </view>
+    
+    <view class="appointment-list">
+      <view wx:for="{{appointmentList.slice(0, 2)}}" wx:key="id" class="appointment-card">
+        <view class="appointment-header">
+          <view class="appointment-service">{{item.service.name}}</view>
+          <view class="appointment-status {{item.status === '已确认' ? 'confirmed' : ''}}">{{item.status}}</view>
+        </view>
+        <view class="appointment-info">
+          <view class="appointment-time">
+            <t-icon name="time" size="40rpx" />
+            <text>{{item.date}} {{item.time}}</text>
+          </view>
+          <view class="appointment-price">¥{{item.service.price}}</view>
+        </view>
+        <view class="appointment-actions">
+          <t-button size="small" variant="outline" bindtap="cancelAppointment" data-id="{{item.id}}">取消预约</t-button>
+          <t-button size="small" bindtap="viewAppointmentDetail" data-id="{{item.id}}">查看详情</t-button>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 功能列表 -->
+  <view class="section function-list">
+    <view class="section-header">
+      <text class="section-title">我的服务</text>
+    </view>
+    
+    <view class="function-grid">
+      <view 
+        wx:for="{{functionList}}" 
+        wx:key="id" 
+        class="function-item"
+        bindtap="goToFunction"
+        data-url="{{item.url}}"
+      >
+        <t-icon name="{{item.icon}}" size="48rpx" color="#FF5F15" />
+        <view class="function-name">{{item.name}}</view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 服务列表 -->
+  <view class="section service-list">
+    <view class="section-header">
+      <text class="section-title">服务与设置</text>
+    </view>
+    
+    <view class="service-items">
+      <view 
+        wx:for="{{serviceList}}" 
+        wx:key="id" 
+        class="service-item"
+        bindtap="goToFunction"
+        data-url="{{item.url}}"
+        data-type="{{item.type}}"
+      >
+        <t-icon name="{{item.icon}}" size="40rpx" color="#666" />
+        <view class="service-name">{{item.name}}</view>
+        <t-icon name="chevron-right" size="40rpx" color="#999" />
+      </view>
+    </view>
+  </view>
+</scroll-view>

pages/usercenter/index.wxss

@@ -0,0 +1,229 @@
+/* pages/usercenter/index.wxss */
+.usercenter-container {
+  /* height: calc(100vh - 300rpx); */
+  background-color: #f8f8f8;
+  box-sizing: border-box !important;
+}
+
+/* 用户信息样式 */
+.user-info {
+  display: flex;
+  align-items: center;
+  padding: 30rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  position: relative;
+}
+
+.user-avatar {
+  width: 120rpx;
+  height: 120rpx;
+  border-radius: 50%;
+  margin-right: 20rpx;
+}
+
+.user-detail {
+  flex: 1;
+}
+
+.user-name {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 6rpx;
+}
+
+.user-level {
+  font-size: 24rpx;
+  color: #FF9500;
+  background-color: #FFF5E5;
+  padding: 4rpx 12rpx;
+  border-radius: 20rpx;
+  display: inline-block;
+  margin-bottom: 6rpx;
+}
+
+.user-phone {
+  font-size: 26rpx;
+  color: #666;
+}
+
+.user-points {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: #FF5F15;
+  color: #fff;
+  padding: 20rpx 30rpx;
+  border-radius: 12rpx;
+  position: absolute;
+  right: 30rpx;
+}
+
+.points-value {
+  font-size: 36rpx;
+  font-weight: bold;
+}
+
+.points-label {
+  font-size: 24rpx;
+}
+
+/* 通用区块样式 */
+.section {
+  margin-bottom: 20rpx;
+  background-color: #fff;
+  padding: 30rpx;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.section-title {
+  font-size: 34rpx;
+  font-weight: bold;
+  color: #333;
+  position: relative;
+  padding-left: 20rpx;
+}
+
+.section-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 6rpx;
+  width: 8rpx;
+  height: 34rpx;
+  background-color: #FF5F15;
+  border-radius: 4rpx;
+}
+
+.section-more {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #999;
+}
+
+/* 预约列表样式 */
+.appointment-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.appointment-card {
+  padding: 30rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.appointment-card:last-child {
+  border-bottom: none;
+}
+
+.appointment-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+}
+
+.appointment-service {
+  font-size: 30rpx;
+  font-weight: 500;
+  color: #333;
+}
+
+.appointment-status {
+  font-size: 24rpx;
+  color: #FF9500;
+  background-color: #FFF5E5;
+  padding: 6rpx 16rpx;
+  border-radius: 20rpx;
+}
+
+.appointment-status.confirmed {
+  color: #07C160;
+  background-color: #E8F8F0;
+}
+
+.appointment-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20rpx;
+  font-size: 28rpx;
+  color: #666;
+}
+
+.appointment-time {
+  display: flex;
+  align-items: center;
+}
+
+.appointment-time text {
+  margin-left: 10rpx;
+}
+
+.appointment-price {
+  font-size: 32rpx;
+  color: #FF5F15;
+  font-weight: 500;
+}
+
+.appointment-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.appointment-actions t-button {
+  margin-left: 20rpx;
+}
+
+/* 功能网格样式 */
+.function-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20rpx;
+}
+
+.function-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30rpx 0;
+}
+
+.function-name {
+  font-size: 26rpx;
+  color: #333;
+  margin-top: 16rpx;
+}
+
+/* 服务列表样式 */
+.service-items {
+  display: flex;
+  flex-direction: column;
+}
+
+.service-item {
+  display: flex;
+  align-items: center;
+  padding: 30rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.service-item:last-child {
+  border-bottom: none;
+}
+
+.service-name {
+  flex: 1;
+  font-size: 30rpx;
+  color: #333;
+  margin-left: 20rpx;
+}