用vue写一个外卖软件我的的页面

好的，外卖软件的页面一般包括以下几个模块：

1. 首页：展示推荐菜品、促销活动等信息。
2. 菜单：展示所有菜品，用户可以根据分类查找菜品。
3. 购物车：展示用户选择的菜品和总价，用户可以对菜品进行增删改操作。
4. 订单结算：展示用户选择的菜品、总价和配送信息，用户可以进行支付操作。
5. 个人中心：展示用户个人信息、历史订单等信息。

下面是一个简单的外卖软件页面的代码示例：

<template>
  <div>
    <!-- 首页 -->
    <div v-if="currentTab === 'home'">
      <h2>推荐菜品</h2>
      <ul>
        <li v-for="food in recommendedFoods">{{ food.name }}</li>
      </ul>
      <h2>促销活动</h2>
      <ul>
        <li v-for="promotion in promotions">{{ promotion.name }}</li>
      </ul>
    </div>

    <!-- 菜单 -->
    <div v-if="currentTab === 'menu'">
      <h2>菜单</h2>
      <ul>
        <li v-for="category in categories">
          <h3>{{ category.name }}</h3>
          <ul>
            <li v-for="food in category.foods">{{ food.name }}</li>
          </ul>
        </li>
      </ul>
    </div>

    <!-- 购物车 -->
    <div v-if="currentTab === 'cart'">
      <h2>购物车</h2>
      <ul>
        <li v-for="item in cartItems">{{ item.food.name }} x {{ item.quantity }}</li>
      </ul>
      <p>总价：{{ totalPrice }}</p>
    </div>

    <!-- 订单结算 -->
    <div v-if="currentTab === 'checkout'">
      <h2>订单结算</h2>
      <ul>
        <li v-for="item in cartItems">{{ item.food.name }} x {{ item.quantity }}</li>
      </ul>
      <p>总价：{{ totalPrice }}</p>
      <h3>配送信息</h3>
      <form>
        <label for="name">姓名</label>
        <input type="text" id="name" v-model="deliveryInfo.name">
        <br>
        <label for="phone">电话</label>
        <input type="text" id="phone" v-model="deliveryInfo.phone">
        <br>
        <label for="address">地址</label>
        <input type="text" id="address" v-model="deliveryInfo.address">
      </form>
      <button @click="placeOrder">立即支付</button>
    </div>

    <!-- 个人中心 -->
    <div v-if="currentTab === 'profile'">
      <h2>个人中心</h2>
      <p>用户名：{{ user.name }}</p>
      <p>历史订单：</p>
      <ul>
        <li v-for="order in orders">{{ order.id }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'home', // 当前选中的tab页
      recommendedFoods: [], // 推荐菜品
      promotions: [], // 促销活动
      categories: [], // 菜单分类
      cartItems: [], // 购物车中的菜品
      deliveryInfo: { name: '', phone: '', address: '' }, // 配送信息
      user: { name: '' }, // 用户信息
      orders: [], // 历史订单
    }
  },
  computed: {
    totalPrice() {
      // 计算购物车中所有菜品的总价
      return this.cartItems.reduce((total, item) => total + item.food.price * item.quantity, 0)
    },
  },
  methods: {
    placeOrder() {
      // 提交订单
      const order = {
        items: this.cartItems,
        totalPrice: this.totalPrice,
        deliveryInfo: this.deliveryInfo,
      }
      // 发送订单信息到后端API
      // ...
    },
  },
  created() {
    // 从后端API获取数据，初始化页面
    // ...
  },
}
</script>

以上代码仅供参考，具体实现根据需求和设计进行调整。