416 lines
9.9 KiB
Vue
416 lines
9.9 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');
|
||
console.log('获取支付宝code', _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；
|
||
source: this.payType == 'WECHAT' ? 'wechat' : 'alipay',
|
||
shopId: this.getUrlParam('shopId') //微信 WECHAT； 支付宝 ALIPAY；
|
||
};
|
||
getOpenId(params).then((res) => {
|
||
console.log('获取微信/支付宝openid', res);
|
||
if (res.code == 200) {
|
||
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 = {
|
||
openId: this.openId,
|
||
shopId: this.shopId,
|
||
payType: this.payType,
|
||
amount: this.payAmount,
|
||
checkOrderPay: {
|
||
orderAmount: this.payAmount,
|
||
orderId: this.getUrlParam('orderId'),
|
||
remark: this.remark
|
||
}
|
||
};
|
||
// let params = {
|
||
// openId: '1212312312',
|
||
// shopId: this.shopId,
|
||
// payType: 'alipay',
|
||
// amount: this.payAmount,
|
||
// checkOrderPay: {
|
||
// orderAmount: this.payAmount,
|
||
// orderId: this.getUrlParam('orderId'),
|
||
// remark: this.remark
|
||
// }
|
||
// };
|
||
console.log('createOrder.params', params);
|
||
// if (this.orderId) {
|
||
// params.orderId = this.orderId;
|
||
// }
|
||
// if (this.isWechat()) {
|
||
// this.wxH5Pay(params);
|
||
// }
|
||
// if (this.isAlipay()) {
|
||
// this.alipay(params);
|
||
// }
|
||
createOrder(params)
|
||
.then((res) => {
|
||
console.log('createOrder.res', res);
|
||
// alert("创建订单=="+JSON.stringify(res))
|
||
if (res.code == 200) {
|
||
// 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'
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
console.log('createOrder.err', err);
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 微信支付
|
||
* @param {Object} res
|
||
*/
|
||
wxH5Pay(res) {
|
||
WeixinJSBridge.invoke(
|
||
'getBrandWCPayRequest',
|
||
{
|
||
debug: true,
|
||
appId: res.data.appId,
|
||
timeStamp: res.data.timeStamp,
|
||
nonceStr: res.data.nonceStr,
|
||
package: res.data.package,
|
||
paySign: res.data.paySign,
|
||
signType: res.data.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.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>
|