HM品優購小程序開發(二)

一、頁面實現（三）

1、結算界面

1、效果圖

2、功能實現

這裏涉及到支付，需要企業賬號，所以很多地方實現不了

有興趣的可以參考 微信支付開發步驟

/**
 * 1、 頁面加載
 *   從緩存中獲取購物車數據，渲染到頁面頁面中
 * 2、微信支付 
 *    1、那些人 那些賬號 可以實現微信支付
 *      1、企業賬號
 *      2、企業賬號的小程序後天，必須給開發者添加白名單
 *        1、一個appid 可以綁定多個開發者
 *        2、這些開發者就可以公用這個appid和它的開發權限
 * 3、支付按鈕
 *    1、先判斷緩存中有沒有token
 *    2、沒有 跳轉到授權頁面，獲取權限
 *    3、有token。。
 *    4、創建訂單 獲取訂單編號 order_number
 *    5、已經完成支付
 *    6、手動刪除緩存中 已經被選中的商品
 *    7、把數據重新返回去。
 */

​ 一下三步是支付的重點：具體詳情： 微信支付開發步驟

// 4、準備發送請求，獲取訂單編號
const {order_number} = await request({ulr:"/my/orders/create",data:goods});
// 5、發起 預支付接口
const {pay} = await request({usr:“my/orders/req_unifiedorder”,method:“post”,data:{order_number}});
// 6、發起微信支付
await requestPayment(pay);

// 點擊支付,這裏需要企業賬號
  async handleOrderPay(){
    try {
      // 1、判斷緩衝中有沒有token
      const token = wx.getStorageSync("token");
      // 2、 判斷
      if (!token) {
        wx.navigateTo({
          url: '/pages/auth/index'
        });
        return;
      }
      // 3、創建訂單
      // 3.1 準備 請求頭參數,這裏已經封裝到了reqeust請求方法中
      // const header= {Authorization:token};
      // 3.2 準備 請求頭參數
      const order_price = this.data.totalPrice;
      const consignee_addr = this.data.address;
      const cart = this.data.cart;
      let goods = []; 
      cart.forEach(v=>goods.push({
        goods_id:v.goods_id,
        goods_number:v.num,
        goods_price:v.goods_price
      }));
      // 4、準備發送請求，獲取訂單編號
      const {order_number} = await request({ulr:"/my/orders/create",data:goods});
      // 5、發起 預支付接口
      const {pay} = await request({usr:"my/orders/req_unifiedorder",method:"post",data:{order_number}});
      // 6、發起微信支付
      await requestPayment(pay);
      // 7、查詢後臺，訂單狀態
      const res = await request({url:"/my/orders/chkOrder",method:"post",data:{order_number}});
      await showToast({title:"支付成功！"});
      // 8、手動刪除緩存中被選中已經支付的商品
      let newCart = wx.getStorageSync("cart");
      newCart = newCart.filter(v=>v.checked);
      wx.setStorageSync("cart", newCart);
      // 8、 支付成功，跳轉到訂單頁面
      wx.navigateTo({
        url: '/pages/order/index'
      });
    } catch (error) {
      await showToast({title:"支付失敗！"});
      console.log(res); 
    }
  }

2、我的（個人中心）

1、效果圖

2、功能實現

這個頁面相對來說還是好實現的，前面我們已近做了那麼多頁面的效果，

1、主要樣式集中使用：

position: relative; // 相對定位
poistion: absolute; // 絕對定位
display: flex; // 伸縮盒子，這個很有用
justify-content: space-between; // 兩端分佈，中間空白
align-items: center; 
// 以下三個，結合絕對定位使用，就可以保證居中了
left: 50%;
transform: translateX(-50%);
top: -30rpx;
//
paddind: 10rpx;
color: var(--themeColor);

2、未登錄狀態

這裏注意：

使用的是button按鈕，裏面

open-type屬性：getuserInfo

type：屬性

plain：鏤空，背景透明，

bindgetuserinfo綁定事件：獲取用戶信息

只要注意這些就好了

button按鈕詳細使用

3、訂單查詢

1、效果圖

2、功能實現

/**
 * 1、頁面打開的時候 onShow
 *    0 onShow 不同於onLoad 無法在形參上接收 options參數
 *      判斷緩衝中是否有token
 *        如果沒有，跳轉授權頁面
 *        有、向下執行。
 *    1 獲取url上的參數
 *    2 根據type 來決定哪個標題被激活選中
 *    2 根據type 發送請求獲取訂單數據
 * 
 *    3 渲染頁面
 * 2、點擊不同的標題，發送不同的請求，獲取數據，顯渲染頁面
 */

1、同樣，標題欄使用自定義組件Tabs

2、這裏有個特殊的地方需要講解一下：

​ onShow()：這個不能像onLoad(options)一樣獲取options參數，

​ 但是我們可以通過小程序的頁面棧，獲取optoins參數。

 // 1、 獲取當前的小程序的頁面棧-數組 長度最大是10頁

   let pages = getCurrentPages();

   // 2、數組中 索引最大的頁面就是當前頁面

   let currentPages = pages[pages.length-1];

  const {type} = currentPages.options; // 這裏是從options中解構出type

3、時間格式化

orders:res.data.message.orders.map(v=>({...v,create_time:new Date(v.create_time*1000).toLocaleString()})) // 時間格式化

4、反饋意見

1、效果圖

2、功能實現

1、標題欄，依然使用的是自定義組件Tabs

2、反饋內容這裏涉及到了上牀圖片的功能，使用了自定義組件UpImg

提交反饋意見

主要使用了一下函數：

**wx.showToast：**顯示提示，頁面穿透，防止操作。

wx.hideLoading()：提示關閉。

**wx.uploadFile()：**單圖片上傳。

handleFormSubmit(){
    // 1、 獲取文本域和圖片的數組
    let {textVal,chooseImgs} = this.data;
    // 2、判斷問題域是否合法
    if(!textVal.trim()){  
      wx.showToast({
        title: '輸入不合法',
        icon: 'none',
        msak: true,
      });
      return;
    }
    wx.showLoading({
      title: "正在上傳",
      mask: true
    });
      
    if(chooseImgs.length!=0){
      chooseImgs.forEach((v,i)=>{
        wx.uploadFile({
          url: 'http://images.ac.cn/api/upload',
          filePath: v,
          name: "file",
          formData: {},  
          success: (result) => {
            let url = JSON.parse(result.data);
            this.upLoadImgs.push(url);
            if(i==chooseImgs.length-1){
              this.setData({
                textVal:"",
                chooseImage:[]
              })
              wx.hideLoading();
              wx.navigateBack({
                delta: 1
              });
            }
            
          },
        });
      })
    }else{
      wx.hideLoading();
      wx.navigateBack({
        delta: 1
      });    
    }
  }