快速DEMO
用户对接与支付DEMO演示
用户对接与支付DEMO代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>云城H5</title>
<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="./vconsole.min.js"></script>
<script src="http://oss-ydpt-a-szzb.oss-cn-shenzhen.aliyuncs.com/static/yc-jssdk.js"></script>
<script>var vConsole = new VConsole();</script>
<style>
body {font-size: 16px;padding: 0;margin: 0;}
.page {width: 100%;height: 100%;background-color: #fff;padding: 1rem;overflow-x: hidden;overflow-y: scroll;}
p {font-size: 1.5rem;line-height: 1.5rem;margin: 1rem 0;}
.res {font-size: 0.75rem;color: #999;}
.btn {border: 1px solid #000;margin: 10px;width: 200px;text-align: center;}
.btn:active {background: #eee;}
.item {width: 100%;}
label {width: 10rem;color:#999;}
.value {width: 200px;}
</style>
</head>
<body>
<div id="app" class="page">
<div class="btn" @click="getAccessTokenQuckily()">用户对接</div>
<div class="btn" @click="payOrder()">云城支付payOrder</div>
<div class="btn" @click="queryPayResult()">查询订单queryPayResult</div>
<p class="res">请求参数</p>
<p id="res" class="res"></p>
<p class="res">请求结果</p>
<p id="res" class="res"></p>
</div>
<script>
function getParams(url) {
var result = {};
url = decodeURIComponent(url);
if (url.indexOf('?') > 0) {
var strParams = url.split('?')[1];
if (strParams.indexOf('#') > 0) {
strParams = url.split('#')[0];
}
var arrParams = strParams.split('&');
for (var i = 0; i < arrParams.length; i++) {
var params = arrParams[i].split('=');
if (params[0] != '') {
result[params[0]] = params[1];
}
}
}
return result;
};
let app = new Vue({
el: '#app',
data: {
code: '',
accessToken: '',
openid: '',
infor: '~',
infor1: '~',
},
created() {
let opt = getParams(window.location.href);
this.infor = window.location.href;
this.code = opt.code;
this.domain = opt.endpoint;
console.log('created ~~~~');
console.log(window.location.href);
},
methods: {
getAccessTokenQuckily() {
let params = {
appkey: '7e950acc09', // 开放平台颁发的appId,需与云城对接
secret: '0687555********2c87e28f'
}
console.log('getServiceTokenInfo->',params);
/*
step1: 获取子服务access_token
*/
yc.getAccessTokenQuckily(params,res=>{
console.log('getServiceTokenInfo->',res);
res = JSON.parse(res);
this.infor1 = res;
let { access_token, openid } = res.data;
this.accessToken = access_token;
this.openid = openid;
//step2 获取云城用户信息,主要是mobilePhone，此步骤需要在业务后台对接，通过手机号mobilePhone，完成用户对接，返回业务token给子服务
this.userLogin();
// this.getUserInfo();
});
},
userLogin() {
//子服务系统用户对接接口
//业务流程：app子服务取到accessToken-->业务后台login接口-->云城开放平台查询用户信息uaa/sns/userinfo取手机号
let url = 'http://api-ioc-h.icloudcity.com/mobile/gateway/auth/ioc';
let opt = {
"ssoToken": this.accessToken,
"openid": this.openid,
"parkCode": "CN_SC_44_003_SZWKYC",
"appKey": "7e950acc09",
"secret": "*****************"
}
this.infor = opt;
app.$http.post(url, opt).then(({body})=>{
//返回业务系统用户信息，及token
this.infor1 = body;
})
},
getUserInfo() {
let params = {
'access_token': this.accessToken,
'openid': this.openid,
'lang': 'zh-cn'
}
this.infor = params;
/*
step2: 获取云城用户信息
*/
///uaa/sns/userinfo
yc.getUserInfo(params, res=>{
this.infor1 = res;
})
},
payOrder() {
console.log('payOrder--->');
try{
let params = {
"merchantNo": "MCH100001", //云城app分配的商户号，需与云城app对接
"amount": "0.01", //订单金额（0.01-20000），最多2位小数
"goodsDesc": "凤巢支付 -- 测试环境", //商品描述，最多20个字符
"expireTimeMinute": "5", //订单过期时间，单位分钟，不低于5分钟，不高于1440分钟
"notifyUrl": "https://www.baidu.com", //支付回调的地址，支付完成后，会回调这个地址(选填)
"tradeOrderNo": "ODER0000001", //业务订单号，1-32位，只能为英文、数字、下划线
"orderSource": "eleme",
"guaranteeType": "PLATFORM_GUARANTEE",
"orderRemark":"惠余支付测试"
}
this.infor = params;
yc.payOrder(params,res=>{
console.log('payOrder->',res);
this.infor1 = res;
});
}catch(e) {
console.log('payOrder->catch->',e);
}
},
queryPayResult() {
yc.queryPayResult({
merchantNo: 'MCH100001',
tradeOrderNo: 'ODER0000001'
},res => {
this.infor1 = res;
console.log(res);
})
},
scanQRCode() {
console.log('scanQRCode---->');
yc.scanQRCode(res=>{
this.infor1 = res;
console.log('scanQRCode->',res);
});
}
}
})
</script>
<script>
function payResult(res){
console.log('payResult->',res);
app.infor1 = res;
let obj = JSON.parse(res);
app.paymentOrderNo = obj.data.paymentOrderNo;
// if(ret.code=='0' && ret.data) this.paymentOrderNo=ret.data.paymentOrderNo;
}
function queryPayCallback(res){
console.log('queryPayCallback->',res);
app.infor1 = res;
}
function serviceTokenInfoResult(res){
app.infor1 = res;
var obj = JSON.parse(res);
if(obj.code=='0'){
let url = 'http://icloudcityuat.vanke.com/gardener-test-server/uaa/sns/userinfo';
let opt = {access_token:obj.data.access_token,openid:obj.data.openid,lang:'zh-cn'};
app.infor = opt;
app.$http.post(url, opt).then((res)=>{
app.infor1 = res;
// alert(res);
},()=>{
alert('请求失败处理');
app.res = '请求失败处理';
});
}
}
function onScanCallback(res) {
console.log('onScanCallback->',res);
app.infor1 = res;
}
</script>
</body>
</html>