efunbox-xxt-byuy-web/src/index.js

require('./index.less');
import 'jquery.cookie'
import './helper/response';
import Api from './helper/const';
import Utils from './helper/utils';

const channel = Utils.GetQueryString('channel');
const uid = Utils.GetQueryString('uid');
let payWay = 'wx';
let productId = '';

const getStatus = (orderId) => {
    // 查询是否成功
    $.ajax({
        url: Api.composeApiPath(`order/${orderId}`),
        dataType: "json",
        async: true,
        headers: {
            uid: uid
        },
        type: "GET",
        success: function (res) {
            $.removeCookie('orderId');
            $.removeCookie('isPayBack');
            if ($.cookie('isWx')) {
                $.removeCookie('isWx');
                $('.buy-dialog').css('display', 'none')
            }
            if (res.data.status === 2) {
                console.log('支付成功')
                system.postMessage('success')
            } else {
                console.log('支付失败')
                system.postMessage('close')
            }
        }
    });
}
// 默认微信支付
$('.wx-choose').addClass('choose');
$.ajax({
    url: Api.composeApiPath('order/product'),
    dataType: "json",
    async: true,
    data: {
        "channel": channel
    },
    headers: {
        uid: uid
    },
    type: "GET",
    success: function (res) {
        renderProductList(res.data)
    }
});

// 渲染页面
const renderProductList = (list) => {
    const box = $("<div class='product-list'></div>")
    list.forEach((item, index) => {
        if (index === 0) {
            productId = item.id;
            $('.pay-price').html(`￥${item.price / 100}元`)

        }
        box.append(
            $(`<div data-price="${item.price / 100}" data-id="${item.id}" class="item ${index === 0 ? 'focus' : ''}">
            <span class="time">${item.payType === 'YEAR' ? '12个月':item.payType === 'MONTH'?'1个月':'连续包月'}</span>
            <span class="price">￥${item.price / 100}元</span>
            <span class="origin-price">原价: ￥${item.originalPrice / 100}元</span>
        </div>`).on('click', chooseProduct)
        )
    })
    $('.product-box').append(box);
}
// 修改支付方式
const changePayWay = (flag) => {
    // if (typeof system !== 'undefined') {
    //     system.postMessage(window.location.search)
    // }
    if (flag === 'wx' && payWay !== 'wx') {
        payWay = 'wx';
        $('.zfb-choose').removeClass('choose');
        $('.wx-choose').addClass('choose');
    }
    if (flag === 'zfb' && payWay !== 'zfb') {
        payWay = 'zfb';
        $('.wx-choose').removeClass('choose');
        $('.zfb-choose').addClass('choose');
    }
}
// 生成订单
const createOrder = (method, id) => {
    let str = method === 'zfb' ? '/aliPay/prePay' : '/wxPay/prePay';
    $.ajax({
        url: Api.composeApiPath(str),
        dataType: "json",
        async: true,
        data: JSON.stringify({
            "channel": channel,
            "productId": id
        }),
        type: "POST",
        headers: {
            uid: uid
        },
        contentType: "application/json",
        success: res => {
            $.cookie('orderId', res.data.orderId);
            $.cookie('isPayBack', 1);
            if (method === 'zfb') {
                $('body').append(
                    $(`<div>${res.data.payInfo}</div>`)
                )
            } else if (method === 'wx') {
                $.cookie('isWx', 1);
                window.location.href = res.data.payInfo
            }
        }
    });
}

const chooseProduct = (e) => {
    e.stopPropagation();
    $('.item').removeClass('focus');
    $(e.currentTarget).addClass('focus');
    productId = e.currentTarget.dataset.id.toString();
    $('.pay-price').html(`￥${e.currentTarget.dataset.price}元`)

}

// 绑定事件
$(document).ready(() => {
    if ($.cookie('isPayBack') === '1' && $.cookie('isWx') === '1') {
        $('.buy-dialog').css('display', 'flex')
    }
    if (Utils.GetQueryString('payBack') === '1') {
        getStatus($.cookie('orderId'))
    }
    $('.wx-pay').on('click', () => {
        changePayWay('wx');
    });
    $('.zfb-pay').on('click', () => {
        changePayWay('zfb');
    });
    $('.pay-btn').on('click', () => {
        if (payWay && productId) {
            createOrder(payWay, productId)
        }
    });
    $('.yes').on('click', () => {
        getStatus($.cookie('orderId'))
    });
    $('.no').on('click', () => {
        getStatus($.cookie('orderId'))
    });
});