<template>
  <view class="container">
    <view class="header">
      <text class="title">欢迎光临</text>
    </view>
    <view class="content">
      <view class="menu-list">
        <view v-for="item in menuList" :key="item.id" class="menu-item" @click="goToDetail(item)">
          <image :src="item.image" class="menu-image" mode="aspectFill" />
          <text class="menu-name">{{ item.name }}</text>
          <text class="menu-price">¥{{ item.price }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

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

const menuList = ref([
  { id: 1, name: '招牌奶茶', price: '18.00', image: '/static/logo.png' },
  { id: 2, name: '美式咖啡', price: '22.00', image: '/static/logo.png' },
  { id: 3, name: '芝士蛋糕', price: '28.00', image: '/static/logo.png' }
])

const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/order/order?id=${item.id}`
  })
}
</script>

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

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

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

.menu-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.menu-item {
  width: calc(50% - 10rpx);
  background: #fff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.1);
}

.menu-image {
  width: 100%;
  height: 200rpx;
}

.menu-name {
  display: block;
  padding: 10rpx;
  font-size: 28rpx;
}

.menu-price {
  display: block;
  padding: 0 10rpx 10rpx;
  color: #ff0000;
  font-weight: bold;
}
</style>
