网络营销推广网站,企业网站建设管理平台,深圳商业营销厅设计公司,昆明的房产网站建设效果图#xff1a; custom-payment #xff1a; 在生成预付订单之后页面中需要弹出一个弹层#xff0c;弹层中展示的内容为支付方式#xff08;渠道#xff09;#xff0c;由用户选择一种支付方式进行支付。
该弹层组件是以扩展组件 uni-popup 为核心的#xff0c;关于… 效果图 custom-payment 在生成预付订单之后页面中需要弹出一个弹层弹层中展示的内容为支付方式渠道由用户选择一种支付方式进行支付。
该弹层组件是以扩展组件 uni-popup 为核心的关于 uni-popup 组件的使用文档请查看这里这里只介绍我们用到的部分
type 属性指定弹层出现的位置is-mask-click 是否允许点击蒙层关闭弹层maskClick 点击弹层时触发事件
custom-payment 代码
!-- components/custom-payment/custom-payment.vue --
script langts setup
import { ref } from vue// 在线支付弹层
const paymentPopup ref()// 打开弹层
const open () {paymentPopup.value.open()
}
// 关闭弹层
const close () {paymentPopup.value.close()
}// 2.把方法暴露出去给外部使用
defineExpose({open,close
})//3. 处理选择支付渠道
const paymentMethod ref()
const paymentChannel [{title: 微信支付,thumb: /static/images/wechatpay-icon.png,},{title: 支付宝支付,thumb: /static/images/alipay-icon.png,},
]
const changePayment (index: number) {paymentMethod.value index
}const emit defineEmits{(e: close): void(e: confirm, index: number): void
}()/script
templateuni-popup :is-mask-clickfalse refpaymentPopup typebottom maskClickemit(close)view classpayment-containerview classpayment-headertext classtitle选择支付方式/textuni-icons classuni-icons-close size18 color#333 typecloseempty clickemit(close) //viewview classorder-amount¥ {{ amount.toFixed(2) }} /viewuni-list :borderfalseuni-list-item clickable v-for(item, index) in paymentChannel :keyindex :titleitem.title:thumbitem.thumb clickchangePayment(index)template #footeruni-icons v-ifpaymentMethod index size26 color#16C2A3 typecheckbox-filled /uni-icons v-else size26 color#d1d1d1 typecircle //template/uni-list-item/uni-listbutton classuni-button clickemit(confirm, paymentMethod)立即支付/button/view/uni-popup
/templatestyle langscss
.payment-container {min-height: 400rpx;border-radius: 30rpx 30rpx 0 0;background-color: #fff;padding: 10rpx 30rpx 40rpx;.payment-header {height: 88rpx;line-height: 88rpx;text-align: center;margin-bottom: 20rpx;font-size: 32rpx;color: #333;position: relative;}.uni-icons-close {position: absolute;top: 2rpx;right: 0;}.order-amount {padding: 10rpx 0 10rpx;text-align: center;font-size: 40rpx;color: #333;}:deep(.uni-list-item__container) {padding: 40rpx 0 !important;}:deep(.uni-list-item--hover) {background-color: #fff !important;}:deep(.uni-list-item__icon) {margin-right: 0;}.uni-button {margin-top: 40rpx;}
}
/style 支付流程
一般的支付流程如下
第三方支付提供的开发者平台注册账号、创建应用、申请认证用的证书或者 key前端获取待支付订单ID、支付金额、支付渠道等数据传递给后端接口后端接口在获取前端传递的数据后根据支付平台提供文档与支付平台接口进行对接后端与支付平台对接成功后后端将支付信息再回传给前端前端根据回传的信息引导用户进行支付
在整个支付的过程中前端的任务仍然是调用接口与调用普通的接口几乎没有差别真正完成支付任务的其实是后端接口。 支付宝支付
自行注册支付宝支付账号在企业中开发时需要创建应用然而创建应用后还需要一些资质才可以进行支付无法满足这些资质好在支付定平台提供了沙箱环境沙箱环境是协助开发者进行接口开发及主要功能联调的模拟环境目前仅支持网页/移动应用和小程序两种应用类型。在正式应用或沙箱应用中获取到商家账号、认证证书、APPID、回调地址等。上述的操作其实都是由后端来操作的这里只是让大家了解一下支付管理后台的相关信息。
父组件使用组件 script langts setup// 弹层选择支付渠道customPaymentRef.value.open()// 处理支付渠道组件的自定义事件const onPaymentConfirm async (index: number) {if (index undefined) return uni.showToast({ title: 请选择支付方式, icon: none })if (index 0) return uni.showToast({ title: 暂不支持微信支付, icon: none })// 调用后端接口const { payUrl } await orderPayApi({orderId: orderId.value,paymentMethod: index ,payCallback: 返回地址})// #ifdef H5window.location.href payUrl// #endif// #ifdef MP-WEIXIN// 引导用户支付wx.requestPayment 小程序// wx.requestPayment({// // 4 个参数// })// #endif}
// 关闭支付弹层
const onPaymentClose async () {const res await uni.showModal({title: 关闭支付,content: 取消支付将无法获得医生回复医生接诊名额有限是否确认关闭,cancelText: 仍要关闭,cancelColor: #848484,confirmText: 继续支付,confirmColor: #16C2A3,})if (!res.confirm) {customPaymentRef.value.close()uni.reLaunch({url: /pages/index/index,})}
}/scripttemplate!-- 支付渠道弹层 --custom-payment refcustomPaymentRefcloseonPaymentClose confirmonPaymentConfirm /
/template
