工信部icp网站备案查询,这么攻击网站,专门做lolh的网站,门户网站建设先进性结算支付
01. 配置分包并跳转到结算页面
思路分析#xff1a;
随着项目功能的增加#xff0c;项目体积也随着增大#xff0c;从而影响小程序的加载速度#xff0c;影响用户的体验。
因此我们需要将 结算支付 功能配置成一个分包#xff0c;
当用户在访问设置页面时
随着项目功能的增加项目体积也随着增大从而影响小程序的加载速度影响用户的体验。
因此我们需要将 结算支付 功能配置成一个分包
当用户在访问设置页面时还预先加载 结算支付 所在的分包
落地代码
➡️ app.json
subPackages: [{root: modules/settingModule,name: settingModule,pages: [pages/address/add/index,pages/address/list/index,pages/profile/profile]},{root: modules/goodModule,name: goodModule,pages: [pages/goods/list/list, pages/goods/detail/detail]},{root: modules/orderPayModule,name: orderPayModule,pages: [pages/order/detail/detail,pages/order/list/list]}
],
preloadRule: {pages/settings/settings: {network: all,packages: [settingModule]},pages/category/category: {network: all,packages: [goodModule]},pages/cart/cart: {network: all,packages: [orderPayModule]}
}
➡️ pages/cart/cart.js
// 跳转到订单结算页面
toOrder() {if (this.data.totalPrice 0) {wx.toast({title: 请选择需要购买的商品})return}// 跳转到订单的结算页面wx.navigateTo({url: /modules/orderPayModule/pages/order/detail/detail})
}➡️ pages/cart/cart.wxml
van-submit-barwx:if{{ cartList.length }}price{{ totalPrice * 100 }}button-text去结算tip{{ true }}bindsubmittoOrder
van-checkboxvalue{{ selectAllStatus }}checked-color#FA4126bindchangeselectAllStatus全选/van-checkbox
/van-submit-bar02. 封装结算支付的接口 API
思路分析
为了方便后续进行结算支付模块的开发我们在这一节将结算支付所有的接口封装成接口 API 函数
落地代码
➡️ /api/orderpay.js
import http from /utils/http/*** description 获取订单详情* returns Promise*/
export const reqOrderInfo () {return http.get(/order/trade)
}/*** description 获取订单列表* param {*} page 页码* param {*} limit 每页展示的条数* returns Promise*/
export const reqOrderList (page, limit) {return http.get(/order/order/${page}/${limit})
}/*** description 获取订单收货地址* returns Promise*/
export const reqOrderAddress () {return http.get(/userAddress/getOrderAddress)
}/*** description 获取立即购买商品的详情信息* param { Object } params { goodsId: 商品 Id, blessing祝福语 }* returns Promise*/
export const reqBuyNowGoods ({ goodsId, ...data }) {return http.get(/order/buy/${goodsId}, data)
}/*** description 提交订单* returns Promise*/
export const reqSubmitOrder () {return http.post(/order/submitOrder)
}/*** description 获取微信预支付信息* param {*} orderNo 订单 ID* returns Promise*/
export const reqPreBuyInfo (orderNo) {return http.get(/webChat/createJsapi/${orderNo})
}/*** description 微信支付状态查询* param {*} orderNo* returns Promise*/
export const reqPayStatus (orderNo) {return http.get(/webChat/queryPayStatus/${orderNo})
}
03. 商品结算-获取收货地址
思路分析
进入结算支付页面后需要获取收货地址信息在获取到收货地址以后需要进行判断
如果没有获取到收货地址需要展示添加收货地址的结构
如果获取到了收货地址需要渲染收货地址。
实现步骤
在进入结算页面的时候调用接口 API 函数获取数据然后根据数据并渲染结构
落地代码
➡️ /pages/order/detail/index.js
import { getTradeAddress } from ../../../api/orderPage({data: {// coding...orderAddress: {} // 收货地址}, // 获取收货地址async getAddress() {const { data: orderAddress } await reqOrderAddress()this.setData({orderAddress})}, // 页面展示时触发的钩子函数onShow() {this.getAddress()}
})➡️ /pages/order/detail/index.wxml
!--pages/order/index.wxml--
view classcontainer orderview classaddress-card!-- 添加收货地址 --view wx:if{{ !tradeAddress.id }} classadd-address bindtaptoAddressvan-icon size22px nameadd /view添加收货地址/view/viewview wx:else classorder-address flexview classaddress-contentview classtitle{{ tradeAddress.fullAddress }}/viewview classinfo flextext{{ tradeAddress.name }}/texttext{{ tradeAddress.phone }}/text/view/viewview classselect-addressnavigator classnavigator url/modules/settingModule/pages/address/list/indexvan-icon color#bbb namearrow size22px //navigator/view/viewview classtop-line/view/viewview classorder-info!-- coding... --/view/view04. 商品结算-更新收货地址功能
思路分析
当用户需要更改收货地址时我们需要跳转到收货地址页面重新选择收货地址
当用户点击了某个地址以后我们需要将该地址显示到商品结算页面中。
更新收货地址功能采用 getApp() 全局共享数据的方式来实现。
实现步骤
在 app.js 中定义全局共享的数据 globalData.address点击箭头携带参数跳转到收货地址页面标识是从订单结算页面进入在选择收货地址成功以后将数据存储到 globalData.address中然后返回到订单结算页面。在订单结算页面判断 globalData.address 是否存在收货地址数据如果存在则渲染
落地代码
➡️ app.js
App({ // 定义全局共享的数据globalData: {address: {}}// coding...
})➡️ /pages/address/list/index.html
!-- 每一个收货地址 --viewclassinfobindtapchangeAddressdata-id{{ item.id }}
view classuser-infotext{{ item.name }}/texttext{{ item.phone }}/texttext wx:if{{ item.isDefault 1 }} classdefault-tag默认/text/viewview classaddress-info {{ item.fullAddress }} /view
/view➡️ /pages/address/list/index.js
// 导入接口 API 函数
import { reqAddressList, reqDelAddress } from /api/address
import { swipeCellBehavior } from /behaviors/swipeCell // 获取全局的应用实例const app getApp()Page({// coding... // 切换收货地址changeAddress(event) {// 判断是否是从订单结算页面进入if (this.flag ! 1) return// 获取到点击的收货地址 idconst addressId event.currentTarget.dataset.id// 从收货地址列表中获取到获取到点击的收货地址详细信息const address this.data.addressList.find((item) item.id addressId)// 如果获取成功将数据存储到 globalData 中if (address) {app.globalData.address addresswx.navigateBack()}}, onLoad(options) {this.flag options.flag}
})
➡️ /pages/order/detail/index.wxml
view classselect-addressnavigatorclassnavigatorurl/modules/settingModule/pages/address/list/index?flag1van-icon color#bbb namearrow size22px //navigator
/view➡️ /pages/order/detail/index.js // 获取订单页面的收货地址async getAddress() { // 如果 globalData 存在收货地址取出收货地址if (app.globalData.address.id) {this.setData({orderAddress: app.globalData.address})// 在赋值以后需要将收货地址清空app.globalData.address {}return}// 如果 globalData 中不存在收货地址获取收货地址渲染即可const { data: orderAddress } await reqOrderAddress()this.setData({orderAddress})},05. 商品结算-获取订单详情数据
思路分析
商品结算页面数据获取收货地址以及商品订单信息
实现步骤
导入封装的接口 API 函数在进入结算页面的时候调用接口 API 函数获取数据然后根据数据并渲染结构即可
落地代码
➡️ /pages/order/detail/index.js import { reqOrderAddress, reqOrderInfo } from /api/orderpayPage({data: {// coding...orderAddress: {}, // 收货地址orderInfo: {}, // 订单商品详情}, // 获取订单详情async getOrderInfo() {const { data: orderInfo } await reqOrderInfo()// 判断是否存在祝福语// 如果需要购买多个商品挑选第一个填写了祝福语的商品进行赋值const orderGoods orderInfo.cartVoList.find((item) item.blessing ! )this.setData({orderInfo,blessing: orderGoods orderGoods.blessing})},// 在页面展示的时候进行触发onShow() {// 获取收货地址this.getAddress() // 获取订单结算页面的商品信息this.getOrderInfo()},
})➡️ /pages/order/detail/index.wxml
!--pages/order/index.wxml--
view classcontainer orderview classaddress-card!-- 添加收货地址 --!-- coding... --/viewview classgoods-wraper!-- 商品清单 --view classgoods-list view classgoods-item flex wx:for{{ tradeInfo.cartVoList }} wx:keygoodsIdview classimgimage src{{ item.imageUrl }} //viewview classcontentview classgoods-title{{ item.name }}/viewview classgoods-priceview classprice ¥ {{ item.price }}/viewviewx {{ item.count }}/view/view/view/view/view/viewview classpayment!-- 支付方式 --view classtime-wraper fleximage src/static/images/payment_wxzf.png /view classtitle支付方式/viewvan-checkbox value{{true}}/van-checkbox/view/view!-- 支付区域 --view classfooter flexview classleft ¥ {{ tradeInfo.totalAmount }} /viewviwe classright结算/viwe/view!-- 日期选择弹框 --van-popup show{{ show }} round positionbottom custom-styleheight: 50% bind:closeonClosevan-datetime-picker typedate min-date{{ minDate }} model:value{{ currentDate }} bind:confirmonConfirmTimerPicker bind:cancelonCancelTimePicker //van-popup/view06. 商品结算-获取立即购买数据
思路分析
当用户从商品详情点击立即购买进入商品结算页面的时候我们需要在商品结算页面展示立即购买商品的基本信息。
在跳转到商品结算页面的时候我们已经携带了商品的 id 和 祝福语。
在结算页面只需要获取到传递的参数然后根据传递的参数调用接口即可。
实现步骤
在页面打开的时候onShow 中接受传递的参数并赋值给 data 中的状态在 getOrderInfo 函数中判断立即购买商品的 id 是否存在如果存在调用立即购买的接口获取数据后然后根据数据并渲染结构即可
落地代码
➡️ /pages/order/detail/index.js
import {reqOrderAddress,reqOrderInfo,reqBuyNowGoods
} from /api/orderpayPage({// 获取订单详情async getOrderInfo() {// 从 data 中结构数据 const { goodsId, blessing } this.data // 判断是否存在商品 id// 如果存在调用立即购买商品详情的接口// 不存在调用获取订单详情数据接口const { data: orderInfo } goodsId? await reqBuyNowGoods({ goodsId, blessing }): await reqOrderInfo()// 判断是否存在祝福语// 如果需要购买多个商品挑选第一个填写了祝福语的商品进行赋值const orderGoods orderInfo.cartVoList.find((item) item.blessing ! )this.setData({orderInfo,orderGoods orderGoods.blessing})} // 接收立即购买传递的参数 onLoad (options) { this.setData({ ...options }) },// 在页面展示的时候进行触发onShow() {// 获取收货地址this.getAddress()// 获取订单结算页面的商品信息this.getOrderInfo()}
})
07. 商品结算-收集送达时间
思路分析
当选择送达日期的时候需要选择收货的时间我们希望获取到的收货的时间格式是年月日
但是我们使用的是小程序提供的 vant 组件组件返回的时候并不是真正的时分秒而是时间戳
这时候可以调用小程序项目初始化时小程序封装的时间格式化工具
实现步骤
在商品结算页面导入封装好的格式化时间的方法 formatTime调用 formatTime 传入需要格式化的时间戳
落地代码
➡️ /pages/order/detail/index.js
import { formatTime } from ../../../utils/formatTime.jsPage({// coding...// 期望送达日期确定按钮onConfirmTimerPicker(event) {// 使用 new Date 将时间戳转换成 JS 中的日期对象const time formatTime(new Date(event.detail))// 将转换以后的时间赋值给送到时间this.setData({show: false,deliveryDate: time})}// coding...
}08. 商品结算-表单数据验证
思路分析
使用 async-validator 对代码进行验证
收货地址不能为空订购人姓名不能为空且不能输入特殊字符订购人手机号不能为空且输入的手机号必须合法送达日期不能为空
落地代码
import { reqOrderAddress, reqOrderInfo, reqBuyNowGoods } from /api/orderpay
// 导入 async-validator 对参数进行验证
import Schema from async-validator
// 导入格式化时间的方法
import { formatTime } from /utils/formatTime// 获取应用实例
const app getApp()Page({data: {buyName: , // 订购人姓名buyPhone: , // 订购人手机号deliveryDate: , // 期望送达日期blessing: , // 祝福语show: false, // 期望送达日期弹框orderAddress: {}, // 收货地址orderInfo: {}, // 订单商品详情minDate: new Date().getTime(),currentDate: new Date().getTime()},async submitOrder() {// 从 data 中结构数据const {buyName,buyPhone,deliveryDate,blessing,orderInfo,orderAddress} this.data// 组织请求参数const params {buyName,buyPhone,deliveryDate,remarks: blessing,cartList: orderInfo.cartVoList,userAddressId: orderAddress.id}// 对请求参数进项验证const { valid } await this.validatorPerson(params)// 打印验证结果console.log(valid)},// 对新增收货地址请求参数进行验证validatorPerson(params) {// 验证收货人是否只包含大小写字母、数字和中文字符const nameRegExp ^[a-zA-Z\\d\\u4e00-\\u9fa5]$// 验证手机号是否符合中国大陆手机号码的格式const phoneReg ^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$// 创建验证规则const rules {userAddressId: [{ required: true, message: 请选择收货地址 }],buyName: [{ required: true, message: 请输入收货人姓名 },{ pattern: nameRegExp, message: 收货人姓名不合法 }],buyPhone: [{ required: true, message: 请输入收货人手机号 },{ pattern: phoneReg, message: 收货人手机号不合法 }],deliveryDate: { required: true, message: 请选择送达时间 }}// 传入验证规则进行实例化const validator new Schema(rules)// 调用实例方法对请求参数进行验证// 注意我们希望将验证结果通过 Promise 的形式返回给函数的调用者return new Promise((resolve) {validator.validate(params, (errors) {if (errors) {// 如果验证失败需要给用户进行提示wx.toast({ title: errors[0].message })// 如果属性值是 false说明验证失败resolve({ valid: false })} else {// 如果属性值是 true说明验证成功resolve({ valid: true })}})})},// coding....
})09. 小程序支付-小程序支付流程
小程序支付图示 前端需要做的事情 生成平台订单前端调用接口向后端传递需要购买的商品信息、收货人信息[后端生成平台订单返回订单编号] 获取预付单信息将订单编号发送给后端后 [后端向微信服务器获取预付单信息后端会将微信服务器返回的预付单信息进行加密然后将加密以后的预付单信息返回给前端] 发起微信支付前端调用 wx.requestPayment() 发起微信支付 查询支付状态调用接口查询支付状态
10. 小程序支付-创建平台订单
思路分析
用户在完成选购流程确认商品信息、订购人、收货人等信息无误后
用户需要点击提交订单按钮开始进行下单支付这时候需要先创建平台订单。
实现步骤
在提交订单的事件处理函数中调用封装的接口 API 函数在接口调用成功以后将服务器响应的订单编码挂载到页面实例上。
落地代码
➡️ /pages/order/detail/index.js
import {reqOrderAddress,reqOrderInfo,reqBuyNowGoods,reqSubmitOrder
} from /api/orderpayPage({// coding...// 提交订单// 处理提交订单async submitOrder() {// 需要从 data 中解构数据const {buyName,buyPhone,deliveryDate,blessing,orderAddress,orderInfo} this.data// 需要根据接口要求组织请求参数const params {buyName,buyPhone,cartList: orderInfo.cartVoList,deliveryDate,remarks: blessing,userAddressId: orderAddress.id}// 对请求参数进行验证const { valid } await this.validatorPerson(params) // 如果验证失败直接 return不执行后续的逻辑处理if (!valid) return// 调用接口创建平台订单const res await reqSubmitOrder(params)// 在平台订单创建成功以后将订单编号挂载到页面实例上if (res.code 200) {// 将订单编号挂载到页面实例上this.orderNo res.data}}// coding...
})11. 小程序支付-获取预付单信息
思路分析
将订单编号发送给公司的后端公司的后端会从数据库找到对应订单的信息。
然后调用微信服务器的 下单接口 进行创建订单订单创建成功以后微信服务器会给公司后端返回预付单信息。
公司后端对返回的预付单信息进行加密返回给小程序客户端。
这一步咱们需要做的就是订单编号发送给公司的后端其他逻辑时后端来完成的。 注意事项 小程序支付后面的代码大伙在实现的时候会出现异常。 这是因为没有小程序的开发权限以后在实际开发中只需要参考当前流程进行开发即可 落地代码
➡️ /pages/order/detail/index.js
Page({// 处理提交订单async submitOrder() {// 需要从 data 中解构数据const {buyName,buyPhone,deliveryDate,blessing,orderAddress,orderInfo} this.data// 需要根据接口要求组织请求参数const params {buyName,buyPhone,cartList: orderInfo.cartVoList,deliveryDate,remarks: blessing,userAddressId: orderAddress.id}// 对请求参数进行验证const { valid } await this.validatorPerson(params)// 如果请求参数验证失败直接 return 不执行后续的逻辑if (!valid) return// 调用接口创建平台订单const res await reqSubmitOrder(params)if (res.code 200) {// 在平台订单创建成功以后需要将服务器、后端返回的订单编号挂载到页面实例上this.orderNo res.data // 获取预付单信息、支付参数this.advancePay()}}, // 获取预付单信息、支付参数async advancePay() {// 调用接口获取预付单信息、支付参数const payParams await reqPrePayInfo(this.orderNo)if (payParams.code 200) {console.log(res.data)}},})12. 小程序支付-发起微信支付
知识点
小程序客户端在接收支付参数后调用 wx.requestPayment() 发起微信支付
唤醒支付弹窗用户开输入支付密码或者进行指纹等操作微信服务器会进行验证如果验证成功就会发起支付。
然后会将支付结果返回给公司后端也会返回给 wx.requestPayment()
并且会微信通知用户支付结果
落地代码
➡️ /pages/order/detail/index.js
// 获取预付单信息、支付参数
async advancePay() {try {const payParams await reqPrePayInfo(this.orderNo)if (payParams.code 200) {// 进行微信支付const payInfo await wx.requestPayment(payParams.data)console.log(payInfo)}} catch {wx.toast({ title: 支付遇到问题请联系客服, icon: error })}
}
13. 小程序支付-支付状态查询
思路分析
通过调用后端接口获取支付状态如果支付成功需要给用户提示同时跳转到订单列表页面。
公司后端开始向微信服务器发送请求查询支付结果
公司服务器会将微信服务器返回的支付结果返回到客户端
客户端根据查询结果跳转到订单列表页面
落地代码
➡️ /pages/order/detail/index.js
// 获取预付单信息、支付参数
async advancePay() {try {const payParams await reqPrePayInfo(this.orderNo)if (payParams.code 200) {// payParams.data 就是获取的支付参数// 调用 wx.requestPayment 发起微信支付const payInfo await wx.requestPayment(payParams.data)// 获取支付结果if (payInfo.errMsg requestPayment:ok) {// 查询订单的支付状态const payStatus await reqPayStatus(this.orderNo)if (payStatus.code 200) {wx.redirectTo({url: /pages/order/list/index,success: () {wx.toast({title: 支付成功,icon: success})}})}}}} catch (error) {wx.toast({title: 支付失败请联系客服,icon: error})}
},
