前言

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

一、确认订单功能实现

<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.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 = 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;
}

二、效果

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

【愚公系列】2022年10月微信小程序-电商项目-商品购物车功能实现
文章目录前言一.商品购物车功能实现二.效果前言在电商的核心交易流程中,购物车是其中非常重要的一环,它承担商品加购.价格计算.促销活动展示等功能,与会员系统.商品系统.库存系统.订单系统等紧密 ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付后端功能实现（node版）
文章目录前言一.微信支付后端功能实现(node版) 1.相关文档 2.项目配置前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以"微 ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付小程序确认支付结果和退款功能实现（node）
文章目录前言一.微信支付小程序确认支付结果和退款功能实现 1.确认支付结果 2.退款功能实现前言微信小程序在支付成功后会给注册的接口发消息来通知订单支付成功的状态,下面是微信和接口通信的数据格 ...
【愚公系列】2022年10月微信小程序-电商项目-小微商户支付后端功能实现（node版）
文章目录前言一.小微商户支付后端功能实现(node版) 1.相关文档 2.项目配置前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以" ...
【愚公系列】2022年10月微信小程序-电商项目-微信支付功能前申请准备工作
文章目录前言一.微信支付功能实现 1.微信公众平台的准备 2.微信商户平台的准备前言微信支付是腾讯集团旗下的第三方支付平台,致力于为用户和企业提供安全.便捷.专业的在线支付服务.以" ...
【愚公系列】2022年10月微信小程序-电商项目-小微商户支付功能前申请准备工作
文章目录前言一.小微商户支付功能前申请准备工作 1.小微商户支付相关文档和流程 2.签约前言小微商户是指依据法律法规和相关监管规定免予办理工商注册登记.无营业执照的实体特约商户. 1.小微商户 ...
【愚公系列】2022年10月微信小程序-电商项目-UI设计之蓝湖的使用
文章目录前言一.UI设计之蓝湖的使用 1.下载插件 2.生成代码 3.配置代码前言蓝湖是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图.蓝湖可以在线展示Axure,自动生 ...
【愚公系列】2022年10月微信小程序-电商项目-商品详情页面规格选择功能实现
文章目录前言一.商品详情页面规格选择功能实现二.效果前言 vant-weapp的Popup 弹出层api Props 参数说明类型默认值 show 是否显示弹出层 boolean fal ...
微信小程序电商项目开发实战漫谈
原创文章,若转载请于明显处标明出处和相关链接:https://www.toutiao.com/i6567868839856439822/,否则追究其法律责任! 2018年小程序内容电商风口已成,如果我 ...

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

文章目录

前言

一、确认订单功能实现

二、效果

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

最新文章

热门文章

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

文章目录

前言

一、确认订单功能实现

二、效果

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

最新文章

热门文章

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

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