文章目录

前言

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

一、确认订单功能实现

<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-barprice="{{ 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.jsPage({/*** 页面的初始数据*/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 = 0let carts = this.data.cartscarts.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;}

二、效果