customerapp-H5/pages/CustomerReturnPay/returnPay.vue

<template>
	<view class="content">
		<image src="https://soap.cliu.cc/chumeng/indexBanner.png" class="content_banner"></image>
		<view class="content_box">
			<view class="top">
				<text>￥</text>
				<text>{{ amount }}</text>
			</view>
			<view class="tip">
				【大卫博士健康内裤】差价退还
			</view>
		</view>
		<view class="content_num flexB">
			<text>购买数量</text>
			<text>1</text>
		</view>
		<view class="bottom">
			<view class="bottom_top">
				<text>共计；</text>
				<text class="text2">￥</text>
				<text class="text3">{{ amount }}</text>
			</view>
			<view class="bottom_btn"@click="$noMultipleClicks(toPay)">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
import { CustomerReturnPay } from '@/api/refundDifference.js';
import { location } from '@/api/index.js'
const jweixin = require('jweixin-module');
export default {
	data() {
		return {
			noClick: true,
			amount: '',
			id: '',
			location: ''
		}
	},
	onLoad(e) {
		this.id = e.id
		this.amount = e.amount
	},
	mounted() {
		this.getAddress()
	},
	methods: {
		//通过后端获取wx.config的配置,再通过微信的js-sdk获取经纬度
		getAddress() {
			uni.showLoading({ title: '加载中', mask: true })
			const _this = this;
			let link = window.location.href;
			location({
				url: link
			}).then(res => {
				if (res.code == 200) {
					let data = JSON.parse(res.data);
					console.log('后端返回的wx.config的配置:', JSON.parse(res.data));
					_this.getLocation(data);
				} else {
					uni.hideLoading()
					console.log('获取位置失败');
				}
			}).catch(err => {
				uni.hideLoading()
			})
		},
		getLocation(params) {
			const _this = this;
			// 判断是否支持获取定位
			jweixin.config({
				debug: false, //开启debug模式.正式环境设置为false,测试环境设置为true
				appId: params.appId,
				timestamp: params.timestamp,
				nonceStr: params.nonceStr,
				signature: params.signature,
				jsApiList: ['getLocation'] //根据需要看需要哪些SDK的功能
			});
			// sdk加载完成后执行
			jweixin.ready(() => {
				jweixin.checkJsApi({
					jsApiList: ['getLocation'],
					success: res => {
						uni.hideLoading()
						if (res.checkResult.getLocation == false) {
							alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
							return;
						}
					}
				});
				jweixin.error(res => {
					uni.hideLoading()
					console.log(res.errMsg, 'err');
				});
				// 获取位置
				jweixin.getLocation({
					type: 'gcj02',
					success: res => {
						this.location = `${res.longitude},${res.latitude}`;
						console.log('location', this.location, res)
						uni.hideLoading()
					},
					cancel: res => {
						uni.hideLoading()
						uni.showToast({
							title: '您已禁止获取位置信息',
							icon: 'none'
						});
					},
					fail: err => {
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: '获取位置信息失败，请关闭网页重新打开，否则会导致无法支付',
							showCancel: false,
						})
					}
				});
			});
		},
		toPay() {
			if (!this.location) {
				uni.toast('未获取到位置信息')
				return
			}
			CustomerReturnPay({ refund_id: this.id, amount: this.amount, location: this.location }).then(res => {
				if (res.code === 200) {
					let callback_succ_func = res => {
						uni.showToast({
							title: '支付成功'
						})
					}
					let callback_error_func = res => {
						uni.showModal({
							content: '支付失败！',
							showCancel: false
						})
					}
					let info = res.data.data.pay_info
					this.wxJsPay(info, callback_succ_func, callback_error_func)
				} else {
					uni.showToast({
						title: res.message || '失败',
						icon: 'none'
					})
					return false;
				}
			})
			.catch(err => {})
			.finally(() => {
				setTimeout(() => {}, 3000)
			})
		},
		//WeixinJSBridge判断
		wxJsPay(data, callback_succ_func, callback_error_func) {
			if (typeof WeixinJSBridge == 'undefined') {
				if (document.addEventListener) {
					document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
				} else if (document.attachEvent) {
					document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
					document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
				}
			} else {
				this.jsApiCall(data, callback_succ_func, callback_error_func);
			}
		},
		//调起支付
		jsApiCall(data, callback_succ_func, callback_error_func) {
			//使用原生的，避免初始化appid问题
			WeixinJSBridge.invoke(
				'getBrandWCPayRequest', {
					appId: data.appId,
					timeStamp: data.timeStamp,
					nonceStr: data.nonceStr,
					package: data.package,
					signType: data.signType,
					paySign: data.paySign
				},
				function(res) {
					var msg = res.err_msg ? res.err_msg : res.errMsg;
					switch (msg) {
						// //支付成功时
						case 'get_brand_wcpay_request:ok':
							// if (callback_succ_func) {
							uni.showModal({
								title: '支付成功',
								showCancel: false,
								success: function(res) {
									uni.switchTab({
										url: "/pages/index/index"
									})
								},
								// complete: function() {
								// 	that.SearchStatus()
								// }
							});
							// }
							break;
						default:
							//支付失败时
							WeixinJSBridge.log('支付失败!' + msg + ',请返回重试.');
							if (callback_error_func) {
								callback_error_func({
									msg: msg
								});
							}
							break;
					}
				}
			);
		},
	}
}
</script>

<style lang="scss" scoped>
	.content {
		&_banner {
			width: 100%;
			height: 476rpx;
			margin-bottom: 32rpx;
		}
		&_box {
			padding: 16rpx 0 24rpx 24rpx;
			font-size: 28rpx;
			background: #FFFFFF;
			margin-bottom: 24rpx;
			
			text:nth-child(1) {
				color: #FB231F;
			}
			text:nth-child(2) {
				font-size: 60rpx;
				color: #FB231F;
				font-weight: 500;
			}
			.tip {
				margin-top: 16rpx;
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
		&_num {
			padding: 36rpx 24rpx;
			background: #FFFFFF;
			text:nth-child(1) {
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			text:nth-child(2) {
				font-size: 40rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #FB231F;
			}
		}
		.bottom {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 8rpx 24rpx 8rpx 24rpx;
			box-shadow: 0px -4rpx 24rpx 2rpx rgba(0, 0, 0, 0.1);
			background-color: #fff;
			&_top {
				font-size: 28rpx;
				color: #333;
				.text2 {
					color: #FB231F;
				}
		
				.text3 {
					font-size: 60rpx;
					color: #FB231F;
					font-weight: bold;
				}
			}
		
			&_btn {
				width: 702rpx;
				height: 88rpx;
				background: linear-gradient(91deg, #F30000 0%, #FE4815 100%);
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #FFFFFF;
				margin-top: 12rpx;
			}
		}
	}
</style>