增加支付宝支付

common/apiurl.js

@@ -13,6 +13,14 @@ const apiurl = {
 	getcodeurl:'/wechat/h5/code/',
 	// 绑定手机号
 	bindphoneurl:'/wechat/h5/user/update',
+	// 支付宝调试
+	alipageurl:'/alipay/alipage',
+	// 支付宝退款
+	alirefundurl:'/alipay/refund',
+	// 支付宝付款二维码
+	getPayimgurl:'/alipay/getPayimg',
+	// // 支付宝gotoPayPage
+	// aliPayPageurl:'/alipay/gotoPayPage',
 }
 
 export {

common/http.api.js

@@ -31,6 +31,14 @@ const install = (Vue, vm) => {
 	
 	let getcode = (params = {}) => vm.$u.get(apiurl.getcodeurl+params);
 	
+	let alipage = (params = {}) => vm.$u.get(apiurl.alipageurl,params);
+	
+	let alirefund = (params = {}) => vm.$u.get(apiurl.alirefundurl,params);
+	
+	let aliPayPage = (params = {}) => vm.$u.get(apiurl.aliPayPageurl,params);
+	
+	let getPayimg = (params = {}) => vm.$u.get(apiurl.getPayimgurl,params);
+	
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
 	vm.$u.api = {
 		getSearch, 
@@ -40,7 +48,11 @@ const install = (Vue, vm) => {
 		createOrder,
 		refund,
 		bindphone,
-		getcode
+		getcode,
+		alipage,
+		alirefund,
+		aliPayPage,
+		getPayimg
 	};
 }
 

package-lock.json

@@ -4,10 +4,278 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@chenfengyuan/vue-qrcode": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npm.taobao.org/@chenfengyuan/vue-qrcode/download/@chenfengyuan/vue-qrcode-1.0.2.tgz",
+      "integrity": "sha1-N9cZAuFm4a5YF2vWy5xAkFwbCUk=",
+      "requires": {
+        "qrcode": "^1.4.4"
+      }
+    },
+    "ansi-regex": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npm.taobao.org/ansi-regex/download/ansi-regex-4.1.0.tgz?cache=0&sync_timestamp=1570188570027&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-regex%2Fdownload%2Fansi-regex-4.1.0.tgz",
+      "integrity": "sha1-i5+PCM8ay4Q3Vqg5yox+MWjFGZc="
+    },
+    "ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz?cache=0&sync_timestamp=1617175602652&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fansi-styles%2Fdownload%2Fansi-styles-3.2.1.tgz",
+      "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
+      "requires": {
+        "color-convert": "^1.9.0"
+      }
+    },
+    "base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npm.taobao.org/base64-js/download/base64-js-1.5.1.tgz?cache=0&sync_timestamp=1605123440207&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbase64-js%2Fdownload%2Fbase64-js-1.5.1.tgz",
+      "integrity": "sha1-GxtEAWClv3rUC2UPCVljSBkDkwo="
+    },
+    "buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npm.taobao.org/buffer/download/buffer-5.7.1.tgz?cache=0&sync_timestamp=1606098159535&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbuffer%2Fdownload%2Fbuffer-5.7.1.tgz",
+      "integrity": "sha1-umLnwTEzBTWCGXFghRqPZI6Z7tA=",
+      "requires": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "buffer-alloc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/buffer-alloc/download/buffer-alloc-1.2.0.tgz",
+      "integrity": "sha1-iQ3ZDZI6hz4I4Q5f1RpX5bfM4Ow=",
+      "requires": {
+        "buffer-alloc-unsafe": "^1.1.0",
+        "buffer-fill": "^1.0.0"
+      }
+    },
+    "buffer-alloc-unsafe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npm.taobao.org/buffer-alloc-unsafe/download/buffer-alloc-unsafe-1.1.0.tgz",
+      "integrity": "sha1-vX3CauKXLQ7aJTvgYdupkjScGfA="
+    },
+    "buffer-fill": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npm.taobao.org/buffer-fill/download/buffer-fill-1.0.0.tgz",
+      "integrity": "sha1-+PeLdniYiO858gXNY39o5wISKyw="
+    },
+    "buffer-from": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/buffer-from/download/buffer-from-1.1.1.tgz",
+      "integrity": "sha1-MnE7wCj3XAL9txDXx7zsHyxgcO8="
+    },
+    "camelcase": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npm.taobao.org/camelcase/download/camelcase-5.3.1.tgz?cache=0&sync_timestamp=1603923709404&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcamelcase%2Fdownload%2Fcamelcase-5.3.1.tgz",
+      "integrity": "sha1-48mzFWnhBoEd8kL3FXJaH0xJQyA="
+    },
+    "cliui": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npm.taobao.org/cliui/download/cliui-5.0.0.tgz?cache=0&sync_timestamp=1604880033053&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcliui%2Fdownload%2Fcliui-5.0.0.tgz",
+      "integrity": "sha1-3u/P2y6AB4SqNPRvoI4GhRx7u8U=",
+      "requires": {
+        "string-width": "^3.1.0",
+        "strip-ansi": "^5.2.0",
+        "wrap-ansi": "^5.1.0"
+      }
+    },
+    "color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
+      "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
+      "requires": {
+        "color-name": "1.1.3"
+      }
+    },
+    "color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npm.taobao.org/decamelize/download/decamelize-1.2.0.tgz?cache=0&sync_timestamp=1610348702723&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdecamelize%2Fdownload%2Fdecamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
+    },
+    "dijkstrajs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/dijkstrajs/download/dijkstrajs-1.0.1.tgz",
+      "integrity": "sha1-082BIh4+pAdCz83lVtTpnpjdxxs="
+    },
+    "emoji-regex": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npm.taobao.org/emoji-regex/download/emoji-regex-7.0.3.tgz?cache=0&sync_timestamp=1614682725186&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Femoji-regex%2Fdownload%2Femoji-regex-7.0.3.tgz",
+      "integrity": "sha1-kzoEBShgyF6DwSJHnEdIqOTHIVY="
+    },
+    "find-up": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-3.0.0.tgz",
+      "integrity": "sha1-SRafHXmTQwZG2mHsxa41XCHJe3M=",
+      "requires": {
+        "locate-path": "^3.0.0"
+      }
+    },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npm.taobao.org/get-caller-file/download/get-caller-file-2.0.5.tgz",
+      "integrity": "sha1-T5RBKoLbMvNuOwuXQfipf+sDH34="
+    },
+    "ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npm.taobao.org/ieee754/download/ieee754-1.2.1.tgz?cache=0&sync_timestamp=1603838208740&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fieee754%2Fdownload%2Fieee754-1.2.1.tgz",
+      "integrity": "sha1-jrehCmP/8l0VpXsAFYbRd9Gw01I="
+    },
+    "is-fullwidth-code-point": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/is-fullwidth-code-point/download/is-fullwidth-code-point-2.0.0.tgz",
+      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
+    },
+    "isarray": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npm.taobao.org/isarray/download/isarray-2.0.5.tgz",
+      "integrity": "sha1-ivHkwSISRMxiRZ+vOJQNTmRKVyM="
+    },
+    "locate-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/locate-path/download/locate-path-3.0.0.tgz",
+      "integrity": "sha1-2+w7OrdZdYBxtY/ln8QYca8hQA4=",
+      "requires": {
+        "p-locate": "^3.0.0",
+        "path-exists": "^3.0.0"
+      }
+    },
+    "p-limit": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npm.taobao.org/p-limit/download/p-limit-2.3.0.tgz?cache=0&sync_timestamp=1606290276843&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-limit%2Fdownload%2Fp-limit-2.3.0.tgz",
+      "integrity": "sha1-PdM8ZHohT9//2DWTPrCG2g3CHbE=",
+      "requires": {
+        "p-try": "^2.0.0"
+      }
+    },
+    "p-locate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/p-locate/download/p-locate-3.0.0.tgz?cache=0&sync_timestamp=1597081605529&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fp-locate%2Fdownload%2Fp-locate-3.0.0.tgz",
+      "integrity": "sha1-Mi1poFwCZLJZl9n0DNiokasAZKQ=",
+      "requires": {
+        "p-limit": "^2.0.0"
+      }
+    },
+    "p-try": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npm.taobao.org/p-try/download/p-try-2.2.0.tgz",
+      "integrity": "sha1-yyhoVA4xPWHeWPr741zpAE1VQOY="
+    },
+    "path-exists": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-3.0.0.tgz",
+      "integrity": "sha1-zg6+ql94yxiSXqfYENe1mwEP1RU="
+    },
+    "pngjs": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npm.taobao.org/pngjs/download/pngjs-3.4.0.tgz",
+      "integrity": "sha1-mcp9clll+2VYFOr2XzjxK72/VV8="
+    },
+    "qrcode": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npm.taobao.org/qrcode/download/qrcode-1.4.4.tgz",
+      "integrity": "sha1-8MQ1aKfnUQpV78O4jZYC9xlj6oM=",
+      "requires": {
+        "buffer": "^5.4.3",
+        "buffer-alloc": "^1.2.0",
+        "buffer-from": "^1.1.1",
+        "dijkstrajs": "^1.0.1",
+        "isarray": "^2.0.1",
+        "pngjs": "^3.3.0",
+        "yargs": "^13.2.4"
+      }
+    },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npm.taobao.org/require-directory/download/require-directory-2.1.1.tgz",
+      "integrity": "sha1-jGStX9MNqxyXbiNE/+f3kqam30I="
+    },
+    "require-main-filename": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/require-main-filename/download/require-main-filename-2.0.0.tgz",
+      "integrity": "sha1-0LMp7MfMD2Fkn2IhW+aa9UqomJs="
+    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/set-blocking/download/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
+    },
+    "string-width": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npm.taobao.org/string-width/download/string-width-3.1.0.tgz",
+      "integrity": "sha1-InZ74htirxCBV0MG9prFG2IgOWE=",
+      "requires": {
+        "emoji-regex": "^7.0.1",
+        "is-fullwidth-code-point": "^2.0.0",
+        "strip-ansi": "^5.1.0"
+      }
+    },
+    "strip-ansi": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npm.taobao.org/strip-ansi/download/strip-ansi-5.2.0.tgz",
+      "integrity": "sha1-jJpTb+tq/JYr36WxBKUJHBrZwK4=",
+      "requires": {
+        "ansi-regex": "^4.1.0"
+      }
+    },
+    "vue": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz",
+      "integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
+    },
     "vue-i18n": {
       "version": "8.20.0",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.20.0.tgz",
       "integrity": "sha512-ZiAOoeR4d/JtKpbjipx3I80ey7cYG1ki5gQ7HwzWm4YFio9brA15BEYHjalEoBaEfzF5OBEZP+Y2MvAaWnyXXg=="
+    },
+    "which-module": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npm.taobao.org/which-module/download/which-module-2.0.0.tgz",
+      "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho="
+    },
+    "wrap-ansi": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npm.taobao.org/wrap-ansi/download/wrap-ansi-5.1.0.tgz",
+      "integrity": "sha1-H9H2cjXVttD+54EFYAG/tpTAOwk=",
+      "requires": {
+        "ansi-styles": "^3.2.0",
+        "string-width": "^3.0.0",
+        "strip-ansi": "^5.0.0"
+      }
+    },
+    "y18n": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npm.taobao.org/y18n/download/y18n-4.0.1.tgz?cache=0&sync_timestamp=1609798661541&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fy18n%2Fdownload%2Fy18n-4.0.1.tgz",
+      "integrity": "sha1-jbK4PDHF11CZu4kLI/MJSJHiR9Q="
+    },
+    "yargs": {
+      "version": "13.3.2",
+      "resolved": "https://registry.npm.taobao.org/yargs/download/yargs-13.3.2.tgz",
+      "integrity": "sha1-rX/+/sGqWVZayRX4Lcyzipwxot0=",
+      "requires": {
+        "cliui": "^5.0.0",
+        "find-up": "^3.0.0",
+        "get-caller-file": "^2.0.1",
+        "require-directory": "^2.1.1",
+        "require-main-filename": "^2.0.0",
+        "set-blocking": "^2.0.0",
+        "string-width": "^3.0.0",
+        "which-module": "^2.0.0",
+        "y18n": "^4.0.0",
+        "yargs-parser": "^13.1.2"
+      }
+    },
+    "yargs-parser": {
+      "version": "13.1.2",
+      "resolved": "https://registry.npm.taobao.org/yargs-parser/download/yargs-parser-13.1.2.tgz",
+      "integrity": "sha1-Ew8JcC667vJlDVTObj5XBvek+zg=",
+      "requires": {
+        "camelcase": "^5.0.0",
+        "decamelize": "^1.2.0"
+      }
     }
   }
 }

package.json

@@ -18,6 +18,9 @@
   },
   "homepage": "https://github.com/YanxinNet/uView#readme",
   "dependencies": {
+    "@chenfengyuan/vue-qrcode": "^1.0.2",
+    "qrcode": "^1.4.4",
+    "vue": "^2.6.12",
     "vue-i18n": "^8.20.0"
   }
 }

pages/template/wxCenter/index.vue

@@ -7,6 +7,7 @@
 				</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>
@@ -25,8 +26,12 @@
 		
 		<view class="u-m-t-20">
 			<u-cell-group>
-				<u-cell-item icon="rmb-circle" title="支付" @click="submitOrder()"></u-cell-item>
-				<u-cell-item icon="rmb-circle" title="退款" @click="refund('20210311150306120323584')"></u-cell-item>
+				<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-group>
 		</view>
 		
@@ -52,13 +57,20 @@
 </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,
 			}
 		},
 		onLoad() {
@@ -66,7 +78,18 @@
 				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) {
@@ -135,6 +158,10 @@
 						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();
@@ -175,15 +202,89 @@
 				this.$router.go(0);
 			},
 			//退款
-			refund(orderId){
+			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);
+				})
 			}
 			
 		}