kxmall-ui/kxmall-app-ui/pages/index/index.vue

<template>
  <view style="overflow-x: hidden;">
    <view>
      <view id="top"
        style="background-repeat: no-repeat; background-size: cover; width: 750rpx;position: fixed;top: 0;z-index: 999;"
        :style="{backgroundImage:headerOptions.bgImg.top?(`url(${JSON.parse(headerOptions.bgImg.top)[0].url})`):'url(https://kxmalls.oss-cn-hangzhou.aliyuncs.com/bg/top.png)'}">
        <view class="status-bar"></view>
        <view class="flex align-center justify-center text-white"
          style="font-size: 36rpx;font-weight: 500; position: absolute;width: 750rpx;"
          :style="'top:'+navbarTop+'px;height:'+navHeight+'px;'">
          {{siteName}}
        </view>
        <view v-if="appear" :style="'margin-top:'+MT+'px;'" class="flex justify-between align-center padding-lr ">
          <view @click="showLocationList" class="flex align-center" style="padding-left: 6rpx;">
            <image src="../../static/index/dingweiweizhi@3x.png" mode="aspectFit" style="width: 30rpx;height: 36rpx;">
            </image>
            <view style="font-size: 36rpx;font-weight: 500;max-width: 450rpx;"
              class="padding-lr-xs text-white text-cut">{{district}}</view>
            <image src="../../static/index/arrow_down.png" mode="aspectFit" style="width: 18rpx;height: 10rpx;"></image>
          </view>
          <image src="../../static/index/saoma@3x.png" mode="aspectFit"
            style="width: 36rpx;height: 36rpx;margin-right: 6rpx;" @click="onScanQrCode"></image>
        </view>
        <view v-if="appear" class="padding-lr" style="padding-bottom: 22rpx;padding-top: 24rpx;">
          <view @click="naviageToPage('/pages/product/search')" style="height: 64rpx;"
            class="bg-white round flex align-center" v-if="headerOptions.search.show">
            <view class="flex align-center padding-left">
              <text class="yticon icon-sousuo" style="margin-right: 10rpx;"></text><text class="lem-text-gray"
                style="font-size: 26rpx;">{{headerOptions.search.placeholder}}</text>
            </view>
          </view>
        </view>
        <view v-else class="padding-lr flex align-center" :style="'margin-top:'+MT2+'px;'"
          style="padding-bottom: 22rpx;padding-top: 24rpx;">
          <view @click="showLocationList" class="flex align-center padding-right-sm">
            <image src="../../static/index/dingweiweizhi@3x.png" mode="aspectFit" style="width: 25rpx;height: 30rpx;">
            </image>
            <view style="font-size: 30rpx;font-weight: 500;max-width: 150rpx;"
              class="padding-lr-xs text-cut text-white">{{district}}</view>
            <image src="../../static/index/arrow_down.png" mode="aspectFit" style="width: 18rpx;height: 10rpx;"></image>
          </view>
          <view @click="naviageToPage('/pages/product/search')" style="height: 64rpx;flex-grow: 1;flex-shrink: 0;"
            class="bg-white round flex align-center" v-if="headerOptions.search.show">
            <view class="flex align-center padding-left">
              <text class="yticon icon-sousuo" style="margin-right: 10rpx;"></text><text class="lem-text-gray"
                style="font-size: 26rpx;">{{headerOptions.search.placeholder}}</text>
            </view>
          </view>
          <image src="../../static/index/saoma@3x.png" mode="aspectFit"
            style="width: 36rpx;height: 36rpx;margin-left: 10rpx;" @click="onScanQrCode"></image>
        </view>
      </view>
    </view>
    <view :style="'height: '+topHeight+'px;'" style="width: 100%;display: flex; position: relative;"></view>
    <view v-if="storage" id="sw" style="z-index: 999;background-repeat: no-repeat; background-size: 750rpx 200rpx;"
      class="padding-top-sm"
      :style="{backgroundImage:headerOptions.bgImg.bottom?(`url(${JSON.parse(headerOptions.bgImg.bottom)[0].url})`):'url(https://kxmalls.oss-cn-hangzhou.aliyuncs.com/bg/bottom.png)'}">
      <swiper autoplay="true" interval="2000" duration="400" class="carousel" circular @change="swiperChange"
        :previous-margin="headerOptions.swiper.showStyle!=='0px'?'27rpx':0"
        :next-margin="headerOptions.swiper.showStyle!=='0px'?'27rpx':0" v-if="headerOptions.swiper.show">
        <swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
          :style="{padding:headerOptions.swiper.showStyle!=='0px'?'0 11upx':0}" @click="naviageToPage(item.url)">
          <image :src="JSON.parse(item.imgUrl)[0].url"
            :mode="headerOptions.swiper.imgStyle==='cover'?'aspectFill':'scaleToFill'" />
        </swiper-item>
      </swiper>
    </view>
    <view v-if="storage" id="bar" class="padding bg-white margin-bottom-sm"
      style="display: flex;align-items: center;justify-content: space-between;">
      <view class="flex align-center" v-for="(item,i) in headerOptions.hints" :key="i">
        <image :src="item.icon?JSON.parse(item.icon)[0].url:('../../static/index/'+(i+''+i)+'.png')" mode="aspectFit"
          style="width: 36rpx;height: 30rpx;"></image>
        <text class="margin-left-sm lem-text-gray" style="font-size: 24rpx;">{{item.text}}</text>
      </view>
      <!-- <view class="flex align-center">
        <image src="../../static/index/wuliu2.png" mode="aspectFit" style="width: 36rpx;height: 30rpx;"></image>
        <text class="margin-left-sm lem-text-gray" style="font-size: 24rpx;;">晚到必赔</text>
      </view>
      <view class="flex align-center">
        <image src="../../static/index/star2.png" mode="aspectFit" style="width: 36rpx;height: 30rpx;"></image>
        <text class="margin-left-sm lem-text-gray" style="font-size: 24rpx;;">专业检测</text>
      </view>
      <view class="flex align-center">
        <image src="../../static/index/time1.png" mode="aspectFit" style="width: 36rpx;height: 30rpx;"></image>
        <text class="margin-left-sm lem-text-gray" style="font-size: 24rpx;">30分钟达</text>
      </view> -->
    </view>
    <!-- Floating coupon box -->
    <view class="coupon-box" :class="{'hidden': isHidden, 'transparent': isTransparent}" @click="navigateToCoupons">
      <text>领券</text>
    </view>
    <!-- <announcement :storage="storage" :new-times-content="newTimesContent"></announcement>

    <navigation :storage="storage" :category-buttom-list="categoryButtomList" @naviage-to-page="naviageToPage">
    </navigation>

    <special :storage="storage" :cheap-recommend="cheapRecommend" @naviage-to-page="naviageToPage"
      @nav-to-detail-page="navToDetailPage" @add-cart="addCart"></special>

    <recommend :storage="storage" :sales-top="salesTop" @naviage-to-page="naviageToPage"
      @nav-to-detail-page="navToDetailPage" @add-cart="addCart"></recommend>

    <seckill></seckill> -->
    <template v-for="m in moduleList">
      <!-- <component :is="m.id" >
      </component> -->
      <announcement v-if="m.id==='announcement'" :storage="storage" :new-times-content="newTimesContent"
        :category-buttom-list="categoryButtomList" :cheap-recommend="cheapRecommend" @naviage-to-page="naviageToPage"
        :sales-top="salesTop" @nav-to-detail-page="navToDetailPage" @add-cart="addCart" :options="m.options"
        :key="m.id">
      </announcement>
      <navigation v-if="m.id==='navigation'" :storage="storage" :new-times-content="newTimesContent"
        :category-buttom-list="categoryButtomList" :cheap-recommend="cheapRecommend" @naviage-to-page="naviageToPage"
        :sales-top="salesTop" @nav-to-detail-page="navToDetailPage" @add-cart="addCart" :options="m.options"
        :key="m.id">
      </navigation>
      <recommend v-if="m.id==='recommend'" :storage="storage" :new-times-content="newTimesContent"
        :category-buttom-list="categoryButtomList" :cheap-recommend="cheapRecommend" @naviage-to-page="naviageToPage"
        :sales-top="salesTop" @nav-to-detail-page="navToDetailPage" @add-cart="addCart" :options="m.options"
        :key="m.id">
      </recommend>
      <seckill v-if="m.id==='seckill'" :storage="storage" :new-times-content="newTimesContent"
        :category-buttom-list="categoryButtomList" :cheap-recommend="cheapRecommend" @naviage-to-page="naviageToPage"
        :sales-top="salesTop" @nav-to-detail-page="navToDetailPage" @add-cart="addCart" :options="m.options"
        :key="m.id"></seckill>
      <special v-if="m.id==='special'" :storage="storage" :new-times-content="newTimesContent"
        :category-buttom-list="categoryButtomList" :cheap-recommend="cheapRecommend" @naviage-to-page="naviageToPage"
        :sales-top="salesTop" @nav-to-detail-page="navToDetailPage" @add-cart="addCart" :options="m.options"
        :key="m.id"></special>
    </template>

    <view v-if="!storage" style="padding-top: 180rpx;padding-bottom: 180rpx;">
      <missing :buttonName="'换个地址试试吧~'" :handlerName="'buttonClick'" @buttonClick="chooseLocation"
        :imgUrl="'http://qiniuoss.nauzone.cn/%E7%BB%84%204%20%E6%8B%B7%E8%B4%9D@3x.png'" :desc="'当前地区不在配送范围哦'">
      </missing>
    </view>
    <view class="Bigmask" :class="ismask?'opAC':'op'" @click="nomask"></view>
    <view class="maskBox" :class="ismask?'scAC':'sc'">
      <image src="../../static/Invitation/close.png" mode="" class="maskClose" @click.stop="nomask"></image>
      <image :src="t5.imgUrl" mode="" class="mask" @click="naviageToPage('/pages/Invitation/Invitation')"></image>
      <!-- Invitation  inviteNewpeople-->
    </view>
  </view>
