【系】微信小程序雲開發實戰堅果商城-前後端交互之個人中心實現

第 4-8 課：前後端交互之個人中心實現

目錄

• 開篇
  • 【系】微信小程序雲開發實戰堅果商城-開篇
• 基礎篇
  • 【系】微信小程序雲開發實戰堅果商城-彈性盒子
  • 【系】微信小程序雲開發實戰堅果商城-ES6 簡單入門
  • 【系】微信小程序雲開發實戰堅果商城-官方案例先運行
• 前端篇
  • 【系】微信小程序雲開發實戰堅果商城-商城項目搭建
  • 【系】微信小程序雲開發實戰堅果商城-所有目錄…

1 邏輯處理

打開 client 新建 models/OrdelModel.js ,新增

import { CloudRequest } from '../utils/cloud-request.js'
class OrderModel extends CloudRequest {

    /**
     * 查詢訂單
     * @param {*} callBack 
     */
    getOrderList(callBack) {
        this.request({
            url: "getOrderList",
            success: res => {
                callBack(res)
            }
        })
    }

}

export { OrderModel }

2 前臺數據處理

回到我們 pages/my/my.js

// pages/my/my.js
import {
  OrderModel
} from '../../models/OrdelModel.js'
let orderModel = new OrderModel();
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    userInfo: [],
    defaultImg: '../../images/my/header.png',
    orders: []
  },
  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
    this._init();
  },
  // 初始化
  _init: function () {
    wx.getSetting({
      success:(res)=> {
        if (res.authSetting['scope.userInfo']) {
          // 獲取訂單信息
          orderModel.getOrderList(res => {
            this.setData({
              orders: res.result.data.data
            })
            console.log(this.data.orders)
          })

          // 獲取用戶信息  
          wx.getUserInfo({
            success: (res) =>{
             this.setData({
              userInfo:res.userInfo
             })
            }
          })
        }
      }
    })
  },
  // 訂單頁面
  pay: function (event) {
    let id = orderModel.getDataSet(event, 'id')
    wx.navigateTo({
      url: '/pages/order/order?id=' + id
    })
  },
  // 用戶信息獲取
  getuserinfo:function(event){
    this.setData({
      userInfo:event.detail.userInfo
    })
  }

})

pages/my/my.wxml

<!-- pages/my/my.wxml -->
<wxs module="statusModule" src="../../common/wxs/status.wxs"></wxs>
<wxs module="filtersModule" src="../../common/wxs/filters.wxs"></wxs>
<view class='container'>
  <view class='head-container'>
    <view class='header-img'>
      <image src="{{userInfo.length!=0?userInfo.avatarUrl:defaultImg}}"></image>
    </view>
    <img-btn-comp open-type="getUserInfo" bind:getuserinfo="getuserinfo">
      <view class='head-title' slot="info">
        <view class='header-name'>
          <text>{{userInfo.length!=0?userInfo.nickName:'點擊登錄'}}</text>
        </view>
      </view>
    </img-btn-comp>
  </view>
  <!-- 訂單部分 -->
  <view class='my-order-container'>
    <!-- 標籤 -->
    <title-bar-comp title='我的訂單'></title-bar-comp>
    <!-- 訂單列表 -->
    <block wx:for="{{orders}}" wx:key="index">
      <view class="order-item">
        <view class="order-header">
          <view class="order-header-left">
            <text>訂單編號:</text>
            <text class="order-no">{{filtersModule.substringto16(item._id)}}</text>
          </view>
          <view class="order-header-right">
            <text class="order-status">{{statusModule.order(item.order_status)}}</text>
          </view>
        </view>
        <view class="order-main">
          <view class="item-left">
            <image src="{{item.orderdetail[0].product_img}}"></image>
          </view>
          <view class="item-right">
            <view>{{item.orderdetail[0].product_name}}</view>
            <view>{{item.orderdetail.length}}件商品</view>
          </view>
        </view>
        <view class="order-bottom">
          <text>實付:￥{{item.order_amount}}</text>
          <view class="pay" data-id="{{item._id}}" bind:tap="pay">立即支付</view>
        </view>
      </view>
    </block>
  </view>
</view>

複用組件 /components/title-bar/index 和 /components/image-button/index

3 代碼分解

3.1 初始化數據

在訂單獲取之前判斷用戶是否授權，如果授權則調用後臺獲取信息，並獲取用戶信息。

  // 初始化
  _init: function () {
    wx.getSetting({
      success:(res)=> {
        if (res.authSetting['scope.userInfo']) {
          // 獲取訂單信息
          orderModel.getOrderList(res => {
            this.setData({
              orders: res.result.data.data
            })
          })

          // 獲取用戶信息  
          wx.getUserInfo({
            success: (res) =>{
             this.setData({
              userInfo:res.userInfo
             })
            }
          })
        }
      }
    })
  },

3.2 訂單頁面

獲取頁面的訂單 id ，跳轉到商品詳情。

 // 訂單頁面
  pay: function (event) {
    let id = orderModel.getDataSet(event, 'id')
    wx.navigateTo({
      url: '/pages/order/order?id=' + id
    })
  },
  // 用戶信息獲取
  getuserinfo:function(event){
    this.setData({
      userInfo:event.detail.userInfo
    })
  }

3.3 用戶信息獲取

用戶信息和地址信息一樣，調用需要微信 open-type 傳入對應的類型纔可以。

  // 用戶信息獲取
  getuserinfo:function(event){
    this.setData({
      userInfo:event.detail.userInfo
    })
  }

源碼地址

在搭建項目前，根據自己需要下載本系列文章的源代碼

本項目源碼地址：https://gitee.com/mtcarpenter/nux-shop