2023-1-8
This commit is contained in:
252
uni_modules/common-pay/pages/pay/pay.vue
Normal file
252
uni_modules/common-pay/pages/pay/pay.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<view style="height: 100%;display: flex;flex-direction: column;align-items: center;">
|
||||
<view
|
||||
style="display: flex;flex-direction: column;align-items: center;overflow-y: scroll;flex:1;padding-top: 60rpx;">
|
||||
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;">
|
||||
{{convertSecondsToHMS(page.countdown)}}
|
||||
</view>
|
||||
<view>
|
||||
<text style="color: black;font-size: 35rpx;font-weight: bold;">￥</text>
|
||||
<text style="color: black;font-size: 70rpx;font-weight: bold;">{{data.price}}</text>
|
||||
</view>
|
||||
<view style="color: #666;margin-left: 20rpx;margin-right: 20rpx;text-align: center;font-size: 24rpx;">
|
||||
{{data.goods}}
|
||||
</view>
|
||||
|
||||
<view style="background: #ffffff;margin-top: 100rpx;border-radius: 20rpx;width: calc(100vw - 40rpx);">
|
||||
<radio-group @change="radioChange">
|
||||
<label
|
||||
style="width: 100%;height: 120rpx;display: flex;flex-direction: column;justify-content: center;align-items: center;"
|
||||
v-for="(item, index) in page.real" :key="index">
|
||||
<view style="width: 100%;height: 120rpx;display: flex;flex-direction: row;align-items: center;">
|
||||
<image :src="item.image" style="width: 55rpx;height: 55rpx;margin-left: 25rpx;"></image>
|
||||
<text style="flex: 1;font-size: 30rpx;margin-left: 6rpx;">{{item.pay}}</text>
|
||||
<radio style="transform:scale(0.8);margin-right: 25rpx;" :checked="index==0"
|
||||
:value="index+''" :activeBackgroundColor="item.btnColor" />
|
||||
</view>
|
||||
<view v-if="index != page.real.length-1"
|
||||
style="width: 93%;height: 1px;background-color: #f1f2f3;"></view>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn" :style="{'background': page.real[page.selected].btnColor}" @click="createOrder">
|
||||
{{page.submitText}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
http
|
||||
} from '../../utils/pay_http.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: {
|
||||
// 本插件提供的支付方式
|
||||
supports: [{
|
||||
payType: 'wxpay',
|
||||
pay: '微信',
|
||||
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAADcUlEQVR4nO2ZfVLaUBDAdyFCAGekJyg9Qb2BMBX/lZ4APEHxBOIJSk+gnqD0X6EFT6A9QfUExZkCAUK2u1iYNF98+CiR8ptR92Xy8X4vm7cvEWFD2IqEjf9DJN3UMwMTihyunZgGV+2ccQ8++Iqk6vGPFkCZw9AQAah28v1TDl14iqQa8apF8IHD0BFB+NQ57LsG2CUi6dQ36QeHoSWu4RtnmrlEknW9QkBnHIaYyGkv36tyMOVFiiDgeTdvVMDGVmSdbEUWAx+QoIVR/rHgHmxwXcoCQQaQCgSwx5uWYsUieBMFqPzKGy2Yg2QjWSCyygB0wM2FWIkIn+AxAliYV8DJH6EqC73m5lwoF+EU+h7bSWTbuXabm0uTbqbTg2GvRQhvuTkTpSKqJCaITN80anxnDrgZiDIRPugxpiUyqiSEVEMvElGZAPa5GYg6EYy+7x52axw+C7kLw5FxbFlQ4VucAUYWhdaMBasSEUmp7lF/n8OlEYGBaXBnx3cgzZukI19iGpZlMZi81i8JqcibPVEiwmPmWrAJ0rlZqSYr68EIzoioBFPwgaftkn3We5rJRp859ESJiNcSetxBk24BoydeKbdb17MWQpFsAnzhR/5ddXZIkEHpm72fHHqCKkR6+b7rGCFZj9cI4DjCb3E7WuJc7o4IjADOOIWyYINPME0j8CFRjxP/8WSlIk+dpiaHY3inNvHgcmjDnUZ+rE1ESF7H77yKGh/gm0Z+rFwkriVeSdpw6CL1VS9ZFl1wOAUJr2I7UAlKIyfyzAW9bisRmVVD+FmRlNrjPW84jSrzpJETrwGxo0aER7h7ZJTABxnNIUTTnVznjptLwYNxSwEVXomIEJRez8U5aXihTAQRL7uHxgmHShnXj6HB9YgyEIAyEWHWs7IMyYZ+Qbai6YdaEa4TGMHTzjvjEhQwr4SgVGRCJIInz5FJNVP7ZJoXFPBwO1mJyKxZzA+Z3WQBCTT+EJHmTXOzGhHbSWXVyt9KjvmkrZ0o3DiL4O43/WBk4T6SlSUA3nc57NecwNf8m0VFooA5TdPvBmZP0mPpzi3CSkRkKiYLspxjGfhHrERkHWxFwsbGiHD1cn03cInI/B70LhAGvL4buESEjfhn6IQwyvhJCL4iwlOaYQGB0txcGwTYjmtUc6aTnUCRl8RWJGxsjMhvudpkUV3iI98AAAAASUVORK5CYII=',
|
||||
btnColor: '#FE9039'
|
||||
}],
|
||||
// 可使用的方式，主要是对App,h5可进行定义，微信小程序定时时无效(因为仅支持微信支付)
|
||||
use: [0],
|
||||
real: [],
|
||||
selected: 0,
|
||||
countdown: 0,
|
||||
submitText: '确认支付',
|
||||
cancleText: '订单已取消'
|
||||
},
|
||||
data: {
|
||||
price: '价格',
|
||||
goods: '商品名称',
|
||||
remainder: 60000,
|
||||
// 生成待支付订单时后台返回的,具体地址是啥，参数是啥由后台提供
|
||||
// 唯一支付方式固定为type参数
|
||||
pay_url: {
|
||||
url: '底梦哲提供，王鹏飞进行组装成绝对地址返回',
|
||||
// 底梦哲提接口传参要求，王鹏飞进行组装
|
||||
params: {
|
||||
// 此参数由本工具进行返回，后台不需要传
|
||||
type: '支付方式，由本框架提供',
|
||||
// ...更多参数
|
||||
}
|
||||
},
|
||||
// 由前端去设置，查看订单的详情地址
|
||||
return_url: '订单详情的地址'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
wxPay(order, o) {
|
||||
|
||||
wx.requestPayment({
|
||||
appId: order.appid,
|
||||
timeStamp: order.timeStamp, //创建订单时间戳
|
||||
nonceStr: order.nonceStr,
|
||||
package: order.package, // 订单包
|
||||
signType: order.signType, // 加密方式统一'MD5'
|
||||
paySign: order.sign, // 后台支付签名返回
|
||||
success(res) {
|
||||
// 数据源转换成字符
|
||||
let data = JSON.stringify(o)
|
||||
// 转码传输
|
||||
let value = encodeURIComponent(data)
|
||||
uni.redirectTo({
|
||||
url: '/uni_modules/common-pay/pages/success/success?data=' +
|
||||
value
|
||||
})
|
||||
},
|
||||
fail(res) {
|
||||
try {
|
||||
if (err.errMsg != 'requestPayment:fail cancel') {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: '支付失败'
|
||||
})
|
||||
}
|
||||
} catch (e) {
|
||||
//TODO handle the exception
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
convertSecondsToHMS(seconds) {
|
||||
var hours = Math.floor(seconds / (60 * 60)); // 计算小时
|
||||
seconds %= (60 * 60); // 取余得到不足1小时的秒数
|
||||
|
||||
var minutes = Math.floor(seconds / 60); // 计算分钟
|
||||
seconds %= 60; // 取余得到不足1分钟的秒数
|
||||
|
||||
let result = '支付剩余时间 '
|
||||
if (hours > 0) {
|
||||
result += (hours < 10 ? '0' + hours : hours) + ":" + (minutes < 10 ? '0' + minutes : minutes) + ":" + (
|
||||
seconds < 10 ? '0' + seconds : seconds)
|
||||
} else {
|
||||
// 不显示小时，直接显示 分钟：秒
|
||||
if (minutes > 0) {
|
||||
result += (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds)
|
||||
} else {
|
||||
result += "00:" + (seconds < 10 ? '0' + seconds : seconds)
|
||||
}
|
||||
}
|
||||
|
||||
return result
|
||||
},
|
||||
startCountdown() {
|
||||
setInterval(() => {
|
||||
if (this.page.countdown > 0) {
|
||||
this.page.countdown--;
|
||||
} else {
|
||||
// 秒杀倒计时结束的操作，例如弹出提示或触发秒杀请求
|
||||
this.page.submitText = this.page.cancleText
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
radioChange: function(evt) {
|
||||
this.page.selected = parseInt(evt.detail.value)
|
||||
},
|
||||
createOrder() {
|
||||
|
||||
if (this.page.cancleText === this.page.submitText) {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
title: this.page.cancleText
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
// 额外组装type
|
||||
let payType = this.page.real[this.page.selected].payType
|
||||
this.data.pay_url.params.type = payType
|
||||
|
||||
let o = this.data
|
||||
o.color = this.page.real[this.page.selected].btnColor
|
||||
o.pay = this.page.real[this.page.selected].pay
|
||||
|
||||
http({
|
||||
url: this.data.pay_url.url,
|
||||
data: this.data.pay_url.params
|
||||
}).then((res) => {
|
||||
if ('wxpay' === payType) {
|
||||
this.wxPay(res.data, o)
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log('fail', JSON.stringify(err));
|
||||
});
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
||||
try {
|
||||
// 跳转携带数据
|
||||
this.data = JSON.parse(options.data)
|
||||
} catch (e) {
|
||||
this.data = JSON.parse(decodeURIComponent(options.data))
|
||||
}
|
||||
|
||||
this.page.countdown = this.data.remainder;
|
||||
if (this.page.countdown <= 0) {
|
||||
this.page.submitText = this.page.cancleText
|
||||
} else {
|
||||
// 开始倒计时
|
||||
this.startCountdown();
|
||||
}
|
||||
|
||||
// ToDo h5，app下生效
|
||||
// 将来支持配置
|
||||
// #ifdef APP || H5
|
||||
|
||||
// #endif
|
||||
// 微信下生效
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信不支持配置
|
||||
this.page.use = [0]
|
||||
// #endif
|
||||
|
||||
for (var i = 0; i < this.page.use.length; i++) {
|
||||
this.page.real.push(this.page.supports[this.page.use[i]])
|
||||
}
|
||||
|
||||
if (this.page.real.length < 1) {
|
||||
uni.showModal({
|
||||
content: '未正确配置支付方式',
|
||||
showCancel: false,
|
||||
success: function(res) {
|
||||
if (res.confirm) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
});
|
||||
return
|
||||
}
|
||||
|
||||
if (this.page.real.length == 1) {
|
||||
// 仅有一个选择时直接调用支付接口
|
||||
this.createOrder()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
uni-page-body,
|
||||
page {
|
||||
background-color: #f1f3f5;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: calc(100% - 40rpx);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
border-radius: 50rpx;
|
||||
margin-bottom: 30rpx;
|
||||
margin-top: 30rpx;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
231
uni_modules/common-pay/pages/success/success.vue
Normal file
231
uni_modules/common-pay/pages/success/success.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<view class="app">
|
||||
<view class="header" :style="{'background': data.color}">
|
||||
<image :src="page.icon" class="success-image"></image>
|
||||
<view class="success-title">支付成功</view>
|
||||
<view class="hr"></view>
|
||||
</view>
|
||||
<view class="info-box">
|
||||
<view class="info-amount" :style="{'color': data.color}">¥ {{ data.price }}</view>
|
||||
<view class="left-circle"></view>
|
||||
<view class="right-circle"></view>
|
||||
<view class="info-main">
|
||||
<view class="info-cell">
|
||||
<view class="left">订单编号</view>
|
||||
<view class="right">{{ data.orderId }}</view>
|
||||
</view>
|
||||
<view class="info-cell" v-if="!(page.createTime == undefined||page.createTime=='')">
|
||||
<view class="left">下单时间</view>
|
||||
<view class="right">{{page.createTime}}</view>
|
||||
</view>
|
||||
<view class="info-cell">
|
||||
<view class="left">支付方式</view>
|
||||
<view class="right">{{ data.pay }}</view>
|
||||
</view>
|
||||
<view class="info-cell" v-if="!(page.payTime == undefined||page.payTime=='')">
|
||||
<view class="left">支付时间</view>
|
||||
<view class="right">{{page.payTime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="!(data.order_url==undefined||data.order_url==null)" class="button-query"
|
||||
:style="{'background': data.color}" @click="queryOrder">查看订单
|
||||
</view>
|
||||
<view class="footer-hr"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
http
|
||||
} from '../../utils/pay_http.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
page: {
|
||||
icon: "data:image/png;base64,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",
|
||||
payTime: '',
|
||||
createTime: ''
|
||||
},
|
||||
data: {
|
||||
"price": "0.01",
|
||||
"order_url": {
|
||||
"page": "/pages/index2/index2",
|
||||
"params": {
|
||||
"trade_no": "velit Duis"
|
||||
}
|
||||
},
|
||||
"pay_url": {
|
||||
"url": "http://192.168.2.110:7777/order/pay ",
|
||||
"params": {
|
||||
"mainSid": "9e04ee75-3b85-49eb-a24c-8a608814035d",
|
||||
"type": "wxpay"
|
||||
}
|
||||
},
|
||||
"trade_no_url": {
|
||||
"url": "http://192.168.2.110:7777/order/orderQuery",
|
||||
"params": {
|
||||
'mainSid': '9ebb7ca3-3203-4e91-b256-32ad0f821afd'
|
||||
}
|
||||
},
|
||||
"orderId": "288320940398",
|
||||
"remainder": 33,
|
||||
"goods": "无骨鸡柳等3件商品",
|
||||
"color": "#09bb07",
|
||||
"pay": "微信"
|
||||
}
|
||||
}
|
||||
},
|
||||
// 监听 - 页面每次【加载时】执行(如：前进)
|
||||
onLoad(options = {}) {
|
||||
try {
|
||||
// 跳转携带数据
|
||||
this.data = JSON.parse(options.data)
|
||||
} catch (e) {
|
||||
this.data = JSON.parse(decodeURIComponent(options.data))
|
||||
}
|
||||
|
||||
http({
|
||||
url: this.data.trade_no_url.url,
|
||||
data: this.data.trade_no_url.params
|
||||
}).then((res) => {
|
||||
this.page.payTime = res.data.time_end
|
||||
this.page.createTime = res.data.createTime
|
||||
}).catch((err) => {
|
||||
console.log('fail', JSON.stringify(err));
|
||||
});
|
||||
},
|
||||
onUnload() {
|
||||
let bus = this.data.bus
|
||||
for (var i = 0; i < bus.length; i++) {
|
||||
uni.$emit(bus[i] + '')
|
||||
}
|
||||
},
|
||||
// 函数
|
||||
methods: {
|
||||
queryOrder() {
|
||||
// 数据源转换成字符
|
||||
let data = JSON.stringify(this.data.order_url.params)
|
||||
// 转码传输
|
||||
let value = encodeURIComponent(data)
|
||||
uni.redirectTo({
|
||||
url: this.data.order_url.page + '?data=' +
|
||||
value
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.app {
|
||||
--bgcolor: #f3f3f3;
|
||||
|
||||
background-color: var(--bgcolor);
|
||||
min-height: calc(100vh - var(--window-bottom) - var(--window-top));
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
color: #ffffff;
|
||||
padding: 80rpx 30rpx 50rpx 30rpx;
|
||||
|
||||
.success-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 34rpx;
|
||||
margin-top: 40rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hr {
|
||||
margin-top: 40rpx;
|
||||
width: 100%;
|
||||
height: 30rpx;
|
||||
border-radius: 20rpx;
|
||||
opacity: 0.1;
|
||||
background-color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box {
|
||||
width: calc(100% - 100rpx);
|
||||
margin: 0 50rpx;
|
||||
position: relative;
|
||||
margin-top: -64rpx;
|
||||
background-color: #ffffff;
|
||||
|
||||
.info-amount {
|
||||
height: 150rpx;
|
||||
line-height: 150rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 60rpx;
|
||||
border-bottom: 4rpx dashed #f3f3f3;
|
||||
}
|
||||
|
||||
.left-circle {
|
||||
background-color: var(--bgcolor);
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
top: calc(150rpx - 20rpx);
|
||||
left: -20rpx;
|
||||
}
|
||||
|
||||
.right-circle {
|
||||
background-color: var(--bgcolor);
|
||||
position: absolute;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
top: calc(150rpx - 20rpx);
|
||||
right: -20rpx;
|
||||
}
|
||||
|
||||
.info-main {
|
||||
padding: 30rpx;
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
|
||||
.info-cell {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
line-height: 50rpx;
|
||||
|
||||
.left {
|
||||
width: 200rpx;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-query {
|
||||
color: #ffffff;
|
||||
width: calc(100% - 120rpx);
|
||||
margin: 50rpx 60rpx 0 60rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
border-radius: 50rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.button-query:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.footer-hr {
|
||||
height: 100rpx;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user