电商小程序实战04·用户中心与订单管理

2024-12-18 / weapp

电商小程序实战04·用户中心与订单管理

前言

本篇为《电商小程序实战》第四篇：用户中心与订单管理。

内容简介：重点实现 用户中心 和 订单详情 页面，同时集成 个人信息管理 功能。
主要内容：
- 个人信息管理：用户可以在 profile 页面查看自己的个人信息，点击“编辑信息”进入 edit-profile 页面修改资料，并保存更新；
- 订单历史和详情：用户可以查看自己的订单历史，并点击某个订单进入订单详情页面查看详细信息；
- 数据交互：通过 wx.request 与后端进行数据交互，获取用户信息、订单数据，并提交更新数据。
目标：。
项目目录结构更新

为了实现用户中心和订单详情功能，我们需要新增以下页面：

个人信息管理页面：profile 页面，用于显示和编辑用户信息。
订单详情页面：order-detail 页面，显示单个订单的详细信息。

新的文件结构如下：

ecommerce-mini-program/
├── miniprogram/
│   ├── pages/
│   │   ├── profile/
│   │   │   ├── profile.wxml
│   │   │   ├── profile.wxss
│   │   │   ├── profile.js
│   │   │   └── profile.json
│   │   ├── order-detail/
│   │   │   ├── order-detail.wxml
│   │   │   ├── order-detail.wxss
│   │   │   ├── order-detail.js
│   │   │   └── order-detail.json

用户中心页面 profile.wxml

用户中心页面将展示用户的个人信息，以及用户的订单列表。

<!-- profile.wxml -->
<view class="profile-container">
  <!-- 个人信息展示 -->
  <view class="profile-info">
    <text class="profile-title">个人信息</text>
    <view class="profile-details">
      <text>用户名：{{userInfo.name}}</text>
      <text>电话：{{userInfo.phone}}</text>
      <text>邮箱：{{userInfo.email}}</text>
    </view>
    <button class="edit-info" bindtap="editUserInfo">编辑信息</button>
  </view>

  <!-- 订单历史 -->
  <view class="order-history">
    <text class="history-title">订单历史</text>
    <view wx:for="{{orders}}" wx:key="orderId" class="order-item" bindtap="viewOrderDetail" data-order-id="{{item.orderId}}">
      <text>订单编号：{{item.orderId}}</text>
      <text>订单状态：{{item.status}}</text>
    </view>
  </view>
</view>

个人信息展示：显示用户的姓名、电话和邮箱等基本信息。
订单历史：展示用户的所有订单，并支持点击查看订单详情。

用户中心逻辑 profile.js

在 profile.js 中，我们获取用户信息和订单列表，并提供编辑功能。

// profile.js
Page({
  data: {
    userInfo: {
      name: '',
      phone: '',
      email: ''
    },
    orders: []  // 用户的订单列表
  },

  onLoad: function () {
    // 模拟从后台获取用户信息
    this.fetchUserInfo();
    this.fetchOrders();
  },

  fetchUserInfo: function () {
    // 假设从后台获取用户信息
    wx.request({
      url: 'https://api.example.com/user/info',  // 获取用户信息的接口
      method: 'GET',
      success: (res) => {
        if (res.data.code === 0) {
          this.setData({
            userInfo: res.data.userInfo
          });
        } else {
          wx.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
        }
      },
      fail: () => {
        wx.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        });
      }
    });
  },

  fetchOrders: function () {
    // 模拟从后台获取订单数据
    wx.request({
      url: 'https://api.example.com/orders',  // 获取订单数据的接口
      method: 'GET',
      success: (res) => {
        if (res.data.code === 0) {
          this.setData({
            orders: res.data.orders
          });
        } else {
          wx.showToast({
            title: '加载订单失败',
            icon: 'none'
          });
        }
      },
      fail: () => {
        wx.showToast({
          title: '加载订单失败',
          icon: 'none'
        });
      }
    });
  },

  // 编辑个人信息
  editUserInfo: function () {
    wx.navigateTo({
      url: '/pages/edit-profile/edit-profile'
    });
  },

  // 查看订单详情
  viewOrderDetail: function (e) {
    const orderId = e.currentTarget.dataset.orderId;
    wx.navigateTo({
      url: `/pages/order-detail/order-detail?orderId=${orderId}`
    });
  }
});

关键功能：

fetchUserInfo：获取用户个人信息并展示。
fetchOrders：获取用户的订单历史。
editUserInfo：点击编辑信息按钮跳转到编辑个人信息页面。
viewOrderDetail：点击某个订单跳转到订单详情页面。
用户中心样式 profile.wxss

/* profile.wxss */
.profile-container {
  padding: 20px;
}

.profile-info {
  margin-bottom: 20px;
}

.profile-title {
  font-size: 18px;
  font-weight: bold;
}

.profile-details {
  margin-top: 10px;
  font-size: 16px;
}

.edit-info {
  margin-top: 20px;
  background-color: #ff6600;
  color: white;
  padding: 10px;
  width: 100%;
  text-align: center;
  border-radius: 5px;
}

.order-history {
  margin-top: 30px;
}

.history-title {
  font-size: 18px;
  font-weight: bold;
}

