【愚公系列】2022年10月 微信小程序-电商项目-确认订单功能实现

前言

订单创建是从用户下单开始的，当用户对商品进行下单后，系统会引导用户来到确认订单页面，此时系统会获取用户预下单的商品信息，同时判断商品是否涉及到优惠促销的信息，这些优惠券包括促销活动、优惠券、积分抵扣等，如果商品不参与优惠信息，则无此环节。

一、确认订单功能实现

<van-cell-group>
  <van-cell bind:click="toSelectAddress" is-link icon="location-o" size="large" title="{{address.userName}}" value="{{address.telNumber}}" label="{{address.addressInfo}}" />
</van-cell-group>
<view style="padding:10px;">
  <block wx:for="{{carts}}" wx:key="id">
  <van-card custom-class="goods-card" price="{{item.price*item.num/100}}元" desc="{{item.sku_desc}}"
    title="{{item.goods_name}}" thumb="{{item.goods_image}}">
    <view slot="footer">
      <text>x{{item.num}}</text>
    </view>
  </van-card>
  </block>
</view>
<van-cell-group title=" ">
  <van-cell title="优惠" value="暂无可用" is-link />
</van-cell-group>

<van-cell-group title=" ">
  <van-cell title="配置方式" value="快递免运费" />
  <van-field model:value="{{ userMessage }}" label="买家留言" border="{{ false }}" placeholder="留言建议提前协商" />
</van-cell-group>

<van-cell-group title=" ">
  <van-cell title="商品金额" value="￥900" />
  <van-cell title="运费" value="+￥200" />
  <van-cell custom-class="total-price" title="" value="合计：￥900" />
</van-cell-group>

<van-submit-bar
  price="{{ totalPrice }}"
  button-text="提交订单"
  bind:submit="onSubmit"
/>

{
  "navigationBarTitleText": "确认订单",
  "usingComponents": {
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-checkbox": "@vant/weapp/checkbox/index",
    "van-checkbox-group": "@vant/weapp/checkbox-group/index",
    "van-card": "@vant/weapp/card/index",
    "van-stepper": "@vant/weapp/stepper/index",
    "van-field": "@vant/weapp/field/index",
    "van-submit-bar": "@vant/weapp/submit-bar/index",
    "xunhupay": "../../components/xunhupay/index"
  }
}

// miniprogram/pages/confirm-order/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    carts:[],
    userMessage:'',
    totalPrice:0,
    address:{
      userName:'选择'
    },
    submchPayParams: {}, 
    submchPayorderResult:{},
    prepareSubmchPay: false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.on('cartData', (res)=> {
      // console.log(res)
      this.setData({
        carts:res.data
      })
      this.calcTotalPrice()
    })
  },
  // 准备跳转地址列表表，选取地址
  toSelectAddress(){
    wx.navigateTo({
      url: '/pages/address-list/index',
      success:res=>{
        res.eventChannel.on('selectAddress', address=>{
          address.addressInfo = address.region.join('')+address.detailInfo 
          this.setData({
            address
          })
        })
      }
    })
  },
  // 重新计算总价
  calcTotalPrice(){
    let totalPrice = 0
    let carts = this.data.carts
    carts.forEach(item=>{
      totalPrice += item.price * item.num 
    })
    this.setData({
      totalPrice
    })
  },
})

/* miniprogram/pages/confirm-order/index.wxss */
.goods-card{
  background-color: #fefefe !important;
}
.goods-card .van-card__title{
  margin-top: 10px;
}
.goods-card .van-card__img {
  border-radius: 10px;
}
.goods-card-container {
  display:flex;margin:10px;background:#fefefe;
}
.goods-card-container + .goods-card-container{
  padding-top: 10px;
}
.total-price .van-cell__value{
  color: rgb(236, 176, 98);
}
page{
  padding-bottom: 100px;
}

二、效果