【愚公系列】2022年10月 微信小程序-电商项目-确认订单功能实现
2023-06-13 09:14:07 时间
文章目录
前言
订单创建是从用户下单开始的,当用户对商品进行下单后,系统会引导用户来到确认订单页面,此时系统会获取用户预下单的商品信息,同时判断商品是否涉及到优惠促销的信息,这些优惠券包括促销活动、优惠券、积分抵扣等,如果商品不参与优惠信息,则无此环节。
一、确认订单功能实现
<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;
}
二、效果
相关文章
- 1.4 亿元、贵溪市数字治理工程 (一期)项目
- 立项名单|2022年教育部-腾讯产学合作协同育人项目(第一批)
- 微信公众号网页开发-Vue项目坑点分析
- C语言项目 微信小游戏《羊了个羊》
- 【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面的标题及价格功能实现
- 【愚公系列】2022年10月 微信小程序-电商项目-微信支付后端功能实现(node版)
- 【愚公系列】2022年10月 微信小程序-电商项目-小微商户支付后端功能实现(node版)
- XX工坊项目开发01--微信小程序+python
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品购物车页面
- 【愚公系列】2022年11月 微信小程序-优购电商项目-商品收藏⻚⾯
- 【愚公系列】2022年11月 微信小程序-优购电商项目-搜索页面
- 微信开发者工具新建项目时和预览时报错UNKNOW ERROR:41001
- python自动化高效办公第二期,带你项目实战【二】{数据可视化、发送邮件(定时任务监控)、python聊天机器人(基于微信、钉钉)}
- 项目开发软件架构选择指南
- 微信小程序开发工具导入开发项目教程-阿白必备
- 分享10个YYDS的微信小程序开源项目
- wxapp-boilerplate:使用 webpack, babel, scss 开发的微信小程序项目脚手架
- Android组件化框架项目详解手机开发
- 项目实战安装工具箱Busybox详解架构师
- 每日开源新闻速递(2016/4/13):LXD 2.0 发布;Let’s Encrypt 项目正式发布!
- Ruby微信开发的几个开源项目介绍