Initial commit of akmon project

2026-01-20 08:04:15 +08:00
commit 77a2bab985
1309 changed files with 343305 additions and 0 deletions
--- a/pages/mall/nfc/student/nfc-pay.uvue
+++ b/pages/mall/nfc/student/nfc-pay.uvue
@@ -0,0 +1,452 @@
+<template>
+  <view class="nfc-pay">
+    <!-- NFC状态指示 -->
+    <view class="nfc-status" :class="{ 'active': nfcStatus === 'ready' }">
+      <image class="nfc-icon" src="/static/icons/nfc-large.png" />
+      <text class="status-text">{{ statusText }}</text>
+      <text class="status-desc">{{ statusDesc }}</text>
+    </view>
+
+    <!-- 支付信息 -->
+    <view class="payment-info" v-if="paymentAmount > 0">
+      <view class="amount-display">
+        <text class="currency">￥</text>
+        <text class="amount">{{ paymentAmount.toFixed(2) }}</text>
+      </view>
+      <text class="merchant-name">{{ merchantName }}</text>
+    </view>
+
+    <!-- 操作按钮 -->
+    <view class="action-buttons">
+      <button class="btn-primary" @click="enableNFC" v-if="nfcStatus === 'disabled'">
+        启用NFC
+      </button>
+      <button class="btn-secondary" @click="switchToQR" v-if="nfcStatus === 'ready'">
+        切换到扫码支付
+      </button>
+    </view>
+
+    <!-- 余额显示 -->
+    <view class="balance-display">
+      <text class="balance-label">当前余额</text>
+      <text class="balance-amount">￥{{ userBalance.toFixed(2) }}</text>
+    </view>
+
+    <!-- 最近交易 -->
+    <view class="recent-transactions" v-if="recentTransactions.length > 0">
+      <view class="section-title">最近交易</view>
+      <view class="transaction-item" v-for="item in recentTransactions" :key="item.id">
+        <view class="transaction-info">
+          <text class="merchant">{{ item.merchant }}</text>
+          <text class="time">{{ formatTime(item.time) }}</text>
+        </view>
+        <text class="amount">-￥{{ item.amount.toFixed(2) }}</text>
+      </view>
+    </view>
+
+    <!-- NFC支付动画 -->
+    <view class="nfc-animation" v-if="isPaymentProcessing">
+      <view class="ripple"></view>
+      <view class="ripple ripple-2"></view>
+      <view class="ripple ripple-3"></view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      nfcStatus: 'checking', // checking, disabled, ready, processing
+      paymentAmount: 0,
+      merchantName: '',
+      userBalance: 156.80,
+      isPaymentProcessing: false,
+      recentTransactions: [
+        {
+          id: 1,
+          merchant: '第一饭堂',
+          amount: 12.50,
+          time: new Date(Date.now() - 3600000)
+        },
+        {
+          id: 2,
+          merchant: '校园便利店',
+          amount: 8.80,
+          time: new Date(Date.now() - 7200000)
+        }
+      ]
+    }
+  },
+  computed: {
+    statusText() {
+      const statusMap = {
+        checking: '检查NFC状态...',
+        disabled: 'NFC未启用',
+        ready: '请将手机靠近读卡器',
+        processing: '支付处理中...'
+      }
+      return statusMap[this.nfcStatus] || ''
+    },
+    statusDesc() {
+      const descMap = {
+        checking: '正在检测设备NFC功能',
+        disabled: '请在设置中启用NFC功能',
+        ready: '保持手机靠近直到支付完成',
+        processing: '请勿移动手机'
+      }
+      return descMap[this.nfcStatus] || ''
+    }
+  },
+  onLoad(options) {
+    this.paymentAmount = parseFloat(options.amount || 0)
+    this.merchantName = options.merchant || ''
+    this.checkNFCStatus()
+  },
+  onShow() {
+    this.initNFCPayment()
+  },
+  onHide() {
+    this.stopNFCPayment()
+  },
+  methods: {
+    checkNFCStatus() {
+      // 检查NFC状态
+      // #ifdef APP-PLUS
+      plus.nfc.isAvailable((available) => {
+        if (available) {
+          plus.nfc.isEnabled((enabled) => {
+            this.nfcStatus = enabled ? 'ready' : 'disabled'
+          })
+        } else {
+          this.nfcStatus = 'disabled'
+          uni.showToast({
+            title: '设备不支持NFC',
+            icon: 'none'
+          })
+        }
+      })
+      // #endif
+      
+      // #ifndef APP-PLUS
+      // Web环境模拟
+      setTimeout(() => {
+        this.nfcStatus = 'ready'
+      }, 1000)
+      // #endif
+    },
+    enableNFC() {
+      // #ifdef APP-PLUS
+      plus.nfc.enable(() => {
+        this.nfcStatus = 'ready'
+        this.initNFCPayment()
+      }, (error) => {
+        uni.showToast({
+          title: '启用NFC失败',
+          icon: 'none'
+        })
+      })
+      // #endif
+    },
+    initNFCPayment() {
+      if (this.nfcStatus === 'ready') {
+        // 初始化NFC支付监听
+        this.startNFCListening()
+      }
+    },
+    startNFCListening() {
+      // #ifdef APP-PLUS
+      plus.nfc.addEventListener('tag', this.handleNFCTag)
+      // #endif
+    },
+    stopNFCPayment() {
+      // #ifdef APP-PLUS
+      plus.nfc.removeEventListener('tag', this.handleNFCTag)
+      // #endif
+    },
+    handleNFCTag(tag) {
+      if (this.paymentAmount <= 0) {
+        uni.showToast({
+          title: '无效的支付金额',
+          icon: 'none'
+        })
+        return
+      }
+      
+      this.processPayment(tag)
+    },
+    processPayment(tag) {
+      this.isPaymentProcessing = true
+      this.nfcStatus = 'processing'
+      
+      // 模拟支付处理
+      setTimeout(() => {
+        const success = Math.random() > 0.1 // 90% 成功率
+        
+        if (success) {
+          this.userBalance -= this.paymentAmount
+          this.addRecentTransaction()
+          
+          uni.showToast({
+            title: '支付成功',
+            icon: 'success'
+          })
+          
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 1500)
+        } else {
+          uni.showToast({
+            title: '支付失败，请重试',
+            icon: 'none'
+          })
+          this.nfcStatus = 'ready'
+        }
+        
+        this.isPaymentProcessing = false
+      }, 2000)
+    },
+    addRecentTransaction() {
+      this.recentTransactions.unshift({
+        id: Date.now(),
+        merchant: this.merchantName || '校园商户',
+        amount: this.paymentAmount,
+        time: new Date()
+      })
+      
+      if (this.recentTransactions.length > 5) {
+        this.recentTransactions.pop()
+      }
+    },
+    switchToQR() {
+      uni.navigateTo({
+        url: `/pages/mall/nfc/student/qr-code?amount=${this.paymentAmount}&merchant=${this.merchantName}`
+      })
+    },
+    formatTime(time) {
+      const now = new Date()
+      const diff = now - time
+      const minutes = Math.floor(diff / 60000)
+      
+      if (minutes < 1) return '刚刚'
+      if (minutes < 60) return `${minutes}分钟前`
+      
+      const hours = Math.floor(minutes / 60)
+      if (hours < 24) return `${hours}小时前`
+      
+      return time.toLocaleDateString()
+    }
+  }
+}
+</script>
+
+<style>
+.nfc-pay {
+  padding: 40rpx;
+  background-color: #f8f9fa;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.nfc-status {
+  background: white;
+  border-radius: 20rpx;
+  padding: 60rpx 40rpx;
+  margin-bottom: 40rpx;
+  text-align: center;
+  width: 100%;
+  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.nfc-status.active {
+  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
+  color: white;
+}
+
+.nfc-icon {
+  width: 120rpx;
+  height: 120rpx;
+  margin-bottom: 30rpx;
+}
+
+.status-text {
+  display: block;
+  font-size: 32rpx;
+  font-weight: bold;
+  margin-bottom: 16rpx;
+}
+
+.status-desc {
+  display: block;
+  font-size: 24rpx;
+  opacity: 0.8;
+}
+
+.payment-info {
+  background: white;
+  border-radius: 16rpx;
+  padding: 40rpx;
+  margin-bottom: 30rpx;
+  text-align: center;
+  width: 100%;
+}
+
+.amount-display {
+  display: flex;
+  justify-content: center;
+  align-items: baseline;
+  margin-bottom: 20rpx;
+}
+
+.currency {
+  font-size: 36rpx;
+  color: #333;
+  margin-right: 8rpx;
+}
+
+.amount {
+  font-size: 72rpx;
+  font-weight: bold;
+  color: #007AFF;
+}
+
+.merchant-name {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.action-buttons {
+  width: 100%;
+  margin-bottom: 30rpx;
+}
+
+.btn-primary, .btn-secondary {
+  width: 100%;
+  padding: 24rpx;
+  border-radius: 12rpx;
+  font-size: 32rpx;
+  border: none;
+  margin-bottom: 20rpx;
+}
+
+.btn-primary {
+  background: #007AFF;
+  color: white;
+}
+
+.btn-secondary {
+  background: white;
+  color: #007AFF;
+  border: 2rpx solid #007AFF;
+}
+
+.balance-display {
+  background: white;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.balance-label {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.balance-amount {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #28a745;
+}
+
+.recent-transactions {
+  background: white;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  width: 100%;
+}
+
+.section-title {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 20rpx;
+}
+
+.transaction-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+
+.transaction-item:last-child {
+  border-bottom: none;
+}
+
+.transaction-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.merchant {
+  font-size: 28rpx;
+  color: #333;
+  margin-bottom: 8rpx;
+}
+
+.time {
+  font-size: 24rpx;
+  color: #999;
+}
+
+.transaction-item .amount {
+  font-size: 28rpx;
+  color: #ff3b30;
+  font-weight: bold;
+}
+
+.nfc-animation {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.ripple {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 4rpx solid #007AFF;
+  animation: ripple 2s infinite;
+}
+
+.ripple-2 {
+  animation-delay: 0.5s;
+}
+
+.ripple-3 {
+  animation-delay: 1s;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0.3);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+</style>