325 lines
13 KiB
HTML
325 lines
13 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
|
||
<title>加载中...</title>
|
||
<link rel="stylesheet" href="/static/cdn/element-ui/2.15.7/theme-chalk/index.min.css"/>
|
||
<script src="/static/cdn/vue/2.6.11/vue.min.js"></script>
|
||
<script src="/static/cdn/element-ui/2.15.7/index.js"></script>
|
||
<script src="/static/js/jquery.min.js"></script>
|
||
<script src="/static/js/functions.js"></script>
|
||
<link rel="stylesheet" href="/static/css/wechat-group.css?v=asdfgh"/>
|
||
</head>
|
||
<body>
|
||
<div id="app" class="payBox">
|
||
<template>
|
||
|
||
<div class="groupBox" v-show="product_category=='wechat_group'">
|
||
<div class="thumb">
|
||
<img src="/static/images/group_thumb.jpg"/>
|
||
</div>
|
||
<div class="groupName"><{product_name}></div>
|
||
<div class="subName">你和群里其他人都不是朋友关系，请注意隐私安全。</div>
|
||
<ul class="groupDesc">
|
||
<li>该群聊为付费群，请支付金额后加入群聊。</li>
|
||
<li>你需要实名认证后才能加入群聊，可前往「我>服务>钱包>身份信息」进行认证。</li>
|
||
<li>为维护微信平台绿色网络环境，请勿在群内传播违法违规内容。</li>
|
||
</ul>
|
||
<div class="joinBtnBox">
|
||
<div class="joinBtn" @click="createNan66Order()" v-if="payment=='nan66'">支付<{price/100}>元加入群聊</div>
|
||
<div class="joinBtn" @click="redirect()" v-else-if="openId==''">支付<{price/100}>元加入群聊</div>
|
||
<div class="joinBtn" @click="createOrder()" v-else-if="openId!=''">支付<{price/100}>元加入群聊</div>
|
||
<a class="joinBtn" href="javascript:KEFU.showPanel()">咨询在线客服</a>
|
||
<div style="text-align: center;margin-top: 10px;" v-if="nan66qrcode">
|
||
<p>微信扫描或长按识别下面二维码</p>
|
||
<img :src="nan66qrcode" width="90%"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="knowledgeBox" v-show="product_category=='knowledge'">
|
||
<h1 class="mainTitle"><{product_name}></h1>
|
||
<el-form label-width="80px" v-if="openId!=''">
|
||
<el-form-item label="联系邮箱">
|
||
<el-input v-model="email"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系手机">
|
||
<el-input v-model="tel"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="联系人">
|
||
<el-input v-model="realname"></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<div style="text-align: center">
|
||
<div class="joinBtn" @click="createNan66Order()" v-if="payment=='nan66'">支付<{price/100}>元获取资源</div>
|
||
<div class="joinBtn" @click="redirect()" v-else-if="openId==''">微信授权</div>
|
||
<div class="joinBtn" @click="createOrder()" v-else-if="openId!=''">支付<{price/100}>元获取资源</div>
|
||
<div class="joinBtn" @click="getProductOrderList(1)" v-if="openId!=''" style="display: none">订单列表</div>
|
||
<a class="joinBtn" href="javascript:KEFU.showPanel()">咨询在线客服</a>
|
||
<div style="text-align: center;margin-top: 10px;" v-if="nan66qrcode">
|
||
<p>请用微信扫描下面付款二维码</p>
|
||
<img :src="nan66qrcode" width="90%"/>
|
||
</div>
|
||
</div>
|
||
|
||
<el-table
|
||
v-if="productOrderList.list.length!=0"
|
||
:data="productOrderList.list"
|
||
border
|
||
style="width: 100%;margin-top: 10px">
|
||
<el-table-column
|
||
prop="order_sn"
|
||
label="订单编号">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="money"
|
||
label="金额">
|
||
<template slot-scope="scope">
|
||
<{scope.row.total_amount/100}>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="order_desc"
|
||
label="描述">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="kefu_name"
|
||
label="商家账号">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="shipping_address"
|
||
label="发货信息">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="type"
|
||
label="支付状态">
|
||
<template slot-scope="scope">
|
||
<el-tag type='info' v-show="scope.row.payment_status=='unpaid'">未支付</el-tag>
|
||
<el-tag type='success' v-show="scope.row.payment_status=='paid'">已支付</el-tag>
|
||
<el-tag type='error' v-show="scope.row.payment_status=='refunded'">已退款</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="created_at"
|
||
label="下单时间">
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
v-if="productOrderList.list.length!=0"
|
||
background
|
||
@current-change="getProductOrderList"
|
||
:current-page="productOrderList.page"
|
||
layout="prev,pager, next"
|
||
:page-size="productOrderList.pagesize"
|
||
:total="productOrderList.count">
|
||
</el-pagination>
|
||
</div>
|
||
|
||
|
||
</template>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
var KefuName='{{.kefuName}}';
|
||
var EntId='{{.EntId}}';
|
||
var AppId='{{.AppId}}';
|
||
var Host=getBaseUrl();
|
||
var Product='{{.Product}}';
|
||
var OpenID='{{.OpenID}}';
|
||
var NickName='{{.NickName}}';
|
||
var Avatar='{{.Avatar}}';
|
||
var Payment='{{.Payment}}';
|
||
//var OpenID='ox8mo6F3XddfkoJvkykxIp64gg4M';
|
||
|
||
|
||
function onBridgeReady() {
|
||
WeixinJSBridge.call('hideOptionMenu');
|
||
}
|
||
if (typeof WeixinJSBridge == "undefined") {
|
||
if (document.addEventListener) {
|
||
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
|
||
} else if (document.attachEvent) {
|
||
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
|
||
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
|
||
}
|
||
}
|
||
</script>
|
||
<script>
|
||
new Vue({
|
||
el: '#app',
|
||
delimiters:["<{","}>"],
|
||
data: {
|
||
openId:OpenID,
|
||
email:"",
|
||
tel:"",
|
||
realname:"",
|
||
nickname:NickName,
|
||
avatar:Avatar,
|
||
product:Product,
|
||
product_name:"",
|
||
product_category:"",
|
||
price:"",
|
||
resource_link:"",
|
||
payment:Payment,
|
||
productOrderList:{
|
||
page:1,
|
||
count:0,
|
||
pagesize:0,
|
||
list:[],
|
||
},
|
||
nan66qrcode:"",
|
||
orderTimer:null,
|
||
},
|
||
methods: {
|
||
getProduct(){
|
||
let _this=this;
|
||
sendAjax("/2/virtualProduct/"+EntId+"/"+KefuName,"GET",{ent_id:EntId,id:Product},function (res) {
|
||
let info=res.result;
|
||
if(!info){
|
||
alert(res.msg);
|
||
return;
|
||
}
|
||
if(info.id==0){
|
||
alert("商品不存在");
|
||
return;
|
||
}
|
||
_this.product_name=info.product_name;
|
||
_this.price=info.price;
|
||
_this.product_category=info.product_category;
|
||
document.title=_this.product_name;
|
||
});
|
||
},
|
||
createOrder(){
|
||
if(!this.price){
|
||
alert("商品不存在或价格错误");
|
||
return;
|
||
}
|
||
sendAjax("/2/jsApiPay","POST",{
|
||
openId:this.openId,
|
||
amount:this.price,
|
||
email:this.email,
|
||
tel:this.tel,
|
||
contact:this.realname,
|
||
nickname:this.nickname,
|
||
avatar:this.avatar,
|
||
product:this.product,
|
||
entId:EntId,
|
||
kefuName:KefuName,
|
||
},function(resp){
|
||
if(resp.code!=20000){
|
||
alert(resp.msg);
|
||
return;
|
||
}
|
||
let respJson=JSON.parse(resp.result);
|
||
window.WeixinJSBridge.invoke('getBrandWCPayRequest', {
|
||
"appId": respJson.appId, //公众号ID，由商户传入
|
||
"timeStamp": respJson.timeStamp, //时间戳，自1970年以来的秒数
|
||
"nonceStr": respJson.nonceStr, //随机串
|
||
"package": respJson.package,
|
||
"signType": respJson.signType, //微信签名方式：
|
||
"paySign": respJson.paySign //微信签名
|
||
},
|
||
function(res) {
|
||
// alert(JSON.stringify(res));
|
||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||
// 使用以上方式判断前端返回,微信团队郑重提示：
|
||
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
|
||
alert("支付成功！");
|
||
window.location.href=resp.resource_link;
|
||
}
|
||
});
|
||
})
|
||
},
|
||
//南星订单
|
||
createNan66Order() {
|
||
if (!this.price) {
|
||
alert("商品不存在或价格错误");
|
||
return;
|
||
}
|
||
let _this=this;
|
||
sendAjax("/2/yiApiPay", "POST", {
|
||
openId: this.openId,
|
||
amount: this.price,
|
||
email: this.email,
|
||
tel: this.tel,
|
||
contact: this.realname,
|
||
nickname: this.nickname,
|
||
avatar: this.avatar,
|
||
product: this.product,
|
||
entId: EntId,
|
||
kefuName: KefuName,
|
||
}, function (resp) {
|
||
resp=JSON.parse(resp);
|
||
if (resp.msg != "success") {
|
||
alert("支付下单失败！"+resp.msg);
|
||
return;
|
||
}
|
||
_this.nan66qrcode="/api/v2/qrcode?str="+resp.qrcode;
|
||
// if(!isMobile()){
|
||
// _this.nan66qrcode="/api/v2/qrcode?str="+resp.qrcode;
|
||
// }else{
|
||
// window.open(resp.payurl);
|
||
// }
|
||
_this.checkOrderStatus(resp.trade_no);
|
||
});
|
||
},
|
||
redirect(){
|
||
setTimeout(function () {
|
||
var url="https://open.weixin.qq.com/connect/oauth2/authorize?appid="+AppId+"&redirect_uri="+Host+"/pay/"+EntId+"/"+KefuName+"%3Fproduct="+Product+"&response_type=code&scope=snsapi_userinfo#wechat_redirect"
|
||
document.location.href=url;
|
||
},1000);
|
||
},
|
||
//订单列表
|
||
getProductOrderList(page){
|
||
var _this=this;
|
||
var params={pagesize:20,page:page,user_id:OpenID,ent_id:EntId};
|
||
sendAjax("/2/productOrders","GET",params,function(result){
|
||
_this.productOrderList=result.result;
|
||
});
|
||
},
|
||
//定时查询扫码状态
|
||
checkOrderStatus(orderId) {
|
||
let _this=this;
|
||
this.stopOrderStatus();
|
||
this.orderTimer = setInterval(function() {
|
||
sendAjax("/2/orderStatus","POST", {order_id:orderId}, function (data) {
|
||
if(data.result){
|
||
window.location.href=data.result;
|
||
}
|
||
});
|
||
}, 3000);
|
||
},
|
||
//停止查询扫码状态
|
||
stopOrderStatus(){
|
||
clearInterval(this.orderTimer); // 停止定时器
|
||
},
|
||
},
|
||
mounted:function(){
|
||
//判断支付
|
||
if(Payment=="nan66"){
|
||
|
||
}else{
|
||
if(!this.openId){
|
||
this.redirect();
|
||
}
|
||
}
|
||
this.getProduct();
|
||
},
|
||
created: function () {
|
||
}
|
||
})
|
||
</script>
|
||
<script type='text/javascript' src="/static/js/kefu-front.js"></script>
|
||
<script>
|
||
KEFU.init({
|
||
KEFU_URL:getBaseUrl(),
|
||
KEFU_KEFU_ID: KefuName,
|
||
KEFU_ENT: EntId,
|
||
KEFU_SHOW_TYPES:0,
|
||
KEFU_AUTO_OPEN:false,
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |