liuwenbing/mht.js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始提交

Browse Source
This commit is contained in:
liuwenbing
2025-10-22 07:50:31 +08:00
commit c71ef1c3f3
2627 changed files with 280115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

597
pages/pay/pay.vue Normal file
View File

@@ -0,0 +1,597 @@
<template>
<view class="cart">
<!-- 自定义导航栏 -->
<uniNavBar class="interval" @clickLeft="goBack" title="确定支付" left-text="关闭" fixed="true" ></uniNavBar>
<view class="pay-main">
<!-- 加label就算点击文字或者图片都能选中 -->
<radio-group @change="radioChange">
<label for="" @tap="goPayment">
<view class="pay-item">
<image class="pay-img" src="../../static/image/zfb.png" mode=""></image>
<view>
<view>支付宝支付</view>
<view class="pay-txt">推荐支付宝用户使用</view>
</view>
<label class="radio">
<radio v-if="vkPay.status == 0" value="alipay"
:checked="form1.provider == 'alipay'" color="#FF3333" /><text></text>
</label>
</view>
</label>
<label for="" @tap="goPayment">
<view class="pay-item" >
<image class="pay-img" src="../../static/image/wxf.png" mode=""></image>
<view>
<view>微信支付</view>
<view class="pay-txt">推荐微信用户使用</view>
</view>
<label class="radio">
<radio v-if="vkPay.status == 0" value="wxpay"
:checked="form1.provider == 'wxpay'" color="#FF3333" /><text></text>
</label>
</view>
</label>
</radio-group>
</view>
<!-- <view>
你选择的商品为：{{details.name}}</text>
</view> -->
<!-- vue2版本的支付组件开始 -->
<!-- #ifndef VUE3 -->
<vk-uni-pay ref="vkPay" :status.sync="vkPay.status" :code-url.sync="vkPay.codeUrl"
:qrcode-image.sync="vkPay.qrcodeImage" :query-payment-action="vkPay.queryPaymentAction"
:page-show="vkPay.pageShow" :polling="vkPay.polling" :return-url="vkPay.returnUrl"
:await-notify="vkPay.awaitNotify" :pay-order-info="vkPay.payOrderInfo"></vk-uni-pay>
<!-- #endif -->
<!-- vue2版本的支付组件结束 -->
<!-- vue3版本的支付组件开始 -->
<!-- #ifdef VUE3 -->
<vk-uni-pay ref="vkPay" v-model:status="vkPay.status" v-model:codeUrl="vkPay.codeUrl"
v-model:qrcodeImage="vkPay.qrcodeImage" :query-payment-action="vkPay.queryPaymentAction"
:page-show="vkPay.pageShow" :polling="vkPay.polling" :return-url="vkPay.returnUrl"
:await-notify="vkPay.awaitNotify" :pay-order-info="vkPay.payOrderInfo"></vk-uni-pay>
<!-- #endif -->
<!-- vue3版本的支付组件结束 -->
<!-- 弹窗开始 -->
<!-- 二维码支付弹窗开始 -->
<view class="pay-qrcode-popup" v-if="vkPay.status < 2 && vkPay.codeUrl">
<view class="pay-qrcode-popup-mask" @click="cancelPay"></view>
<view class="pay-qrcode-popup-content">
<image v-if="vkPay.qrcodeImage" :src="vkPay.qrcodeImage" class="pay-qrcode-popup-image"></image>
<vk-uni-qrcode v-else :text="vkPay.codeUrl" :size="450"></vk-uni-qrcode>
<view class="pay-qrcode-popup-info">
<view>
<text class="pay-qrcode-popup-info-fee">{{ (form1.total_fee / 100).toFixed(2) }}</text>
<text>元</text>
</view>
<view v-if="form1.provider == 'wxpay'">请用微信扫码支付</view>
<view v-else-if="form1.provider == 'alipay'">请用支付宝扫码支付</view>
</view>
<button v-if="vkPay.status == 1" type="primary" @click="queryPayment">我已完成支付</button>
</view>
</view>
<!-- 二维码支付弹窗结束 -->
<!-- 外部浏览器H5支付弹窗确认开始 -->
<view class="pay-confirm-popup" v-if="vkPay.confirmShow">
<view class="pay-confirm-popup-content">
<view class="pay-confirm-popup-title">请确认支付是否已完成</view>
<view><button type="primary" @click="queryPayment">已完成支付</button></view>
<view class="pay-confirm-popup-refresh"><button type="default" @click="afreshPayment">支付遇到问题，重新支付</button></view>
<view class="pay-confirm-popup-cancel" @click="vkPay.confirmShow = false">暂不支付</view>
</view>
</view>
<!-- 外部浏览器H5支付弹窗确认结束 -->
<!-- 弹窗结束 -->
</view>
</template>
<script>
import uniNavBar from '../../components/uni/uni-nav-bar/uni-nav-bar.vue'
import process from '../../utils/process.js'
const db = uniCloud.database();
export default {
data() {
return {
details: {
name: null,
id: null,
imgUrl: null,
price: 0
},
orderId: String,
vkPay: {
/**
* 查询支付状态的云函数配置
* 如果是非路由框架，则action为字符串，值为云函数名称
* 如果是路由框架，则按下方配置填写
* 注意：queryPaymentAction内参数用默认即可，无需更改。（除非你已经知道参数的意义）
*/
queryPaymentAction: {
name: "vk-pay", // 云函数名称
action: "pay/queryPayment", // 路由模式下云函数地址
actionKey: "action", // 路由模式下云函数地址的识别key
dataKey: "data" // 路由模式下云函数请求参数的识别key
},
// PC支付的付款二维码地址，渲染二维码需要自己写，可以参考示例中的二维码组件 vk-uni-qrcode
codeUrl: "",
qrcodeImage: "",
// 当前支付状态 0:等待发起支付 1:支付中 2:已支付
status: 0,
// 当前页面是否显示
pageShow: true,
// 启用轮询检测订单支付状态（仅h5支付有效）
polling: true,
// 微信手机外部浏览器H5支付时有效，必须是http或https开头的绝对路径，且在微信H5支付配置的域名白名单中。你还需要将此H5域名加入uniCloud白名单
// 如果此值为空，则默认使用返回当前页面，返回的页面url参数会带上confirmShow=true&out_trade_no=实际订单号
returnUrl: "",
// 确认已支付的弹窗开关（微信手机外部浏览器H5支付时有效）
confirmShow: false,
// 支付成功后，是否需要等待异步回调全部执行完成后才通知前端
awaitNotify: true,
// 支付成功后，是否需要返回支付订单数据
payOrderInfo: true,
},
// 表单请求数据
form1: {
provider: "",
total_fee: null,
out_trade_no: "",
subject: "测试订单标题",
body: "订单详情",
type: "recharge",
openid: ""
}
}
},
components: {
uniNavBar,
},
onLoad(options) { //option为object类型，会序列化上个页面传递的参数
//判断options.dataList是否为空 不然会因为json.parse解析undefined报错
if (options.dataList) {
this.details = JSON.parse(options.dataList);
console.log(options.dataList); //查看传入的id值 打印出上个页面传递的参数。
}
// 此处是因为微信H5外部浏览器支付后微信会重新打开指定页面，我们需要做一个弹窗让用户自己点下是否支付成功，同时云函数会去请求微信服务器检查是否真的付款成功。
this.vkPay.confirmShow = options.confirmShow || false;
if (options.out_trade_no) this.form1.out_trade_no = options.out_trade_no;
if (options.code && options.state) {
// 获取微信公众号的openid
setTimeout(() => {
this.getOpenid({
code: options.code
});
}, 300);
}
},
// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
onShow() {
this.vkPay.pageShow = true;
// process.pageState[0] = process.pageState[0] + 1;
},
// 监听 - 页面每次【隐藏时】执行(如：返回)
onHide() {
this.vkPay.pageShow = false;
},
methods: {
goBack() {
//返回上一页（选择商品样式）返回到选择棉花糖样式的界面
uni.reLaunch({
url:'/pages/productlist/productlist'
})
},
//发起支付
goPayment(obj = {}) {
//生成订单号
let {
form1
} = this;
function setTimeDateFmt(s) {
return s < 10 ? '0' + s : s;
}
function orderNumber() {
const now = new Date(); //当前时间
let fullYear = now.getFullYear(); //年
let month = setTimeDateFmt(now.getMonth() + 1); //月
let day = setTimeDateFmt(now.getDate()); //日
let hour = setTimeDateFmt(now.getHours()); //时
let minutes = setTimeDateFmt(now.getMinutes()); //分
let seconds = setTimeDateFmt(now.getSeconds()); //秒
//年月日时分秒后添加 随机数
let orderCode = fullYear + month + day + hour + minutes + seconds + (Math.round(Math.random() * 1000000));
return orderCode;
}
this.orderId = orderNumber();
console.log(this.orderId)
//把商品价格、名称、id 、图片 传给数据库 云数据库库添加数据
db.collection("CommodityOrder").add({
CommodityName: this.details.name,
CommodityPrice: this.details.price,
CommodityImg: this.details.imgUrl,
CommodityID: this.details.id,
Order_ID: this.orderId,
OrderStatus: "未支付", //1未支付 当支付完徐娅改成2 表示支付完成
}).then((res) => { // res 为数据库查询结果
// console.log(res)
})
//然后从云端下载订单号 ,怎么获取最新的订单号
db.collection('CommodityOrder').where(
//查询最新的订单号
{
Order_ID: this.orderId
}).get().then((res) => {
const DownloadData = res.result.data[0]
//查询到的订单号、金额后弹出扫码界面
console.log(DownloadData.Order_ID)
//当支付完后再出现提示支付完成，或者支付失败 都跳转到选中商品中
// 发起支付
// 这里的订单号\金额等数据应该是从数据库里获取的,这里为演示需要,故直接本地生成.
form1.out_trade_no = DownloadData.Order_ID; //订单号
form1.subject = DownloadData.CommodityName; //商品名称
form1.total_fee = DownloadData.CommodityPrice; //金额
// #ifdef MP-WEIXIN
form1.provider = "wxpay";
// #endif
// #ifdef MP-ALIPAY
form1.provider = "alipay";
// #endif
this.$refs.vkPay.createPayment({
// 如果是非路由框架，则外层action不再是json，而为字符串，值为云函数名称，如 action: "你的云函数名称"
// 如果是路由框架，则按下方配置填写
// 如果云函数为 vk-pay，则无需改动 action
action: {
name: "vk-pay", // 云函数名称
action: "pay/createPayment", // 路由模式下云函数地址
actionKey: "action", // 路由模式下云函数地址的识别key(注意VK路由框架下,此值为$url)
dataKey: "data" // 路由模式下云函数请求参数的识别key
},
// 请求数据（data内的参数会传给云函数，云函数中通过 data.xxx 的方式获取）
data: {
provider: form1.provider,
total_fee: form1.total_fee,
out_trade_no: form1.out_trade_no,
subject: form1.subject,
body: form1.body,
type: form1.type,
openid: form1.openid // 如果是微信公众号支付，则openid不能为空
},
// 成功回调
success: res => {
// 此处一般是写支付成功的提示或跳转到支付成功的页面。
this.toast("支付成功", "success");
console.log("paySuccess", res);
//支付成功后需要把数据库的商品状态改成2
db.collection('CommodityOrder').where({
CommodityID: this.details.id
}).update({
OrderStatus: "已支付", //2为该订单支付成功
}).then((res) => {
console.log(res)
})
// 成功后跳转到做糖的交互页面
uni.navigateTo({
url: '/pages/cottonCandy/SugarMaking'
})
},
// 失败回调
fail: res => {
if (res.failType === "create") {
// 创建支付失败时提示
this.alert(res.msg);
} else if (res.failType === "request") {
// 请求支付失败时提示
this.toast("请求支付失败");
} else if (res.failType === "result") {
// 支付结果失败时提示
this.toast("支付失败");
}
},
// 取消回调
cancel: res => {
this.toast("用户取消支付");
}
});
});
},
// 支付状态查询
queryPayment() {
// 支付状态查询你可以直接查你的订单表，看订单是否已支付（因为最终判定用户是否支付成功应该以你的订单表为准）
// 如果vkPay.queryPayment接口返回支付成功，但你的订单表查询到未支付，代表你的异步回调函数写的有问题。
this.$refs.vkPay.queryPayment({
title: "查询中...",
data: {
out_trade_no: this.form1.out_trade_no
},
needAlert: true,
success: data => {
this.vkPay.status = 2; // 标记为已支付
this.vkPay.confirmShow = false; // 关闭确认弹窗（微信H5支付有弹窗确认）
this.toast(data.msg);
},
fail: (res = {}) => {
if (res.msg === "订单已退款") {
this.vkPay.confirmShow = false; // 关闭确认弹窗（微信H5支付有弹窗确认）
}
}
});
},
// 退款，此为演示，实际业务开发不应该写在前端，而是写在云函数中。
refund() {
this.callFunction({
title: "退款中...",
name: "vk-pay",
data: {
action: "pay/refund",
data: {
out_trade_no: this.form1.out_trade_no,
//refund_fee: 1, // 退款金额，100=1元（单位分）不填则全额退款
}
},
success: data => {
this.toast(data.msg);
}
});
},
// 获取微信支付v3版本的微信平台证书
getWxpayPublicCert() {
this.callFunction({
title: "请求中...",
name: "vk-pay",
data: {
action: "pay/getWxpayPublicCert",
data: {
}
},
success: data => {
this.alert("请按F12 看浏览器控制台的输出内容");
let wxpayPublicCertSn = data.wxpayPublicCertSn;
let wxpayPublicCertContent = data.wxpayPublicCertContent;
console.log('wxpayPublicCertSn: ', wxpayPublicCertSn)
console.log(`wxpayPublicCertContent: 请将它压缩成一行（复制下面的证书，用""引号框住证书内容，按一下回车，自动把换行转为\\n`)
console.log(wxpayPublicCertContent)
}
});
},
cancelPay() {
this.vkPay.status = 0;
this.vkPay.codeUrl = "";
},
// 云函数调用简易封装，你也可以用你原本框架的云函数请求封装方法来调用云函数。
callFunction(obj = {}) {
let {
needAlert = true
} = obj;
if (obj.title) uni.showLoading({
title: obj.title
});
uniCloud.callFunction({
...obj,
success: (result = {}) => {
if (obj.title) uni.hideLoading();
let res = result.result;
if (res.code === 0) {
if (typeof obj.success == "function") obj.success(res);
} else {
if (needAlert && res.msg) this.alert(res.msg);
if (typeof obj.fail == "function") obj.fail(res);
}
},
fail: (res = {}) => {
if (obj.title) uni.hideLoading();
if (needAlert && res.msg) this.alert(res.msg);
if (typeof obj.fail == "function") obj.fail(res);
}
});
},
// 选择支付方式
radioChange(e) {
this.form1.provider = e.detail.value;
},
// 获取公众号code
getWeiXinJsCode(scope = "snsapi_base") {
let appid = "wx2ebf03d174875bed"; // 填写公众号的appid
let redirect_uri = window.location.href.split("?")[0];
let url =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
window.location.href = url;
},
// 获取公众号openid
getOpenid(data) {
let {
code
} = data;
this.callFunction({
title: "请求中...",
name: "vk-pay",
data: {
action: "pay/code2SessionWeixinH5",
data
},
success: res => {
if (res.openid) {
this.form1.openid = res.openid;
this.toast("已获取到openid，可以开始支付", );
}
}
});
},
// uni.showToast的简易封装
toast(title, icon = "none", mask = false) {
uni.showToast({
title,
icon,
mask,
duration: 1500
});
},
// uni.showModal的简易封装
alert(content, title = "提示") {
uni.showModal({
title,
content,
showCancel: false
});
}
},
// 计算属性
computed: {
// h5运行环境
h5Env() {
// #ifdef H5
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' && (ua.match(/miniprogram/i) == 'miniprogram')) {
// 微信小程序
return "mp-weixin";
}
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
// 微信公众号
return "h5-weixin";
}
if (ua.match(/alipay/i) == 'alipay' && ua.match(/miniprogram/i) == 'miniprogram') {
// 支付宝小程序
return "mp-alipay";
}
if (ua.match(/alipay/i) == 'alipay') {
// 支付宝内
return "h5-alipay";
}
// 外部 H5
return "h5";
// #endif
}
}
};
</script>
<style lang="scss" scoped>
.interval{
margin-top: 20rpx;
}
.pay-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
border-bottom: 2rpx solid #CCCCCC;
}
.pay-txt {
color: #CCCCCC;
}
.pay-img {
width: 100rpx;
height: 100rpx;
}
.page-content {
padding: 15px;
.input {
height: 46px;
border: solid 1px #dddddd;
border-radius: 5px;
margin-bottom: 15px;
padding: 0px 15px;
}
.button {
margin-bottom: 15px;
}
}
.pay-confirm-popup {
position: fixed;
z-index: 2;
width: 100vw;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
.pay-confirm-popup-content {
width: 550rpx;
margin: 50% auto 0 auto;
background-color: #ffffff;
border-radius: 10rpx;
padding: 40rpx;
.pay-confirm-popup-title {
text-align: center;
padding: 20rpx 0;
margin-bottom: 30rpx;
}
.pay-confirm-popup-refresh {
margin-top: 20rpx;
}
.pay-confirm-popup-cancel {
margin-top: 20rpx;
text-align: center;
}
}
}
/* 二维码支付弹窗开始 */
.pay-qrcode-popup {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: grid; /* 启用 Grid 布局 */
place-items: center; /* 单行属性实现居中 */
z-index: 1000;
.pay-qrcode-popup-mask {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
}
.pay-qrcode-popup-content {
position: relative;
width: 500rpx;
// margin: 40% auto 0 auto;
background-color: #ffffff;
border-radius: 10rpx;
padding: 40rpx;
box-sizing: content-box;
text-align: center;
.pay-qrcode-popup-info {
text-align: center;
padding: 20rpx;
.pay-qrcode-popup-info-fee {
color: red;
font-size: 60rpx;
font-weight: bold;
}
}
.pay-qrcode-popup-image {
width: 450rpx;
height: 450rpx;
}
}
}
</style>