kkc-go/file/static/user_order.tmpl

<div class="router-bar-user-order-view" id="router-user-order">
    <div class="order-tags">
        <div class="tag-list">
            <div class="tag-item tag-item-select" data-value="">全部</div>
            <div class="tag-item" data-value="0">待支付</div>
            <div class="tag-item" data-value="1">待发货</div>
            <div class="tag-item" data-value="2">已发货</div>
            <div class="tag-item" data-value="3">订单完成</div>
        </div>
        <!--        <div class="tag-bottom-line"></div>-->
    </div>
    <div class="order-content">
        <!--没有数据时显示-->
        <div class="order-empty" id="order-empty" style="display: none;">
            <img class="empty-image" src="/api/static/image/bar/not-order.png">
            <div class="empty-text">暂无订单</div>
        </div>
        <!--有数据时显示-->
        <div class="order-list" id="order-list">
            <div class="order-item">
                <div class="order-item-header">
                    <div class="order-item-header-time">201912121212121212</div>
                    <div class="order-item-header-status">待支付</div>
                </div>
                <div class="order-item-body">
                    <div class="order-item-body-img">
                        <img/>
                    </div>
                    <div class="order-item-body-info">
                        <div class="order-item-body-info-title">
                            <div class="order-item-body-info-title-name">商品名称</div>
                            <div class="order-item-body-info-title-price">￥100</div>
                        </div>
                        <div class="order-item-body-info-desc">
                            <div class="order-item-body-info-desc-text">商品sku名称</div>
                            <div class="order-item-body-info-desc-count">X1</div>
                        </div>
                    </div>
                </div>
                <div class="order-item-footer">
                    <div class="order-item-footer-orderid">
                        <div class="footer-orderid-title">订单号</div>
                        <div class="footer-orderid-info">
                            <div class="footer-orderid-id">2033333</div>
                            <div class="footer-orderid-copy">复制</div>
                        </div>
                    </div>
                    <div class="order-item-footer-settlement">
                        <div class="footer-settlement-left">实付</div>
                        <div class="footer-settlement-price">￥2</div>
                    </div>
                    <div class="order-item-footer-btns">
                        <div class="footer-btns-cancel">取消订单</div>
                        <div class="footer-btns-pay">去支付</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    let tagItems = document.querySelectorAll('.router-bar-user-order-view .tag-item');
    let orderType = ""
    function initUserOrder() {
        for (let i = 0; i < tagItems.length; i++) {
            tagItems[i].addEventListener('click', function () {
                tagItems.forEach(item => {
                    if (item !== this) {
                        item.classList.remove('tag-item-select')
                    } else {
                        orderTypeClick(item.dataset.value)
                        item.classList.add('tag-item-select')
                    }
                })

            })
        }
    }

    function orderTypeClick(orderId) {
        orderType = orderId

        if (!orderId){
            orderType = ""
        }
        console.log(orderType)
        getOrderList()

    }

    function getOrderList() {
        getOrderList2()
    }

    function getOrderList2() {
        let url = "/api/order/list"
        fetch(url, {
            method: 'POST',
            headers: {
                "auth-sign": localStorage.getItem("token"),
                'Content-Type': 'application/json'
            }
        }).then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        }).then(data => {
            if (data.code == 200) {
                let orderListEle = document.getElementById("order-list");
                orderListEle.innerHTML = ''
                orderListEle.style.display = 'none'
                let orderEmptyEle = document.getElementById("order-empty");
                orderEmptyEle.style.display = ''
                if (data.data.length === 0) {
                } else {

                    let orderListEle = document.getElementById("order-list");
                    orderListEle.innerHTML = ''
                    orderListEle.style.display = ""
                    let orderEmptyEle = document.getElementById("order-empty");
                    orderEmptyEle.style.display = 'none'
                    data.data.vos.forEach(item => {
                        console.log(123331,item.order.state, orderType)
                        if (orderType == "" || item.order.state === orderType) {
                            let orderItem = generateOrderHTML(item);
                            orderListEle.appendChild(orderItem);
                        }
                    })
                }
            } else {
                console.log(data.msg)
            }
        }).catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
    }

    function generateOrderHTML(data) {
        function formatDate(isoString) {
            const date = new Date(isoString);

            // 获取年、月、日、小时、分钟、秒
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需加1
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            // 拼接成所需的格式
            return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        }
        const orderItem = document.createElement('div');
        orderItem.className = 'order-item';

        const header = document.createElement('div');
        header.className = 'order-item-header';
        const time = document.createElement('div');
        time.className = 'order-item-header-time';
        time.textContent = formatDate(data.order.createTime)
        const status = document.createElement('div');
        status.className = 'order-item-header-status';
        let stateString = ""
        switch (data.order.state) {
            case "":
                stateString = "订单关闭"
                break;
            case "0":
                stateString = "待支付"
                break;
            case "1":
                stateString = "待发货"
                break;
            case "2":
                stateString = "已收货"
                break;
            case "3":
                stateString = "订单完成"
                break
            default:
                stateString = "订单异常"
        }

        status.textContent = stateString;


        header.appendChild(time);
        header.appendChild(status);
        orderItem.appendChild(header);

        const body = document.createElement('div');
        body.className = 'order-item-body';

        const img = document.createElement('div');
        img.className = 'order-item-body-img';
        const htmlImageElement = document.createElement("img");
        let imageUrl = data.sku.skuImage ? data.sku.skuImage : "/api/static/image/def_image.png"
        htmlImageElement.src = imageUrl;
        img.appendChild(htmlImageElement)

        // img.style.backgroundImage = `url('${data.sku.skuImage}')`;
        const info = document.createElement('div');
        info.className = 'order-item-body-info';

        const title = document.createElement('div');
        title.className = 'order-item-body-info-title';
        const name = document.createElement('div');
        name.className = 'order-item-body-info-title-name';
        name.textContent = data.order.orderName;
        const price = document.createElement('div');
        price.className = 'order-item-body-info-title-price';
        price.textContent = `￥${data.order.price}`;
        title.appendChild(name);
        title.appendChild(price);

        const desc = document.createElement('div');
        desc.className = 'order-item-body-info-desc';
        const descText = document.createElement('div');
        descText.className = 'order-item-body-info-desc-text';
        descText.textContent = data.sku.skuName || data.order.orderName;
        const descCount = document.createElement('div');
        descCount.className = 'order-item-body-info-desc-count';
        descCount.textContent = `X${data.order.count}`;
        desc.appendChild(descText);
        desc.appendChild(descCount);

        info.appendChild(title);
        info.appendChild(desc);
        body.appendChild(img);
        body.appendChild(info);
        orderItem.appendChild(body);

        const footer = document.createElement('div');
        footer.className = 'order-item-footer';

        const orderIdDiv = document.createElement('div');
        orderIdDiv.className = 'order-item-footer-orderid';
        const footerOrderTitle = document.createElement('div');
        footerOrderTitle.className = 'footer-orderid-title';
        footerOrderTitle.innerText = "订单号"

        const footerOrderInfo = document.createElement('div');
        footerOrderInfo.className = 'footer-orderid-info';
        const footerOrderId = document.createElement('div');
        footerOrderId.className = 'footer-orderid-id';
        footerOrderId.textContent = `${data.order.id}`;
        const footerOrderCopy = document.createElement('div');
        footerOrderCopy.className = 'footer-orderid-copy';
        footerOrderCopy.textContent = '复制';
        footerOrderCopy.onclick = function () {
            copyToClipboard(data.order.id);
        };
        footerOrderInfo.appendChild(footerOrderId);
        footerOrderInfo.appendChild(footerOrderCopy);
        orderIdDiv.appendChild(footerOrderTitle);
        orderIdDiv.appendChild(footerOrderInfo);

        const settlement = document.createElement('div');
        settlement.className = 'order-item-footer-settlement';
        const settlementLeft = document.createElement('div');
        settlementLeft.className = 'footer-settlement-left';
        settlementLeft.textContent = '实付款';
        const settlementPrice = document.createElement('div');
        settlementPrice.className = 'footer-settlement-price';
        settlementPrice.textContent = `￥${data.order.totalPrice}`;
        settlement.appendChild(settlementLeft);
        settlement.appendChild(settlementPrice);

        const btns = document.createElement('div');
        btns.className = 'order-item-footer-btns';
        const btnCancel = document.createElement('div');
        btnCancel.className = 'footer-btns-cancel';
        btnCancel.textContent = '取消订单';
        btnCancel.onclick = function () {
            cancelOrder(data.order.id);
        };
        const btnPay = document.createElement('div');
        btnPay.className = 'footer-btns-pay';
        btnPay.textContent = '去支付';
        btnPay.onclick = function () {
            payOrder(data.order.id);
        };
        btns.appendChild(btnCancel);
        btns.appendChild(btnPay);

        footer.appendChild(orderIdDiv);
        footer.appendChild(settlement);
        footer.appendChild(btns);
        orderItem.appendChild(footer);

        return orderItem;
    }

    function copyToClipboard(text) {
        navigator.clipboard.writeText(text).then(function () {
            alert('订单号已复制到剪贴板');
        }, function () {
            alert('复制失败');
        });
    }

    function cancelOrder(orderId) {
        console.log(`取消订单: ${orderId}`);
        // 在这里实现取消订单的逻辑
    }

    function payOrder(orderId) {
        console.log(`去支付订单: ${orderId}`);
        // 在这里实现支付订单的逻辑
    }

    initUserOrder()
</script>