.order-item {
  margin-top: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.order-item text {
  font-size: 14px;
  color: #333;
}

订单详情页面 order-detail.wxml

订单详情页面用于显示单个订单的详细信息，包括商品列表、订单状态、支付状态、收货地址等。

<!-- order-detail.wxml -->
<view class="order-detail-container">
  <view class="order-header">
    <text>订单编号：{{orderDetails.orderId}}</text>
    <text>订单状态：{{orderDetails.status}}</text>
  </view>

  <view class="order-products">
    <view wx:for="{{orderDetails.items}}" wx:key="productId" class="product-item">
      <image class="product-image" src="{{product.imageUrl}}" mode="aspectFill"></image>
      <view class="product-info">
        <text class="product-name">{{product.name}}</text>
        <text class="product-price">￥{{product.price}}</text>
        <text class="product-quantity">x{{product.quantity}}</text>
      </view>
    </view>
  </view>

  <view class="order-footer">
    <text>总价：￥{{orderDetails.totalPrice}}</text>
    <text>收货地址：{{orderDetails.address}}</text>
  </view>
</view>

订单详情页面逻辑 order-detail.js

// order-detail.js
Page({
  data: {
    orderDetails: {}  // 订单详细信息
  },

  onLoad: function (options) {
    const orderId = options.orderId;
    this.fetchOrderDetails(orderId);
  },

  fetchOrderDetails: function (orderId) {
    // 假设从后台获取订单详情
    wx.request({
      url: `https://api.example.com/order/details/${orderId}`,  // 获取订单详情的接口
      method: 'GET',
      success: (res) => {
        if (res.data.code === 0) {
          this.setData({
            orderDetails: res.data.orderDetails
          });
        } else {
          wx.showToast({
            title: '获取订单详情失败',
            icon: 'none'
          });
        }
      },
      fail: () => {
        wx.showToast({
          title: '获取订单详情失败',
          icon: 'none'
        });
      }
    });
  }
});

订单详情页面样式 order-detail.wxss

/* order-detail.wxss */
.order-detail-container {
  padding: 20px;
}

.order-header {
  font-size: 18px;
  margin-bottom: 20px;
}

.order-products {
  margin-bottom: 20px;
}

.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.product-image {
  width: 60px;
  height: 60px;
  margin-right: 10px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-size: 14px;
  color: #333;
}

.product-price, .product-quantity {
  font-size: 12px;
  color: #666;
}

.order-footer {
  margin-top: 20px;
  font-size: 16px;
}

.order-footer text {
  display: block;
  margin-top: 10px;
}

用户信息编辑页面

为了完整地实现个人信息管理功能，我们还需要一个编辑个人信息的页面 edit-profile。

编辑个人信息页面 edit-profile.wxml

<!-- edit-profile.wxml -->
<view class="edit-profile-container">
  <view class="input-group">
    <text>用户名</text>
    <input type="text" placeholder="请输入用户名" value="{{userInfo.name}}" bindinput="handleNameChange" />
  </view>

  <view class="input-group">
    <text>电话</text>
    <input type="text" placeholder="请输入电话" value="{{userInfo.phone}}" bindinput="handlePhoneChange" />
  </view>

  <view class="input-group">
    <text>邮箱</text>
    <input type="text" placeholder="请输入邮箱" value="{{userInfo.email}}" bindinput="handleEmailChange" />
  </view>

  <button class="save-button" bindtap="saveUserInfo">保存</button>
</view>

编辑个人信息页面逻辑 edit-profile.js

// edit-profile.js
Page({
  data: {
    userInfo: {
      name: '',
      phone: '',
      email: ''
    }
  },

  onLoad: function () {
    // 获取用户信息并显示在表单中
    this.fetchUserInfo();
  },

  fetchUserInfo: function () {
    wx.request({
      url: 'https://api.example.com/user/info',
      method: 'GET',
      success: (res) => {
        if (res.data.code === 0) {
          this.setData({
            userInfo: res.data.userInfo
          });
        } else {
          wx.showToast({
            title: '获取用户信息失败',
            icon: 'none'
          });
        }
      },
      fail: () => {
        wx.showToast({
          title: '获取用户信息失败',
          icon: 'none'
        });
      }
    });
  },

  handleNameChange: function (e) {
    this.setData({
      'userInfo.name': e.detail.value
    });
  },

  handlePhoneChange: function (e) {
    this.setData({
      'userInfo.phone': e.detail.value
    });
  },

  handleEmailChange: function (e) {
    this.setData({
      'userInfo.email': e.detail.value
    });
  },

  saveUserInfo: function () {
    const { name, phone, email } = this.data.userInfo;
    
    if (!name || !phone || !email) {
      wx.showToast({
        title: '请填写完整信息',
        icon: 'none'
      });
      return;
    }

    wx.request({
      url: 'https://api.example.com/user/update',
      method: 'POST',
      data: { name, phone, email },
      success: (res) => {
        if (res.data.code === 0) {
          wx.showToast({
            title: '信息更新成功',
            icon: 'success'
          });
          wx.navigateBack();
        } else {
          wx.showToast({
            title: '更新失败',
            icon: 'none'
          });
        }
      },
      fail: () => {
        wx.showToast({
          title: '更新失败',
          icon: 'none'
        });
      }
    });
  }
});

编辑个人信息页面样式 edit-profile.wxss

/* edit-profile.wxss */
.edit-profile-container {
  padding: 20px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group text {
  font-size: 16px;
}

.input-group input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.save-button {
  width: 100%;
  padding: 12px;
  background-color: #ff6600;
  color: white;
  border-radius: 5px;
  font-size: 16px;
}

demo1984s 的个人博客

记录精彩的程序人生

电商小程序实战04·用户中心与订单管理

前言

项目目录结构更新

用户中心页面 profile.wxml

用户中心逻辑 profile.js

用户中心样式 profile.wxss

订单详情页面 order-detail.wxml

订单详情页面逻辑 order-detail.js

订单详情页面样式 order-detail.wxss

用户信息编辑页面

编辑个人信息页面 edit-profile.wxml

编辑个人信息页面逻辑 edit-profile.js

编辑个人信息页面样式 edit-profile.wxss