首页更新

src/Components/index/Position.vue

+<template>
+  <view class="pop-upNotification">
+    <view class="left-classification">
+      <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">
+      <text class="nearby-title">我的附近</text>
+      <view class="nearby-card">
+        <view @tap="choice2(0)" class="label" :class="light3 === 0 ? 'light3' : ''">附近</view>
+        <view @tap="choice2(1)" class="label" :class="light3 === 1 ? 'light3' : ''">500m</view>
+        <view @tap="choice2(2)" class="label" :class="light3 === 2 ? 'light3' : ''">1km</view>
+        <view @tap="choice2(3)" class="label" :class="light3 === 3 ? 'light3' : ''">3km</view>
+        <view @tap="choice2(4)" class="label" :class="light3 === 4 ? 'light3' : ''">5km</view>
+        <view @tap="choice2(5)" class="label" :class="light3 === 5 ? 'light3' : ''">10km</view>
+      </view>
+      <text class="nearby-title margin">热门地点</text>
+      <ul class="ul">
+        <li>花果园购物中心</li>
+        <li>世纪金源购物中心</li>
+        <li>鸿通城</li>
+        <li>花果园中环广场</li>
+        <li>万科大都会</li>
+        <li>喷水池</li>
+        <li>喷水池</li>
+      </ul>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import {} from 'vue';
+const light2 = ref(0);
+const light3 = ref(0);
+
+const choice = (index) => {
+  light2.value = index;
+};
+const choice2 = (index) => {
+  light3.value = index;
+};
+</script>
+
+<style lang="scss" scoped>
+.pop-upNotification {
+  position: absolute;
+  top: 100%;
+  width: 710rpx;
+  height: 780rpx;
+  border-radius: 0rpx 0rpx 16rpx 16rpx;
+  background: #ffffff;
+  box-shadow: 0rpx 16rpx 16rpx 0rpx rgba(73, 73, 73, 0.14);
+  margin: 0 auto;
+  z-index: 99;
+  display: flex;
+  .left-classification {
+    width: 176rpx;
+    background: #f1f1f1;
+    height: 100%;
+    .option {
+      text-align: center;
+      width: 100%;
+      height: 80rpx;
+      line-height: 80rpx;
+      font-size: 28rpx;
+      font-weight: 500;
+      color: #3d3d3d;
+    }
+    .light2 {
+      background: #fff;
+      color: #fa5151;
+    }
+  }
+  .right-details {
+    width: calc(100% - 176rpx);
+    height: 100%;
+    .nearby-title {
+      font-size: 24rpx;
+      color: #3d3d3d;
+      font-weight: 500;
+      font-family: Source Han Sans;
+      margin-left: 40rpx;
+    }
+    .margin {
+      display: block;
+      margin-top: 40rpx;
+    }
+    .nearby-card {
+      margin-top: 20rpx;
+      margin-left: 60rpx;
+      width: 448rpx;
+      height: 120rpx;
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      .label {
+        width: 136rpx;
+        height: 48rpx;
+        border-radius: 6rpx;
+        background: #f1f1f1;
+        font-size: 22rpx;
+        color: #abaaaa;
+        line-height: 48rpx;
+        text-align: center;
+        box-sizing: border-box;
+      }
+      .light3 {
+        background: #fcdbdb;
+        color: #fa5151;
+      }
+    }
+    .ul {
+      padding-left: 60rpx;
+      li {
+        list-style-type: none;
+        font-size: 22rpx;
+        color: #3d3d3d;
+        margin-top: 20rpx;
+      }
+    }
+  }
+}
+</style>

src/pages/index/index.vue

@@ -25,16 +25,28 @@
     <view class="redEnvelope">
       <view class="title">今日福利</view>
       <view class="box-red">
-        <view class="redBagBox"></view>
-        <view class="redBagBox"></view>
-        <view class="redBagBox"></view>
-        <view class="redBagBox"></view>
+        <view class="redBagBox" v-for="(item, index) in 4" :key="index">
+          <text class="textO">无门槛补贴</text>
+          <text class="textW">￥10</text>
+          <text class="textT">无门槛</text>
+          <view class="textF">领取</view>
+        </view>
       </view>
       <image class="discount" src="../../static/index/discount.png" mode="widthFix" />
     </view>
     <!-- 贵阳老味道 -->
-    <view class="guiyang"></view>
-    <!-- 附件美食 -->
+    <!-- <view class="guiyang"></view> -->
+    <wd-swiper
+      :list="swiperList"
+      autoplay
+      v-model:current="current"
+      @click="handleClick"
+      @change="onChange"
+      customClass="guiyang"
+      height="68"
+      imageMode="scaleToFill"
+    ></wd-swiper>
+    <!-- 附近人气美食 -->
     <view class="nearby">
       <view class="nearby-top">
         <view class="left">
