From 37fa7fab0575c7704d55c5e8e07fec4bf5b923c5 Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Tue, 30 Jul 2024 18:14:59 +0800
Subject: [PATCH] =?UTF-8?q?Refactor(=E9=A6=96=E9=A1=B5):=E6=94=B9=E7=89=88?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84-=E7=95=8C=E9=9D=A2=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/xdd-tabbar/index.vue  |  166 ++++
 pages.json                       |    4 +-
 pages/cart.vue                   |   12 +-
 pages/cloud/haveFun.vue          |   10 +-
 pages/home/index.vue             | 1233 +++++++++---------------------
 pages/home/index_bak20240730.vue | 1131 +++++++++++++++++++++++++++
 pages/user/User/index.vue        |   10 +-
 7 files changed, 1682 insertions(+), 884 deletions(-)
 create mode 100644 components/xdd-tabbar/index.vue
 create mode 100644 pages/home/index_bak20240730.vue

diff --git a/components/xdd-tabbar/index.vue b/components/xdd-tabbar/index.vue
new file mode 100644
index 0000000..258f398
--- /dev/null
+++ b/components/xdd-tabbar/index.vue
@@ -0,0 +1,166 @@
+<template>
+  <view
+    :style="{
+      'background-image': 'url(' + webUrl + '/home/tabbar-bg.png);'
+    }"
+    class="xdd-tabbar-wrap"
+  >
+    <view class="center-img" @click="switchTabFn('/pages/cloud/haveFun')">
+      <image
+        :src="webUrl + '/home/tabbar-center.png'"
+        class="img"
+      />
+    </view>
+    <view class="tabbar-list">
+      <view
+        v-for="(tabbarItem, tabbarIndex) in tabbar"
+        :key="tabbarIndex"
+        class="tabbar-item"
+      >
+        <view
+          v-for="(item, index) in tabbarItem"
+          :key="index"
+          :class="currIndex === item.index ? 'curr' : ''"
+          class="item"
+          @click="gotoPage(item.url, item.type, item.index)"
+        >
+          <view class="img-wrap">
+            <image
+              :src="currIndex === item.index ? item.onIcon : item.offIcon"
+              class="img"
+            />
+          </view>
+          <view class="name">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'XddTabbar',
+  props: {
+    currIndex: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      tabbar: [[
+        {
+          name: '首页',
+          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-on.png',
+          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-01-off.png',
+          url: '/pages/home/index',
+          type: 1,
+          index: 0
+        },
+        {
+          name: '消息',
+          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-on.png',
+          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-02-off.png',
+          url: '/pkg_common/views/roomLogs',
+          type: 2,
+          index: 1
+        }
+      ],[
+        {
+          name: '购物车',
+          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-on.png',
+          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-03-off.png',
+          url: '/pages/cart',
+          type: 1,
+          index: 2
+        },
+        {
+          name: '我的',
+          onIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-on.png',
+          offIcon: this.$VUE_APP_RESOURCES_URL + '/home/tabbar-04-off.png',
+          url: '/pages/user/User/index',
+          type: 1,
+          index: 3
+        }
+      ]]
+    }
+  },
+  methods: {
+    /**
+     * 跳转至目标页面
+     * type: 1-tabbar页面，2-非tabbar页面
+    */
+    gotoPage(url, type = 1, index) {
+      if (this.currIndex === index) return
+      if (type === 1) {
+        this.switchTabFn(url)
+      }
+      if (type === 2) {
+        uni.navigateTo({ url })
+      }
+    },
+    switchTabFn(url) {
+      uni.switchTab({ url })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.xdd-tabbar-wrap {
+  position: fixed;
+  bottom: 21rpx;
+  left: 21rpx;
+  right: 21rpx;
+  z-index: 99;
+  height: 164rpx;
+  background-size: 708rpx 164rpx;
+  background-repeat: no-repeat;
+  .center-img {
+    position: absolute;
+    top: -16rpx;
+    left: 50%;
+    z-index: 5;
+    transform: translateX(-50%);
+    .img {
+      width: 136rpx;
+      height: 136rpx;
+    }
+  }
+  .tabbar-list {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    justify-content: space-between;
+    padding: 70rpx 0 0 0;
+    .tabbar-item {
+      display: flex;
+      align-items: center;
+      width: calc(50% - 78rpx);
+      .img-wrap {
+        .img {
+          display: block;
+          width: 44rpx;
+          height: 44rpx;
+          margin: 0 auto;
+        }
+      }
+      .name {
+        padding: 10rpx 0 0 0;
+        text-align: center;
+        font-size: 24rpx;
+        color: #9a9a9a;
+      }
+      .item {
+        width: 140rpx;
+        &.curr {
+          .name {
+            color: #C52733;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/pages.json b/pages.json
index e61a01f..5121505 100644
--- a/pages.json
+++ b/pages.json
@@ -814,10 +814,10 @@
         "text": "首页"
       },
       {
-        "pagePath": "pages/home/landMark",
+        "pagePath": "pages/cloud/haveFun",
         "iconPath": "static/tabbar/icon-land.png",
         "selectedIconPath": "static/tabbar/icon-land-hot.png",
-        "text": "地标好物"
+        "text": "寻趣味"
       },
       {
         "pagePath": "pages/cart",
diff --git a/pages/cart.vue b/pages/cart.vue
index 240dd75..e4059db 100644
--- a/pages/cart.vue
+++ b/pages/cart.vue
@@ -3,7 +3,7 @@
     :style="{
       'padding-top': (statusBarHeight + 54) + 'px'
     }"
-    class="pages-cart"
+    class="pages-cart tabbar-page"
   >
     <u-navbar
       :left-icon="selectCount > 0 ? 'trash' : ''"
@@ -213,9 +213,11 @@
       v-else
       :show-avatar="false"
     />
+    <xdd-tabbar :curr-index="2" />
   </view>
 </template>
 <script>
+import XddTabbar from '@/components/xdd-tabbar'
 import {
   changeCartNum,
   getCartGroup,
@@ -227,7 +229,8 @@ import CheckboxIcon from '@/components/CheckboxIcon.vue'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 export default {
   components: {
-    CheckboxIcon
+    CheckboxIcon,
+    XddTabbar
   },
   mixins: [pageListenMixins],
   data() {
@@ -633,7 +636,7 @@ view {
 .footer-fixed {
   position: fixed;
   left: 0;
-  bottom: 0;
+  bottom: 180rpx;
   width: 100vw;
   height: 100rpx;
   box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.16);
@@ -770,4 +773,7 @@ view {
     }
   }
 }
+.tabbar-page {
+  padding: 0 0 180rpx 0;
+}
 </style>
\ No newline at end of file
diff --git a/pages/cloud/haveFun.vue b/pages/cloud/haveFun.vue
index 66ffb16..164abd6 100644
--- a/pages/cloud/haveFun.vue
+++ b/pages/cloud/haveFun.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="have-fun">
+  <view class="have-fun tabbar-page">
     <view class="top-box">
       <view class="search-box flex jc-between ai-center">
         <input
@@ -73,6 +73,7 @@
         :show-avatar="false"
       />
     </view>
+    <xdd-tabbar :curr-index="4" />
   </view>
 </template>
 <script>
@@ -80,9 +81,11 @@ import { getHotelList, getHotelTypeList } from "@/api/inn.js"
 import { getCurAddress, getLocation } from "@/utils/common"
 import FunHotelItem from './components/HotelItem'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import XddTabbar from '@/components/xdd-tabbar'
 export default {
   components: {
-    FunHotelItem
+    FunHotelItem,
+    XddTabbar
   },
   mixins: [pageListenMixins],
   data() {
@@ -291,4 +294,7 @@ export default {
     }
   }
 }
+.tabbar-page {
+  padding: 0 0 180rpx 0;
+}
 </style>
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 9f29ff8..0c2ff02 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -1,24 +1,19 @@
 <template>
-  <view class="index">
-
-    <view class="header  acea-row row-column row-left" style="position: absolute;left: 0;right: 0;"
-          :style="{top:statusBarHeight+'px'}">
-
-      <view class="acea-row row-middle row-right" style="position: relative;z-index: 1;">
-        <view style="position: relative;color: #FFF;margin-left: 20rpx;margin-right: 20rpx;"
-              class="acea-row  row-middle">
-          <image style="width: 36rpx;height: 36rpx;" :src="webUrl+'/20210616184302174394.png'" mode="">
-          </image>
-          <view style="margin-left: 10rpx;font-size: 28rpx;color: #fff;">客服</view>
-          <button class="cus-btn" open-type="contact"></button>
-        </view>
-      </view>
-    </view>
-
-    <view class="slider-banner" style="position: relative;">
-      <swiper style="height: 510rpx;" indicatorDots="true" indicator-color="rgba(255, 255, 255, .3)"
-              indicator-active-color="#ffffff" v-if="banner.length > 0" autoplay circular>
-        <block v-for="(item, bannerIndex) in banner" :key="bannerIndex">
+  <view class="tabbar-page">
+    <view class="slider-banner">
+      <swiper
+        v-if="banner.length > 0"
+        indicatorDots="true"
+        indicator-color="rgba(255, 255, 255, .3)"
+        indicator-active-color="#ffffff"
+        autoplay
+        circular
+        style="height: 510rpx;"
+      >
+        <block
+          v-for="(item, bannerIndex) in banner"
+          :key="bannerIndex"
+        >
           <swiper-item>
             <view @click="goRoll(item)" class="swiper-item">
               <image :src="item.pic"/>
@@ -26,209 +21,189 @@
           </swiper-item>
         </block>
       </swiper>
-
-      <view class="acea-row row-between row-middle"
-            style="flex-wrap: nowrap;position: absolute;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.6);padding: 10rpx 32rpx;">
-        <view class="news acea-row row-between-wrapper"
-              style="box-shadow: none !important;flex-grow: 1;flex-wrap: nowrap;background:transparent !important;border: none !important;margin: 0  30rpx  0 0 !important;padding: 0 !important;height: auto !important;">
-          <view class="swiper-no-swiping new-banner" style="height: 34rpx !important;text-align: right;">
-            <swiper class="swiper-wrapper" style="height: 34rpx !important;" v-if="userList.length > 0" :interval="3000"
-                    :indicator-dots="false" autoplay circular vertical>
-              <block v-for="(item, userIndex) in userList" :key="userIndex">
-                <swiper-item class="swiper-slide" style="height: 34rpx !important;">
-                  <view class="swiper-item acea-row row-middle" style="height: 34rpx !important;">
-                    <view class="newsTitle line1"
-                          style="color: #fff !important;font-size: 24rpx;text-align: left !important;">
-                      恭喜{{ item.nickname }} 抽中奖品{{ item.prizeName }}
-                    </view>
-                  </view>
-                </swiper-item>
-              </block>
-            </swiper>
-          </view>
-        </view>
-      </view>
-
     </view>
-
-    <view class="acea-row row-middle row-between" style="padding-top: 20rpx;background: #fff;">
-      <view @click="goGoodSearch()" class="search acea-row row-middle" style="flex-grow: 1;">
-        <text class="iconfont icon-xiazai5" style="color: #acacac;"></text>
-        搜索
-      </view>
-    </view>
-    <!-- 导航v9 -->
-    <view style="padding:24rpx 30rpx;background-color: #FFFFFF">
-      <u-scroll-list
-        :indicator="menus.length > 10"
-        :indicator-active-color="'#FF6666'"
-      >
-        <view v-for="n in menuArr[0].length" :key="n">
+    <view class="home-body">
+      <!-- 导航v9 -->
+      <view class="menus-wrap">
+        <view class="menus-bg" />
+        <view class="menus-list">
           <view
-            class="flex flex-col ai-center"
-            style="width: 138rpx;margin-bottom: 32rpx;"
-            @click="$global.commonJump(menuArr[0][n]['uniapp_url'])"
+            v-for="(item, index) in menus"
+            :key="index"
+            class="item flex flex-col ai-center"
+            @click="$global.commonJump(item.uniapp_url)"
           >
-            <image style="width: 86rpx;height: 86rpx" :src="menuArr[0][n]['pic']" mode="scaleToFill"/>
-            <view class="one-t tc" style="width: 100%;margin-top: 16rpx;color:#666666;font-size: 26rpx">
-              {{ menuArr[0][n]['name'] }}
+            <image
+              :src="item.pic"
+              mode="scaleToFill"
+              class="img"
+            />
+            <view class="one-t tc menu-name">
+              {{ item.name }}
             </view>
           </view>
-          <view
-            v-if="menuArr[1][n]"
-            class="flex flex-col ai-center"
-            style="width: 138rpx"
-            @click="$global.commonJump(menuArr[1][n]['uniapp_url'])"
+        </view>
+      </view>
+      <!-- 千县名品和地标好物 -->
+      <view class="land-famous-wrap">
+        <view class="pic-wrap">
+          <image
+            :src="webUrl + '/home/land-pic.png'"
+            mode="heightFix"
+            class="img"
+          />
+        </view>
+        <view class="pic-wrap">
+          <image
+            :src="webUrl + '/home/famous-pic.png'"
+            mode="heightFix"
+            class="img"
+          />
+        </view>
+      </view>
+      <!-- 导航v9end -->
+      <!-- v9 专题 -->
+      <view class="subject-box">
+        <view class="section-full flex jc-between">
+          <swiper
+            class="swiper"
+            circular
+            autoplay
+            :interval="3000"
           >
-            <image style="width: 86rpx;height: 86rpx" :src="menuArr[1][n]['pic']" mode="scaleToFill"/>
-            <view class="one-t tc" style="width: 100%;margin-top: 16rpx;color:#666666;font-size: 26rpx">
-              {{ menuArr[1][n]['name'] }}
-            </view>
-          </view>
-        </view>
-      </u-scroll-list>
-    </view>
-    <!-- 导航v9end -->
-
-    <!-- v4 预售专区开始 -->
-    <view class="pre-sale" v-if="preSaleList.length">
-      <image class="bg" :src="webUrl+'/20220519145831955075.png'" mode="scaleToFill" @click="goPreSale"></image>
-      <view class="list">
-        <view class="item" v-for="(item,index) in preSaleList" :key="index" @click="goGoodsConByProductID(item,'pre')">
-          <image :src="item.image" mode="scaleToFill"></image>
-          <view style="text-align: center;">{{ item.title }}</view>
-          <text>￥{{ item.price }}</text>
-        </view>
-      </view>
-    </view>
-    <!-- v4 预售专区结束 -->
-
-    <!-- v4 每天特价开始 -->
-    <view class="special-offer" v-if="dailyGoodsList.length">
-      <view class="header flex">
-        <view class="flex" style="align-items: center;">
-          <text class="title">每天特价</text>
-          <view class="date-box flex">
-            <image class="icon-date" :src="webUrl+'/20220521111703338325.png'" mode="scaleToFill"></image>
-            <view class="day">
-              <text>{{ date }}</text>
-              DAY
-            </view>
-            <view class="month">{{ month }}月</view>
-          </view>
-        </view>
-
-        <view class="more" @click="goOffer">查看更多
-          <uni-icons type="arrowright" color="#7C7C7C" size="14"/>
-        </view>
-      </view>
-
-      <view class="list flex">
-        <view class="item flex" v-for="(item,index) in dailyGoodsList" :key="index"
-              @click="goGoodsConByProductID(item,'day')">
-          <image class="top-img" :src="item.image" mode="scaleToFill"></image>
-
-          <view class="content">
-            <view class="title one-t">{{ item.title }}</view>
-            <view class="price flex">
-              <text class="red">￥{{ item.price }}</text>
-              <text class="gray"
-                    v-if="item.productPrice">￥{{ item.productPrice }}
-              </text>
-            </view>
-          </view>
-        </view>
-      </view>
-    </view>
-    <!-- v4 每天特价结束 -->
-
-    <!-- v9 专题 -->
-    <view class="subject-box">
-      <view class="section-half flex jc-between">
-        <image class="bg-img" :src="countyFamous.backgroundImage" mode="scaleToFill"
-               @click="$global.commonJump('/pkg_product/views/famousList')" v-if="countyFamous.backgroundImage"/>
-        <view class="food-box" @click="$global.commonJump('/pkg_product/views/seasonList')">
-          <image class="bg-img" :src="seasonalFood.backgroundImage" mode="scaleToFill"
-                 v-if="seasonalFood.backgroundImage"/>
-
-          <swiper class="swiper" circular autoplay :interval="3000">
-            <swiper-item v-for="(arr,arrIndex) in seasonalFood.groupList" :key="arrIndex">
-              <view class="flex">
-                <image :src="item.image" mode="scaleToFill" v-for="(item,index) in arr" :key="index"/>
-              </view>
+            <swiper-item
+              v-for="(stay, stayIndex) in contentHomestay"
+              :key="stayIndex"
+            >
+              <image
+                :src="stay.indexImage"
+                mode="scaleToFill"
+                @click="goHomeStay(stay)"
+              />
             </swiper-item>
           </swiper>
+          <image
+            v-if="contentFestival.indexImage"
+            :src="contentFestival.indexImage"
+            mode="scaleToFill"
+            @click="goFestival"
+          />
         </view>
       </view>
-      <view class="section-full flex jc-between">
-        <swiper class="swiper" circular autoplay :interval="3000">
-          <swiper-item v-for="(stay,stayIndex) in contentHomestay" :key="stayIndex">
-            <image :src="stay.indexImage" mode="scaleToFill" @click="goHomeStay(stay)"/>
-          </swiper-item>
-        </swiper>
-        <image :src="contentFestival.indexImage" mode="scaleToFill" @click="goFestival"
-               v-if="contentFestival.indexImage"/>
+      <!-- 2022/6/20 add 尖货推荐 -->
+      <view class="bast-box">
+        <view>
+          <image
+            :src="webUrl + '/20230407111908318221.png'"
+            class="bast-title"
+            mode="scaleToFill"
+          />
+        </view>
+        <view class="bast-list">
+          <view class="bast-list-left">
+            <view
+              v-for="(item,index) in bastLeftList"
+              :key="index"
+              class="item flex"
+            >
+              <template v-if="item.storeName === 'swiper'">
+                <swiper class="item bannar-swiper" autoplay circular>
+                  <swiper-item v-for="swipe in bannerList" :key="swipe">
+                    <image
+                      :src="swipe.pic"
+                      mode="aspectFit"
+                      @click="goGoodsConByProductID(swipe)"
+                    />
+                  </swiper-item>
+                </swiper>
+              </template>
+              <template v-else>
+                <image
+                  :src="item.image"
+                  class="top-img"
+                  mode="scaleToFill"
+                  @click="goGoodsCon(item)"
+                />
+                <view class="content" @click="goGoodsCon(item)">
+                  <view class="title more-t">{{ item.storeName }}</view>
+                  <view class="price flex">
+                    <text class="red">￥{{ item.price }}</text>
+                    <text
+                      v-if="item.productPrice"
+                      class="gray"
+                    >￥{{ item.productPrice }}
+                    </text>
+                  </view>
+                </view>
+              </template>
+            </view>
+          </view>
+          <view class="bast-list-right">
+            <view
+              v-for="(item,index) in bastRightList"
+              :key="index"
+              class="item flex"
+            >
+              <template v-if="item.storeName === 'swiper'">
+                <swiper class="item bannar-swiper" autoplay circular>
+                  <swiper-item v-for="swipe in bannerList" :key="swipe">
+                    <image
+                      :src="swipe.pic"
+                      mode="aspectFit"
+                      @click="goGoodsConByProductID(swipe)"
+                    />
+                  </swiper-item>
+                </swiper>
+              </template>
+              <template v-else>
+                <image
+                  :src="item.image"
+                  class="top-img"
+                  mode="scaleToFill"
+                  @click="goGoodsCon(item)"
+                />
+                <view class="content" @click="goGoodsCon(item)">
+                  <view class="title more-t">{{ item.storeName }}</view>
+                  <view class="price flex">
+                    <text class="red">￥{{ item.price }}</text>
+                    <text
+                      v-if="item.productPrice"
+                      class="gray"
+                    >￥{{ item.productPrice }}
+                    </text>
+                  </view>
+                </view>
+              </template>
+            </view>
+          </view>
+        </view>
       </view>
     </view>
-
     <!-- v9 老用户弹窗 -->
-    <u-popup :show="isOldUser" mode="center" bgColor="transparent">
+    <u-popup
+      :show="isOldUser"
+      mode="center"
+      bgColor="transparent"
+    >
       <view class="popup-old-user flex flex-col ai-center">
-        <image class="main" :src="oldUserPopup.image" mode="scaleToFill" @click="tapOld()"/>
-        <view class="icon-box flex jc-center ai-center" @click="changeOldPopup(false)">
-          <image :src="webUrl+'/20230608112219219303.png'" mode="scaleToFill"/>
+        <image
+          :src="oldUserPopup.image"
+          class="main"
+          mode="scaleToFill"
+          @click="tapOld()"
+        />
+        <view
+          class="icon-box flex jc-center ai-center"
+          @click="changeOldPopup(false)"
+        >
+          <image
+            :src="webUrl+'/20230608112219219303.png'"
+            mode="scaleToFill"
+          />
         </view>
       </view>
     </u-popup>
-
-    <!-- 2022/6/20 add 尖货推荐 special-offer-->
-    <view class="bast-box">
-      <view style="padding: 0 32rpx;background: #FFFFFF;">
-        <image class="bast-title" :src="webUrl+'/20230407111908318221.png'" mode="scaleToFill"/>
-      </view>
-      <view class="list flex" v-if="bastList.length">
-        <custom-waterfalls-flow :value="bastList" imageKey="image">
-          <view class="item flex" v-for="(item,index) in bastList" :key="index" slot="slot{{index}}">
-            <template v-if="item.storeName==='swiper'">
-              <swiper class="item bannar-swiper" autoplay circular>
-                <swiper-item v-for="swipe in bannerList" :key="swipe">
-                  <image :src="swipe.pic" mode="aspectFit" @click="goGoodsConByProductID(swipe)"/>
-                </swiper-item>
-              </swiper>
-            </template>
-            <template v-else>
-              <image class="top-img" :src="item.image" mode="scaleToFill" @click="goGoodsCon(item)"></image>
-              <view class="content" @click="goGoodsCon(item)">
-                <view class="title more-t">{{ item.storeName }}</view>
-                <view class="price flex">
-                  <text class="red">￥{{ item.price }}</text>
-                  <text class="gray"
-                        v-if="item.productPrice">￥{{ item.productPrice }}
-                  </text>
-                </view>
-              </view>
-            </template>
-          </view>
-        </custom-waterfalls-flow>
-      </view>
-    </view>
     <!-- 尖货推荐结束 -->
-
-    <!-- 最新通知消息开始 -->
-    <uni-popup ref="popup" type="center">
-      <view v-if="unReadMessageInfo" class="acea-row row-column row-middle"
-            style="position: relative;background-color: #fff;width: 440rpx;border-radius: 20rpx;">
-        <view class="msg_title">
-          {{ unReadMessageInfo.noticeTitle }}
-        </view>
-        <view class="msg_content">
-          <rich-text :nodes="unReadMessageInfo.noticeContent" />
-        </view>
-        <view class="msg_line"></view>
-        <view class="msg_btn" @click="msgConfirm">我知道了</view>
-      </view>
-    </uni-popup>
-    <!-- 通知消息结束 -->
     <u-back-top :scroll-top="scrollTop">
       <image
         :src="webUrl+'/icon/setTop.png'"
@@ -237,140 +212,49 @@
         @click="setTopHandle"
       />
     </u-back-top>
+    <xdd-tabbar :curr-index="0" />
   </view>
 </template>
 
 <script>
+import XddTabbar from '@/components/xdd-tabbar'
 import imgBox from '@/components/imageTypeSet/imagebox.vue'
 import { mapGetters } from 'vuex'
-import { getCouponReceive, noticeDetail, noticeList } from '@/api/user'
+import { getCouponReceive } from '@/api/user'
 import { getHomeData, getShareImage } from '@/api/public'
-import { getProducts } from '@/api/store'
 import { sharpBannar } from '@/api/goods'
-import NP from 'number-precision'
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 export default {
   name: 'IndexPage',
   components: {
-    imgBox
+    imgBox,
+    XddTabbar
   },
   mixins: [pageListenMixins],
   data() {
     return {
-      currentIndex: 0,
-      speed: 200,
-      seriesWidth: 400,
-      duration: 60000,
-      unReadMessageInfo: null,
       webUrl: this.$VUE_APP_RESOURCES_URL,
-      isLiving: true, //是否正在直播
-      showCoupon: false,
-      viewHeight: (750 * 3 / 4.0),
-      bslGoodsHeight: 750 * 3 / 4.0 + 'rpx',
       hotGoodsColumnWidth: '325rpx',
       bgImgHeight: '20px',
-      logoUrl: '',
-      innArray: [],
-      shopArray: [],
-      restaurantArray: [],
       banner: [],
       menus: [],
-      menuArr: [[], []],
-      roll: [],
       cityName: '',
-      activity: [],
-      groupGoods: [],
-      activityOne: {},
+      // 尖货
       bastList: [],
-      firstList: [],
-      userList: [],
-      newGoods: null,
-      companyName: '',
-      companyAddress: '',
-      companyTel: '',
-      companyLogo: '',
-      info: {
-        fastList: [],
-        bastBanner: [],
-        bastList: []
-      },
-      likeInfo: [],
-      lovely: [],
-      benefit: [],
-      couponList: [],
-      swiperOption: {
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: true
-        },
-        autoplay: {
-          disableOnInteraction: false,
-          delay: 2000
-        },
-        loop: true,
-        speed: 1000,
-        observer: true,
-        observeParents: true
-      },
-      swiperRoll: {
-        direction: 'vertical',
-        autoplay: {
-          disableOnInteraction: false,
-          delay: 2000
-        },
-        loop: true,
-        speed: 1000,
-        observer: true,
-        observeParents: true
-      },
-      swiperScroll: {
-        freeMode: true,
-        freeModeMomentum: false,
-        slidesPerView: 'auto',
-        observer: true,
-        observeParents: true
-      },
-      swiperBoutique: {
-        pagination: {
-          el: '.swiper-pagination',
-          clickable: true
-        },
-        autoplay: {
-          disableOnInteraction: false,
-          delay: 2000
-        },
-        loop: true,
-        speed: 1000,
-        observer: true,
-        observeParents: true
-      },
-      swiperProducts: {
-        freeMode: true,
-        freeModeMomentum: false,
-        slidesPerView: 'auto',
-        observer: true,
-        observeParents: true
-      },
-      liveList: [],
-      broadcastStyle2: {
-        speed: 100,
-        font_size: '32', //字体大小(rpx)
-        text_color: '#333', //字体颜色
-        back_color: 'red', //背景色
-      },
-      bslImglist: [],
+      // 尖货推荐左侧
+      bastLeftList: [],
+      // 尖货推荐右侧
+      bastRightList: [],
       statusBarHeight: 64,
-      dailyGoodsList: [], // 每日特价
-      preSaleList: [], // 预售商品
-      month: 0, // 每日特价:月
-      date: 0, // 每日特价：日
-      bannerList: [], // 尖货推荐横幅
-      shareAppImg: '', // 发送给朋友
-      isOldUser: true, // 老用户弹窗
+      // 尖货推荐横幅
+      bannerList: [],
+      // 分享图片
+      shareAppImg: '',
+      // 老用户弹窗
+      isOldUser: true,
       oldUserPopup: {},
-      contentHomestay: {},
+      contentHomestay: [],
       contentFestival: {},
-      countyFamous: {},
       seasonalFood: {},
       pageKeyId: Object.freeze('appIndex'),
       scrollTop: 0
@@ -378,9 +262,9 @@ export default {
   },
   computed: mapGetters(['userInfo', 'isLogin']),
   onLoad(options) {
+    uni.hideTabBar()
     const _this = this
     _this.init()
-    getShareImage().then(({ data }) => _this.shareAppImg = data)
     uni.getSystemInfo({
       success: (e) => {
         let statusBar = 0
@@ -402,18 +286,6 @@ export default {
     const today = new Date()
     this.month = today.getMonth() + 1
     this.date = today.getDate()
-    // 如果已经登录获取用户信息
-    if (this.isLogin) {
-      this.$store.dispatch('getUser', true)
-      // 获取最新一条消息
-      this.getUnreadMsgList()
-    }
-    // 获取团购商品
-    this.getGroupGoods()
-    // fix bug#1113
-    // if (this.bastList.length > 0) {
-    //   this.getBastList()
-    // }
   },
   onHide() {
     this.pageToHideHandle()
@@ -437,170 +309,33 @@ export default {
   methods: {
     init() {
       const _this = this
+      getShareImage().then(({ data }) => _this.shareAppImg = data)
       sharpBannar().then(response => {
         _this.bannerList = response.data.banner
         uni.showLoading({ title: '加载中' })
         getHomeData().then(res => {
           const { data } = res
-          _this.logoUrl = data.logoUrl
           _this.$set(_this, 'banner', data.banner)
-
           _this.$set(_this, 'menus', data.menus)
-          data.menus?.forEach((item, index) => {
-            if (index % 2 === 0) {
-              _this.menuArr[0].push(item)
-            } else {
-              _this.menuArr[1].push(item)
-            }
-          })
-
-          _this.$set(_this, 'roll', data.roll)
-          // 滚动会员信息
-          _this.$set(_this, 'userList', data.lotteryRecord)
-          _this.$set(_this, 'info', data.info)
-          _this.$set(_this, 'firstList', data.firstList.map((item) => {
-            item.price = _this.$force2Decimal(item.price)
-            // 如果已经登录获取用户信息
-            if (_this.$store.getters.token && _this.userInfo) {
-              const p = NP.times(item.price, NP.divide(parseFloat(_this.userInfo.discount), 100))
-              item.vipPrice = _this.$force2Decimal(p)
-            }
-            return item
-          }))
           _this.$set(_this, 'oldUserPopup', data.oldUserPopup)
           _this.$set(_this, 'contentHomestay', data.contentHomestay)
           _this.$set(_this, 'contentFestival', data.contentFestival)
-          _this.$set(_this, 'countyFamous', data.countyFamous)
-
-          // 处理时令尝鲜轮播图所需数据
-          const foodLen = data.seasonalFood.productsCarousels.length
-          const foods = data.seasonalFood.productsCarousels
-          const groupList = []
-          if (foodLen) {
-            const count = 4
-            for (let i = 0; i < foodLen; i += count) {
-              groupList.push(foods.slice(i, i + count))
-            }
-          }
-          data.seasonalFood.groupList = groupList
-          _this.$set(_this, 'seasonalFood', data.seasonalFood)
-
-          if (_this.firstList.length > 0) {
-            _this.newGoods = _this.firstList[0]
-          }
-
-          _this.$set(_this, 'likeInfo', data.likeInfo.map((item) => {
-            item.price = _this.$force2Decimal(item.price)
-            item.otPrice = _this.$force2Decimal(item.otPrice)
-            // 如果已经登录获取用户信息
-            if (_this.$store.getters.token && _this.userInfo) {
-              const p = NP.times(item.price, NP.divide(parseFloat(_this.userInfo.discount), 100))
-              item.vipPrice = _this.$force2Decimal(p)
-            }
-            return item
-          }))
-
-          setTimeout(() => {
-            // 伴手礼图片
-            const imgs = []
-            _this.likeInfo.forEach((item) => {
-              imgs.push(item.image)
-            })
-            _this.$set(_this, 'bslImglist', imgs)
-            _this.seriesWidth = 770 * imgs.length - 20
-            _this.duration = Math.floor(_this.seriesWidth / _this.speed * 1000)
-          }, 1)
-
+          _this.bastLeftList = []
+          _this.bastRightList = []
           for (let i = 0; i < data.bastList.length; i++) {
-            data.bastList[i].hide = true
+            if (i % 2 === 0) {
+              _this.bastLeftList.push(data.bastList[i])
+            }
+            if (i % 2 === 1) {
+              _this.bastRightList.push(data.bastList[i])
+            }
           }
-          _this.$set(_this, 'bastList', data.bastList)
-          _this.$set(_this, 'lovely', data.lovely)
-          _this.$set(_this, 'benefit', data.benefit)
-          _this.$set(_this, 'couponList', data.couponList)
-
-          _this.$set(_this, 'companyName', data.companyName)
-          _this.$set(_this, 'companyAddress', data.companyAddress)
-          _this.$set(_this, 'companyTel', data.companyTel)
-          _this.$set(_this, 'companyLogo', data.companyLogo)
-
-          _this.$set(_this, 'dailyGoodsList', data.dailyGoodsList)
-          _this.$set(_this, 'preSaleList', data.preSaleList)
           uni.hideLoading()
         }).catch(() => {
           uni.hideLoading()
         })
       })
     },
-    getBastList() {
-      getHomeData().then(res => {
-        const { success, data } = res
-        if (success) {
-          for (let i = 0; i < data.bastList.length; i++) {
-            data.bastList[i].hide = true
-          }
-          this.$set(that, 'bastList', data.bastList)
-        }
-      })
-    },
-    getGroupGoods() {
-      getProducts({
-        page: 1,
-        limit: 1,
-        sid: 19, //团购id=19
-        news: 0,
-        priceOrder: '',
-        salesOrder: ''
-      }).then(res => {
-        this.groupGoods = res.data
-      })
-    },
-    clickItem(data) {
-      this.goGoodsCon(data)
-    },
-    msgConfirm: function () {
-      this.$refs.popup.close()
-    },
-    goPreSale: function () {
-      this.$yrouter.push('/v4/views/preSale/preSale')
-    },
-    goOffer: function () {
-      this.$yrouter.push('/v4/views/offer/offer')
-    },
-    setMsgReaded(mid) {
-      noticeDetail({ id: mid })
-    },
-    getUnreadMsgList() {
-      noticeList({
-        limit: 10,
-        page: 1
-      }).then(res => {
-        if (res.data && res.data.length > 0) {
-          const msg = res.data[0]
-          if (msg.readFlag == 'RF0') {
-            this.unReadMessageInfo = msg
-            this.$refs.popup.open()
-            this.setMsgReaded(msg.id)
-          }
-        }
-      })
-    },
-    call() {
-      if (this.companyTel != undefined && this.companyTel.length > 0) {
-        uni.makePhoneCall({
-          // 手机号
-          phoneNumber: this.companyTel,
-          // 成功回调
-          success: (res) => {
-          },
-          // 失败回调
-          fail: (res) => {
-          }
-        });
-      } else {
-        this.$dialog.error('电话为空')
-      }
-    },
     goRoll(item) {
       if (item.uniapp_url) {
         this.$yrouter.push(item.uniapp_url)
@@ -700,267 +435,101 @@ export default {
 </script>
 
 <style scoped lang="less">
-.index {
-  background-color: #F5F5FA;
-
-  .header {
-    height: auto !important;
-    background-color: transparent !important;
+.swiper-item {
+  height: 100%;
+}
+.slider-banner {
+  position: relative;
+  z-index: 2;
+  width: auto !important;
+  -webkit-transform: rotate(0);
+}
+.subject-box {
+  padding: 12rpx;
+  margin: 21rpx 0 0 0;
+  border-radius: 20rpx;
+  background: #fff;
+  image {
+    vertical-align: middle;
   }
-
-  .header {
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .header .paper-cuts-img {
-    position: absolute;
-    width: 159*2rpx;
-    height: 159*2rpx;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    margin: auto;
-    z-index: 0;
-  }
-
-  .swiper-item {
-    height: 100%;
-  }
-
-  .slider-banner {
-    -webkit-transform: rotate(0);
-    width: auto !important;
-  }
-
-  .search {
-    -webkit-box-flex: 1;
-    -webkit-flex: 1;
-    flex: 1;
-    box-sizing: border-box;
-    height: 64rpx;
-    background-color: #F5F5F5;
-    padding: 0 28rpx;
-    font-size: 28rpx;
-    color: #acacac;
-    border-radius: 32rpx;
-    margin: 0 30rpx;
-  }
-
-  .news {
-    margin: 0rpx 30rpx !important;
-    border-radius: 8rpx !important;
-    background: #f7f7f7 !important;
-    border: none !important;
-    padding: 0 !important;
-  }
-
-  .news .new-banner .text .newsTitle {
-    color: #666666 !important;
-  }
-
-  .cus-btn {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: transparent !important;
-  }
-
-  .cus-btn::after {
-    border: none !important;
-  }
-
-  .msg_title {
-    font-size: 0.36*100rpx;
-    font-weight: bold;
-    color: rgba(8, 15, 26, 1);
-    margin-top: 20rpx;
-  }
-
-  .msg_line {
-    background-color: #f3f3f3;
-    height: 1px;
-    width: 100%;
-    margin-top: 20rpx;
-  }
-
-  .msg_content {
-    padding: 0.1*100rpx;
-    color: #080F1A;
-    font-size: 0.32*100rpx;
-  }
-
-  .msg_btn {
-    padding: 10rpx;
-    font-size: 34rpx;
-    color: #38afef;
-    margin-top: 20rpx;
-    margin-bottom: 20rpx;
-  }
-
-
-  .pre-sale {
-    position: relative;
-    width: 686rpx;
-    height: 440rpx;
-    margin: 0 auto;
-
-    .bg {
-      width: 100%;
-      height: 100%;
+  .section-full {
+    image {
+      width: 336rpx;
+      height: 480rpx;
+      border-radius: 20rpx;
     }
-
-    .list {
-      display: flex;
-      flex-wrap: nowrap;
-      position: absolute;
-      bottom: 36rpx;
-      width: 100%;
-      padding: 0 14rpx;
-      box-sizing: border-box;
-
-      .item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 0 10rpx;
-
-        image {
-          width: 200rpx;
-          height: 200rpx;
-          border-radius: 8rpx;
-        }
-
-        view {
-          width: 200rpx;
-          margin: 4rpx 0 12rpx;
-          color: #333;
-          font-size: 24rpx;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        text {
-          display: inline-block;
-          padding: 2rpx 15rpx;
-          border-radius: 18rpx;
-          background: #ED0F0F;
-          color: #fff;
-          font-size: 24rpx;
-        }
-      }
+    .swiper {
+      width: 336rpx;
+      height: 480rpx;
+      border-radius: 20rpx;
+      overflow: hidden;
     }
   }
-
-  // 每天特价
-  .special-offer {
+}
+.popup-old-user {
+  image {
+    vertical-align: middle;
+  }
+  .main {
+    width: 560rpx;
+    height: 840rpx;
+    border-radius: 40rpx;
+  }
+  .icon-box {
+    width: 96rpx;
+    height: 96rpx;
     margin-top: 40rpx;
-
-    .flex {
-      display: flex;
+    background: rgba(51, 51, 51, .4);
+    border-radius: 50%;
+    image {
+      width: 40rpx;
+      height: 40rpx;
     }
-
-    .header {
-      justify-content: space-between;
-      align-items: center;
-
-      .title {
-        margin-right: 8rpx;
-        color: #333;
-        line-height: 48rpx;
-        font-size: 32rpx;
-        font-weight: bold;
+  }
+}
+.bast-box {
+  .bast-title {
+    width: 312rpx;
+    height: 40rpx;
+    margin: 21rpx 0 21rpx 0;
+  }
+  .bannar-swiper {
+    height: 534rpx;
+    image {
+      width: 332rpx;
+      height: 534rpx;
+    }
+  }
+  .bast-list {
+    display: flex;
+    justify-content: space-between;
+    .bast-list-left,
+    .bast-list-right {
+      width: calc(50% - 11rpx);
+    }
+    .item {
+      position: relative;
+      flex-direction: column;
+      border-radius: 20rpx;
+      margin: 21rpx 0 0 0;
+      background: #fff;
+      overflow: hidden;
+      .top-img {
+        width: 343rpx;
+        height: 343rpx;
       }
-
-      .icon-date {
-        width: 40rpx;
-        height: 40rpx;
-      }
-
-      .date-box {
-        align-items: center;
-        padding: 8rpx;
-        background: #fff;
-        border-radius: 8px;
-
-        .day {
-          color: #494949;
-          font-size: 40rpx;
-          font-weight: bold;
-
-          text {
-            color: #FF1200;
-          }
-        }
-
-        .month {
-          height: 32rpx;
-          margin-left: 12rpx;
-          padding-left: 6rpx;
-          border-left: 2rpx solid #DDDDDD;
-          color: #999999;
+      .content {
+        box-sizing: border-box;
+        padding: 10rpx 10rpx 20rpx;
+        .title {
+          color: #333;
           font-size: 28rpx;
         }
-      }
-
-      .more {
-        margin-top: 8rpx;
-        color: #7C7C7C;
-        font-size: 24rpx;
-      }
-    }
-
-    .list {
-      flex-wrap: wrap;
-      justify-content: space-between;
-      padding: 0 32rpx 40rpx;
-
-      .item {
-        position: relative;
-        flex-direction: column;
-        width: 328rpx;
-        margin-top: 20rpx;
-        background: #fff;
-
-        .top-img {
-          flex-shrink: 0;
-          width: 328rpx;
-          height: 328rpx;
-        }
-
-        .icon-fire {
-          width: 24rpx;
-          height: 24rpx;
-        }
-
-        .title {
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-          overflow: hidden;
-          margin: 10rpx 12rpx 10rpx 10rpx;
-          font-size: 26rpx;
-          font-weight: bold;
-          line-height: 38rpx;
-          color: #333333;
-        }
-
         .price {
-          align-items: center;
-          margin-left: 10rpx;
-          padding-bottom: 10rpx;
-
+          font-size: 32rpx;
           .red {
-            font-size: 26rpx;
-            font-weight: bold;
-            line-height: 38rpx;
-            color: #ED0F0F;
+            color: #DA0000;
           }
-
           .gray {
             margin-left: 16rpx;
             text-decoration: line-through;
@@ -969,163 +538,75 @@ export default {
             color: #C2C5CC;
           }
         }
-
-        .shop {
-          position: absolute;
-          bottom: 0;
-          justify-content: space-between;
-          align-items: center;
-          width: 100%;
-          box-sizing: border-box;
-          padding: 6rpx 12rpx 18rpx 10rpx;
-          border: 1rpx solid #EFEFEF;
-          font-size: 22rpx;
-          line-height: 32rpx;
-          color: #333333;
-        }
-      }
-    }
-  }
-
-  .subject-box {
-    padding: 0 32rpx 40rpx;
-    background: #FFFFFF;
-
-    image {
-      vertical-align: middle;
-    }
-
-    .section-half {
-      margin-bottom: 16rpx;
-
-      .bg-img {
-        width: 336rpx;
-        height: 180rpx;
-      }
-
-      .food-box {
-        position: relative;
-        width: 336rpx;
-        height: 180rpx;
-        overflow: hidden;
-
-        .swiper {
-          position: absolute;
-          left: 20rpx;
-          bottom: 20rpx;
-          width: 296rpx;
-          height: 72rpx;
-          overflow: hidden;
-          z-index: 10;
-
-          image {
-            width: 72rpx;
-            height: 72rpx;
-            margin-right: 4rpx;
-            border-radius: 4rpx;
-          }
-
-          image:last-child {
-            margin-right: 0;
-          }
-        }
-      }
-    }
-
-    .section-full {
-      image {
-        width: 336rpx;
-        height: 480rpx;
-      }
-
-      .swiper {
-        width: 336rpx;
-        height: 480rpx;
-      }
-    }
-  }
-
-  .popup-old-user {
-    image {
-      vertical-align: middle;
-    }
-
-    .main {
-      width: 560rpx;
-      height: 840rpx;
-      border-radius: 40rpx;
-    }
-
-    .icon-box {
-      width: 96rpx;
-      height: 96rpx;
-      margin-top: 40rpx;
-      background: rgba(51, 51, 51, .4);
-      border-radius: 50%;
-
-      image {
-        width: 40rpx;
-        height: 40rpx;
-      }
-    }
-  }
-
-  .bast-box {
-    .bast-title {
-      width: 312rpx;
-      height: 40rpx;
-      margin: 16rpx 0 16rpx;
-    }
-
-    .bannar-swiper {
-      height: 534rpx;
-
-      image {
-        width: 332rpx;
-        height: 534rpx;
-      }
-    }
-
-    .list {
-      padding: 32rpx;
-
-      .item {
-        position: relative;
-        flex-direction: column;
-        background: #fff;
-
-        .top-img {
-          width: 332rpx;
-          height: 332rpx;
-        }
-
-        .content {
-          box-sizing: border-box;
-          padding: 10rpx 10rpx 20rpx;
-
-          .title {
-            color: #333;
-            font-size: 28rpx;
-          }
-
-          .price {
-            font-size: 32rpx;
-
-            .red {
-              color: #DA0000;
-            }
-
-            .gray {
-              margin-left: 16rpx;
-              text-decoration: line-through;
-              font-size: 20rpx;
-              line-height: 30rpx;
-              color: #C2C5CC;
-            }
-          }
-        }
       }
     }
   }
 }
+.tabbar-page {
+  padding: 0 0 180rpx 0;
+  background-color: #F0F0F0;
+}
+.home-body {
+  position: relative;
+  z-index: 5;
+  padding: 21rpx 21rpx 0 21rpx;
+}
+.menus-wrap {
+  position: relative;
+  .menus-list {
+    position: relative;
+    z-index: 5;
+    display: flex;
+    flex-shrink: 0;
+    padding: 12rpx 24rpx;
+    margin: -120rpx 0 0 0;
+    border-radius: 16rpx;
+    background-color: #fff;
+    overflow-x: auto;
+    .item + .item {
+      margin: 0 0 0 36rpx;
+    }
+    .item {
+      width: 150rpx;
+      .img {
+        width: 86rpx;
+        height: 86rpx;
+      }
+      .menu-name {
+        margin: 16rpx 0 0 0;
+        color: #666;
+        font-size: 26rpx;
+      }
+    }
+  }
+  .menus-bg {
+    position: absolute;
+    top: 0;
+    left: -21rpx;
+    z-index: 2;
+    width: calc(100% + 42rpx);
+    height: 180rpx;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F0F0F0 40%, #F0F0F0 100%);
+    content: " ";
+  }
+}
+.land-famous-wrap {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: space-between;
+  padding: 20rpx;
+  margin: 21rpx 0 0 0;
+  border-radius: 16rpx;
+  background: linear-gradient(180deg, #F3E7D1 0%, #F3E8D6 100%);
+  .pic-wrap {
+    .img + .img {
+      margin: 0 0 0 20rpx;
+    }
+    .img {
+      display: block;
+      height: 188rpx;
+    }
+  }
+}
 </style>
\ No newline at end of file
diff --git a/pages/home/index_bak20240730.vue b/pages/home/index_bak20240730.vue
new file mode 100644
index 0000000..9f29ff8
--- /dev/null
+++ b/pages/home/index_bak20240730.vue
@@ -0,0 +1,1131 @@
+<template>
+  <view class="index">
+
+    <view class="header  acea-row row-column row-left" style="position: absolute;left: 0;right: 0;"
+          :style="{top:statusBarHeight+'px'}">
+
+      <view class="acea-row row-middle row-right" style="position: relative;z-index: 1;">
+        <view style="position: relative;color: #FFF;margin-left: 20rpx;margin-right: 20rpx;"
+              class="acea-row  row-middle">
+          <image style="width: 36rpx;height: 36rpx;" :src="webUrl+'/20210616184302174394.png'" mode="">
+          </image>
+          <view style="margin-left: 10rpx;font-size: 28rpx;color: #fff;">客服</view>
+          <button class="cus-btn" open-type="contact"></button>
+        </view>
+      </view>
+    </view>
+
+    <view class="slider-banner" style="position: relative;">
+      <swiper style="height: 510rpx;" indicatorDots="true" indicator-color="rgba(255, 255, 255, .3)"
+              indicator-active-color="#ffffff" v-if="banner.length > 0" autoplay circular>
+        <block v-for="(item, bannerIndex) in banner" :key="bannerIndex">
+          <swiper-item>
+            <view @click="goRoll(item)" class="swiper-item">
+              <image :src="item.pic"/>
+            </view>
+          </swiper-item>
+        </block>
+      </swiper>
+
+      <view class="acea-row row-between row-middle"
+            style="flex-wrap: nowrap;position: absolute;left: 0;bottom: 0;right: 0;background: rgba(0,0,0,0.6);padding: 10rpx 32rpx;">
+        <view class="news acea-row row-between-wrapper"
+              style="box-shadow: none !important;flex-grow: 1;flex-wrap: nowrap;background:transparent !important;border: none !important;margin: 0  30rpx  0 0 !important;padding: 0 !important;height: auto !important;">
+          <view class="swiper-no-swiping new-banner" style="height: 34rpx !important;text-align: right;">
+            <swiper class="swiper-wrapper" style="height: 34rpx !important;" v-if="userList.length > 0" :interval="3000"
+                    :indicator-dots="false" autoplay circular vertical>
+              <block v-for="(item, userIndex) in userList" :key="userIndex">
+                <swiper-item class="swiper-slide" style="height: 34rpx !important;">
+                  <view class="swiper-item acea-row row-middle" style="height: 34rpx !important;">
+                    <view class="newsTitle line1"
+                          style="color: #fff !important;font-size: 24rpx;text-align: left !important;">
+                      恭喜{{ item.nickname }} 抽中奖品{{ item.prizeName }}
+                    </view>
+                  </view>
+                </swiper-item>
+              </block>
+            </swiper>
+          </view>
+        </view>
+      </view>
+
+    </view>
+
+    <view class="acea-row row-middle row-between" style="padding-top: 20rpx;background: #fff;">
+      <view @click="goGoodSearch()" class="search acea-row row-middle" style="flex-grow: 1;">
+        <text class="iconfont icon-xiazai5" style="color: #acacac;"></text>
+        搜索
+      </view>
+    </view>
+    <!-- 导航v9 -->
+    <view style="padding:24rpx 30rpx;background-color: #FFFFFF">
+      <u-scroll-list
+        :indicator="menus.length > 10"
+        :indicator-active-color="'#FF6666'"
+      >
+        <view v-for="n in menuArr[0].length" :key="n">
+          <view
+            class="flex flex-col ai-center"
+            style="width: 138rpx;margin-bottom: 32rpx;"
+            @click="$global.commonJump(menuArr[0][n]['uniapp_url'])"
+          >
+            <image style="width: 86rpx;height: 86rpx" :src="menuArr[0][n]['pic']" mode="scaleToFill"/>
+            <view class="one-t tc" style="width: 100%;margin-top: 16rpx;color:#666666;font-size: 26rpx">
+              {{ menuArr[0][n]['name'] }}
+            </view>
+          </view>
+          <view
+            v-if="menuArr[1][n]"
+            class="flex flex-col ai-center"
+            style="width: 138rpx"
+            @click="$global.commonJump(menuArr[1][n]['uniapp_url'])"
+          >
+            <image style="width: 86rpx;height: 86rpx" :src="menuArr[1][n]['pic']" mode="scaleToFill"/>
+            <view class="one-t tc" style="width: 100%;margin-top: 16rpx;color:#666666;font-size: 26rpx">
+              {{ menuArr[1][n]['name'] }}
+            </view>
+          </view>
+        </view>
+      </u-scroll-list>
+    </view>
+    <!-- 导航v9end -->
+
+    <!-- v4 预售专区开始 -->
+    <view class="pre-sale" v-if="preSaleList.length">
+      <image class="bg" :src="webUrl+'/20220519145831955075.png'" mode="scaleToFill" @click="goPreSale"></image>
+      <view class="list">
+        <view class="item" v-for="(item,index) in preSaleList" :key="index" @click="goGoodsConByProductID(item,'pre')">
+          <image :src="item.image" mode="scaleToFill"></image>
+          <view style="text-align: center;">{{ item.title }}</view>
+          <text>￥{{ item.price }}</text>
+        </view>
+      </view>
+    </view>
+    <!-- v4 预售专区结束 -->
+
+    <!-- v4 每天特价开始 -->
+    <view class="special-offer" v-if="dailyGoodsList.length">
+      <view class="header flex">
+        <view class="flex" style="align-items: center;">
+          <text class="title">每天特价</text>
+          <view class="date-box flex">
+            <image class="icon-date" :src="webUrl+'/20220521111703338325.png'" mode="scaleToFill"></image>
+            <view class="day">
+              <text>{{ date }}</text>
+              DAY
+            </view>
+            <view class="month">{{ month }}月</view>
+          </view>
+        </view>
+
+        <view class="more" @click="goOffer">查看更多
+          <uni-icons type="arrowright" color="#7C7C7C" size="14"/>
+        </view>
+      </view>
+
+      <view class="list flex">
+        <view class="item flex" v-for="(item,index) in dailyGoodsList" :key="index"
+              @click="goGoodsConByProductID(item,'day')">
+          <image class="top-img" :src="item.image" mode="scaleToFill"></image>
+
+          <view class="content">
+            <view class="title one-t">{{ item.title }}</view>
+            <view class="price flex">
+              <text class="red">￥{{ item.price }}</text>
+              <text class="gray"
+                    v-if="item.productPrice">￥{{ item.productPrice }}
+              </text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <!-- v4 每天特价结束 -->
+
+    <!-- v9 专题 -->
+    <view class="subject-box">
+      <view class="section-half flex jc-between">
+        <image class="bg-img" :src="countyFamous.backgroundImage" mode="scaleToFill"
+               @click="$global.commonJump('/pkg_product/views/famousList')" v-if="countyFamous.backgroundImage"/>
+        <view class="food-box" @click="$global.commonJump('/pkg_product/views/seasonList')">
+          <image class="bg-img" :src="seasonalFood.backgroundImage" mode="scaleToFill"
+                 v-if="seasonalFood.backgroundImage"/>
+
+          <swiper class="swiper" circular autoplay :interval="3000">
+            <swiper-item v-for="(arr,arrIndex) in seasonalFood.groupList" :key="arrIndex">
+              <view class="flex">
+                <image :src="item.image" mode="scaleToFill" v-for="(item,index) in arr" :key="index"/>
+              </view>
+            </swiper-item>
+          </swiper>
+        </view>
+      </view>
+      <view class="section-full flex jc-between">
+        <swiper class="swiper" circular autoplay :interval="3000">
+          <swiper-item v-for="(stay,stayIndex) in contentHomestay" :key="stayIndex">
+            <image :src="stay.indexImage" mode="scaleToFill" @click="goHomeStay(stay)"/>
+          </swiper-item>
+        </swiper>
+        <image :src="contentFestival.indexImage" mode="scaleToFill" @click="goFestival"
+               v-if="contentFestival.indexImage"/>
+      </view>
+    </view>
+
+    <!-- v9 老用户弹窗 -->
+    <u-popup :show="isOldUser" mode="center" bgColor="transparent">
+      <view class="popup-old-user flex flex-col ai-center">
+        <image class="main" :src="oldUserPopup.image" mode="scaleToFill" @click="tapOld()"/>
+        <view class="icon-box flex jc-center ai-center" @click="changeOldPopup(false)">
+          <image :src="webUrl+'/20230608112219219303.png'" mode="scaleToFill"/>
+        </view>
+      </view>
+    </u-popup>
+
+    <!-- 2022/6/20 add 尖货推荐 special-offer-->
+    <view class="bast-box">
+      <view style="padding: 0 32rpx;background: #FFFFFF;">
+        <image class="bast-title" :src="webUrl+'/20230407111908318221.png'" mode="scaleToFill"/>
+      </view>
+      <view class="list flex" v-if="bastList.length">
+        <custom-waterfalls-flow :value="bastList" imageKey="image">
+          <view class="item flex" v-for="(item,index) in bastList" :key="index" slot="slot{{index}}">
+            <template v-if="item.storeName==='swiper'">
+              <swiper class="item bannar-swiper" autoplay circular>
+                <swiper-item v-for="swipe in bannerList" :key="swipe">
+                  <image :src="swipe.pic" mode="aspectFit" @click="goGoodsConByProductID(swipe)"/>
+                </swiper-item>
+              </swiper>
+            </template>
+            <template v-else>
+              <image class="top-img" :src="item.image" mode="scaleToFill" @click="goGoodsCon(item)"></image>
+              <view class="content" @click="goGoodsCon(item)">
+                <view class="title more-t">{{ item.storeName }}</view>
+                <view class="price flex">
+                  <text class="red">￥{{ item.price }}</text>
+                  <text class="gray"
+                        v-if="item.productPrice">￥{{ item.productPrice }}
+                  </text>
+                </view>
+              </view>
+            </template>
+          </view>
+        </custom-waterfalls-flow>
+      </view>
+    </view>
+    <!-- 尖货推荐结束 -->
+
+    <!-- 最新通知消息开始 -->
+    <uni-popup ref="popup" type="center">
+      <view v-if="unReadMessageInfo" class="acea-row row-column row-middle"
+            style="position: relative;background-color: #fff;width: 440rpx;border-radius: 20rpx;">
+        <view class="msg_title">
+          {{ unReadMessageInfo.noticeTitle }}
+        </view>
+        <view class="msg_content">
+          <rich-text :nodes="unReadMessageInfo.noticeContent" />
+        </view>
+        <view class="msg_line"></view>
+        <view class="msg_btn" @click="msgConfirm">我知道了</view>
+      </view>
+    </uni-popup>
+    <!-- 通知消息结束 -->
+    <u-back-top :scroll-top="scrollTop">
+      <image
+        :src="webUrl+'/icon/setTop.png'"
+        mode="scaleToFill"
+        style="width: 40px;height: 40px;"
+        @click="setTopHandle"
+      />
+    </u-back-top>
+  </view>
+</template>
+
+<script>
+import imgBox from '@/components/imageTypeSet/imagebox.vue'
+import { mapGetters } from 'vuex'
+import { getCouponReceive, noticeDetail, noticeList } from '@/api/user'
+import { getHomeData, getShareImage } from '@/api/public'
+import { getProducts } from '@/api/store'
+import { sharpBannar } from '@/api/goods'
+import NP from 'number-precision'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+export default {
+  name: 'IndexPage',
+  components: {
+    imgBox
+  },
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      currentIndex: 0,
+      speed: 200,
+      seriesWidth: 400,
+      duration: 60000,
+      unReadMessageInfo: null,
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      isLiving: true, //是否正在直播
+      showCoupon: false,
+      viewHeight: (750 * 3 / 4.0),
+      bslGoodsHeight: 750 * 3 / 4.0 + 'rpx',
+      hotGoodsColumnWidth: '325rpx',
+      bgImgHeight: '20px',
+      logoUrl: '',
+      innArray: [],
+      shopArray: [],
+      restaurantArray: [],
+      banner: [],
+      menus: [],
+      menuArr: [[], []],
+      roll: [],
+      cityName: '',
+      activity: [],
+      groupGoods: [],
+      activityOne: {},
+      bastList: [],
+      firstList: [],
+      userList: [],
+      newGoods: null,
+      companyName: '',
+      companyAddress: '',
+      companyTel: '',
+      companyLogo: '',
+      info: {
+        fastList: [],
+        bastBanner: [],
+        bastList: []
+      },
+      likeInfo: [],
+      lovely: [],
+      benefit: [],
+      couponList: [],
+      swiperOption: {
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true
+        },
+        autoplay: {
+          disableOnInteraction: false,
+          delay: 2000
+        },
+        loop: true,
+        speed: 1000,
+        observer: true,
+        observeParents: true
+      },
+      swiperRoll: {
+        direction: 'vertical',
+        autoplay: {
+          disableOnInteraction: false,
+          delay: 2000
+        },
+        loop: true,
+        speed: 1000,
+        observer: true,
+        observeParents: true
+      },
+      swiperScroll: {
+        freeMode: true,
+        freeModeMomentum: false,
+        slidesPerView: 'auto',
+        observer: true,
+        observeParents: true
+      },
+      swiperBoutique: {
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true
+        },
+        autoplay: {
+          disableOnInteraction: false,
+          delay: 2000
+        },
+        loop: true,
+        speed: 1000,
+        observer: true,
+        observeParents: true
+      },
+      swiperProducts: {
+        freeMode: true,
+        freeModeMomentum: false,
+        slidesPerView: 'auto',
+        observer: true,
+        observeParents: true
+      },
+      liveList: [],
+      broadcastStyle2: {
+        speed: 100,
+        font_size: '32', //字体大小(rpx)
+        text_color: '#333', //字体颜色
+        back_color: 'red', //背景色
+      },
+      bslImglist: [],
+      statusBarHeight: 64,
+      dailyGoodsList: [], // 每日特价
+      preSaleList: [], // 预售商品
+      month: 0, // 每日特价:月
+      date: 0, // 每日特价：日
+      bannerList: [], // 尖货推荐横幅
+      shareAppImg: '', // 发送给朋友
+      isOldUser: true, // 老用户弹窗
+      oldUserPopup: {},
+      contentHomestay: {},
+      contentFestival: {},
+      countyFamous: {},
+      seasonalFood: {},
+      pageKeyId: Object.freeze('appIndex'),
+      scrollTop: 0
+    }
+  },
+  computed: mapGetters(['userInfo', 'isLogin']),
+  onLoad(options) {
+    const _this = this
+    _this.init()
+    getShareImage().then(({ data }) => _this.shareAppImg = data)
+    uni.getSystemInfo({
+      success: (e) => {
+        let statusBar = 0
+        let customBar = 0
+        // #ifdef MP-WEIXIN
+        statusBar = e.statusBarHeight
+        const custom = uni.getMenuButtonBoundingClientRect()
+        customBar = custom.bottom + custom.top - e.statusBarHeight
+        // #endif
+        _this.statusBarHeight = customBar
+        // 两列商品宽度
+        _this.hotGoodsColumnWidth = (e.screenWidth - uni.upx2px(90)) / 2 + 'px'
+        // 状态栏图片高度
+        _this.bgImgHeight = statusBar + 'px'
+      }
+    })
+  },
+  onShow() {
+    const today = new Date()
+    this.month = today.getMonth() + 1
+    this.date = today.getDate()
+    // 如果已经登录获取用户信息
+    if (this.isLogin) {
+      this.$store.dispatch('getUser', true)
+      // 获取最新一条消息
+      this.getUnreadMsgList()
+    }
+    // 获取团购商品
+    this.getGroupGoods()
+    // fix bug#1113
+    // if (this.bastList.length > 0) {
+    //   this.getBastList()
+    // }
+  },
+  onHide() {
+    this.pageToHideHandle()
+  },
+  onShareAppMessage() {
+    return {
+      title: '探寻有趣有味的生活方式',
+      path: '/pages/home/index',
+      imageUrl: this.shareAppImg
+    }
+  },
+  onPullDownRefresh() {
+    uni.stopPullDownRefresh()
+    uni.navigateTo({
+      url: '/pkg-video/views/lottery'
+    })
+  },
+  onPageScroll(e) {
+    this.scrollTop = e.scrollTop
+  },
+  methods: {
+    init() {
+      const _this = this
+      sharpBannar().then(response => {
+        _this.bannerList = response.data.banner
+        uni.showLoading({ title: '加载中' })
+        getHomeData().then(res => {
+          const { data } = res
+          _this.logoUrl = data.logoUrl
+          _this.$set(_this, 'banner', data.banner)
+
+          _this.$set(_this, 'menus', data.menus)
+          data.menus?.forEach((item, index) => {
+            if (index % 2 === 0) {
+              _this.menuArr[0].push(item)
+            } else {
+              _this.menuArr[1].push(item)
+            }
+          })
+
+          _this.$set(_this, 'roll', data.roll)
+          // 滚动会员信息
+          _this.$set(_this, 'userList', data.lotteryRecord)
+          _this.$set(_this, 'info', data.info)
+          _this.$set(_this, 'firstList', data.firstList.map((item) => {
+            item.price = _this.$force2Decimal(item.price)
+            // 如果已经登录获取用户信息
+            if (_this.$store.getters.token && _this.userInfo) {
+              const p = NP.times(item.price, NP.divide(parseFloat(_this.userInfo.discount), 100))
+              item.vipPrice = _this.$force2Decimal(p)
+            }
+            return item
+          }))
+          _this.$set(_this, 'oldUserPopup', data.oldUserPopup)
+          _this.$set(_this, 'contentHomestay', data.contentHomestay)
+          _this.$set(_this, 'contentFestival', data.contentFestival)
+          _this.$set(_this, 'countyFamous', data.countyFamous)
+
+          // 处理时令尝鲜轮播图所需数据
+          const foodLen = data.seasonalFood.productsCarousels.length
+          const foods = data.seasonalFood.productsCarousels
+          const groupList = []
+          if (foodLen) {
+            const count = 4
+            for (let i = 0; i < foodLen; i += count) {
+              groupList.push(foods.slice(i, i + count))
+            }
+          }
+          data.seasonalFood.groupList = groupList
+          _this.$set(_this, 'seasonalFood', data.seasonalFood)
+
+          if (_this.firstList.length > 0) {
+            _this.newGoods = _this.firstList[0]
+          }
+
+          _this.$set(_this, 'likeInfo', data.likeInfo.map((item) => {
+            item.price = _this.$force2Decimal(item.price)
+            item.otPrice = _this.$force2Decimal(item.otPrice)
+            // 如果已经登录获取用户信息
+            if (_this.$store.getters.token && _this.userInfo) {
+              const p = NP.times(item.price, NP.divide(parseFloat(_this.userInfo.discount), 100))
+              item.vipPrice = _this.$force2Decimal(p)
+            }
+            return item
+          }))
+
+          setTimeout(() => {
+            // 伴手礼图片
+            const imgs = []
+            _this.likeInfo.forEach((item) => {
+              imgs.push(item.image)
+            })
+            _this.$set(_this, 'bslImglist', imgs)
+            _this.seriesWidth = 770 * imgs.length - 20
+            _this.duration = Math.floor(_this.seriesWidth / _this.speed * 1000)
+          }, 1)
+
+          for (let i = 0; i < data.bastList.length; i++) {
+            data.bastList[i].hide = true
+          }
+          _this.$set(_this, 'bastList', data.bastList)
+          _this.$set(_this, 'lovely', data.lovely)
+          _this.$set(_this, 'benefit', data.benefit)
+          _this.$set(_this, 'couponList', data.couponList)
+
+          _this.$set(_this, 'companyName', data.companyName)
+          _this.$set(_this, 'companyAddress', data.companyAddress)
+          _this.$set(_this, 'companyTel', data.companyTel)
+          _this.$set(_this, 'companyLogo', data.companyLogo)
+
+          _this.$set(_this, 'dailyGoodsList', data.dailyGoodsList)
+          _this.$set(_this, 'preSaleList', data.preSaleList)
+          uni.hideLoading()
+        }).catch(() => {
+          uni.hideLoading()
+        })
+      })
+    },
+    getBastList() {
+      getHomeData().then(res => {
+        const { success, data } = res
+        if (success) {
+          for (let i = 0; i < data.bastList.length; i++) {
+            data.bastList[i].hide = true
+          }
+          this.$set(that, 'bastList', data.bastList)
+        }
+      })
+    },
+    getGroupGoods() {
+      getProducts({
+        page: 1,
+        limit: 1,
+        sid: 19, //团购id=19
+        news: 0,
+        priceOrder: '',
+        salesOrder: ''
+      }).then(res => {
+        this.groupGoods = res.data
+      })
+    },
+    clickItem(data) {
+      this.goGoodsCon(data)
+    },
+    msgConfirm: function () {
+      this.$refs.popup.close()
+    },
+    goPreSale: function () {
+      this.$yrouter.push('/v4/views/preSale/preSale')
+    },
+    goOffer: function () {
+      this.$yrouter.push('/v4/views/offer/offer')
+    },
+    setMsgReaded(mid) {
+      noticeDetail({ id: mid })
+    },
+    getUnreadMsgList() {
+      noticeList({
+        limit: 10,
+        page: 1
+      }).then(res => {
+        if (res.data && res.data.length > 0) {
+          const msg = res.data[0]
+          if (msg.readFlag == 'RF0') {
+            this.unReadMessageInfo = msg
+            this.$refs.popup.open()
+            this.setMsgReaded(msg.id)
+          }
+        }
+      })
+    },
+    call() {
+      if (this.companyTel != undefined && this.companyTel.length > 0) {
+        uni.makePhoneCall({
+          // 手机号
+          phoneNumber: this.companyTel,
+          // 成功回调
+          success: (res) => {
+          },
+          // 失败回调
+          fail: (res) => {
+          }
+        });
+      } else {
+        this.$dialog.error('电话为空')
+      }
+    },
+    goRoll(item) {
+      if (item.uniapp_url) {
+        this.$yrouter.push(item.uniapp_url)
+      }
+    },
+    goGoodSearch() {
+      this.$yrouter.push('/pages/shop/GoodSearch/index')
+    },
+    goGoodsCon(item) {
+      this.$yrouter.push({
+        path: '/pages/shop/GoodsCon/index',
+        query: {
+          id: item.id
+        }
+      })
+    },
+    goGoodsConByProductID(item, from) {
+      this.$yrouter.push({
+        path: '/pages/shop/GoodsCon/index',
+        query: {
+          id: item.productId,
+          activityId: item.id,
+          from
+        }
+      })
+    },
+    changeOldPopup(state) {
+      this.isOldUser = state
+    },
+    goHomeStay(stay) {
+      if (stay.uniappUrl) {
+        this.$global.commonJump(stay.uniappUrl)
+        return
+      }
+      if (stay.type === 2 && stay.isLinkToProduct) {
+        this.$yrouter.push({
+          path: '/pages/shop/GoodsCon/index',
+          query: {
+            id: stay.productId
+          }
+        })
+        return
+      }
+      if (stay.type === 1) {
+        uni.navigateTo({url: '/pkg_product/views/homestay?id=' + stay.id})
+      }
+    },
+    goFestival() {
+      uni.navigateTo({url: '/pkg_product/views/festival'})
+    },
+    tapOld() {
+      this.isOldUser = false
+      const {
+        type,
+        text,
+        jumpTime,
+        pageLevel,
+        url,
+        params,
+        couponId
+      } = this.oldUserPopup
+      if (couponId != null) {
+        getCouponReceive(couponId).then(res => {
+          if (res.status === 200) {
+            uni.showToast({
+              title: text,
+              icon: 'none',
+              success: () => {
+              }
+            })
+          }
+        }).catch((err) => {
+          uni.showToast({
+            title: err.data.msg + '',
+            icon: 'none',
+            duration: 3000
+          })
+        })
+      }
+      // type 1-定时跳转，2-点击跳转，3-不跳转
+      if (type === 1) {
+        setTimeout(() => {
+          this.$global.levelJump(pageLevel, url, params)
+        }, jumpTime * 1000)
+      } else if (type === 2) {
+        this.$global.levelJump(pageLevel, url, params)
+      }
+    },
+    setTopHandle() {
+      uni.pageScrollTo({
+        scrollTop: 0,
+        duration: 200
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.index {
+  background-color: #F5F5FA;
+
+  .header {
+    height: auto !important;
+    background-color: transparent !important;
+  }
+
+  .header {
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .header .paper-cuts-img {
+    position: absolute;
+    width: 159*2rpx;
+    height: 159*2rpx;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    margin: auto;
+    z-index: 0;
+  }
+
+  .swiper-item {
+    height: 100%;
+  }
+
+  .slider-banner {
+    -webkit-transform: rotate(0);
+    width: auto !important;
+  }
+
+  .search {
+    -webkit-box-flex: 1;
+    -webkit-flex: 1;
+    flex: 1;
+    box-sizing: border-box;
+    height: 64rpx;
+    background-color: #F5F5F5;
+    padding: 0 28rpx;
+    font-size: 28rpx;
+    color: #acacac;
+    border-radius: 32rpx;
+    margin: 0 30rpx;
+  }
+
+  .news {
+    margin: 0rpx 30rpx !important;
+    border-radius: 8rpx !important;
+    background: #f7f7f7 !important;
+    border: none !important;
+    padding: 0 !important;
+  }
+
+  .news .new-banner .text .newsTitle {
+    color: #666666 !important;
+  }
+
+  .cus-btn {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: transparent !important;
+  }
+
+  .cus-btn::after {
+    border: none !important;
+  }
+
+  .msg_title {
+    font-size: 0.36*100rpx;
+    font-weight: bold;
+    color: rgba(8, 15, 26, 1);
+    margin-top: 20rpx;
+  }
+
+  .msg_line {
+    background-color: #f3f3f3;
+    height: 1px;
+    width: 100%;
+    margin-top: 20rpx;
+  }
+
+  .msg_content {
+    padding: 0.1*100rpx;
+    color: #080F1A;
+    font-size: 0.32*100rpx;
+  }
+
+  .msg_btn {
+    padding: 10rpx;
+    font-size: 34rpx;
+    color: #38afef;
+    margin-top: 20rpx;
+    margin-bottom: 20rpx;
+  }
+
+
+  .pre-sale {
+    position: relative;
+    width: 686rpx;
+    height: 440rpx;
+    margin: 0 auto;
+
+    .bg {
+      width: 100%;
+      height: 100%;
+    }
+
+    .list {
+      display: flex;
+      flex-wrap: nowrap;
+      position: absolute;
+      bottom: 36rpx;
+      width: 100%;
+      padding: 0 14rpx;
+      box-sizing: border-box;
+
+      .item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin: 0 10rpx;
+
+        image {
+          width: 200rpx;
+          height: 200rpx;
+          border-radius: 8rpx;
+        }
+
+        view {
+          width: 200rpx;
+          margin: 4rpx 0 12rpx;
+          color: #333;
+          font-size: 24rpx;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        text {
+          display: inline-block;
+          padding: 2rpx 15rpx;
+          border-radius: 18rpx;
+          background: #ED0F0F;
+          color: #fff;
+          font-size: 24rpx;
+        }
+      }
+    }
+  }
+
+  // 每天特价
+  .special-offer {
+    margin-top: 40rpx;
+
+    .flex {
+      display: flex;
+    }
+
+    .header {
+      justify-content: space-between;
+      align-items: center;
+
+      .title {
+        margin-right: 8rpx;
+        color: #333;
+        line-height: 48rpx;
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+
+      .icon-date {
+        width: 40rpx;
+        height: 40rpx;
+      }
+
+      .date-box {
+        align-items: center;
+        padding: 8rpx;
+        background: #fff;
+        border-radius: 8px;
+
+        .day {
+          color: #494949;
+          font-size: 40rpx;
+          font-weight: bold;
+
+          text {
+            color: #FF1200;
+          }
+        }
+
+        .month {
+          height: 32rpx;
+          margin-left: 12rpx;
+          padding-left: 6rpx;
+          border-left: 2rpx solid #DDDDDD;
+          color: #999999;
+          font-size: 28rpx;
+        }
+      }
+
+      .more {
+        margin-top: 8rpx;
+        color: #7C7C7C;
+        font-size: 24rpx;
+      }
+    }
+
+    .list {
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding: 0 32rpx 40rpx;
+
+      .item {
+        position: relative;
+        flex-direction: column;
+        width: 328rpx;
+        margin-top: 20rpx;
+        background: #fff;
+
+        .top-img {
+          flex-shrink: 0;
+          width: 328rpx;
+          height: 328rpx;
+        }
+
+        .icon-fire {
+          width: 24rpx;
+          height: 24rpx;
+        }
+
+        .title {
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          margin: 10rpx 12rpx 10rpx 10rpx;
+          font-size: 26rpx;
+          font-weight: bold;
+          line-height: 38rpx;
+          color: #333333;
+        }
+
+        .price {
+          align-items: center;
+          margin-left: 10rpx;
+          padding-bottom: 10rpx;
+
+          .red {
+            font-size: 26rpx;
+            font-weight: bold;
+            line-height: 38rpx;
+            color: #ED0F0F;
+          }
+
+          .gray {
+            margin-left: 16rpx;
+            text-decoration: line-through;
+            font-size: 20rpx;
+            line-height: 30rpx;
+            color: #C2C5CC;
+          }
+        }
+
+        .shop {
+          position: absolute;
+          bottom: 0;
+          justify-content: space-between;
+          align-items: center;
+          width: 100%;
+          box-sizing: border-box;
+          padding: 6rpx 12rpx 18rpx 10rpx;
+          border: 1rpx solid #EFEFEF;
+          font-size: 22rpx;
+          line-height: 32rpx;
+          color: #333333;
+        }
+      }
+    }
+  }
+
+  .subject-box {
+    padding: 0 32rpx 40rpx;
+    background: #FFFFFF;
+
+    image {
+      vertical-align: middle;
+    }
+
+    .section-half {
+      margin-bottom: 16rpx;
+
+      .bg-img {
+        width: 336rpx;
+        height: 180rpx;
+      }
+
+      .food-box {
+        position: relative;
+        width: 336rpx;
+        height: 180rpx;
+        overflow: hidden;
+
+        .swiper {
+          position: absolute;
+          left: 20rpx;
+          bottom: 20rpx;
+          width: 296rpx;
+          height: 72rpx;
+          overflow: hidden;
+          z-index: 10;
+
+          image {
+            width: 72rpx;
+            height: 72rpx;
+            margin-right: 4rpx;
+            border-radius: 4rpx;
+          }
+
+          image:last-child {
+            margin-right: 0;
+          }
+        }
+      }
+    }
+
+    .section-full {
+      image {
+        width: 336rpx;
+        height: 480rpx;
+      }
+
+      .swiper {
+        width: 336rpx;
+        height: 480rpx;
+      }
+    }
+  }
+
+  .popup-old-user {
+    image {
+      vertical-align: middle;
+    }
+
+    .main {
+      width: 560rpx;
+      height: 840rpx;
+      border-radius: 40rpx;
+    }
+
+    .icon-box {
+      width: 96rpx;
+      height: 96rpx;
+      margin-top: 40rpx;
+      background: rgba(51, 51, 51, .4);
+      border-radius: 50%;
+
+      image {
+        width: 40rpx;
+        height: 40rpx;
+      }
+    }
+  }
+
+  .bast-box {
+    .bast-title {
+      width: 312rpx;
+      height: 40rpx;
+      margin: 16rpx 0 16rpx;
+    }
+
+    .bannar-swiper {
+      height: 534rpx;
+
+      image {
+        width: 332rpx;
+        height: 534rpx;
+      }
+    }
+
+    .list {
+      padding: 32rpx;
+
+      .item {
+        position: relative;
+        flex-direction: column;
+        background: #fff;
+
+        .top-img {
+          width: 332rpx;
+          height: 332rpx;
+        }
+
+        .content {
+          box-sizing: border-box;
+          padding: 10rpx 10rpx 20rpx;
+
+          .title {
+            color: #333;
+            font-size: 28rpx;
+          }
+
+          .price {
+            font-size: 32rpx;
+
+            .red {
+              color: #DA0000;
+            }
+
+            .gray {
+              margin-left: 16rpx;
+              text-decoration: line-through;
+              font-size: 20rpx;
+              line-height: 30rpx;
+              color: #C2C5CC;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/user/User/index.vue b/pages/user/User/index.vue
index f5180a1..3871592 100644
--- a/pages/user/User/index.vue
+++ b/pages/user/User/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="user user-page">
+  <view class="user user-page tabbar-page">
     <view
       v-if="$store.getters.token || userInfo.uid"
       class="acea-row row-column"
@@ -239,10 +239,12 @@
         </view>
       </view>
     </uni-popup>
+    <xdd-tabbar :curr-index="3" />
   </view>
 </template>
 
 <script>
+import XddTabbar from '@/components/xdd-tabbar'
 import {mapGetters, mapMutations} from "vuex"
 import {
   getSpreadImg,
@@ -256,6 +258,9 @@ import cookie from "@/utils/store/cookie"
 import { pageListenMixins } from '@/mixins/pageListenMixins'
 export default {
   name: 'UserPage',
+  components: {
+    XddTabbar
+  },
   mixins: [pageListenMixins],
   data() {
     return {
@@ -735,4 +740,7 @@ export default {
     height: 52rpx;
   }
 }
+.tabbar-page {
+  padding: 0 0 180rpx 0;
+}
 </style>