mobile-frame-h5-example/pages/template/wxCenter/index.vue

<template>
	<view>
		<u-navbar :is-back="false" title="　" :border-bottom="false">
			<view class="u-flex u-row-right" style="width: 100%;">
				<view class="camera u-flex u-row-center">
					<u-icon name="camera-fill" color="#000000" size="48"></u-icon>
				</view>
			</view>
		</u-navbar>
		<vue-qrcode v-if="qrcontent" :value='qrcontent' :options="{ width: 200 }"></vue-qrcode>
		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-m-r-10" @click="login($store.state.vuex_hasLogin)">
				<u-avatar :src="userInfo.imgUrl||pic" size="140"></u-avatar>
			</view>
			<view class="u-flex-1" @click="login($store.state.vuex_hasLogin)">
				<view class="u-font-18 u-p-b-20">{{ userInfo.nickname || '请登录' }}</view>
				<view class="u-font-14 u-tips-color">手机号:{{ userInfo.tel || '暂无' }}</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="scan" color="#969799" size="28"></u-icon>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="rmb-circle" title="微信支付" v-if="userAgent!='aliAgent'" @click="submitOrder()"></u-cell-item>				
				<u-cell-item icon="rmb-circle" title="微信退款" v-if="userAgent!='aliAgent'" @click="refund()"></u-cell-item>
				<u-cell-item icon="rmb-circle" title="支付宝支付" v-if="userAgent!='wxAgent'" @click="handleAliPay()"></u-cell-item>
				<u-cell-item icon="rmb-circle" title="支付宝支付退款" v-if="userAgent!='wxAgent'" @click="handleAliRefund()"></u-cell-item>
				<!-- <u-cell-item icon="rmb-circle" title="支付宝gotoPayPage" v-if="userAgent!='wxAgent'" @click="handleAliPayPage()"></u-cell-item> -->
				<u-cell-item icon="rmb-circle" title="支付宝生成收款码" v-if="userAgent!='wxAgent'" @click="handleAligetPayimg()"></u-cell-item>
				<u-cell-item icon="rmb-circle" title="支付宝条码支付" v-if="userAgent!='wxAgent'" @click="handleShowScanner()"></u-cell-item>
				<u-cell-item icon="rmb-circle" title="贵州银行支付" @click="guizhouPay()"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="收藏"></u-cell-item>
				<u-cell-item icon="photo" title="相册"></u-cell-item>
				<u-cell-item icon="coupon" title="卡券"></u-cell-item>
				<u-cell-item icon="heart" title="关注"></u-cell-item>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item icon="setting" title="设置"></u-cell-item> -->
				<u-cell-item icon="setting" :title="vuex_user.tel?'更换手机号':'绑定手机号'" @click="openPage('/pages/template/bindPhoneNumber/bindPhoneNumber')"></u-cell-item>
				<u-cell-item icon="lock-opened-fill" title="退出" v-if="vuex_hasLogin" @click="logout"></u-cell-item>
			</u-cell-group>
		</view>
		
		<!-- 获取扫描信息 -->
		<view class="scanner" v-if="showScanner" @click.self="handleCloseScanner"><!-- @click="handleCloseScanner" -->
			<!-- <u-input v-model="scannerText" type="text" :focus="true" :border="true" @change="scannerChange" /> -->
			<u-field v-model="scannerText" :focus="true" label-width="0" label="" placeholder="请使用扫描枪扫码" confirm="scannerChange">
			</u-field>
			<u-button type="primary" @click="handleBarcode">确定</u-button>
		</view>
		
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import VueQrcode from '@chenfengyuan/vue-qrcode'
	export default {
		components:{
			VueQrcode
		},
		data() {
			return {
				pic:'https://uviewui.com/common/logo.png',
				show:true,
				userInfo:[],
				requested:true,
				userAgent:null,
				//二维码内容
				qrcontent:null,
				// 扫描枪内容
				scannerText:null,
				showScanner:false,
			}
		},
		onLoad() {
			if(this.$store.state.vuex_hasLogin){
				this.userInfo = this.$store.state.vuex_user;
			}else{
				this.userInfo = [];
			};
			//判断客户端类别
			if (/MicroMessenger/.test(window.navigator.userAgent)) {
				this.userAgent = "wxAgent";
				// console.log('handleAliPay 微信客户端');
			} else if (/AlipayClient/.test(window.navigator.userAgent)) {
				this.userAgent = "aliAgent";
				// console.log('handleAliPay 支付宝客户端');
			} else {
				this.userAgent = "otherAgent";
				// console.log('handleAliPay 其他浏览器');
			};
		},
		methods: {
			openPage(path) {
				console.log('path',path);
				this.$u.route({ 
					url: path
				})
			},
			showToast() {
				this.$refs.uToast.show({
					title: this.message || "请设置提示语",
					type: this.messageType||"success",
					icon:false,
					// url: '/pages/user/index'
				})
			},
			//登录判断
			login(status){
				if(!status){
					console.log('config',this.config);
					window.location.replace(this.config.loginUrl)
				}
			},
			//提交校验
			submitOrder:function(){
				if(!this.vuex_hasLogin){
					this.message = "请先登录"
					this.showToast();
					return;
				}
				if(this.requested){
					this.requested = false;
					uni.showLoading({
						title: '订单生成中。'
					});
					// if(this.cartList.length == 0){
					// 	this.$api.msg("请先选择产品!")
					// 	return;
					// }else{ 
					// 	let userInfo = uni.getStorageSync("userInfo");
					// 	console.log( uni.getStorageSync("linkType") );
						let params = {
							// customerId:userInfo.guid,
							// list:this.cartList,
							// linkType: uni.getStorageSync("linkType") || '',
							// activityId:uni.getStorageSync("togetherId") || ''
						}
						this.syncData(params);
					// }
				}else{
					// this.showToast();
					setTimeout(()=>{
						uni.showLoading({
							title: '订单生成中。'
						});
					},2000);
					return
				};
			},
			//订单提交，拿到订单id
			syncData(data){
				this.$u.api.createOrder(data)
					.then(res=>{
						this.requested = true;
						console.log('res',res);
						if(res.retHead.errCode == 0){
							// this.pullWeichatPay(res.retBody)
							this.pullWeichatPay(res.retBody.orderId)
							uni.setStorage({
								key:'wxTradeNo',
								data:res.retBody.orderId
							});
						}else{
							this.message = res.retHead.errMsg;
							this.showToast();
						}
						uni.hideLoading()
				}).catch(err=>{console.log('createOrder err',err)})
			},
			//拉起微信支付
			async pullWeichatPay(id){
				let params = {
					orderId:id,
					openid:this.$store.state.vuex_user.openId,
					tradeType:"test"
				}
				this.$pay.wxPay(params).then(res =>{
					if(res.code == 0){
						uni.reLaunch({
							url: '/pages/buySuccess/buySuccess?orderId=' + params.orderId
						})
					}else if(res.code == 1){
						uni.redirectTo({
							url: '/pages/userCenter/myOrder/myOrder'
						})
					}else if(res.code == 2){
						this.message = "支付失败，请检查!"
						this.showToast();
						setTimeout(()=>{
							uni.redirectTo({
								url: '/pages/userCenter/myOrder/myOrder'
							});
						},1000)
					}
				})
			},
			//退出
			logout(){
				this.$u.vuex('vuex_hasLogin', false);
				this.$router.go(0);
			},
			//退款
			refund(){
				let orderId = null;
				try {
				    orderId = uni.getStorageSync('wxTradeNo');
				    if (orderId) {
				        console.log(orderId);
				    }
				} catch (e) {
					console.log('handleAliRefund e',e)
				    // error
				};
				this.$u.api.refund({orderId:orderId,refundDesc:'测试'})
				.then(res =>{
					this.message = res.retHead.errMsg;
					this.showToast();
					console.log('refund res',res)
				}).catch(err=>{
					this.message = err.retHead.errMsg;
					this.showToast();
					console.log('refund err',err)
				})
			},
			//支付宝支付
			handleAliPay(){				
				let tradeNo = new Date().getTime();
				uni.setStorage({
					key:'aliTradeNo',
					data:tradeNo
				});
				this.$u.api.alipage({outTradeNo:tradeNo})
				.then(res=>{
					let divForm = document.getElementsByTagName('divform')
					if (divForm.length) {
					     document.body.removeChild(divForm[0])
					}
				   const div = document.createElement('divform')
				   div.innerHTML = res.retBody // res.data就是sb支付宝返回给你的form
				   document.body.appendChild(div);
				   // document.forms[0].setAttribute('target', '_blank') // 加了_blank可能出问题所以我注释了
				   document.punchout_form.submit();
				   // document.getElementById('alipay_submit').submit();
				console.log('alipage',res);
				}).catch(err=>{
					console.log('alipage err',err);
				})
			},
			//支付宝退款
			handleAliRefund(){
				let aliTradeNo = null;
				try {
				    aliTradeNo = uni.getStorageSync('aliTradeNo');
				    if (aliTradeNo) {
				        console.log(aliTradeNo);
				    }
				} catch (e) {
					console.log('handleAliRefund e',e)
				    // error
				};
				this.$u.api.alirefund({outTradeNo:aliTradeNo})
				.then(res=>{
					alert(res.retHead.errMsg);
					console.log('handleAliRefund res',res);
				}).catch(err=>{
					console.log('handleAliRefund err',err);
				})
			},
			handleAliPayPage(){
				this.$u.api.aliPayPage()
				.then(res=>{
					console.log('handleAliPayPage res',res);
				}).catch(err=>{
					console.log('handleAliPayPage err',err);
				})
			},
			handleAligetPayimg(){
				let tradeNo = new Date().getTime();
				this.$u.api.getPayimg({outTradeNo:tradeNo})
				.then(res=>{
					this.qrcontent = res.retBody;
					console.log('handleAliPayPage res',res);
				}).catch(err=>{
					console.log('handleAliPayPage err',err);
				})
			},
			// handleShowScanner
			handleShowScanner(){
				this.scannerText = null,
				this.showScanner = true;
			},
			handleCloseScanner(){
				this.scannerText = null,
				this.showScanner = false;
			},
			handleBarcode(){
				this.$u.api.barcode({authCode:this.scannerText})
				.then(res=>{
					console.log('handleBarcode res',res);
					this.scannerText = null;
					this.showScanner = false;
					console.log('this.scannerText',this.scannerText);
					alert(res.retHead.errMsg);
				}).catch(err=>{
					this.scannerText = null;
					console.log('this.scannerText',this.scannerText);
					console.log('handleBarcode err',err);
				})
			},
			// 贵州银行支付
			guizhouPay(){
				let tradeNo = new Date().getTime();
				uni.setStorage({
					key:'gzbankTradeNo',
					data:tradeNo
				});
				this.$u.api.gzbank({orderId:tradeNo,openid:'111'})
				.then(res=>{
					console.log('gzbank',res);
				// 	let divForm = document.getElementsByTagName('divform')
				// 	if (divForm.length) {
				// 	     document.body.removeChild(divForm[0])
				// 	}
				//    const div = document.createElement('divform')
				//    div.innerHTML = res.retBody // res.data就是sb支付宝返回给你的form
				//    document.body.appendChild(div);
				//    // document.forms[0].setAttribute('target', '_blank') // 加了_blank可能出问题所以我注释了
				//    document.punchout_form.submit();
				//    // document.getElementById('alipay_submit').submit();
				// console.log('alipage',res);
				}).catch(err=>{
					console.log('gzbank err',err);
				});
				
			}
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

.camera{
	width: 54px;
	height: 44px;
	
	&:active{
		background-color: #ededed;
	}
}
.user-box{
	background-color: #fff;
}
// 获取扫描枪内容
.scanner{position: fixed;left: 0;top: 0;bottom: 0;right: 0;padding: 0 20px;background: rgba(0,0,0,0.5);z-index: 999;display: flex;align-items: center;justify-content: center;}
.scanner .u-field{background-color: #fff;}
</style>