老贵阳味道

src/Components/index/Position.vue

@@ -4,7 +4,7 @@
       <view @tap="choice(0)" class="option" :class="light2 === 0 ? 'light2' : ''">推荐</view>
       <view @tap="choice(1)" class="option" :class="light2 === 1 ? 'light2' : ''">行政区</view>
     </view>
-    <view class="right-details">
+    <view class="right-details" v-show="light2 === 0">
       <text class="nearby-title">我的附近</text>
       <view class="nearby-card">
         <view @tap="choice2(0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
@@ -25,6 +25,28 @@
         <li>喷水池</li>
       </ul>
     </view>
+    <view class="right-details2" v-show="light2 === 1">
+      <ul class="ul">
+        <li
+          v-for="(item, index) in items"
+          :key="index"
+          :class="{ active: selectedItem === index }"
+          @tap="selectItem(index)"
+        >
+          {{ item }}
+        </li>
+      </ul>
+      <ul class="ul">
+        <li
+          v-for="(item, index) in items2"
+          :key="index"
+          :class="{ active: selectedItem2 === index }"
+          @tap="selectItem2(index)"
+        >
+          {{ item }}
+        </li>
+      </ul>
+    </view>
   </view>
 </template>
 
@@ -32,13 +54,32 @@
 import {} from 'vue';
 const light2 = ref(0);
 const light3 = ref(0);
+const items = reactive(['云岩区', '白云区', '乌当区', '花溪区', '清镇市', '开阳县', '修文县']);
+const items2 = reactive([
+  '全部',
+  '百花新城',
+  '人民广场',
+  '天水花园',
+  '三角花园',
+  '中环国际',
+  '君悦国际',
+]);
 
+const selectedItem = ref(null);
+const selectedItem2 = ref(null);
 const choice = (index) => {
   light2.value = index;
 };
 const choice2 = (index) => {
   light3.value = index;
 };
+
+const selectItem = (selectItem) => {
+  selectedItem.value = selectItem;
+};
+const selectItem2 = (selectItem) => {
+  selectedItem2.value = selectItem;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -119,5 +160,22 @@ const choice2 = (index) => {
       }
     }
   }
+  .right-details2 {
+    width: calc(100% - 176rpx);
+    height: 100%;
+    display: flex;
+    .ul {
+      padding-left: 60rpx;
+      li {
+        list-style-type: none;
+        font-size: 22rpx;
+        color: #3d3d3d;
+        margin-top: 20rpx;
+      }
+      .active {
+        color: #fa5151;
+      }
+    }
+  }
 }
 </style>

src/pages.json

@@ -35,6 +35,12 @@
 			"style": {
 				"navigationBarTitleText": "套餐详情"
 			}
+		},
+		{
+			"path": "pages/index/listFood",
+			"style": {
+				"navigationBarTitleText": ""
+			}
 		}
 	],
 	"globalStyle": {

src/pages/index/index.vue

@@ -158,7 +158,12 @@ const locationFiltering = () => {
   rotate.value = !rotate.value;
 };
 const handleClick = (e) => {
-  console.log(e);
+  const index = e.index;
+  if (index === 0) {
+    xma.navigateTo({
+      url: '/pages/index/listFood',
+    });
+  }
 };
 const onChange = (e) => {
   console.log(e);

src/pages/index/listFood.vue

+<template>
+  <view class="container">
+    <view class="head">
+      <view class="top">
+        <wd-icon name="thin-arrow-left" class="icon" @tap="back"></wd-icon>
+      </view>
+      <view class="bootom">
+        <view class="bootom-top">
+          <view class="option">
+            <text class="">全部烧烤烤肉</text>
+            <wd-icon name="fill-arrow-down" size="24rpx" class="icon"></wd-icon>
+          </view>
+          <view class="option">
+            <text class="">附近</text>
+            <wd-icon name="fill-arrow-down" size="24rpx" class="icon"></wd-icon>
+          </view>
+          <view class="option">
+            <text class="">智能排序</text>
+            <wd-icon name="fill-arrow-down" size="24rpx" class="icon"></wd-icon>
+          </view>
+        </view>
+        <view class="bootom-bottom">
+          <view
+            @tap="choice(index)"
+            class="item"
+            :class="{ light: active === index }"
+            v-for="(item, index) in business"
+            :key="index"
+          >
+            {{ item }}
+          </view>
+        </view>
+      </view>
+    </view>
+    <FoodDetails :cardData="cardData" />
+  </view>
+</template>
+
+<script setup>
+import {} from 'vue';
+import FoodDetails from '../../components/index/FoodDetails.vue';
+
+const business = reactive(['优选商家', '超值半价', '今日可订', '经典单人']);
+
+const active = ref(null);
+const back = () => {
+  xma.navigateBack({
+    delta: 1,
+  });
+};
+const choice = (index) => {
+  active.value = index;
+};
+const cardData = reactive([
+  {
+    text: '测试',
+  },
+  {
+    text: '测试',
+  },
+  {
+    text: '测试',
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+page {
+  background: #f3f3f3;
+}
+.head {
+  width: 100%;
+  height: 480rpx;
+  .top {
+    height: 356rpx;
+    background: url('../../static/index/taste.png');
+    background-size: 100% 100%;
+    .icon {
+      font-size: 28rpx;
+      margin-top: 70rpx;
+      margin-left: 40rpx;
+      color: white;
+    }
+  }
+  .bootom {
+    height: 124rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    border-radius: 6rpx;
+    background: #ffffff;
+    .bootom-top {
+      display: flex;
+      align-items: center;
+      padding: 0 20rpx;
+      justify-content: space-between;
+      .option {
+        text {
+          font-size: 24rpx;
+          color: #343434;
+        }
+        .icon {
+          color: #d8d8d8;
+        }
+      }
+    }
+    .bootom-bottom {
+      display: flex;
+      align-items: center;
+      padding-left: 40rpx;
+      .item {
+        height: 36rpx;
+        width: 96rpx;
+        border-radius: 6rpx;
+        font-size: 20rpx;
+        text-align: center;
+        line-height: 36rpx;
+        color: #abaaaa;
+        background: #eeeeee;
+        margin-right: 20rpx;
+      }
+      .light {
+        color: #ff7c00;
+        background: #ffdcbb;
+      }
+    }
+  }
+}
+</style>

src/pages/order/detail.vue

@@ -10,9 +10,7 @@
         <div class="detail">请在2023年07月04前到店消费</div>
       </div>
 
-      <div>
-        
-      </div>
+      <div></div>
     </div>
   </div>
 </template>