390 lines
9.5 KiB
Vue
390 lines
9.5 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="info">
|
||
<image class="shopImage" :src="shopImage"></image>
|
||
<view class="shopName">{{shopName}}</view>
|
||
</view>
|
||
<view class="input">
|
||
<view class="payAmount">￥<input :disabled="disabled" @input="formatAmount" class="amount" v-model="payAmount" type="digit"></view>
|
||
<input class="remark" v-model="remark" type="text" placeholder="添加付款备注(最多10个字)">
|
||
</view>
|
||
<view class="btn" @click="createOrder">立即付款</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import { getOpenId , createOrder , cancelOrderPay } from '@/api/index.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
payAmount: "",
|
||
openId: null,
|
||
shopImage: null,
|
||
shopName: null,
|
||
shopId: null,
|
||
orderId: null,
|
||
remark: "",
|
||
payType: "",
|
||
disabled: false,
|
||
|
||
}
|
||
},
|
||
onLoad() {
|
||
},
|
||
onShow () {
|
||
this.shopId = this.getUrlParam("shopId");
|
||
this.orderId = this.getUrlParam("orderId");
|
||
if ( this.getUrlParam("payAmount") ) {
|
||
this.payAmount = this.getUrlParam("payAmount");
|
||
this.disabled = true;
|
||
}
|
||
|
||
document.body.addEventListener('touchmove', function (e) {
|
||
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
|
||
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
|
||
this.login()
|
||
},
|
||
|
||
mounted() {
|
||
},
|
||
methods: {
|
||
|
||
formatAmount(event) {
|
||
// 必须在nextTick中
|
||
this.$nextTick(() => {
|
||
this.payAmount = event.target.value.match(/^\d*(\.?\d{0,2})/g)[0]
|
||
})
|
||
|
||
// e.detail.value = (e.detail.value.match(/^\d*(.?\d{0,2})/g)[0]) || ""
|
||
// this.$nextTick(() => {
|
||
// this.payAmount = e.detail.value
|
||
// })
|
||
},
|
||
|
||
/**
|
||
* 判断是否为微信环境
|
||
*/
|
||
isWechat (){
|
||
var ua = navigator.userAgent.toLowerCase();
|
||
var isWXWork = ua.match(/wxwork/i) == 'wxwork';
|
||
var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger';
|
||
return isWeixin;
|
||
},
|
||
|
||
/**
|
||
* 判断是否为支付宝环境
|
||
*/
|
||
isAlipay() {
|
||
let userAgent = navigator.userAgent;
|
||
return /AlipayClient/.test(userAgent);
|
||
},
|
||
|
||
/**
|
||
* 获取微信/支付宝code
|
||
*/
|
||
login () {
|
||
|
||
// 获取微信code
|
||
if ( this.isWechat() ) {
|
||
let _code = this.getUrlParam("code");
|
||
uni.setStorageSync("code",_code)
|
||
if (_code == null || _code === "") {
|
||
// 传当前页面的URL（微信授权完之后返回到的页面）和 登录方式
|
||
this.getWXCode(window.location.href, 'snsapi_userinfo');
|
||
} else {
|
||
|
||
this.payType = "WECHAT";
|
||
// this.getOpenId(_code,"wx212769170d2c6b2a"); //微信 WECHAT； 支付宝 ALIPAY；
|
||
this.getOpenId(uni.getStorageSync("code"),"wx212769170d2c6b2a"); //微信 WECHAT； 支付宝 ALIPAY；
|
||
}
|
||
}
|
||
|
||
// 获取支付宝code
|
||
if ( this.isAlipay() ) {
|
||
let _code = this.getUrlParam("auth_code");
|
||
if (_code == null || _code === "") {
|
||
// 传当前页面的URL（支付宝授权完之后返回到的页面）和 登录方式
|
||
this.getAlipayCode(window.location.href, 'auth_user');
|
||
} else {
|
||
this.payType = "ALIPAY";
|
||
this.getOpenId(_code,"2021004174605036"); //微信 WECHAT； 支付宝 ALIPAY；
|
||
}
|
||
}
|
||
|
||
},
|
||
|
||
/**
|
||
* 获取微信/支付宝openid
|
||
* @param {Object} code
|
||
* @param {Object} payType
|
||
*/
|
||
getOpenId (code,appId) {
|
||
let params = {
|
||
code : code,
|
||
payType : this.payType, //微信 WECHAT； 支付宝 ALIPAY；
|
||
appId : appId, //微信 WECHAT； 支付宝 ALIPAY；
|
||
shopId : this.getUrlParam("shopId"), //微信 WECHAT； 支付宝 ALIPAY；
|
||
}
|
||
getOpenId(params).then((res) => {
|
||
if ( res.code == 0 ) {
|
||
this.openId = res.data.openId;
|
||
this.shopImage = res.data.shopImage;
|
||
this.shopName = res.data.shopName;
|
||
// this.createOrder(res.data,payType);
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
|
||
},
|
||
|
||
/**
|
||
* 获取code并登录
|
||
*/
|
||
getWXCode: async (url, snsapi) => {
|
||
let appid = 'wx212769170d2c6b2a' //公众号的唯一标识
|
||
let secrete = '8492a7e8d55bbb1b57f5c8276ea1add0' //
|
||
// let redirect_uri = "https://pcweb.sxczgkj.cn/cashier/pay"
|
||
let redirect_uri = encodeURIComponent(url); //授权后重定向的回调链接地址
|
||
let time = +new Date(); //时间戳
|
||
|
||
window.location.href =
|
||
`https://open.weixin.qq.com/connect/oauth2/authorize?
|
||
appid=${appid}&
|
||
redirect_uri=${redirect_uri}&
|
||
response_type=code&
|
||
scope=${snsapi}&
|
||
state=1&
|
||
time=${time}#wechat_redirect`;
|
||
|
||
},
|
||
|
||
/**
|
||
* 获取支付宝code
|
||
* @param {Object} url
|
||
* @param {Object} snsapi
|
||
*/
|
||
getAlipayCode (url, snsapi) {
|
||
let appid = '2021004174605036' //公众号的唯一标识
|
||
// let redirect_uri = "https://pcweb.sxczgkj.cn/cashier/pay"
|
||
let redirect_uri = encodeURIComponent(url); //授权后重定向的回调链接地址
|
||
window.location.href =
|
||
`https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?
|
||
app_id=${appid}&
|
||
redirect_uri=${redirect_uri}&
|
||
scope=${snsapi}&
|
||
state=1`;
|
||
},
|
||
|
||
/**
|
||
* 创建订单
|
||
*/
|
||
createOrder () {
|
||
if ( this.payAmount == "") {
|
||
uni.showToast({
|
||
title: '请输入支付金额',
|
||
icon: 'none'
|
||
})
|
||
return;
|
||
}
|
||
|
||
let params = {
|
||
userId : this.openId,
|
||
shopId : this.shopId,
|
||
payType : this.payType,
|
||
payAmount : this.payAmount,
|
||
remark: this.remark,
|
||
}
|
||
if ( this.orderId ) {
|
||
params.orderId = this.orderId;
|
||
}
|
||
createOrder(params).then((res) => {
|
||
// alert("创建订单=="+JSON.stringify(res))
|
||
if ( res.code == '100015' ) {
|
||
this.orderId = res.data.orderInfo.id;
|
||
if ( this.isWechat() ) {
|
||
this.wxH5Pay(res)
|
||
}
|
||
if ( this.isAlipay() ) {
|
||
this.alipay(res)
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
})
|
||
},
|
||
|
||
/**
|
||
* 微信支付
|
||
* @param {Object} res
|
||
*/
|
||
wxH5Pay (res) {
|
||
WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
||
debug: true,
|
||
appId: res.data.payInfo.appId,
|
||
timeStamp: res.data.payInfo.timeStamp,
|
||
nonceStr: res.data.payInfo.nonceStr,
|
||
package: res.data.payInfo.package,
|
||
paySign: res.data.payInfo.paySign,
|
||
signType: res.data.payInfo.signType,
|
||
}, function(res) {
|
||
console.log(res)
|
||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||
// 支付成功的处理逻辑
|
||
uni.showToast({
|
||
title: '微信支付成功',
|
||
icon: 'none'
|
||
})
|
||
setTimeout(function (){
|
||
WeixinJSBridge.invoke('closeWindow');
|
||
|
||
},500)
|
||
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
|
||
// 支付过程中取消支付
|
||
cancelOrderPay({ orderId: this.orderId, })
|
||
uni.showToast({
|
||
title: '取消支付',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
cancelOrderPay({ orderId: this.orderId, })
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 支付宝支付
|
||
* @param {Object} res
|
||
*/
|
||
alipay (res) {
|
||
|
||
// 判断是否存在支付宝的JSBridge
|
||
if (window.AlipayJSBridge) {
|
||
// 调用支付宝客户端接口，执行支付操作
|
||
AlipayJSBridge.call('tradePay', {
|
||
tradeNO: res.data.payInfo.tradeNo
|
||
}, function(result) {
|
||
if (result.resultCode === '9000') {
|
||
// 支付成功
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'none'
|
||
})
|
||
setTimeout(() => {
|
||
window.AlipayJSBridge.call('closeWebview')
|
||
}, 500);
|
||
} else {
|
||
cancelOrderPay({ orderId: this.orderId, })
|
||
// 支付失败
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
});
|
||
} else {
|
||
// 如果支付宝的JSBridge尚未准备好，在文档中添加AlipayJSBridgeReady事件监听器
|
||
document.addEventListener('AlipayJSBridgeReady', () => {
|
||
// 准备就绪后再次调用支付函数，传入支付数据paymentData
|
||
this.alipay(paymentData);
|
||
});
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 截取code
|
||
*/
|
||
getUrlParam: (name) => {
|
||
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
||
let r = window.location.search.substr(1).match(reg);
|
||
if (r != null) {
|
||
return unescape(r[2]);
|
||
}
|
||
return null;
|
||
},
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 48rpx 28rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.info{
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.shopImage{
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-right: 32rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.shopName{
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
.input{
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 0 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.payAmount{
|
||
border-bottom: 2rpx solid #E5E5E5;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #333333;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.amount{
|
||
width: 100%;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
padding-left: 10rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.remark{
|
||
width: 100%;
|
||
margin-top: 28rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
.btn{
|
||
width: 100%;
|
||
height: 64rpx;
|
||
line-height: 64rpx;
|
||
text-align: center;
|
||
background-color: #F1CB66;
|
||
border-radius: 10rpx;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
</style>
|