taoke_autopay_server.git

New file
			@@ -0,0 +1,191 @@
			<!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" />
			<link rel="stylesheet" type="text/css" href="../css/common.css" />
			<style>
			body {
			background-color: #f5f5f5;
			}

			.header {
			background-color: #fff;
			padding: 1rem;
			text-align: center;
			}

			.balance {
			font-size: 1.2rem;
			color: #ff5722;
			margin-bottom: 0.5rem;
			}

			.tabs {
			display: flex;
			justify-content: space-around;
			background-color: #fff;
			margin-top: 1rem;
			}

			.tab-item {
			padding: 0.8rem 0;
			font-size: 0.9rem;
			color: #333;
			}

			.tab-item.active {
			color: #ff5722;
			border-bottom: 2px solid #ff5722;
			}

			.content {
			margin-top: 1rem;
			background-color: #fff;
			}

			.record-item {
			padding: 1rem;
			border-bottom: 1px solid #eee;
			}

			.record-title {
			font-size: 0.9rem;
			color: #333;
			}

			.record-info {
			font-size: 0.8rem;
			color: #666;
			margin-top: 0.3rem;
			}

			.alipay-container {
			padding: 1rem;
			background-color: #fff;
			margin-top: 1rem;
			}

			.alipay-title {
			font-size: 0.9rem;
			color: #333;
			margin-bottom: 0.5rem;
			}

			.alipay-info {
			font-size: 0.8rem;
			color: #666;
			}

			.btn {
			background-color: #ff5722;
			color: #fff;
			border: none;
			padding: 0.6rem 1rem;
			border-radius: 0.3rem;
			font-size: 0.9rem;
			margin-top: 1rem;
			}
			</style>
			</head>

			<body>
			<div id="app">
			<div class="header">
			<div class="balance">当前积分余额: {{ creditBalance }}</div>
			</div>

			<div class="tabs">
			<div class="tab-item" :class="{ active: activeTab === 'records' }" @click="activeTab = 'records'">积分记录</div>
			<div class="tab-item" :class="{ active: activeTab === 'exchanges' }" @click="activeTab = 'exchanges'">兑换记录</div>
			</div>

			<div class="content" v-if="activeTab === 'records'">
			<div class="record-item" v-for="record in creditRecords">
			<div class="record-title">{{ record.description }}</div>
			<div class="record-info">{{ record.amount }}积分 - {{ record.createTime }}</div>
			</div>
			</div>

			<div class="content" v-if="activeTab === 'exchanges'">
			<div class="record-item" v-for="exchange in exchangeRecords">
			<div class="record-title">{{ exchange.exchangeType }}</div>
			<div class="record-info">{{ exchange.exchangeValue }} - {{ exchange.createTime }}</div>
			</div>
			</div>

			<div class="alipay-container">
			<div class="alipay-title">支付宝绑定</div>
			<div class="alipay-info" v-if="alipayBinding">
			{{ alipayBinding.alipayName }} - {{ alipayBinding.alipayAccount }}
			</div>
			<div class="alipay-info" v-else>
			未绑定支付宝
			</div>
			<button class="btn" @click="bindAlipay">绑定支付宝</button>
			</div>
			</div>

			<script src="../js/vue.min.js"></script>
			<script src="../layui/layui.js"></script>
			<script src="../js/http.js"></script>
			<script>
			new Vue({
			el: '#app',
			data: {
			creditBalance: 0,
			creditRecords: [],
			exchangeRecords: [],
			alipayBinding: null,
			activeTab: 'records'
			},
			mounted() {
			this.loadCreditBalance();
			this.loadCreditRecords();
			this.loadExchangeRecords();
			this.loadAlipayBinding();
			},
			methods: {
			loadCreditBalance() {
			// 调用API获取积分余额
			http.get('/api/credit/balance').then(response => {
			this.creditBalance = response.data.balance;
			});
			},
			loadCreditRecords() {
			// 调用API获取积分记录
			http.get('/api/credit/records').then(response => {
			this.creditRecords = response.data.records;
			});
			},
			loadExchangeRecords() {
			// 调用API获取兑换记录
			http.get('/api/credit/exchanges').then(response => {
			this.exchangeRecords = response.data.records;
			});
			},
			loadAlipayBinding() {
			// 调用API获取支付宝绑定信息
			http.get('/api/alipay/binding').then(response => {
			this.alipayBinding = response.data.binding;
			});
			},
			bindAlipay() {
			// 跳转到支付宝绑定页面
			window.location.href = '/static/agent/alipay_account_setting.html';
			}
			}
			});
			</script>
			</body>

			</html>