用uni-app写一个美团的提交订单页面选项卡

好的，以下是一个简单的美团提交订单页面选项卡的示例代码，使用uni-app框架进行开发：

<template>
  <view class="container">
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ active: currentTab === 'delivery' }"
        @tap="onTabClick('delivery')"
      >
        <text class="tab-title">外卖配送</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'takeout' }"
        @tap="onTabClick('takeout')"
      >
        <text class="tab-title">自取</text>
      </view>
      <view
        class="tab-item"
        :class="{ active: currentTab === 'dinein' }"
        @tap="onTabClick('dinein')"
      >
        <text class="tab-title">堂食</text>
      </view>
    </view>
    <view class="tab-content">
      <view v-show="currentTab === 'delivery'">
        <!-- 外卖配送内容 -->
      </view>
      <view v-show="currentTab === 'takeout'">
        <!-- 自取内容 -->
      </view>
      <view v-show="currentTab === 'dinein'">
        <!-- 堂食内容 -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'delivery'
    };
  },
  methods: {
    onTabClick(tab) {
      this.currentTab = tab;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.tab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
}

.tab-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #999;
  border-bottom: 2rpx solid transparent;
}

.active {
  color: #ff5c4d;
  border-color: #ff5c4d;
}

.tab-content {
  flex: 1;
  padding: 20rpx;
}
</style>

该示例代码中使用了flex布局实现页面的排版，选项卡部分使用了`v-show`指令来控制不同内容的显示和隐藏，触发选项卡切换的事件使用了`@tap`指令绑定一个方法，在方法中更新`currentTab`变量的值。同时，使用了:class指令来动态控制选项卡的样式。

请注意，该示例代码只是一个简单的实现，具体的样式和功能可以根据需求进行修改和扩展。