web端四方支付 只有安卓可以跳转

最新推荐文章于 2021-05-30 09:26:08 发布
最新推荐文章于 2021-05-30 09:26:08 发布
阅读量378 收藏
点赞数
分类专栏： web uni-app 文章标签： 四方支付
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn_qiange/article/details/102757182
版权
本文详细介绍了在一个小程序中实现VIP会员开通的过程，包括不同等级会员的选择、支付方式的切换以及具体的支付流程。通过代码示例展示了如何使用微信支付和支付宝进行在线支付，并处理支付回调。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<template>
	<view style="width: 750upx;">
		<view class="back">
			<view class="back-a">
				<view style="margin-left: 30upx;" @tap="Vip2">
					黄金会员
				</view>
				<view style="margin-right: 30upx;" @tap="Vip3">
					钻石会员
				</view>
			</view>
			<view class="ba">
				<image src="../../../static/vip/vip0.png"></image>
				<view class="baba">
					{{cost}}元
				</view>
				<view class="huiyuan">
					银级会员
				</view>
			</view>
			<view class="back-c" @tap="toPlay">
				立刻开通
			</view>
			<view class="pay" v-if="all" @tap="toPlay">
				<view class="pay-kuang">
					<view class="zf-kuang" @tap="zf(902)">
						<image src="../../../static/center/weixin.png"></image>
						<text style="margin-left: 30upx;">微信支付</text>
					</view>
					<view class="zf-kuang" @tap="zf(903)">
						<image src="../../../static/zfb.png"></image>
						<text style="margin-left: 30upx;">支付宝支付</text>
					</view>
				</view>
			</view>
		</view>
		<view>
			<view class="back-d"></view>
			<view class="back-e">
				<view class="hui">
					银级会员福利
				</view>
			</view>
			<view class="back-f">
				<view class="text">
					<image class="ree" src="../../../static/vip/reward@2x.png"></image>
				</view>
				<view class="ti">
					<view class="ti-t">
						获赠29800待激活趣币
					</view>
					<view class="ti-t">
						邀请满10人兑换现金
					</view>
				</view>
			</view>
			<view class="back-f">
				<view class="text">
					<image class="ree" src="../../../static/vip/VIP@2x.png" mode=""></image>
				</view>
				<view class="ti">
					<view class="ti-t">
						银级会员<text style="font-weight: bold;font-size: 38upx;">{{cost}}</text>元
					</view>
					<view class="ti-t">
						日赚6.8元
					</view>
				</view>
			</view>
			<view class="back-f">
				<view class="text">
					<image class="ree" src="../../../static/vip/InvitingFriends@2x.png"></image>
				</view>
				<view class="ti">
					<view class="ti-t">
						邀好友立获240元奖励
					</view>
					<view class="ti-t">
						邀请银级奖励15元/人,金级75/人,钻石150元/人
					</view>
				</view>
			</view>
			<view class="back-f">
				<view class="text">
					<image class="ree" src="../../../static/vip/Reentry@2x.png"></image>
				</view>
				<view class="ti">
					<view class="ti-t">
						徒弟完成任务的奖励返现
					</view>
					<view class="ti-t">
						可得一级徒弟10%,二级徒孙5%奖励
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				name: '',
				val: '',
				token: '',
				all: false, //隐藏
				pay_amount: '', //金额
				pay_applydate: '', //时间
				pay_bankcode: '', //支付方式
				pay_callbackurl: '', //域名
				pay_memberid: '', //支付号
				pay_notifyurl: '', //二维码地址
				pay_orderid: '', //订单号
				pay_md5sign: '', //key签名
				pay_productname: '', //提示
				cost: '', //支付金额
				tjurl: '', //支付连接
				index: '',
				code: ''
			}
		},
		onLoad() {
			this.Level()
		},
		methods: {
			Level() {
				uni.request({
					url: this.baseUrl + 'api/Level/LevelInfo',
					method: 'POST', //请求方式
					data: { //传值的数据
						"token": uni.getStorageSync('token')
					},
					header: {
						'Content-type': 'application/x-www-form-urlencoded',
					},
					success: (ret) => {
						console.log("Level", ret.data.data);
						if (ret.data.code == 0) { //判断状态码
							var that = this
							that.id = ret.data.data[0].id
							that.name = ret.data.data[0].name
							that.cost = ret.data.data[0].cost
							that.pay_amount = that.cost
							console.log(that.cost)
						} else {
							uni.hideLoading();
							uni.showToast({
								title: ret.data.msg,
								icon: 'none'
							});
						}
					},
					error: (e) => {
						uni.hideLoading();
						uni.showToast({
							title: e.response.data.msg,
							icon: 'none'
						});
					}
				})
			},
			Vip2() {
				//黄金会员
				uni.navigateTo({
					url: 'vip2'
				})
			},
			Vip3() {
				//钻石
				uni.navigateTo({
					url: 'vip3'
				})
			},
			topaly() {
				uni.navigateTo({
					url: 'topay/topay'
				})
			},
			toPlay() {
				this.all = !this.all
			},
			//支付方式
			zf(pay_bankcode) {
				// console.log('pay_bankcode', pay_bankcode)
				this.pay_bankcode = pay_bankcode;
				this.tovip()
			},
			tovip() { //开通白银vip
				// console.log("开通白银", this.cost)
				var that = this
				if (that.pay_bankcode === 902) {
					var code = 'wxpay'
				} else {
					code = 'alipay'
				}

				that.token = uni.getStorageSync('token')
				if (that.token) {
					// 获得订单数据
					uni.request({
						url: this.baseUrl + 'api/Order/huanxunPay', //地址--
						method: 'POST', //请求方式
						data: { //传值的数据
							"token": that.token,
							"pay_type": that.code, //支付宝支付：alipay 微信支付：wxpay	
							"category": 1, //0充值，1开通白银会员，2开通黄金会员，3开通钻石会员
							"category_name": '开通白银', //	分类名，前端定，如：充值，开通白银会员
							"amount": that.cost, //金额
							"pay_bankcode": that.pay_bankcode
						},
						header: {
							'Content-type': 'application/x-www-form-urlencoded',
						},
						success: (ret) => {
							console.log("创建订单", ret);
							var that = this
							that.pay_amount = ret.data.data.pay_amount //金额
							that.pay_applydate = ret.data.data.pay_applydate //时间
							that.pay_bankcode = ret.data.data.pay_bankcode //支付方式902微信  903支付宝
							that.pay_callbackurl = ret.data.data.pay_callbackurl //域名
							that.pay_md5sign = ret.data.data.pay_md5sign //key签名
							that.pay_memberid = ret.data.data.pay_memberid //支付号
							that.pay_notifyurl = ret.data.data.pay_notifyurl //二维码地址
							that.pay_orderid = ret.data.data.pay_orderid //订单编号
							that.pay_productname = ret.data.data.pay_productname //提示
							that.tjurl = ret.data.tjurl //支付连接
							//走支付	
							this.comment(that.tjurl)
						},
						error: (e) => {
							uni.hideLoading();
							uni.showToast({
								title: e.response.data.msg,
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '请先去登录',
						icon: 'none'
					})
					uni.navigateTo({
						url: '../login/login'
					})
				}
			},
			comment(tjurl) {
				console.log("提交四方支付地址", tjurl)
				var that = this
				uni.request({
					url: tjurl, //支付连接
					method: 'POST', //请求方式
					data: {
						pay_amount: that.pay_amount, //金额
						pay_applydate: that.pay_applydate, //时间
						pay_bankcode: that.pay_bankcode, //支付方式  902微信  903支付宝
						pay_callbackurl: that.pay_callbackurl, //页面跳转返回地址
						pay_md5sign: that.pay_md5sign, //签名
						pay_memberid: that.pay_memberid, //平台分配商户号
						pay_notifyurl: that.pay_notifyurl, //服务端返回地址
						pay_orderid: that.pay_orderid, //上送订单号唯一, 字符长度20
						pay_productname: that.pay_productname //提示
					},
					header: {
						'Content-type': 'application/x-www-form-urlencoded',
					},
					success: (ret) => {
						console.log("四方支付", ret)
						//获得用户当前的系统
						switch (uni.getSystemInfoSync().platform) {
							case 'android':
								console.log('运行Android上', ret.header.Location)
								// #ifdef APP-PLUS
								plus.runtime.openURL(ret.header.Location, (err) => {
									console.log(err);
								});
								// #endif
								break;
							case 'ios':
								console.log('运行iOS上', ret)
								if (ret.statusCode === 200) {

								}
								break;
							default:
								console.log('运行在开发者工具上')
								plus.runtime.openURL(ret.header.Location, (err) => {
									console.log(err);
								});
								break;
						}
						// console.log(encodeURI(ret))
						// plus.runtime.openURL(encodeURI(ret))
						// encodeURIComponent(ret.header.Location)
						// plus.runtime.openWeb(ret.header.Location,(err)=>{})  无法使用微信支付 
					},
					error: (e) => {
						uni.hideLoading();
						uni.showToast({
							title: e.response.data.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
		font-size: 30upx;
		background-color: #FFFFFF;
		font-family: pingfang-sc-medium;
	}

	.back-a {
		display: flex;
		justify-content: space-between;
		height: 300upx;
		background-color: #333231;
		color: #FDEDA9;
		margin-bottom: 30upx;
	}

	.ba {
		margin-top: 100upx;
		margin-top: -180upx;
		margin-left: 75upx;
	}

	.ba image {
		width: 600upx;
		height: 338upx;
	}

	.baba {
		margin-right: 30upx;
		font-size: 48upx;
		position: absolute;
		top: 380upx;
		right: 70upx;
		font-weight: bold;
	}

	.huiyuan {
		color: #000000;
		position: absolute;
		top: 300upx;
		left: 325upx;
		font-size: 38upx;
		font-weight: bold;
	}

	.zk {
		font-family: PingFang-SC-Bold;
		font-size: 32upx;
		position: absolute;
		top: 360upx;
		left: 100upx;
		font-weight: bold;
	}

	.zkd {
		position: absolute;
		font-family: PingFang-SC-Regular;
		font-size: 22upx;
		top: 420upx;
		left: 90upx;
	}

	.bg-code {
		position: absolute;
		top: 53.5%;
		left: 48%;
		transform: translateX(-50%);
	}


	.back-d {
		height: 10upx;
		background-color: #f5f2f0;
		margin-bottom: 50upx;
	}

	.hui {
		text-align: center;
		font-family: pingfang-sc-medium;
		margin-bottom: 25upx;
	}

	.back-f {
		display: flex;
		margin: 20upx auto;
		width: 690upx;
		border-radius: 10upx;
		background-color: #333231;
	}

	.text {
		width: 80upx;
		height: 100upx;
		margin-top: 40upx;
		margin-left: 40upx;
	}

	.ree {
		width: 58upx;
		height: 60upx;
	}

	.ti {
		color: #FDEDA9;
		line-height: 50upx;
		margin-top: 20upx;
		margin-bottom: 20upx;
	}

	.back-c {
		width: 300upx;
		height: 60upx;
		background-color: #333231;
		border-radius: 10upx;
		color: #beb281;
		margin: 68upx auto;
		text-align: center;
		line-height: 60upx;
	}

	.pay {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		text-align: center;
		background: rgba(0, 0, 0, 0.4);
	}

	.pay-kuang {
		width: 80%;
		height: 9rem;
		background-color: rgb(255, 255, 255);
		margin: 50% auto;
		border-radius: 5px;
	}

	.zf-kuang {
		display: flex;
		height: 50%;
		align-items: center;
		width: 100%;
		justify-content: center;
	}

	.zf-kuang image {
		width: 40upx;
		height: 40upx;
	}

	.zf-kuang:nth-of-type(1) {
		border-bottom: #EEEEEE solid 1upx;
	}
</style>

可怕    IOS不可以呀

然后让客户开户,,之后跑路了

太坑人了

 

android接入支持海外的支付，visa，mastercard
xiaopingping1234567的专栏
09-08 1万+
为了支持海外的支付，我真的是找遍了各种方法，研究过google支付，最后因为手续费太高放弃。最后还是找到了支付宝海外支付。 sdk文档地址：http://www.alipay-seller.mpymnt.com/node/82（对，只有英文文档，没有中文） 该渠道支持的visa、mastercard、jcb等信用卡，既然是信用卡支付，是有一定的失败概率的，没有开通国际汇款的信用卡不能支
支付收银台设计
pmcxg的博客
11-20 3211
收银台应该是支付环节最好设计的一块，因为每天都在用，所以感知会非常明显，收银台的前端服务端其实都不难，今天我们重点介绍收银台的前端设计办法以及收银台在整个电子支付框架中的位置，起到的作用。 01 什么是收银台 什么是收银台呢，从字面意思“收银台=收+银+台”，顾名思义就是收取银子的台子。 1. 收银台发展史 最早的收银台： 在古代你去饭馆吃饭喝酒吃肉，酒足饭饱后到柜台掏出50两的大元宝拍在了“收银台”上，老板结账，不用找了；所以在古代收银台就是那个柜台，柜台的特点就是结账的场所，你把钱放上去，交易
四方支付OEM|个人免签跳转支付|支付宝个人跳转支付|微信个人跳转支付|自动回调跳转
nice_521的博客
11-09 1032
四方支付OEM|个人免签跳转支付|支付宝个人跳转支付|微信个人跳转支付|自动回调跳转 本系统为四方支付系统，可对接支付宝微信通道，本系统亮点，可实现个人微信和个人支付宝收款自动跳转支付。 ...
第四方支付：使用Android AccessibilityService完成个人收款服务
qq_39649991的博客
05-11 749
因为AccessibilityService的使用很简单，本文第一篇只讲实现微信个人收款回调服务的思路以及介绍使用到的技术。我个人认为这部分的内容对比编写一个安卓脚本更有价值。 本文仅供技术交流，切勿用于非法用户 一、 了解AccessibilityService 无障碍服务旨在帮助残疾人使用Android设备和应用程序。它们在后台运行，当系统被触发时接收系统的回调。这样的事件表示用户界面中的一些状态转换，例如，焦点已经改变，按钮被点击等。这样的服务可以可选地请求查询活动窗口的内容的能力。可访问性服务的开
境外 android 支付功能,Paypal向Android开发者提供应用内部支付功能
weixin_28481133的博客
05-30 365
腾讯科技讯(编译/中涛)北京时间5月20日消息，据国外媒体报道，eBay旗下网络支付平台Paypal周三宣布，已面向Android手机平台的外部开发者发布了“移动支付库”(Mobile Payments Library)，以方便Android外部开发者在各自应用程序内部整合Paypal支付功能。对于外部开发者而言，如果他们提供的应用程序最初是免费性质，后期若转为收费，则如何同用户进行交易，就成为这...
android境外支付
文韬武略的专栏
08-12 2275
最近碰到境外支付的需求，找了下资源，难得有人分享出来，感谢以下链接的博主。 境外支付宝：http://blog.youkuaiyun.com/xiaopingping1234567/article/details/48288205 境外微信钱包：
前后端分离架构：Web实现前后端分离，前后端解耦
kuku30的博客
06-21 665
一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。 并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 前后端分离(解耦)的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并使用Json数据进...
Web 实现前后端分离，前后端解耦
前端大全
08-09 732
（给前端大全加星标，提升前端技能）作者：山河远阔blog.youkuaiyun.com/weixin_37539378/article/details/79956760一、前言”前后...
Web实现前后端分离，前后端解耦
weixin_30700099的博客
07-24 178
一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 前后端分离(解耦)的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并...
前后端分离架构的实现
weixin_45569634的博客
05-08 2052
一、前言 “前后端分离”已经成为互联网项目开发的业界标杆，通过Tomcat+Nginx(也可以中间有个Node.js),有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 前后端分离（解耦）的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并使用Json数据进行...
前后端分离&解耦
qq_35643614的博客
05-15 1058
Web实现前后端分离，前后端解耦 一、前言 ”前后端分离“已经成为互联网项目开发的业界标杆，通过Tomcat+Ngnix(也可以中间有个Node.js)，有效地进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。 前后端分离(解耦)的核心思想是：前端Html页面通过Ajax调用后端的RestFul API并使用Json数据进行交互。 注：【在互联网架构中，web服务器：一般指像nginx，apache这
android面试题总结
Android进阶三部曲 - 刘望舒
05-20 5944
<br />2.横竖屏切换时候activity的生命周期<br />1.不设置Activity的android:configChanges时,切屏会重新调用各个生命周期,切横屏时会执行一次,切竖屏时会执行两次. <br /><br /> 2.设置Activity的android:configChanges="orientation"时,切屏还是会重新调用各个生命周期,切横、竖屏时只会执行一次. <br /><br /> 3.设置Activity的android:configChanges="orient
Android 面试题汇总
Super的专栏
06-19 6819
Android 70道面试题汇总不再愁面试   　　本文为开发者奉献了70道经典Android面试题加答案--重要知识点几乎都涉及到了，你还等啥，赶紧收藏吧!!   　　1.下列哪些语句关于内存回收的说明是正确的? (b )       A、 程序员必须创建一个线程来释放内存 　　B、 内存回收程序负责释放无用内存 　　C、 内存回收程序允许程序员直接释放内存 　　D、 内存
在android的webview中跳转到微信支付和支付宝app支付
热门推荐
烧烤的技术博客水文集合
02-27 1万+
@Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // 如下方案可在非微信内部WebView的H5页面中调出微信支付 if (url.startsWith("weixin://wap/pay?")) {
uni-app跳转浏览器
优快云_qiange的博客
11-27 1万+
原先使用plus.runtime.openUrl('跳转的地址') 没有实现跳转 plus.runtime.openURL( url, errorCB, identity ); 参数: url: ( String ) 必选 要打开的URL地址 字符串类型，各平台支持的地址类型存在差异，参考平台URL支持表。 errorCB: ( OpenErrorCallback )...
uni-app获取用户所在地
优快云_qiange的博客
11-11 2836
定位成功,返回城市地址的信息 获得用户城市 我试了很久没有问题 有问题的是我的代码,还有模拟器上的模拟定位 =-= <!-- 页面渲染 --> <view class="fs-32"> {{location.address.city}} </view> // 获取当前用户地理位置 uni.getLocation...
uni-app 取消登录的导航栏+文字居于div的底部
优快云_qiange的博客
11-11 1073
用CSS让文字居于div的底部 设置了盒子的宽高之后...想让登录 显示在左下角 <view style="width: 50%;height: 45vw;position: relative;"> <view style="font-size: 60upx;position: absolute;bottom: 60upx;left: 90upx;"&...
底部导航栏图片变形
优快云_qiange的博客
10-26 1043
app.vue文件中 /*底部导航栏图大小*/ uni-tabbar .uni-tabbar__icon { width: 18px !important; height: 18px !important; } uni-tabbar .uni-tabbar__item:nth-child(4) .uni-tabbar__icon { margin-top: 5up...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值