<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>