</template>

<script>
  import missing from "@/components/missing.vue"
  import Announcement from './components/announcement'
  import Navigation from './components/navigation'
  import Special from './components/special'
  import Recommend from './components/recommend'
  import Seckill from './components/seckill'
  import {
    parseURL
  } from "../../util"

  export default {
    components: {
      missing,
      Announcement,
      Navigation,
      Special,
      Recommend,
      Seckill
    },
    data() {
      return {
        isHidden: false, // 是否隐藏边框的一半
        isTransparent: false, // 是否增加透明度
        lastScrollY: 0, // 上一次的滚动位置
        isScrolling: false, // 当前是否正在滚动
        timer: null, // 延迟恢复的定时器
        titleNViewBackground: '',
        swiperCurrent: 0,
        swiperLength: 0,
        carouselList: [],
        windowSpuList: [],
        cheapRecommend: [], //特价接口
        categoryPickList: [],
        categoryButtomList: [],
        salesTop: [],
        newTop: [],
        banner: undefined,
        isVip: false,
        district: '定位中...',
        navbarTop: 26,
        navHeight: 32,
        navBottom: 58,
        MT: 38,
        MT2: 20,
        statusHeight: 20,
        pageNo: 1,
        storage: true,
        topHeight: 156,
        appear: true,
        loaded: false, //是否已加载过
        total: 10, //推荐商品总数
        t5: {},
        ismask: false,
        newTimesContent: '',
        indexBanner: {
          imgUrl: ''
        },
        template: null,
        siteName: 'kxmall'
      };
    },
    computed: {
      headerOptions() {
        return this.template?.headerModule.options || {
          search: {
            show: true,
            placeholder: ''
          },
          bgImg: {
            top: '',
            bottom: ''
          },
          swiper: {
            show: true,
            showStyle: '12rpx 20rpx 0rpx',
            imgStyle: '100% 100%'
          },
          hints: []
        }
      },
      moduleList() {
        return this.template?.moduleList
      }
    },
    async onShow() {
      let addresses = uni.getStorageSync('addresses');
      if (addresses) {
        this.district = addresses.addressesName;
      } else {
        this.district = '定位中...';
      }
      this.isVip = this.$api.isVip()
      if (this.loaded) {
        this.$store.state.storageId ? this.storage = true : this.storage = false
        if (this.$store.state.storageId && this.categoryButtomList.length == 0) {
          this.loadData(this.$store.state.storageId)
        }
      }
      //如果用户已登录，获取购物车数量
      if (this.$store.state.userInfo.accessToken && this.$store.state.storageId != 0) {
        this.$api.request('get', 'cart/app/countCart', {
          storageId: this.$store.state.storageId
        }).then(res => {
          if (res.data > 0) {
            uni.setTabBarBadge({
              index: 2,
              text: res.data + ''
            })
          } else if (res.data <= 0) {
            uni.removeTabBarBadge({
              index: 2
            })
          }
          this.$store.commit('addCart', res.data)
        }).catch(err => {
          this.$api.msg('请求失败，请稍后再试')
        })
      }
      await this.getTemplate()
      this.$nextTick(() => {
        this.setTopHeight()
      })
    },
    async onLoad(options) {
      this.$api.request('get', 'system/app/config/configKey/basicinfo').then(({
        data
      }) => {
        const baseInfo = {}
        data.forEach(({
          configKey,
          configValue
        }) => {
          baseInfo[configKey] = configValue
        })
        if (baseInfo.siteName) {
          this.siteName = baseInfo.siteName
        }
      })
      //#ifdef MP-WEIXIN
      wx.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
      //#endif
      //#ifdef H5
      //H5进入，有可能是回调进来的
      if (options.code && options.state) {
        const that = this
        that.logining = true
        that.$api.request('get', 'h5Login', {
          loginType: 3,
          raw: options.code
        }, failres => {
          that.logining = false
          that.$api.msg(failres.msg)
        }).then(res => {
          //登录成功，重定向到指定目标
          that.logining = false
          that.$store.commit('login', res.data)
          uni.setStorageSync('userInfo', res.data)
          //重定向到
          //不能重定向到tabbar页面
          if (options.state === '/pages/cart/cart' || options.state === '/pages/user/user' ||
            options.state === '/pages/index/index' || options.state === '/pages/category/category') {
            uni.switchTab({
              url: options.state
            })
          } else {
            uni.redirectTo({
              url: options.state
            })
          }

        })
      }
      //#endif
      this.$api.request('get', 'carousel/app/getCarouselActive', {
        adType: 6
      }).then(res => {
        this.indexBanner = res.data[0]
      })
      let addresses = uni.getStorageSync('addresses');
      let res1 = {};
      if (addresses) {
        this.district = addresses.addressesName;
        res1.longitude = addresses.lng
        res1.latitude = addresses.lat
        res1.errMsg = 'getLocation:ok'
      } else {
        //#ifdef H5
        res1.errMsg = 'getLocation:ok'
        res1.longitude = '11.22'
        res1.latitude = '11.22'
        //#endif
        // #ifdef MP-WEIXIN
        var [err, result] = await uni.getLocation({
          type: 'wgs84'
        })
        res1 = result
        //#endif
      }
      // ================
      // var res1={}
      // res1.errMsg ='getLocation:ok'
      // res1.longitude ='11.22'
      // res1.latitude ='11.22'
      // ================
      if (res1.errMsg === 'getLocation:ok') {
        uni.showLoading({
          title: "加载中..."
        })
        this.$api.request('get', 'storage/position/getRecentlyStorage', {
          lng: res1.longitude,
          lat: res1.latitude
        }, failres => {
          uni.hideLoading()
          this.logining = false
          this.loaded = true
          this.$api.msg(failres.msg)
          this.storage = false
        }).then(res => {
          uni.hideLoading()
          this.loaded = true
          // 设置距离值
          let addresses = uni.getStorageSync('addresses');
          if (!addresses) {
            let addressesInfo = {};
            addressesInfo.lng = res1.longitude;
            addressesInfo.lat = res1.latitude;
            addressesInfo.distance = res.data.distance;
            uni.setStorageSync('addresses', addressesInfo);
          } else {
            addresses.distance = res.data.distance;
            uni.setStorageSync('addresses', addresses);
          }
          this.$store.state.storageId === -1 && this.$store.commit('setStorage', res.data.id)

          this.$store.commit('setStorageObj', {
            businessStartTime: res.data.businessStartTime,
            businessState: res.data.businessState,
            businessStopTime: res.data.businessStopTime,
            deliveryStartTime: res.data.deliveryStartTime,
            deliveryStopTime: res.data.deliveryStopTime,
            haveStorage: res.data.haveStorage,
            id: res.data.id
          })
          this.loadData(res.data.id)
          if (!res.data.id) {
            this.storage = false
          }
        })
      }
      if (!addresses || !addresses.addressesName) {
        var address = await this.$getLocation(false, res1.latitude, res1.longitude)
        if (address.streetNumber.street.length > 0) {
          this.district = address.streetNumber.street
        } else {
          this.district = address.township
        }
        if (address.pois.length > 0 && address.pois[0].name.length < 8) {
          this.district = address.pois[0].name
          let addresses = uni.getStorageSync('addresses');
          if (addresses) {
            addresses.addressesName = address.pois[0].name;
            uni.setStorageSync('addresses', addresses);
          }
        }
      }

      // this.district = address ? address.district : '定位失败'
      //获取前置仓数据
      // console.log(address)
      // this.$api.request('position','getRecentlyStorage',{
      // 	adcode:address.adcode,lng:address.longitude,
      // 	lat:address.latitude
      // },failres => {
      // 		this.logining = false
      // 		this.$api.msg(failres.errmsg)
      // }).then(res=>{
      // 	console.log(res)
      // 	// res.data.id = 11
      // 	// this.$store.commit('setStorage',res.data.id)
      // 	// this.loadData(res.data.id)
      // 	// if(!res.data.id){
      // 	// 	this.storage = false
      // 	// }else{
      // 	// 	this.loadRecommand('refresh')
      // 	// }
      // })
      // console.log(JSON.stringify(address))
    },
    onPageScroll(e) {
      e.scrollTop >= 100 ? this.appear = false : this.appear = true
    },
    onReachBottom() {
      if (this.salesTop.length % 10 == 0 && this.salesTop.length > 0) {
        this.loadRecommand()
      }
    },
    onReady() {
      this.setTopHeight()
      // const res = uni.getSystemInfoSync();
      // console.log(res.statusBarHeight);
      // this.statusHeight = res.statusBarHeight

      // // #ifdef MP-WEIXIN
      // this.navbarTop = wx.getMenuButtonBoundingClientRect().top
      // this.navHeight = wx.getMenuButtonBoundingClientRect().height
      // this.navBottom = wx.getMenuButtonBoundingClientRect().bottom
      // this.MT = this.navBottom

      // // #endif
      // // #ifdef APP-PLUS
      // this.navbarTop = this.statusHeight
      // this.navHeight = 44
      // this.navBottom = this.navHeight + 20
      // this.MT = this.navBottom
      // // #endif
      // // #ifdef H5
      // this.navbarTop = 5;
      // // #endif
      // this.MT2 = this.MT - 20
      // const that = this
      // const query = uni.createSelectorQuery().in(this);
      // this.$nextTick(() => {
      //   query.select('#top').boundingClientRect(data => {
      //     console.log("得到布局位置信息" + JSON.stringify(data));
      //     console.log("节点离页面顶部的距离为" + data.top);
      //     that.topHeight = data.height + that.statusHeight - 5
      //     // #ifdef APP-PLUS
      //     that.topHeight = data.height + 20
      //     console.log('占位元素高度为' + that.topHeight)
      //     // #endif
      //   }).exec();
      // })
    },
    onShareAppMessage(res) { //发送给朋友
      return {
        title: this.share.title,
        imageUrl: this.share.imageUrl,
      }
    },
    onShareTimeline(res) { //分享到朋友圈
      return {
        title: this.share.title,
        imageUrl: this.share.imageUrl,
      }
    },
    mounted() {
      // Add scroll listener when component is mounted
      uni.pageScrollTo({
        scrollTop: 0, // Ensures the page starts at the top
        duration: 0,
      });

      // Listen to the scroll event
      // uni.onPageScroll(this.onPageScroll);
    },
    beforeDestroy() {
      // Remove scroll listener before destroying the component
      uni.offPageScroll(this.onPageScroll);
    },
    methods: {
      // 处理滚动事件，改变红包的状态
      onPageScroll(e) {
        const scrollY = e.scrollTop;

        // 如果正在滚动，设置隐藏和透明度
        if (scrollY > this.lastScrollY) {
          this.isHidden = true;
          this.isTransparent = true;
        } else {
          this.isHidden = false;
          this.isTransparent = false;
        }

        // 保存最后的滚动位置
        this.lastScrollY = scrollY;

        // 如果正在滚动，取消任何定时器
        if (this.timer) {
          clearTimeout(this.timer);
          this.timer = null;
        }

        // 如果停止滚动（延迟500ms），恢复样式
        if (!this.isScrolling) {
          this.timer = setTimeout(() => {
            this.isHidden = false;
            this.isTransparent = false;
          }, 500); // 延迟恢复
        }
      },
      // Handle click on the coupon box to navigate to the coupon page
      navigateToCoupons() {
        uni.navigateTo({
          url: '/pages/user/coupons?type=user'
        });
      },
      showLocationList() {
        uni.navigateTo({
          url: '/pages/index/locationList'
        })
      },
      setTopHeight() {
        const res = uni.getSystemInfoSync();
        this.statusHeight = res.statusBarHeight

        // #ifdef MP-WEIXIN
        this.navbarTop = wx.getMenuButtonBoundingClientRect().top
        this.navHeight = wx.getMenuButtonBoundingClientRect().height
        this.navBottom = wx.getMenuButtonBoundingClientRect().bottom
        this.MT = this.navBottom

        // #endif
        // #ifdef APP-PLUS
        this.navbarTop = this.statusHeight
        this.navHeight = 44
        this.navBottom = this.navHeight + 20
        this.MT = this.navBottom
        // #endif
        // #ifdef H5
        this.navbarTop = 5;
        // #endif
        this.MT2 = this.MT - 20
        const that = this
        const query = uni.createSelectorQuery().in(this);
        this.$nextTick(() => {
          query.select('#top').boundingClientRect(data => {
            // that.topHeight = data.height + that.statusHeight - 5
            if (this.appear) {
              that.topHeight = data.height - 5
            } else {
              that.topHeight = data.height + 40
            }
            // #ifdef APP-PLUS
            if (this.appear) {
              that.topHeight = data.height
            } else {
              that.topHeight = data.height + 40
            }

            // #endif
          }).exec();
        })
      },
      async getTemplate() {
        this.template = {
          "moduleList": [{
              "id": "announcement",
              "_uid": "announcement_velftufbt1o0",
              "limit": 1,
              "style": {
                "backgroundPosition": "-90px -345px",
                "hoverBackgroundPosition": "-130px -345px"
              },
              "title": "通知公告",
              "options": {},
              "selectable": true
            },
            {
              "id": "navigation",
              "_uid": "navigation_124p8hba2l180",
              "limit": 1,
              "style": {
                "backgroundPosition": "-10px -345px",
                "hoverBackgroundPosition": "-50px -345px"
              },
              "title": "图文导航",
              "options": {
                "banner": {
                  "imgStyle": "100% 100%",
                  "showStyle": "12px 12px 0px"
                },
                "bgColor": null,
                "fontColor": null,
                "iconStyle": "50%",
                "showStyle": "0px"
              },
              "selectable": true
            },
            {
              "id": "special",
              "_uid": "special_lmqte3o8qqk0",
              "limit": 1,
              "style": {
                "backgroundPosition": "-250px -345px",
                "hoverBackgroundPosition": "-290px -345px"
              },
              "title": "今日特价",
              "options": {
                "banner": {
                  "show": true,
                  "imgUrl": "",
                  "imgStyle": "100% 100%",
                  "showStyle": "12px 12px 0px"
                },
                "scroll": true
              },
              "selectable": true
            },
            {
              "id": "recommend",
              "_uid": "recommend_p8gjlc2llj40",
              "limit": 1,
              "style": {
                "backgroundPosition": "-10px -384px",
                "hoverBackgroundPosition": "-50px -384px"
              },
              "title": "热卖推荐",
              "options": {
                "banner": {
                  "show": true,
                  "imgUrl": "",
                  "imgStyle": "100% 100%",
                  "showStyle": "12px 12px 0px"
                },
                "scroll": false
              },
              "selectable": true
            }
          ],
          "pageOptions": {
            "name": "2",
            "isUseDefaultPic": true
          },
          "footerModule": {
            "id": "footer",
            "title": "底部导航",
            "options": {
              "bgColor": "",
              "navItems": [{
                  "_uid": "tl0kk9ota580",
                  "icon": {
                    "active": "",
                    "default": ""
                  },
                  "text": "首页",
                  "sortable": false,
                  "removable": false
                },
                {
                  "_uid": "thelhu84gt80",
                  "icon": {
                    "active": "",
                    "default": ""
                  },
                  "text": "我的",
                  "sortable": true,
                  "removable": false
                }
              ],
              "fontColor": {
                "active": "",
                "default": ""
              }
            },
            "selectable": false
          },
          "headerModule": {
            "id": "header",
            "title": "页面头部",
            "options": {
              "bgImg": {
                "top": "",
                "bottom": ""
              },
              "hints": [{
                  "icon": "",
                  "text": "免费配送"
                },
                {
                  "icon": "",
                  "text": "晚到必赔"
                },
                {
                  "icon": "",
                  "text": "专业检测"
                },
                {
                  "icon": "",
                  "text": "30分钟达"
                }
              ],
              "search": {
                "show": true,
                "placeholder": ""
              },
              "swiper": {
                "show": true,
                "imgStyle": "100% 100%",
                "showStyle": "12px 20px 0px"
              }
            },
            "selectable": false
          }
        }
        try {
          const res = await this.$api.request('get', 'decorate/app/pageTemplate')
          if (res.data) {
            this.template = JSON.parse(res.data.content)
          }
        } catch (e) {
          console.log(e)
        }
      },
      async loadData(id) {
        const that = this

        if (!id) {
          id = 0
        }
        uni.showLoading({
          title: "加载中..."
        })
        that.$api.request('get', 'storage/position/getIndexDataByStorage', {
          storageId: this.$store.state.storageId
        }, failres => {
          that.$api.msg(failres.msg)
          uni.hideLoading()
        }).then(res => {
          let data = res.data
          //橱窗
          that.windowSpuList = data.cheapRecommend
          //轮播
          if (data.carouseList.t1) {
            data.carouseList.t1.forEach(item => {
              if (!item.color) {
                item.color = 'rgb(205, 215, 218)'
              }
            })
            that.carouselList = data.carouseList.t1
            that.swiperLength = data.carouseList.t1.length
            that.titleNViewBackground = data.carouseList.t1[0].color
          }
          if (data.cheapRecommend) {
            that.cheapRecommend = data.cheapRecommend
          }

          //弹窗
          // if (data.carouseList.t5.length > 0) {
          // 	that.t5 = data.carouseList.t5[0]
          // 	this.ismask = true
          // }

          this.newTimesContent = data.newTimesContent


          //分类精选
          if (data.carouseList.t2) {
            that.categoryPickList = data.carouseList.t2
          }
          //横幅
          if (data.carouseList.t3 && data.carouseList.t3.length > 0) {
            that.banner = data.carouseList.t3[0]
          }
          //热销
          if (data.salesTop) {
            that.salesTop = data.salesTop
            this.pageNo++
          }
          //分类5Buttom
          if (data.carouseList.t4) {
            that.categoryButtomList = data.carouseList.t4

            uni.setStorageSync('categoryButtomList', that.categoryButtomList);
          }
          uni.hideLoading()
        })
      },
      nomask() {
        this.ismask = false
      },
      loadRecommand(type) {
        console.log(type)
        if (type === 'refresh') {
          this.pageNo = 1
        }
        const that = this
        that.$api.request('get', 'storage/position/getGoodsPageByStorage', {
          storageId: this.$store.state.storageId,
          pageNo: this.pageNo
        }, failres => {
          that.$api.msg(failres.msg)
        }).then(res => {
          this.pageNo++
          let tempList = res.data.rows
          if (type === 'refresh') {
            that.salesTop = [];
          }
          that.salesTop = that.salesTop.concat(tempList)
        })
      },
      //轮播图切换修改背景色
      swiperChange(e) {
        const index = e.detail.current;
        this.swiperCurrent = index;
        this.titleNViewBackground = this.carouselList[index].color;
      },
      //详情页
      navToDetailPage(id) {
        uni.navigateTo({
          url: `/pages/product/detail?id=${id}`
        })
      },
      navToWindowSuggestSpu(index) {
        const that = this
        uni.navigateTo({
          url: '/pages/product/detail?id=' + that.windowSpuList[index].productId
        })
      },

      naviageToPage(page, title) {
        this.ismask = false
        if (title) {
          console.log(title, 'jinlai')
          title ? title : ''
          uni.navigateTo({
            url: page + '&title=' + title
          })
        } else {
          uni.navigateTo({
            url: page
          })
        }
        // console.log(that.categoryButtomList[index].title)

      },
      //选择地址
      chooseLocation() {
        uni.chooseLocation({
          success: (res1) => {
            console.log(res1)
            if (res1.name === "") {
              return
            }
            this.district = res1.name
            uni.showLoading({
              title: "加载中..."
            })
            let addressesInfo = {};
            addressesInfo.lng = res1.longitude;
            addressesInfo.lat = res1.latitude;
            addressesInfo.addressesName = res1.name;

            this.$api.request('get', 'storage/position/getRecentlyStorage', {
              lng: res1.longitude,
              lat: res1.latitude
            }, failres => {
              uni.setStorageSync('addresses', addressesInfo);
              uni.hideLoading()
            }).then(res => {
              uni.hideLoading()
              addressesInfo.distance = res.data.distance;
              uni.setStorageSync('addresses', addressesInfo);
              console.log(res)
              this.$store.commit('setStorage', res.data.id)
              this.newTop = []
              this.cheapRecommend = []
              this.salesTop = []
              this.loadData(res.data.id)
              if (!res.data.id) {
                this.storage = false
              } else {
                this.storage = true
                // this.loadRecommand('refresh')
              }
            })
          }
        });
      },
      addCart(item) {
        const that = this
        that.$api.request('get', 'cart/app/addCartItem', {
          productId: item.productId,
          activityId: item.activityId,
          couponId: item.couponId,
          num: 1
        }).then(res => {
          that.$api.msg('添加购物车成功')
          var cartNum = this.$store.state.cartNum + 1
          that.$store.commit('addCart', cartNum)
          uni.setTabBarBadge({
            index: 2,
            text: cartNum + ''
          })
        })
      },
      onScanQrCode() {
        const self = this
        uni.scanCode({
          scanType: ['qrCode'],
          success(res) {
            console.log(res)
            const urlParams = parseURL(res.result).params
            console.log(urlParams)

            if (urlParams.storageId) {
              // Handle storageId case
              self.$store.commit('setStorage', urlParams.storageId)
              uni.redirectTo({
                url: '/pages/index/redirect'
              })
            } else if (urlParams.spread) {
              // Handle spread case
              self.$store.commit('setSpread', urlParams.spread)
              uni.redirectTo({
                url: '/pages/public/login'  // Assuming this is your login page route
              })
            } else {
              console.log('No valid parameters found in QR code')
              // You might want to show an error message to the user here
            }
          },
          fail(e) {
            console.log(e)
          }
        })
      }
    },
    // #ifndef MP
    // 标题栏input搜索框点击
    onNavigationBarSearchInputClicked: async function(e) {
      uni.navigateTo({
        url: '/pages/product/search'
      })
    },
    //点击导航栏 buttons 时触发
    // onNavigationBarButtonTap(e) {
    // 	const index = e.index;
    // 	if (index === 0) {
    // 		this.$api.msg('点击了扫描');
    // 	} else if (index === 1) {
    // 		// #ifdef APP-PLUS
    // 		const pages = getCurrentPages();
    // 		const page = pages[pages.length - 1];
    // 		const currentWebview = page.$getAppWebview();
    // 		currentWebview.hideTitleNViewButtonRedDot({
    // 			index
    // 		});
    // 		// #endif
    // 		uni.navigateTo({
    // 			url: '/pages/notice/notice'
    // 		})
    // 	}
    // }
    // #endif
  }
