taoke_autopay_server.git

parent: 6159dc58 | 补丁 | 提交 | ignore whitespace

Administrator

2025-07-27 8d6f2fe54a4456d6e56c4473b951f773b2b362d8

后台管理页面完成

7个文件已添加

2个文件已修改

	src/main/java/com/taoke/autopay/utils/AlipayUtil.java	19 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/resources/static/credit/index.html	544 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/resources/static/img/credit_exchange_title.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/resources/static/img/credit_top.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/resources/static/img/icon_credit_highlight.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/resources/static/img/icon_credit_record_alipay.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/resources/static/img/icon_credit_record_credit.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/resources/static/img/icon_credit_record_exchange.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/main/resources/static/img/icon_credit_record_input.png	补丁 \| 查看 \| 原始文档 \| blame \| 历史

 src/main/java/com/taoke/autopay/utils/AlipayUtil.java

@@ -29,12 +29,17 @@
        certAlipayRequest.setFormat("json");
        certAlipayRequest.setCharset("GBK");
        certAlipayRequest.setSignType("RSA2");
        certAlipayRequest.setCertPath(
                AlipayUtil.class.getClassLoader().getResource("alipay/appCertPublicKey_2021004141681244.crt").getPath());
        certAlipayRequest.setAlipayPublicCertPath(
                AlipayUtil.class.getClassLoader().getResource("alipay/alipayCertPublicKey_RSA2.crt").getPath());
        certAlipayRequest.setRootCertPath(
                AlipayUtil.class.getClassLoader().getResource("alipay/alipayRootCert.crt").getPath());
