<template>
  <view class="container">
    <view class="header">
      <text class="title">收银台</text>
    </view>
    <view class="content">
      <view class="input-area">
        <input 
          v-model="amount" 
          type="digit" 
          placeholder="请输入金额"
          class="amount-input"
        />
      </view>
      <button @click="createOrder" class="submit-btn">创建订单</button>
    </view>
  </view>
</template>

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

const amount = ref('')

const createOrder = () => {
  if (!amount.value) {
    uni.showToast({ title: '请输入金额', icon: 'none' })
    return
  }
  
  // TODO: 调用创建订单 API
  uni.showLoading({ title: '创建中...' })
  
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '创建成功', icon: 'success' })
    amount.value = ''
  }, 1000)
}
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.header {
  text-align: center;
  margin-bottom: 40rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.input-area {
  margin-bottom: 40rpx;
}

.amount-input {
  height: 80rpx;
  border: 2rpx solid #ddd;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 32rpx;
}

.submit-btn {
  background-color: #007AFF;
  color: white;
  border-radius: 8rpx;
}
</style>