</script>

<style lang="scss">
  page {
    background: #f5f5f5;
  }

  .m-t {
    margin-top: 16upx;
  }

  .Bigmask {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all .5s,
  }

  .maskBox {
    width: 77%;
    height: 52%;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1001;
    transform: translateX(-50%) translateY(-50%) scale(1, 1);
    transition: all .5s ease;

    .maskClose {
      position: absolute;
      right: 15px;
      top: 15px;
      width: 26px;
      height: 26px;
    }

    .mask {
      width: 100%;
      height: 100%;
    }
  }

  .op {
    opacity: 0;
    visibility: hidden;
  }

  .opAc {
    visibility: visible;
    opacity: 1;
  }

  .sc {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(0, 0);
    transition: all .5s ease;
  }

  .scAc {
    opacity: 1;
    transform: translateX(-50%) translateY(-50%) scale(1, 1);
    transition: all .5s ease;
  }

  /* 头部 轮播图 */
  .carousel-section {
    position: relative;
    padding-top: 10px;

    .titleNview-placing {
      height: var(--status-bar-height);
      padding-top: 44px;
      box-sizing: content-box;
    }

    .titleNview-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 426upx;
      transition: .4s;
    }
  }

  .carousel {
    width: 100%;
    height: 280upx;

    .carousel-item {
      width: 100%;
      height: 100%;
      // padding: 0 11upx;
      overflow: hidden;
    }

    image {
      width: 100%;
      height: 100%;
      border-radius: 12upx;
    }
  }

  .swiper-dots {
    display: flex;
    position: absolute;
    left: 60upx;
    bottom: 15upx;
    width: 72upx;
    height: 36upx;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTMyIDc5LjE1OTI4NCwgMjAxNi8wNC8xOS0xMzoxMzo0MCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTk4MzlBNjE0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTk4MzlBNjA0NjU1MTFFOUExNjRFQ0I3RTQ0NEExQjMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0E3RUNERkE0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E3RUNERkI0NjExMTFFOTg5NzI4MTM2Rjg0OUQwOEUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4Gh5BPAAACTUlEQVR42uzcQW7jQAwFUdN306l1uWwNww5kqdsmm6/2MwtVCp8CosQtP9vg/2+/gY+DRAMBgqnjIp2PaCxCLLldpPARRIiFj1yBbMV+cHZh9PURRLQNhY8kgWyL/WDtwujjI8hoE8rKLqb5CDJaRMJHokC6yKgSCR9JAukmokIknCQJpLOIrJFwMsBJELFcKHwM9BFkLBMKFxNcBCHlQ+FhoocgpVwwnv0Xn30QBJGMC0QcaBVJiAMiec/dcwKuL4j1QMsVCXFAJE4s4NQA3K/8Y6DzO4g40P7UcmIBJxbEesCKWBDg8wWxHrAiFgT4fEGsB/CwIhYE+AeBAAdPLOcV8HRmWRDAiQVcO7GcV8CLM8uCAE4sQCDAlHcQ7x+ABQEEAggEEAggEEAggEAAgQACASAQQCCAQACBAAIBBAIIBBAIIBBAIABe4e9iAe/xd7EAJxYgEGDeO4j3EODp/cOCAE4sYMyJ5cwCHs4rCwI4sYBxJ5YzC84rCwKcXxArAuthQYDzC2JF0H49LAhwYUGsCFqvx5EF2T07dMaJBetx4cRyaqFtHJ8EIhK0i8OJBQxcECuCVutxJhCRoE0cZwMRyRcFefa/ffZBVPogePihhyCnbBhcfMFFEFM+DD4m+ghSlgmDkwlOgpAl4+BkkJMgZdk4+EgaSCcpVX7bmY9kgXQQU+1TgE0c+QJZUUz1b2T4SBbIKmJW+3iMj2SBVBWz+leVfCQLpIqYbp8b85EskIxyfIOfK5Sf+wiCRJEsllQ+oqEkQfBxmD8BBgA5hVjXyrBNUQAAAABJRU5ErkJggg==);
    background-size: 100% 100%;

    .num {
      width: 36upx;
      height: 36upx;
      border-radius: 50px;
      font-size: 24upx;
      color: #fff;
      text-align: center;
      line-height: 36upx;
    }

    .sign {
      position: absolute;
      top: 0;
      left: 50%;
      line-height: 36upx;
      font-size: 12upx;
      color: #fff;
      transform: translateX(-50%);
    }
  }

  .ad-1 {
    width: 100%;
    height: 210upx;
    padding: 10upx 0;
    background: #fff;

    image {
      width: 100%;
      height: 100%;
    }
  }

  /* 秒杀专区 */
  .seckill-section {
    padding: 4upx 30upx 24upx;
    background: #fff;

    .s-header {
      display: flex;
      align-items: center;
      height: 92upx;
      line-height: 1;

      .s-img {
        width: 140upx;
        height: 30upx;
      }

      .tip {
        font-size: $font-base;
        color: $font-color-light;
        margin: 0 20upx 0 40upx;
      }

      .timer {
        display: inline-block;
        width: 40upx;
        height: 36upx;
        text-align: center;
        line-height: 36upx;
        margin-right: 14upx;
        font-size: $font-sm+2upx;
        color: #fff;
        border-radius: 2px;
        background: rgba(0, 0, 0, .8);
      }

      .icon-you {
        font-size: $font-lg;
        color: $font-color-light;
        flex: 1;
        text-align: right;
      }
    }

    .floor-list {
      white-space: nowrap;
    }

    .scoll-wrapper {
      display: flex;
      align-items: flex-start;
    }

    .floor-item {
      width: 150upx;
      margin-right: 20upx;
      font-size: $font-sm+2upx;
      color: $font-color-dark;
      line-height: 1.8;

      image {
        width: 150upx;
        height: 150upx;
        border-radius: 6upx;
      }

      .price {
        color: $uni-color-primary;
      }
    }
  }

  .f-header {
    display: flex;
    align-items: center;
    height: 100upx;
    padding: 6upx 30upx 8upx;
    background: #fff;

    image {
      flex-shrink: 0;
      width: 80upx;
      height: 80upx;
      margin-right: 20upx;
    }

    .tit-box {
      flex: 1;
      display: flex;
    }

    .tit {
      font-size: $font-lg +2upx;
      color: #font-color-dark;
      line-height: 1.3;
    }

    .tit2 {
      font-size: $font-sm;
      color: $font-color-light;
    }

    .icon-you {
      font-size: $font-lg +2upx;
      color: $font-color-light;
    }
  }

  /* 团购楼层 */
  .group-section {
    background: #fff;

    .g-swiper {
      height: 550upx;
      padding-bottom: 30upx;
    }

    .g-swiper-item {
      width: 100%;
      padding: 0 30upx;
      display: flex;
    }

    image {
      width: 100%;
      height: 360upx;
      border-radius: 4px;
    }

    .g-item {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      width: 200rpx;
    }

    .left {
      flex: 1.2;
      margin-right: 24upx;

      .t-box {
        padding-top: 20upx;
      }
    }

    .right {
      flex: 0.8;
      flex-direction: column-reverse;

      .t-box {
        padding-bottom: 20upx;
      }
    }

    .t-box {
      height: 160upx;
      font-size: $font-base+2upx;
      color: $font-color-dark;
      line-height: 1.6;
    }

    .price {
      color: $uni-color-primary;
    }

    .m-price {
      font-size: $font-sm+2upx;
      text-decoration: line-through;
      color: $font-color-light;
      margin-left: 8upx;
    }

    .pro-box {
      display: flex;
      align-items: center;
      margin-top: 10upx;
      font-size: $font-sm;
      color: $font-base;
      padding-right: 10upx;
    }

    .progress-box {
      flex: 1;
      border-radius: 10px;
      overflow: hidden;
      margin-right: 8upx;
    }
  }

  /* 分类推荐楼层 */
  .hot-floor {
    width: 100%;
    overflow: hidden;
    margin-bottom: 20upx;

    .floor-img-box {
      width: 100%;
      height: 320upx;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(255, 255, 255, .06) 30%, #f8f8f8);
      }
    }

    .floor-img {
      width: 100%;
      height: 100%;
    }

    .floor-list {
      white-space: nowrap;
      padding: 20upx;
      padding-right: 50upx;
      border-radius: 6upx;
      margin-top: -140upx;
      margin-left: 30upx;
      background: #fff;
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
      position: relative;
      z-index: 1;
    }

    .scoll-wrapper {
      display: flex;
      align-items: flex-start;
    }

    .floor-item {
      width: 180upx;
      margin-right: 20upx;
      font-size: $font-sm+2upx;
      color: $font-color-dark;
      line-height: 1.8;

      image {
        width: 180upx;
        height: 180upx;
        border-radius: 6upx;
      }

      .price {
        color: $uni-color-primary;
      }
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      flex-shrink: 0;
      width: 180upx;
      height: 180upx;
      border-radius: 6upx;
      background: #f3f3f3;
      font-size: $font-base;
      color: $font-color-light;

      text:first-child {
        margin-bottom: 4upx;
      }
    }
  }

  /* 猜你喜欢 */
  .guess-section {
    display: flex;
    flex-wrap: wrap;
    padding: 0 30upx;
    background: #fff;

    .guess-item {
      display: flex;
      flex-direction: column;
      width: 48%;
      padding-bottom: 40upx;

      &:nth-child(2n+1) {
        margin-right: 4%;
      }
    }

    .image-wrapper {
      width: 100%;
      height: 330upx;
      border-radius: 3px;
      overflow: hidden;

      image {
        width: 100%;
        height: 100%;
        opacity: 1;
      }
    }

    .title {
      font-size: $font-lg;
      color: $font-color-dark;
      line-height: 80upx;
    }

    .price {
      font-size: $font-lg;
      color: $uni-color-primary;
      line-height: 1;
    }
  }

  .bg-gradual-green {
    background-image: linear-gradient(180deg, #86CE2C, #6db617);
    color: #ffffff;
  }

  .coupon-box {
    z-index: 99999;
    position: fixed;
    right: 5px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    background-color: #FF5C5C;
    /* 红包背景色 */
    color: white;
    border-radius: 10%;
    /* 圆形红包 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease-in-out;
  }

  .coupon-box.hidden {
    bottom: 50px;
    /* Adjust to hide half */
  }

  .coupon-box.transparent {
    background-color: rgba(255, 92, 92, 0.5);
    /* 透明度增加50% */
    border-color: rgba(255, 31, 31, 0.5);
    /* 边框透明 */
  }
</style>