//        certAlipayRequest.setCertPath(
//                AlipayUtil.class.getClassLoader().getResource("alipay/appCertPublicKey_2021004141681244.crt").getPath());
//        certAlipayRequest.setAlipayPublicCertPath(
//                AlipayUtil.class.getClassLoader().getResource("alipay/alipayCertPublicKey_RSA2.crt").getPath());
//        certAlipayRequest.setRootCertPath(
//                AlipayUtil.class.getClassLoader().getResource("alipay/alipayRootCert.crt").getPath());

        certAlipayRequest.setCertPath("/www/wwwroot/alipay/appCertPublicKey_2021004141681244.crt");
        certAlipayRequest.setAlipayPublicCertPath("/www/wwwroot/alipay/alipayCertPublicKey_RSA2.crt");
        certAlipayRequest.setRootCertPath("/www/wwwroot/alipay/alipayRootCert.crt");

        logger.info("证书路径：{}", certAlipayRequest.getCertPath());
        try {
            alipayClient = new DefaultAlipayClient(certAlipayRequest);
@@ -67,9 +72,11 @@
        response = alipayClient.certificateExecute(request);
        // 成功转账
        if (response != null && response.isSuccess() && "10000".equals(response.getCode())) {
            logger.info("转账成功：{}-{}-{}-{}",outBizNo, name, account,money );
            return response;
        } else// 转账失败
        {
            logger.warn("转账失败：{}-{}",outBizNo, response!=null? response.getSubMsg():"未知原因");
            throw new AlipayTransferException(Integer.parseInt(response.getCode()), response.getSubCode(),
                    response.getSubMsg());
        }

 src/main/resources/static/credit/index.html

@@ -1,250 +1,324 @@
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, viewport-fit=cover, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>积分中心</title>
    <script>
        window.onresize = function () {
            document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
        };
        window.onresize();
    </script>
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
    <style>
        body {
            background-color: #FFFFFF;
            font-family: Arial, sans-serif;
            font-size: 0.3rem; /* 修改字体大小为原来的30% */
        }
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>积分中心</title>
        <script>
            window.onresize = function() {
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
            };
            window.onresize();
        </script>
        <link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
        <style>
            body {
                background-color: #F5F6FA;
                font-family: Arial, sans-serif;
                font-size: 0.3rem;
                /* 修改字体大小为原来的30% */
            }
			
            .header {
                background-color: #fff;
                padding: 1rem;
                text-align: center;
                border-bottom: 1px solid #eee;
            }
			
            .balance {
                font-family: MiSans, MiSans;
                font-weight: 500;
                font-size: 0.30rem;
                color: #FF0547;
                line-height: 0.40rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
			
            .estimated-amount {
                font-weight: 500;
                font-size: 0.26rem;
                color: #FFFFFF;
                line-height: 0.34rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-top: 0.15rem;
            }
			
            .exchange-container {
                text-align: left;
                margin: 0.3rem 0;
                padding: 0.3rem;
                width: 6.9rem;
            }
			
            .exchange-title {
                font-size: 0.6rem;
                /* 修改字体大小为原来的30% */
                color: #333;
                margin-top: 0.8rem;
                margin-bottom: 1rem;
            }
			
            .exchange-input {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 0.3rem;
            }
			
            .exchange-input input {
                width: 6.30rem;
                height: 0.80rem;
                line-height: 0.8rem;
                background: #F5F6FA;
                border-radius: 0.10rem;
                padding: 0rem 0.2rem;
                box-sizing: border-box;
            }
			
            .btn {
                width: 6.30rem;
                height: 0.80rem;
                background: linear-gradient( 90deg, #FF0447 0%, #FF7454 100%);
                border-radius: 0.42rem;
                border: none;
                cursor: pointer;
                color: white;
                font-size: 0.32rem;
                margin-top: 0.3rem;
            }
			
            .btn:hover {
                background-color: #e64a19;
            }
			
            [v-cloak] {
                display: none;
            }
			
            .big-item {
                width: 3.35rem;
                height: 0.80rem;
                line-height: 0.8rem;
                background: #FFFFFF;
                border-radius: 0.2rem;
                padding-left: 0.2rem;
                box-sizing: border-box;
            }
			
            .record-item {
                width: 6.90rem;
                height: 1.00rem;
                line-height: 1.00rem;
                background: #FFFFFF;
                border-radius: 0.15rem;
                box-sizing: border-box;
                padding-left: 0.2rem;
                padding-right: 0.3rem;
                font-size: 0.30rem;
                color: #FF0A48;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 0.2rem;
                margin-bottom: 0.1rem;
            }
			
            .record-item .icon {
                width: 0.61rem;
                height: 0.61rem;
                margin-right: 0.2rem;
            }
			
            .record-item .input {
                width: 0.15rem;
                height: 0.3rem;
            }
			
            .record-item div {
                display: flex;
                line-height: 1.00rem;
                align-items: center;
            }
        </style>

        .header {
            background-color: #fff;
            padding: 1rem;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        <style>
            /* 新增样式：底部菜单 */
			
            .footer-menu {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                display: flex;
                justify-content: space-around;
                background-color: #fff;
                border-top: 1px solid #eee;
                padding: 0.5rem 0;
                box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
            }
			
            .menu-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-decoration: none;
                color: #666;
                font-size: 0.24rem;
            }
			
            .menu-item.active {
                color: #FF3949;
            }
			
            .menu-icon {
                width: 0.4rem;
                height: 0.4rem;
                margin-bottom: 0.1rem;
            }
        </style>
    </head>

        .balance {
            font-size: 0.6rem; /* 修改字体大小为原来的30% */
            color: #ff5722;
            margin-bottom: 0.5rem;
        }
    <body>
        <div id="app">
            <img style="position: absolute; z-index: 0;top: 0; width: 7.5rem;height: 6rem;" src="../img/credit_top.png" />
            <div class="exchange-container" style="position: absolute;top: 0;">
                <div style="display: flex;justify-content: space-between;">
                    <div class="balance big-item" v-cloak><span>当前积分余额: </span>{{ creditBalance }}</div>
                    <div class="balance big-item" v-cloak><span>兑换中的积分: </span>{{ exchangingCredits }}</div>
                </div>

        .estimated-amount {
            font-size: 0.21rem; /* 修改字体大小为原来的30% */
            color: #666;
            margin-top: -0.5rem;
        }
                <div class="estimated-amount" v-cloak>预计可兑换红包金额: {{ estimatedRedPacketAmount }}元</div>

        .exchange-container {
            text-align: left;
            margin: 1rem 0;
            padding: 1rem;
            background-color: #fff;
            border-radius: 0.2rem;
        }
                <div style="margin-top: 0.3rem; background: white;border-radius: 0.2rem; display: flex;align-items: center;flex-direction: column;padding: 0.4rem 0.3rem;">

        .exchange-title {
            font-size: 0.6rem; /* 修改字体大小为原来的30% */
            color: #333;
            margin-top: 0.8rem;
            margin-bottom: 1rem;
        }
                    <img src="../img/credit_exchange_title.png" style="width: 3.13rem;height: 0.41rem;" />
                    <div class="exchange-input">
                        <input type="number" v-model="exchangePoints" placeholder="请输入兑换积分" />

        .exchange-input {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 1rem;
        }
                    </div>

        .exchange-input input {
            width: 60%;
            padding: 0.2rem;
            border: 1px solid #ddd;
            border-radius: 0.2rem;
            font-size: 0.3rem; /* 修改字体大小为原来的30% */
            text-align: center;
        }
                    <button class="btn" @click="exchangePointsToRedPacket">兑换</button>

        .btn {
            background-color: #ff5722;
            color: #fff;
            border: none;
            padding: 0.2rem 0.3rem;
            border-radius: 0.2rem;
            font-size: 0.3rem;
            margin-left: 0.3rem;
            cursor: pointer;
        }
                </div>

        .btn:hover {
            background-color: #e64a19;
        }
                <div class="links-container">
                    <div class="record-item" @click="jump_to('alipay_account_setting.html')">
                        <div>
                            <img class="icon" src="../img/icon_credit_record_alipay.png" />
                            <span>绑定支付宝</span>
                        </div>
                        <img class="input" src="../img/icon_credit_record_input.png" />
                    </div>
					
                    <div class="record-item" @click="jump_to('credit_records.html')">
                        <div>
                            <img class="icon" src="../img/icon_credit_record_credit.png" />
                            <span>查看积分记录</span>
                        </div>
                        <img class="input" src="../img/icon_credit_record_input.png" />
                    </div>
					
                    <div class="record-item" @click="jump_to('exchange_records.html')">
                        <div>
                            <img class="icon" src="../img/icon_credit_record_exchange.png" />
                            <span>查看兑换记录</span>
                        </div>
                        <img class="input" src="../img/icon_credit_record_input.png" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增底部菜单 -->
        <div class="footer-menu">
            <a href="/index3.html" class="menu-item">
                <img src="../img/command.png" alt="口令" class="menu-icon">
                <span>口令</span>
            </a>
            <a href="/credit/index.html" class="menu-item active">
                <img src="../img/icon_credit_highlight.png" alt="积分" class="menu-icon">
                <span>积分</span>
            </a>
        </div>

        .links-container {
            text-align: center;
            margin-top: 1rem;
        }
        <script src="../js/jquery.min.js"></script>
        <script src="../js/vue.min.js"></script>
        <script src="../js/http.js"></script>
        <script src="../layui/layui.js"></script>
        <script>
            let app = new Vue({
                el: '#app',
                data: {
                    creditBalance: 0,
                    estimatedRedPacketAmount: 0,
                    exchangingCredits: 0,
                    exchangePoints: ''
                },
                mounted() {
                        this.loadCreditBalance();
                },
                methods: {
                    loadCreditBalance() {
                        let index = layer.load();
                        // 调用API获取积分余额
                        http.post("/credit/api/info", {}, function(response) {
                            layer.close(index);
                            if (response.code === 0) {
                                let data = response.data;
                                console.log("data:", data);
                                app.creditBalance = data.balance;
                                app.estimatedRedPacketAmount = data.exchangeMoney;
                            } else if (response.code === 1001) {
                                window.location.replace(response.data.link);
                            } else {
                                layer.msg(response.msg);
                            }
                        }, 'json').fail(function(jqXHR, textStatus, errorThrown) {
                            layer.close(index);
                            layer.msg("网络请求失败");
                        });
                    },
                    exchangePointsToRedPacket() {
                        // 校验输入的积分值是否为正整数
                        const points = parseInt(this.exchangePoints, 0);
                        if (isNaN(points) || points <= 0) {
                            layer.msg('请输入有效的兑换积分');
                            return;
                        }
                        // 校验用户积分余额是否足够
                        if (points > this.creditBalance) {
                            layer.msg('积分余额不足');
                            return;
                        }
                        let index = layer.load();
                        // 调用API进行积分兑换
                        http.post('/credit/api/exchange', {
                            "credits": points
                        }, function(response) {
                            layer.close(index);
                            if (response.code === 0) {
                                layer.msg("提交成功，等待审核");
                                app.loadCreditBalance();
                            } else {
                                layer.msg(response.msg);
                            }
                        }, function() {
                            layer.close(index);
                            layer.msg("网络请求失败");
                        });
                    },
                    jump_to:function(url){
                        window.location.href = url;
						
                    }
                }
            });
        </script>
    </body>

        .links-container a {
            display: block;
            color: #ff5722;
            text-decoration: none;
            margin: 0.2rem 0;
            font-size: 0.3rem; /* 修改字体大小为原来的30% */
        }

        .links-container a:hover {
            text-decoration: underline;
        }
        [v-cloak]{
            display: none;
        }
    </style>


    <style>
        /* 新增样式：底部菜单 */
        .footer-menu {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            background-color: #fff;
            border-top: 1px solid #eee;
            padding: 0.5rem 0;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
        }

        .menu-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #666;
            font-size: 0.24rem;
        }

        .menu-item.active {
            color: #000;
        }

        .menu-icon {
            width: 0.4rem;
            height: 0.4rem;
            margin-bottom: 0.1rem;
        }
    </style>
</head>

<body>
<div id="app">
    <div class="exchange-container">
        <div class="balance" v-cloak><span style=" color:black;">当前积分余额: </span>{{ creditBalance }}</div>
        <div class="estimated-amount" v-cloak>预计可兑换红包金额: {{ estimatedRedPacketAmount }}元</div>
        <div class="balance" v-cloak><span style=" color:black;">兑换中的积分: </span>{{ exchangingCredits }}</div>
        <div class="exchange-title">积分红包兑换</div>


        <div class="exchange-input">
            <input type="number" v-model="exchangePoints" placeholder="请输入兑换积分"/>
            <button class="btn" @click="exchangePointsToRedPacket">兑换</button>
        </div>
        <div class="links-container">
            <a href="alipay_account_setting.html">绑定支付宝</a>
            <a href="credit_records.html">查看积分记录</a>
            <a href="exchange_records.html">查看兑换记录</a>
        </div>
    </div>
</div>
<!-- 新增底部菜单 -->
<div class="footer-menu">
    <a href="/index3.html" class="menu-item">
        <img src="../img/command.png" alt="口令" class="menu-icon">
        <span>口令</span>
    </a>
    <a href="/credit/index.html" class="menu-item active">
        <img src="../img/credit_fill.png" alt="积分" class="menu-icon">
        <span>积分</span>
    </a>
</div>


<script src="../js/jquery.min.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/http.js"></script>
<script src="../layui/layui.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            creditBalance: 0,
            estimatedRedPacketAmount: 0,
            exchangingCredits: 0,
            exchangePoints: ''
        },
        mounted() {
            this.loadCreditBalance();
        },
        methods: {
            loadCreditBalance() {
                let index = layer.load();
                // 调用API获取积分余额
                http.post("/credit/api/info", {}, function (response) {
                    layer.close(index);
                    if (response.code === 0) {
                        let data = response.data;
                        console.log("data:",data);
                        app.creditBalance = data.balance;
                        app.estimatedRedPacketAmount = data.exchangeMoney;
                    } else if (response.code === 1001) {
                        window.location.replace(response.data.link);
                    } else {
                        layer.msg(response.msg);
                    }
                }, 'json').fail(function (jqXHR, textStatus, errorThrown) {
                    layer.close(index);
                    layer.msg("网络请求失败");
                });


            },
            exchangePointsToRedPacket() {
                // 校验输入的积分值是否为正整数
                const points = parseInt(this.exchangePoints, 0);
                if (isNaN(points) || points <= 0) {
                    layer.msg('请输入有效的兑换积分');
                    return;
                }
                // 校验用户积分余额是否足够
                if (points > this.creditBalance) {
                    layer.msg('积分余额不足');
                    return;
                }
                let index = layer.load();
                // 调用API进行积分兑换
                http.post('/credit/api/exchange', {"credits":points}, function(response){
                    layer.close(index);
                    if(response.code===0){
                        layer.msg("提交成功，等待审核");
                        app.loadCreditBalance();
                    }else{
                        layer.msg(response.msg);
                    }

                },function (){
                    layer.close(index);
                    layer.msg("网络请求失败");
                });
            }
        }
    });