@@ -68,15 +80,22 @@
         <text @tap="choice(4)" class="text" :class="light === 4 ? 'light' : ''">奶茶</text>
       </view>
       <view class="recommend-bottom">
-        <view class="box">
+        <view class="box" @tap="locationFiltering">
           <text class="text">位置距离</text>
-          <wd-icon name="fill-arrow-down" size="22rpx" class="icon"></wd-icon>
+          <wd-icon
+            name="fill-arrow-down"
+            size="22rpx"
+            class="icon"
+            :class="rotate ? 'rotate' : ''"
+          ></wd-icon>
         </view>
         <view class="box">
           <text class="text2">排序筛选</text>
           <wd-icon name="fill-arrow-down" size="22rpx" class="icon2"></wd-icon>
         </view>
       </view>
+      <!-- 位置定位 -->
+      <Position v-show="rotate" />
     </view>
     <!-- 美食卡片 -->
     <FoodDetails :cardData="cardData" />
@@ -98,12 +117,13 @@ import Search from '../../components/index/Search.vue';
 import FoodDetails from '../../components/index/FoodDetails.vue';
 import ShopCard from '../../components/index/ShopCard.vue';
 import Marketing from '../../components/index/Marketing.vue';
-
+import Position from '../../components/index/Position.vue';
 const title = ref('小程序平台');
 const { countInfo, addCount } = useCountStore();
 
 onMounted(() => {});
 const light = ref(0);
+const rotate = ref(false);
 const classificationT = reactive([
   { img: 'hotPot', text: '火锅' },
   { img: 'barbecue', text: '烧烤烤肉' },
@@ -128,16 +148,28 @@ const cardData = reactive([
     text: '测试',
   },
 ]);
+const current = ref(0);
+const swiperList = ref(['../../static/index/guiyang.png', '../../static/index/guiyang.png']);
 const choice = (index) => {
   light.value = index;
 };
-function toUIComponentsDoc() {
-  window.open('https://wot-design-uni.netlify.app/component/button.html');
-}
+const locationFiltering = () => {
+  console.log('打印', 1111);
+  rotate.value = !rotate.value;
+};
+const handleClick = (e) => {
+  console.log(e);
+};
+const onChange = (e) => {
+  console.log(e);
+};
+// function toUIComponentsDoc() {
+//   window.open('https://wot-design-uni.netlify.app/component/button.html');
+// }
 
-function onHandleClick() {
-  addCount();
-}
+// function onHandleClick() {
+//   addCount();
+// }
 </script>
 
 <style lang="scss" scoped>
@@ -238,6 +270,35 @@ page {
         height: 104rpx;
         background: url('../../static/index/redBag.png') no-repeat;
         background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // justify-content: space-evenly;
+        .textO {
+          font-size: 12rpx;
+          color: #fa5151;
+          margin-top: 5rpx;
+        }
+        .textW {
+          font-size: 24rpx;
+          color: #fa5151;
+          font-weight: 600;
+          font-family: Alimama FangYuanTi VF;
+        }
+        .textT {
+          font-size: 12rpx;
+          color: #fa5151;
+        }
+        .textF {
+          width: 56rpx;
+          height: 20rpx;
+          background: linear-gradient(180deg, #ffe7d1 0%, #ffc893 100%, #f1ba84 100%);
+          border-radius: 10rpx;
+          font-size: 12rpx;
+          color: #fa5151;
+          text-align: center;
+          margin-top: 10rpx;
+        }
       }
     }
     .discount {
@@ -250,11 +311,8 @@ page {
   }
   .guiyang {
     width: 710rpx;
-    height: 136rpx;
     margin: 0 auto;
     margin-top: 10rpx;
-    background: url('../../static/index/guiyang.png') no-repeat;
-    background-size: 100% 100%;
   }
   .nearby {
     width: 710rpx;
@@ -345,6 +403,7 @@ page {
     box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(0, 0, 0, 0.08);
     margin: 0 auto;
     margin-top: 10rpx;
+    position: relative;
     .tabs {
       padding-top: 20rpx;
       .text {
@@ -392,7 +451,12 @@ page {
           color: #908f8f;
         }
         .icon {
-          // transform: rotate(180deg);
+          transform: rotate(-180deg);
+          transition: all 0.3s linear;
+        }
+        .rotate {
+          transform: rotate(0deg);
+          transition: all 0.3s linear;
         }
         .icon2 {
           transform: rotate(180deg);