当前位置：首页 > VUE

vue实现atm

2026-01-11 21:34:32VUE

Vue实现ATM机功能

使用Vue实现一个简单的ATM机功能需要模拟存款、取款、查询余额等操作。以下是一个基于Vue 3的实现方案：

核心功能设计

创建Vue组件模拟ATM机界面，包含以下功能：

用户登录验证
余额查询
存款操作
取款操作
交易记录

组件代码实现

<template>
  <div class="atm-machine">
    <div v-if="!loggedIn" class="login-section">
      <h3>ATM登录</h3>
      <input v-model="cardNumber" placeholder="卡号" type="text">
      <input v-model="pin" placeholder="密码" type="password">
      <button @click="login">登录</button>
    </div>

    <div v-else class="atm-interface">
      <h3>欢迎，{{ currentUser.name }}</h3>
      <div class="balance">当前余额: {{ currentUser.balance }}元</div>

      <div class="actions">
        <button @click="showDeposit = true">存款</button>
        <button @click="showWithdraw = true">取款</button>
        <button @click="viewTransactions">查看交易记录</button>
        <button @click="logout">退出</button>
      </div>

      <div v-if="showDeposit" class="transaction-dialog">
        <h4>存款</h4>
        <input v-model.number="amount" type="number" placeholder="金额">
        <button @click="deposit">确认</button>
        <button @click="showDeposit = false">取消</button>
      </div>

      <div v-if="showWithdraw" class="transaction-dialog">
        <h4>取款</h4>
        <input v-model.number="amount" type="number" placeholder="金额">
        <button @click="withdraw">确认</button>
        <button @click="showWithdraw = false">取消</button>
      </div>

      <div v-if="showTransactions" class="transactions">
        <h4>交易记录</h4>
        <ul>
          <li v-for="(txn, index) in transactions" :key="index">
            {{ txn.type }}: {{ txn.amount }}元 - {{ txn.date }}
          </li>
        </ul>
        <button @click="showTransactions = false">关闭</button>
      </div>
    </div>
  </div>
</template>

JavaScript逻辑部分

<script>
import { ref } from 'vue';

export default {
  setup() {
    const cardNumber = ref('');
    const pin = ref('');
    const loggedIn = ref(false);
    const currentUser = ref(null);
    const showDeposit = ref(false);
    const showWithdraw = ref(false);
    const showTransactions = ref(false);
    const amount = ref(0);
    const transactions = ref([]);

    // 模拟用户数据
    const users = [
      { cardNumber: '123456', pin: '1234', name: '张三', balance: 1000 },
      { cardNumber: '654321', pin: '4321', name: '李四', balance: 2000 }
    ];

    const login = () => {
      const user = users.find(u => 
        u.cardNumber === cardNumber.value && u.pin === pin.value
      );

      if (user) {
        currentUser.value = { ...user };
        loggedIn.value = true;
        cardNumber.value = '';
        pin.value = '';
      } else {
        alert('卡号或密码错误');
      }
    };

    const logout = () => {
      loggedIn.value = false;
      currentUser.value = null;
      showDeposit.value = false;
      showWithdraw.value = false;
      showTransactions.value = false;
    };

    const deposit = () => {
      if (amount.value > 0) {
        currentUser.value.balance += amount.value;
        transactions.value.push({
          type: '存款',
          amount: amount.value,
          date: new Date().toLocaleString()
        });
        amount.value = 0;
        showDeposit.value = false;
      } else {
        alert('请输入有效金额');
      }
    };

    const withdraw = () => {
      if (amount.value > 0 && amount.value <= currentUser.value.balance) {
        currentUser.value.balance -= amount.value;
        transactions.value.push({
          type: '取款',
          amount: amount.value,
          date: new Date().toLocaleString()
        });
        amount.value = 0;
        showWithdraw.value = false;
      } else {
        alert('金额无效或余额不足');
      }
    };

    const viewTransactions = () => {
      showTransactions.value = true;
    };

    return {
      cardNumber,
      pin,
      loggedIn,
      currentUser,
      showDeposit,
      showWithdraw,
      showTransactions,
      amount,
      transactions,
      login,
      logout,
      deposit,
      withdraw,
      viewTransactions
    };
  }
};
</script>

样式设计

<style scoped>
.atm-machine {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #f5f5f5;
}

.login-section, .atm-interface {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.transaction-dialog, .transactions {
  margin-top: 20px;
  padding: 15px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.transactions ul {
  list-style-type: none;
  padding: 0;
}
</style>