196 lines
8.1 KiB
JavaScript
196 lines
8.1 KiB
JavaScript
|
|
import { getValFromBrowserAddress, checkIsLoginFn, getPublictUserInfo ,layerPopup} from '../public/commonFun.js';
|
|
import { apiPayChannele,apiPayOrderCreate } from '../public/api/index.js';
|
|
import { fetchApi,onError,strSite} from '../public/api/fetch.js';
|
|
import { getLoginStatus }from '../public/localstorage.js';
|
|
|
|
$(document).ready(function() {
|
|
// 登录状态
|
|
if (getLoginStatus()) {
|
|
//getUserInfo()
|
|
}else{
|
|
location.href="/login.html"
|
|
}
|
|
let intVpId = getValFromBrowserAddress('id')
|
|
let intActiveCgId = null
|
|
//支付金额
|
|
$('.sc-payment-amount').text('￥'+getValFromBrowserAddress('val'))
|
|
getChannelList()
|
|
let paymentData = [
|
|
// {
|
|
// method: { id: 'alipay', name: '支付宝88', img: '/assets/huiyuan/images/zhifubao.png' },
|
|
// channels: [
|
|
// {id: '1', name: '支付宝1', img: '/assets/huiyuan/images/zhifubao.png'},
|
|
// {id: '2', name: '支付宝2', img: '/assets/huiyuan/images/zhifubao.png'},
|
|
// {id: '3', name: '支付宝3', img: 'v/images/zhifubao.png'},
|
|
// ]
|
|
// },
|
|
// {
|
|
// method: { id: 'wechat', name: '微信88', img: '/assets/huiyuan/images/wechat.png' },
|
|
// channels: [
|
|
// {id: '11', name: '微信1', img: '/assets/huiyuan/images/zhifubao.png'},
|
|
// {id: '12', name: '微信2', img: '/assets/huiyuan/images/zhifubao.png'},
|
|
// {id: '13', name: '微信3', img: '/assets/huiyuan/images/zhifubao.png'},
|
|
// ]
|
|
// },
|
|
// {
|
|
// method: { id: 'test', name: '测试', img: '/assets/huiyuan/images/wechat.png' },
|
|
// channels: [
|
|
// {id: '21', name: '测试1', img: '/assets/huiyuan/images/zhifubao.png'},
|
|
// {id: '22', name: '测试2', img: '/assets/huiyuan/images/zhifubao.png'},
|
|
// {id: '23', name: '测试3', img: '/assets/huiyuan/images/zhifubao.png'},
|
|
// ]
|
|
// }
|
|
];
|
|
|
|
const paymentMethodsContainer = document.getElementById('payment-methods-container');
|
|
const paymentChannelsContainer = document.getElementById('payment-channels-container');
|
|
|
|
function renderPaymentMethods() {
|
|
let html = `<div class="fl"><div>支付方式</div></div><div class="mt10"><div class="fl gap5 align_center fl_wrap">`;
|
|
paymentData.forEach((data, index) => {
|
|
const method = data.method;
|
|
html += `
|
|
<div id="${method.id}" class="e21f3fa97e point relative ${index === 0 ? 'selected _71a3d26126' : ''}" onclick="selectPaymentMethod(${index})">
|
|
<img sizes="100vh" class="point fill undefined" height="33" width="33" alt="${method.name}" src="${method.icon}">
|
|
<div class="mt3 ${index === 0 ? 'c63892b6d2' : ''}">${method.name}</div>
|
|
<div class="abs eb2a18721c" style="display:${index === 0 ? 'block' : 'none'};"><img sizes="100vh" class="point fill undefined" height="25" width="25" alt="" src="/assets/huiyuan/images/user-center/charge/h.png"></div>
|
|
</div>`;
|
|
});
|
|
html += `</div></div>`;
|
|
paymentMethodsContainer.innerHTML = html;
|
|
}
|
|
|
|
function renderPaymentChannels(index) {
|
|
|
|
const channels = paymentData[index].channels;
|
|
intActiveCgId = paymentData[index].channels[0].id
|
|
let html = `<div class="fl"><div>渠道选择</div></div><div class="mt10"><div class="fl gap5 align_center fl_wrap">`;
|
|
channels.forEach((channel, idx) => {
|
|
html += `
|
|
<div id="channel-${idx}" class="e21f3fa97e point relative ${idx === 0 ? 'selected _71a3d26126' : ''}" style="height: 25px; display: flex; align-items: center; justify-content: center;" onclick="selectPaymentChannel(${idx}, ${index})">
|
|
<div class="mt3 ${idx === 0 ? 'c63892b6d2' : ''} b36fec8841">${channel.name}</div>
|
|
<div class="abs eb2a18721c" style="display:${idx === 0 ? 'block' : 'none'};"><img sizes="100vh" class="point fill undefined" height="25" width="25" alt="" src="/assets/huiyuan/images/user-center/charge/h.png"></div>
|
|
</div>`;
|
|
});
|
|
html += `</div></div>`;
|
|
paymentChannelsContainer.innerHTML = html;
|
|
}
|
|
|
|
window.selectPaymentMethod = function(index) {
|
|
document.querySelectorAll('#payment-methods-container .e21f3fa97e').forEach(el => {
|
|
el.classList.remove('selected', '_71a3d26126');
|
|
el.querySelector('.mt3').classList.remove('c63892b6d2');
|
|
});
|
|
paymentData.forEach((data) => {
|
|
document.querySelector(`#${data.method.id} .eb2a18721c`).style.display = 'none';
|
|
});
|
|
const selectedMethod = document.getElementById(paymentData[index].method.id);
|
|
intActiveCgId = paymentData[index].channels[0].id
|
|
|
|
selectedMethod.classList.add('selected', '_71a3d26126');
|
|
selectedMethod.querySelector('.mt3').classList.add('c63892b6d2');
|
|
selectedMethod.querySelector('.eb2a18721c').style.display = 'block';
|
|
renderPaymentChannels(index);
|
|
}
|
|
|
|
window.selectPaymentChannel = function(channelIdx, methodIdx) {
|
|
document.querySelectorAll('#payment-channels-container .e21f3fa97e').forEach(el => {
|
|
el.classList.remove('selected', '_71a3d26126');
|
|
el.querySelector('.mt3').classList.remove('c63892b6d2');
|
|
});
|
|
paymentData[methodIdx].channels.forEach((channel, idx) => {
|
|
document.querySelector(`#channel-${idx} .eb2a18721c`).style.display = 'none';
|
|
});
|
|
const selectedChannel = document.getElementById(`channel-${channelIdx}`);
|
|
selectedChannel.classList.add('selected', '_71a3d26126');
|
|
selectedChannel.querySelector('.mt3').classList.add('c63892b6d2');
|
|
selectedChannel.querySelector('.eb2a18721c').style.display = 'block';
|
|
|
|
// 获取点击渠道的 id
|
|
intActiveCgId = paymentData[methodIdx].channels[channelIdx].id;
|
|
}
|
|
/**
|
|
* 获取支付通道
|
|
*/
|
|
function getChannelList() {
|
|
let strApiUrl = apiPayChannele + "?vp_id="+intVpId
|
|
fetchApi(strApiUrl, null,successFn, onError,'拼命加载中。。。')
|
|
function successFn(res) {
|
|
if (res.code == '000') {
|
|
let arrPayChannel = res.data.item
|
|
if(arrPayChannel.length <=0){
|
|
layerPopup('暂无支付渠道,请稍后再试！', 3)
|
|
return false
|
|
}
|
|
arrPayChannel.forEach((item)=>{
|
|
item.id = item.cg_id
|
|
item.name = item.pg_channel_name
|
|
if(item.pg_channel_code == 'ZFB'){
|
|
item.icon = '/assets/huiyuan/images/zhifubao.png'
|
|
}else if(item.pg_channel_code == 'WX'){
|
|
item.icon = '/assets/huiyuan/images/wechat.png'
|
|
}
|
|
})
|
|
// 提取 pg_channel_name 和 pg_product_code 到新数组
|
|
const extractedData = arrPayChannel.map(PayChannel => {
|
|
const filteredElements = arrPayChannel.filter(item => item.pg_channel_code === PayChannel.pg_channel_code);
|
|
return {
|
|
method:{
|
|
name: PayChannel.pg_channel_name,
|
|
id: PayChannel.pg_channel_code,
|
|
pg_channel_code: PayChannel.pg_channel_code,
|
|
icon: PayChannel.icon,
|
|
},
|
|
channels:filteredElements
|
|
|
|
};
|
|
});
|
|
paymentData = extractedData
|
|
renderPaymentMethods();
|
|
renderPaymentChannels(0); // Show channels for the first payment method by default
|
|
} else {
|
|
layerPopup(res.msg, 3)
|
|
}
|
|
}
|
|
}
|
|
|
|
// 确认支付
|
|
$(".sc-pay-btn").on('click', function () {
|
|
getCreateV(intVpId, intActiveCgId)
|
|
});
|
|
/**
|
|
* 创建支付订单
|
|
* @param {number} vp_id // 套餐id
|
|
* @param {number} intCgId // 通道id
|
|
*/
|
|
function getCreateV(intVpId, intCgId) {
|
|
|
|
let postData = {
|
|
'vp_id':intVpId,
|
|
'cg_id':intCgId,
|
|
'si_id':strSite,
|
|
}
|
|
if(postData.cg_id == null || postData.cg_id.length ==0 ){
|
|
layerPopup('暂无支付渠道,请稍后再试！', 3)
|
|
return false
|
|
}
|
|
fetchApi(apiPayOrderCreate, postData,successFun, onError)
|
|
function successFun(res) {
|
|
if (res.code == '000') {
|
|
let time = setTimeout(()=>{
|
|
$(".sc-pay-jump-popup").show()
|
|
clearTimeout(time)
|
|
},3000)
|
|
}
|
|
}
|
|
}
|
|
|
|
//立即跳转
|
|
$(".sc-Jump-immediately-btn").on('click', function () {
|
|
$(".sc-pay-jump-popup").hide()
|
|
window.open('https://render.alipay.com/p/yuyan/180020040001212700/?cid=wap_dc', '_blank');
|
|
});
|
|
|
|
|
|
}) |