同步代码到仓库
This commit is contained in:
GaoHao
389
pages/index/index.vue
Normal file
389
pages/index/index.vue
Normal file
@@ -0,0 +1,389 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user