21 changed files with 948 additions and 20 deletions
@ -0,0 +1,6 @@ |
|||
<template> |
|||
</template> |
|||
<script> |
|||
</script> |
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,83 @@ |
|||
{ |
|||
"id": "common-pay", |
|||
"displayName": "common-pay", |
|||
"version": "1.0.0", |
|||
"description": "common-pay", |
|||
"keywords": [ |
|||
"common-pay" |
|||
], |
|||
"repository": "", |
|||
"engines": { |
|||
"HBuilderX": "^3.1.0" |
|||
}, |
|||
"dcloudext": { |
|||
"type": "component-vue", |
|||
"sale": { |
|||
"regular": { |
|||
"price": "0.00" |
|||
}, |
|||
"sourcecode": { |
|||
"price": "0.00" |
|||
} |
|||
}, |
|||
"contact": { |
|||
"qq": "" |
|||
}, |
|||
"declaration": { |
|||
"ads": "", |
|||
"data": "", |
|||
"permissions": "" |
|||
}, |
|||
"npmurl": "" |
|||
}, |
|||
"uni_modules": { |
|||
"dependencies": [], |
|||
"encrypt": [], |
|||
"platforms": { |
|||
"cloud": { |
|||
"tcb": "u", |
|||
"aliyun": "u", |
|||
"alipay": "u" |
|||
}, |
|||
"client": { |
|||
"Vue": { |
|||
"vue2": "u", |
|||
"vue3": "u" |
|||
}, |
|||
"App": { |
|||
"app-vue": "u", |
|||
"app-nvue": "u", |
|||
"app-uvue": "u" |
|||
}, |
|||
"H5-mobile": { |
|||
"Safari": "u", |
|||
"Android Browser": "u", |
|||
"微信浏览器(Android)": "u", |
|||
"QQ浏览器(Android)": "u" |
|||
}, |
|||
"H5-pc": { |
|||
"Chrome": "u", |
|||
"IE": "u", |
|||
"Edge": "u", |
|||
"Firefox": "u", |
|||
"Safari": "u" |
|||
}, |
|||
"小程序": { |
|||
"微信": "u", |
|||
"阿里": "u", |
|||
"百度": "u", |
|||
"字节跳动": "u", |
|||
"QQ": "u", |
|||
"钉钉": "u", |
|||
"快手": "u", |
|||
"飞书": "u", |
|||
"京东": "u" |
|||
}, |
|||
"快应用": { |
|||
"华为": "u", |
|||
"联盟": "u" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -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> |
|||
@ -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> |
|||
@ -0,0 +1,17 @@ |
|||
{ |
|||
"pages": [{ |
|||
"path": "uni_modules/common-pay/pages/pay/pay", |
|||
"style": { |
|||
"navigationBarTitleText": "支付订单", |
|||
"backgroundColor": "#F8F8F8" |
|||
} |
|||
}, |
|||
{ |
|||
"path": "uni_modules/common-pay/pages/success/success", |
|||
"style": { |
|||
"navigationBarTitleText": "支付完成", |
|||
"backgroundColor": "#F8F8F8" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
# common-pay |
|||
|
|||
## 支付流程： |
|||
|
|||
1. 前端提交，后台生成待支付的订单 |
|||
2. 订单生成后，跳转到前端收银台页面 |
|||
3. 客户选择支付方式后，调后台接口生成orderInfo |
|||
|
|||
### 移植到项目： |
|||
|
|||
1. 复制 `common-pay`到自己的项目里 |
|||
2. 复制 `common-pay`里的`pages_init`到自己项目里的`page.json` |
|||
|
|||
### 配置支付方式： |
|||
|
|||
`pay.vue ` |
|||
|
|||
修改属性：`use:[]` |
|||
|
|||
### 跳转支付： |
|||
|
|||
`pay.js `,调用`pay`方法 |
|||
|
|||
``` |
|||
import { |
|||
pay |
|||
} from '../../uni_modules/common-pay/utils/pay.js' |
|||
|
|||
// 请按照格式去传参 |
|||
let o = { |
|||
price: '10.00', |
|||
goods: '测试商品' |
|||
... |
|||
} |
|||
|
|||
pay(o); |
|||
``` |
|||
|
|||
### 接参： |
|||
|
|||
|
|||
``` |
|||
try { |
|||
// 跳转携带数据 |
|||
this.data = JSON.parse(options.data) |
|||
} catch (e) { |
|||
this.data = JSON.parse(decodeURIComponent(options.data)) |
|||
} |
|||
``` |
|||
@ -0,0 +1,13 @@ |
|||
function pay(o) { |
|||
// 数据源转换成字符
|
|||
let data = JSON.stringify(o) |
|||
// 转码传输
|
|||
let value = encodeURIComponent(data) |
|||
uni.navigateTo({ |
|||
url: '/uni_modules/common-pay/pages/pay/pay?data=' + value |
|||
}) |
|||
} |
|||
|
|||
export { |
|||
pay |
|||
} |
|||
@ -0,0 +1,107 @@ |
|||
/** |
|||
* 支付专用网络请求 |
|||
* url: 绝对路径请求地址 |
|||
* token: 如需请传 |
|||
* data: 参数 |
|||
*/ |
|||
function http(options) { |
|||
|
|||
return new Promise((resolve, reject) => { |
|||
|
|||
uni.showLoading({ |
|||
title: '加载中...', |
|||
mask: true |
|||
}); |
|||
|
|||
var url = options.url |
|||
|
|||
uni.request({ |
|||
// 组装请求地址
|
|||
url: url, |
|||
// 请求方式 POST
|
|||
method: 'POST', |
|||
header: { |
|||
'content-type': "application/x-www-form-urlencoded", |
|||
'token': (options.token == undefined || options.token == '') ? "token is null" : options |
|||
.token |
|||
}, |
|||
// 具体参数
|
|||
data: options.data, |
|||
success: res => { |
|||
|
|||
// 关闭显示框
|
|||
uni.hideLoading(); |
|||
|
|||
console.log('Http网络路径', url) |
|||
console.log('Http网络请求结果', JSON.stringify(res.data)) |
|||
|
|||
if (res.statusCode == 200) { |
|||
|
|||
// 进行success字段检查
|
|||
|
|||
if (!res.data.success) { |
|||
|
|||
uni.showToast({ |
|||
title: res.data.msg, |
|||
// 保证文字长度
|
|||
icon: "none", |
|||
duration: 3000 |
|||
}) |
|||
|
|||
// 直接返回Response
|
|||
reject(res.data) |
|||
|
|||
} else { |
|||
// 直接返回Response
|
|||
resolve(res.data) |
|||
} |
|||
|
|||
} else { |
|||
|
|||
uni.showToast({ |
|||
title: res.statusCode + "：" + res.data.error, |
|||
// 保证文字长度
|
|||
icon: "none", |
|||
duration: 3000 |
|||
}) |
|||
|
|||
// 返回错误数据
|
|||
reject({ |
|||
success: false, |
|||
msg: res.data.error, |
|||
code: '1111' |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
fail: (err) => { |
|||
|
|||
// 关闭显示框
|
|||
uni.hideLoading(); |
|||
|
|||
console.log("Http网络请求fail", err) |
|||
|
|||
uni.showToast({ |
|||
title: err.errMsg, |
|||
icon: 'none' |
|||
}) |
|||
|
|||
// 返回错误数据
|
|||
reject({ |
|||
success: false, |
|||
msg: err.errMsg, |
|||
code: '1111' |
|||
}) |
|||
}, |
|||
complete: () => { |
|||
|
|||
} |
|||
}); |
|||
|
|||
}) |
|||
} |
|||
|
|||
|
|||
export { |
|||
http |
|||
} |
|||
Loading…
Reference in new issue