</script>
</body>
</html>

 src/main/resources/static/img/credit_exchange_title.png


 src/main/resources/static/img/credit_top.png


 src/main/resources/static/img/icon_credit_highlight.png


 src/main/resources/static/img/icon_credit_record_alipay.png


 src/main/resources/static/img/icon_credit_record_credit.png


 src/main/resources/static/img/icon_credit_record_exchange.png


 src/main/resources/static/img/icon_credit_record_input.png

			@@ -29,12 +29,17 @@
			certAlipayRequest.setFormat("json");
			certAlipayRequest.setCharset("GBK");
			certAlipayRequest.setSignType("RSA2");
			certAlipayRequest.setCertPath(
			AlipayUtil.class.getClassLoader().getResource("alipay/appCertPublicKey_2021004141681244.crt").getPath());
			certAlipayRequest.setAlipayPublicCertPath(
			AlipayUtil.class.getClassLoader().getResource("alipay/alipayCertPublicKey_RSA2.crt").getPath());
			certAlipayRequest.setRootCertPath(
			AlipayUtil.class.getClassLoader().getResource("alipay/alipayRootCert.crt").getPath());
			// certAlipayRequest.setCertPath(
			// AlipayUtil.class.getClassLoader().getResource("alipay/appCertPublicKey_2021004141681244.crt").getPath());
			// certAlipayRequest.setAlipayPublicCertPath(
			// AlipayUtil.class.getClassLoader().getResource("alipay/alipayCertPublicKey_RSA2.crt").getPath());
			// certAlipayRequest.setRootCertPath(
			// AlipayUtil.class.getClassLoader().getResource("alipay/alipayRootCert.crt").getPath());

			certAlipayRequest.setCertPath("/www/wwwroot/alipay/appCertPublicKey_2021004141681244.crt");
			certAlipayRequest.setAlipayPublicCertPath("/www/wwwroot/alipay/alipayCertPublicKey_RSA2.crt");
			certAlipayRequest.setRootCertPath("/www/wwwroot/alipay/alipayRootCert.crt");

			logger.info("证书路径：{}", certAlipayRequest.getCertPath());
			try {
			alipayClient = new DefaultAlipayClient(certAlipayRequest);
			@@ -67,9 +72,11 @@
			response = alipayClient.certificateExecute(request);
			// 成功转账
			if (response != null && response.isSuccess() && "10000".equals(response.getCode())) {
			logger.info("转账成功：{}-{}-{}-{}",outBizNo, name, account,money );
			return response;
			} else// 转账失败
			{
			logger.warn("转账失败：{}-{}",outBizNo, response!=null? response.getSubMsg():"未知原因");
			throw new AlipayTransferException(Integer.parseInt(response.getCode()), response.getSubCode(),
			response.getSubMsg());
			}

			@@ -1,250 +1,324 @@
			<!DOCTYPE html>
			<html>

			<head>
			<meta charset="utf-8">
			<meta name="viewport"
			content="width=device-width, viewport-fit=cover, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
			<title>积分中心</title>
			<script>
			window.onresize = function () {
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
			};
			window.onresize();
			</script>
			<link rel="stylesheet" type="text/css" href="../layui/css/layui.css"/>
			<style>
			body {
			background-color: #FFFFFF;
			font-family: Arial, sans-serif;
			font-size: 0.3rem; /* 修改字体大小为原来的30% */
			}
			<head>
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
			<title>积分中心</title>
			<script>
			window.onresize = function() {
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
			};
			window.onresize();
			</script>
			<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
			<style>
			body {
			background-color: #F5F6FA;
			font-family: Arial, sans-serif;
			font-size: 0.3rem;
			/* 修改字体大小为原来的30% */
			}

			.header {
			background-color: #fff;
			padding: 1rem;
			text-align: center;
			border-bottom: 1px solid #eee;
			}

			.balance {
			font-family: MiSans, MiSans;
			font-weight: 500;
			font-size: 0.30rem;
			color: #FF0547;
			line-height: 0.40rem;
			text-align: left;
			font-style: normal;
			text-transform: none;
			}

			.estimated-amount {
			font-weight: 500;
			font-size: 0.26rem;
			color: #FFFFFF;
			line-height: 0.34rem;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 0.15rem;
			}

			.exchange-container {
			text-align: left;
			margin: 0.3rem 0;
			padding: 0.3rem;
			width: 6.9rem;
			}

			.exchange-title {
			font-size: 0.6rem;
			/* 修改字体大小为原来的30% */
			color: #333;
			margin-top: 0.8rem;
			margin-bottom: 1rem;
			}

			.exchange-input {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 0.3rem;
			}

			.exchange-input input {
			width: 6.30rem;
			height: 0.80rem;
			line-height: 0.8rem;
			background: #F5F6FA;
			border-radius: 0.10rem;
			padding: 0rem 0.2rem;
			box-sizing: border-box;
			}

			.btn {
			width: 6.30rem;
			height: 0.80rem;
			background: linear-gradient( 90deg, #FF0447 0%, #FF7454 100%);
			border-radius: 0.42rem;
			border: none;
			cursor: pointer;
			color: white;
			font-size: 0.32rem;
			margin-top: 0.3rem;
			}

			.btn:hover {
			background-color: #e64a19;
			}

			[v-cloak] {
			display: none;
			}

			.big-item {
			width: 3.35rem;
			height: 0.80rem;
			line-height: 0.8rem;
			background: #FFFFFF;
			border-radius: 0.2rem;
			padding-left: 0.2rem;
			box-sizing: border-box;
			}

			.record-item {
			width: 6.90rem;
			height: 1.00rem;
			line-height: 1.00rem;
			background: #FFFFFF;
			border-radius: 0.15rem;
			box-sizing: border-box;
			padding-left: 0.2rem;
			padding-right: 0.3rem;
			font-size: 0.30rem;
			color: #FF0A48;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 0.2rem;
			margin-bottom: 0.1rem;
			}

			.record-item .icon {
			width: 0.61rem;
			height: 0.61rem;
			margin-right: 0.2rem;
			}

			.record-item .input {
			width: 0.15rem;
			height: 0.3rem;
			}

			.record-item div {
			display: flex;
			line-height: 1.00rem;
			align-items: center;
			}
			</style>

			.header {
			background-color: #fff;
			padding: 1rem;
			text-align: center;
			border-bottom: 1px solid #eee;
			}
			<style>
			/* 新增样式：底部菜单 */

			.footer-menu {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			border-top: 1px solid #eee;
			padding: 0.5rem 0;
			box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
			}

			.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: #666;
			font-size: 0.24rem;
			}

			.menu-item.active {
			color: #FF3949;
			}

			.menu-icon {
			width: 0.4rem;
			height: 0.4rem;
			margin-bottom: 0.1rem;
			}
			</style>
			</head>

			.balance {
			font-size: 0.6rem; /* 修改字体大小为原来的30% */
			color: #ff5722;
			margin-bottom: 0.5rem;
			}
			<body>
			<div id="app">
			<img style="position: absolute; z-index: 0;top: 0; width: 7.5rem;height: 6rem;" src="../img/credit_top.png" />
			<div class="exchange-container" style="position: absolute;top: 0;">
			<div style="display: flex;justify-content: space-between;">
			<div class="balance big-item" v-cloak><span>当前积分余额: </span>{{ creditBalance }}</div>
			<div class="balance big-item" v-cloak><span>兑换中的积分: </span>{{ exchangingCredits }}</div>
			</div>

			.estimated-amount {
			font-size: 0.21rem; /* 修改字体大小为原来的30% */
			color: #666;
			margin-top: -0.5rem;
			}
			<div class="estimated-amount" v-cloak>预计可兑换红包金额: {{ estimatedRedPacketAmount }}元</div>

			.exchange-container {
			text-align: left;
			margin: 1rem 0;
			padding: 1rem;
			background-color: #fff;
			border-radius: 0.2rem;
			}
			<div style="margin-top: 0.3rem; background: white;border-radius: 0.2rem; display: flex;align-items: center;flex-direction: column;padding: 0.4rem 0.3rem;">

			.exchange-title {
			font-size: 0.6rem; /* 修改字体大小为原来的30% */
			color: #333;
			margin-top: 0.8rem;
			margin-bottom: 1rem;
			}
			<img src="../img/credit_exchange_title.png" style="width: 3.13rem;height: 0.41rem;" />
			<div class="exchange-input">
			<input type="number" v-model="exchangePoints" placeholder="请输入兑换积分" />

			.exchange-input {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 1rem;
			}
			</div>

			.exchange-input input {
			width: 60%;
			padding: 0.2rem;
			border: 1px solid #ddd;
			border-radius: 0.2rem;
			font-size: 0.3rem; /* 修改字体大小为原来的30% */
			text-align: center;
			}
			<button class="btn" @click="exchangePointsToRedPacket">兑换</button>

			.btn {
			background-color: #ff5722;
			color: #fff;
			border: none;
			padding: 0.2rem 0.3rem;
			border-radius: 0.2rem;
			font-size: 0.3rem;
			margin-left: 0.3rem;
			cursor: pointer;
			}
			</div>

			.btn:hover {
			background-color: #e64a19;
			}
			<div class="links-container">
			<div class="record-item" @click="jump_to('alipay_account_setting.html')">
			<div>
			<img class="icon" src="../img/icon_credit_record_alipay.png" />
			<span>绑定支付宝</span>
			</div>
			<img class="input" src="../img/icon_credit_record_input.png" />
			</div>

			<div class="record-item" @click="jump_to('credit_records.html')">
			<div>
			<img class="icon" src="../img/icon_credit_record_credit.png" />
			<span>查看积分记录</span>
			</div>
			<img class="input" src="../img/icon_credit_record_input.png" />
			</div>

			<div class="record-item" @click="jump_to('exchange_records.html')">
			<div>
			<img class="icon" src="../img/icon_credit_record_exchange.png" />
			<span>查看兑换记录</span>
			</div>
			<img class="input" src="../img/icon_credit_record_input.png" />
			</div>
			</div>
			</div>
			</div>
			<!-- 新增底部菜单 -->
			<div class="footer-menu">
			<a href="/index3.html" class="menu-item">
			<img src="../img/command.png" alt="口令" class="menu-icon">
			<span>口令</span>
			</a>
			<a href="/credit/index.html" class="menu-item active">
			<img src="../img/icon_credit_highlight.png" alt="积分" class="menu-icon">
			<span>积分</span>
			</a>
			</div>

			.links-container {
			text-align: center;
			margin-top: 1rem;
			}
			<script src="../js/jquery.min.js"></script>
			<script src="../js/vue.min.js"></script>
			<script src="../js/http.js"></script>
			<script src="../layui/layui.js"></script>
			<script>
			let app = new Vue({
			el: '#app',
			data: {
			creditBalance: 0,
			estimatedRedPacketAmount: 0,
			exchangingCredits: 0,
			exchangePoints: ''
			},
			mounted() {
			this.loadCreditBalance();
			},
			methods: {
			loadCreditBalance() {
			let index = layer.load();
			// 调用API获取积分余额
			http.post("/credit/api/info", {}, function(response) {
			layer.close(index);
			if (response.code === 0) {
			let data = response.data;
			console.log("data:", data);
			app.creditBalance = data.balance;
			app.estimatedRedPacketAmount = data.exchangeMoney;
			} else if (response.code === 1001) {
			window.location.replace(response.data.link);
			} else {
			layer.msg(response.msg);
			}
			}, 'json').fail(function(jqXHR, textStatus, errorThrown) {
			layer.close(index);
			layer.msg("网络请求失败");
			});
			},
			exchangePointsToRedPacket() {
			// 校验输入的积分值是否为正整数
			const points = parseInt(this.exchangePoints, 0);
			if (isNaN(points) \|\| points <= 0) {
			layer.msg('请输入有效的兑换积分');
			return;
			}
			// 校验用户积分余额是否足够
			if (points > this.creditBalance) {
			layer.msg('积分余额不足');
			return;
			}
			let index = layer.load();
			// 调用API进行积分兑换
			http.post('/credit/api/exchange', {
			"credits": points
			}, function(response) {
			layer.close(index);
			if (response.code === 0) {
			layer.msg("提交成功，等待审核");
			app.loadCreditBalance();
			} else {
			layer.msg(response.msg);
			}
			}, function() {
			layer.close(index);
			layer.msg("网络请求失败");
			});
			},
			jump_to:function(url){
			window.location.href = url;

			}
			}
			});
			</script>
			</body>

			.links-container a {
			display: block;
			color: #ff5722;
			text-decoration: none;
			margin: 0.2rem 0;
			font-size: 0.3rem; /* 修改字体大小为原来的30% */
			}

			.links-container a:hover {
			text-decoration: underline;
			}
			[v-cloak]{
			display: none;
			}
			</style>


			<style>
			/* 新增样式：底部菜单 */
			.footer-menu {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			border-top: 1px solid #eee;
			padding: 0.5rem 0;
			box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
			}

			.menu-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-decoration: none;
			color: #666;
			font-size: 0.24rem;
			}

			.menu-item.active {
			color: #000;
			}

			.menu-icon {
			width: 0.4rem;
			height: 0.4rem;
			margin-bottom: 0.1rem;
			}
			</style>
			</head>

			<body>
			<div id="app">
			<div class="exchange-container">
			<div class="balance" v-cloak><span style=" color:black;">当前积分余额: </span>{{ creditBalance }}</div>
			<div class="estimated-amount" v-cloak>预计可兑换红包金额: {{ estimatedRedPacketAmount }}元</div>
			<div class="balance" v-cloak><span style=" color:black;">兑换中的积分: </span>{{ exchangingCredits }}</div>
			<div class="exchange-title">积分红包兑换</div>


			<div class="exchange-input">
			<input type="number" v-model="exchangePoints" placeholder="请输入兑换积分"/>
			<button class="btn" @click="exchangePointsToRedPacket">兑换</button>
			</div>
			<div class="links-container">
			<a href="alipay_account_setting.html">绑定支付宝</a>
			<a href="credit_records.html">查看积分记录</a>
			<a href="exchange_records.html">查看兑换记录</a>
			</div>
			</div>
			</div>
			<!-- 新增底部菜单 -->
			<div class="footer-menu">
			<a href="/index3.html" class="menu-item">
			<img src="../img/command.png" alt="口令" class="menu-icon">
			<span>口令</span>
			</a>
			<a href="/credit/index.html" class="menu-item active">
			<img src="../img/credit_fill.png" alt="积分" class="menu-icon">
			<span>积分</span>
			</a>
			</div>


			<script src="../js/jquery.min.js"></script>
			<script src="../js/vue.min.js"></script>
			<script src="../js/http.js"></script>
			<script src="../layui/layui.js"></script>
			<script>
			let app = new Vue({
			el: '#app',
			data: {
			creditBalance: 0,
			estimatedRedPacketAmount: 0,
			exchangingCredits: 0,
			exchangePoints: ''
			},
			mounted() {
			this.loadCreditBalance();
			},
			methods: {
			loadCreditBalance() {
			let index = layer.load();
			// 调用API获取积分余额
			http.post("/credit/api/info", {}, function (response) {
			layer.close(index);
			if (response.code === 0) {
			let data = response.data;
			console.log("data:",data);
			app.creditBalance = data.balance;
			app.estimatedRedPacketAmount = data.exchangeMoney;
			} else if (response.code === 1001) {
			window.location.replace(response.data.link);
			} else {
			layer.msg(response.msg);
			}
			}, 'json').fail(function (jqXHR, textStatus, errorThrown) {
			layer.close(index);
			layer.msg("网络请求失败");
			});


			},
			exchangePointsToRedPacket() {
			// 校验输入的积分值是否为正整数
			const points = parseInt(this.exchangePoints, 0);
			if (isNaN(points) \|\| points <= 0) {
			layer.msg('请输入有效的兑换积分');
			return;
			}
			// 校验用户积分余额是否足够
			if (points > this.creditBalance) {
			layer.msg('积分余额不足');
			return;
			}
			let index = layer.load();
			// 调用API进行积分兑换
			http.post('/credit/api/exchange', {"credits":points}, function(response){
			layer.close(index);
			if(response.code===0){
			layer.msg("提交成功，等待审核");
			app.loadCreditBalance();
			}else{
			layer.msg(response.msg);
			}

			},function (){
			layer.close(index);
			layer.msg("网络请求失败");
			});
			}
			}
			});
			</script>
			</body>
			</html>