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
      });    
    }
  }