new_shop_app/pages/index/component/homeComb.vue

<template>
  <view class="page_count">
    <!--顶部定位-->
    <view class="my-main header">
      <view style="height: var(--status-bar-height);"></view>
      <view class="location">
        <view class="box flex_a_c_j_sb">
          <view class="place_wrapper flex_a_c" @click="changeMap">
            <view class="iconfont icon-weizhi" style="color:#fff;font-size:40rpx;"></view>
            <view class="town_name">{{street||'定位中' }}</view>
          </view>
          <view class="flex_a_c_j_sb">
            <view style="margin-right: 30rpx;" @click="scanQRcode" hover-class="none">
              <view class="iconfont icon-saoma" style="color:#fff;font-size:40rpx;"> </view>
            </view>
            <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
              <view class="iconfont icon-xiaoxi" style="color:#fff;font-size:40rpx;"> </view>
            </navigator>
          </view>
        </view>
      </view>
    </view>

    <!--轮播图-->
    <view class="swiperBg" :style="{ marginTop: (swiperTop + 13)+'px'}">
      <view class="swiper page_swiper" v-if="imgUrls.length">
        <swiper :autoplay="true" :circular="circular" :interval="intervals" :duration="duration"
          indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" :current="swiperCur"
          style="height:330rpx;margin: 0 auto;width:710rpx;" @change="swiperChange" :class="{ scalex:isScale }">
          <block v-for="(item,index) in imgUrls" :key="index">
            <swiper-item :class="{ active: index == swiperCur,scalex:isScale }">
              <view @click="goDetail(item)" class='slide-navigator acea-row row-between-wrapper'>
                <image :src="item.img" class="slide-image aa" style="height:330rpx;" mode="aspectFill">
                </image>
              </view>
            </swiper-item>
          </block>
        </swiper>
        <view class="dots">
          <block v-for="(item,index) in imgUrls" :key="index">
            <view class="dot" :class="index == swiperCur ? ' active' : ''"></view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // +----------------------------------------------------------------------
  // | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
  // +----------------------------------------------------------------------
  // | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
  // +----------------------------------------------------------------------
  // | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
  // +----------------------------------------------------------------------
  // | Author: CRMEB Team <admin@crmeb.com>
  // +----------------------------------------------------------------------

  let statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
  import {
    configMap
  } from '@/utils';
  import {
    getGeocoder
  } from "@/api/store.js"
  export default {
    name: 'homeComb',
    props: {
      dataConfig: {
        type: Object,
        default: () => {}
      },
      isScrolled: {
        type: Boolean,
        default: false
      },
      isScale: {
        type: Boolean,
        default: false
      },
      isMenu: {
        type: Boolean,
        default: false
      },
      userInfo: {
        type: Object,
        default: () => {}
      },
    },
    computed: configMap({
      site_logo: ''
    }),
    data() {
      return {
        statusBarHeight: statusBarHeight,
        scrollHeight: 0,
        autoplay: true,
        interval: this.dataConfig.titleConfig.value * 1000 || 2500,
        duration: 500,
        marTop: 50,
        searchH: 0,
        logoConfig: this.dataConfig.logoConfig.url,
        hotWords: this.dataConfig.hotWords.list || [],
        tabClick: 0, //导航栏被点击
        isLeft: 0, //导航栏下划线位置
        isWidth: 0, //每个导航栏占位
        mainWidth: 0,
        tabLeft: 0,
        swiperIndex: 0,
        childIndex: 0,
        childID: 0,
        tabTitle: this.dataConfig.listConfig.list || [],
        fixedTop: 0,
        isTop: 0,
        navHeight: 38,
        indicatorDots: false,
        circular: true,
        autoplay: true,
        intervals: 3000,
        duration: 500,
        imgUrls: [], //图片轮播数据
        imageH: 0,
        swiperCur: 0,
        swiperType: 1,
        searchVal: this.dataConfig.hotWords && this.dataConfig.hotWords.list[0]['val'] || '',
        bgColor: this.dataConfig.swiperConfig.list && this.dataConfig.swiperConfig.list[0]['img'],
        tabId: false,
        isCategory: false,
        swiperTop: 0,
        isFixed: true,
        street: '未开启定位'
      };
    },
    watch: {
      imageH(nVal, oVal) {
        this.imageH = nVal
      }
    },
    created() {
      var that = this
      // 获取设备宽度
      uni.getSystemInfo({
        success(e) {
          that.mainWidth = e.windowWidth
          that.isWidth = (e.windowWidth - 65) / 8
        }
      })
      setTimeout((e) => {
        const query = uni.createSelectorQuery().in(this);
        if (that.tabTitle.length > 0) {
          query.select('.navTabBox').boundingClientRect(data => {
            that.navHeight = data.height > 42 ? data.height : 42
          }).exec();
        } else {
          that.navHeight = 0
        }
        // #ifdef H5
        query.select('.header').boundingClientRect(data => {
          that.isTop = data.height
          that.marTop = data.height
        }).exec();
        // #endif
        // #ifdef MP || APP-PLUS
        // #ifdef APP-PLUS
        const menuButton = 0
        //#endif
        // #ifdef MP
        const menuButton = uni.getMenuButtonBoundingClientRect();
        //#endif
        query
          .select('.serch-box')
          .boundingClientRect(data => {
            this.marTop = data.height
          }).exec();
        //#endif
      }, 500)
      that.isTop = (uni.getSystemInfoSync().statusBarHeight + this.marTop)
      that.imgUrls = that.dataConfig.swiperConfig.list
      that.$nextTick(function() {
        setTimeout((e) => {
          // #ifdef H5
          that.swiperTop = that.navHeight + that.marTop
          //#endif
          // #ifdef MP || APP-PLUS
          that.swiperTop = that.navHeight + uni.getSystemInfoSync().statusBarHeight + that.marTop
          //#endif
        }, 500)
      })
    },
    mounted() {
      this.street = this.$store.state.storage.address.townName;
      let that = this;
      if (that.tabTitle.length > 0 && that.tabTitle[0]['value'] != '推荐') {
        that.tabTitle.unshift({
          img: '',
          info: [{
            value: "推荐"
          }, {
            value: false
          }]
        })
      }
      that.$nextTick(function() {
        uni.getImageInfo({
          src: that.setDomain(that.imgUrls[0].img),
          success: function(res) {
            if (res && res.height > 0) {
              let height = res.height * ((750 - 20) / res.width)
              that.$set(that, 'imageH', height);
            } else {
              that.$set(that, 'imageH', 375);
            }
          },
          fail: function(error) {
            that.$set(that, 'imageH', 375);
          }
        })
      })
    },
    methods: {
      async scanQRcode() {
        // #ifdef APP-PLUS
        let result = await this.$store.dispatch("permission/requestPermissions",
          'CAMERA')
        if (result !== 1) return;
        // #endif
        uni.scanCode({
          success: (res) => {
            console.log(res);
            if (res.result && res.result.includes('pages/payment/get_payment')) {
              let url = res.result.replace(/.*lihaink.cn/g, '');
              uni.navigateTo({
                url: url,
                fail: () => {
                  Toast('跳转页面失败')
                }
              })
            } else {
              Toast('无效的二维码')
            }
          }
        })
      },
      // 选择位置
      changeMap() {
        uni.navigateTo({
          url: `/pages/select_address_n/select_address_n`,
          success: () => {
            uni.$once('changeAddress', (e) => {
              this.street = e.street.name;
              this.town = e.street.name;
              this.$store.commit('setAddress', {
                street_id: e.street.code,
                townName: this.town
              });
              if (e.longitude) {
                this.longitude = e.longitude;
                this.latitude = e.latitude;
                this.$store.commit('setLocation', {
                  lat: e.latitude,
                  long: e.longitude,
                });
              }
            })
          }
        })
      },
      getLocation() {
        uni.getLocation({
          type: 'gcj02',
          success: (res) => {
            let latitude, longitude;
            latitude = res.latitude.toString();
            longitude = res.longitude.toString();
            this.$store.commit('setLocation', {
              lat: res.latitude.toFixed(6),
              long: res.longitude.toFixed(6),
            });
            getGeocoder({
              lat: latitude,
              long: longitude
            }).then(res => {
              let town = res.data.address_reference.town.title
              let street_id = street_id = res.data.address_reference.town.id
              this.street = res.data.address_reference.town.title;
              this.$store.commit('setAddress', {
                street_id: street_id,
                townName: town
              });
              uni.$emit('getLocation_succees', {
                street_id,
              })
            }).catch(err => {
              uni.showToast({
                title: err,
                icon: 'none'
              })
              this.street = '定位失败'
            })
          }
        })
      },
      goDetail(url) {
        let urls = url.info[1].value
        this.$util.JumpPath(urls);
      },
      //替换安全域名
      setDomain: function(url) {
        url = url ? url.toString() : '';
        //本地调试打开,生产请注销
        if (url.indexOf("https://") > -1) return url;
        else return url.replace('http://', 'https://');
      },
      swiperChange(e) {
        let {
          current,
          source
        } = e.detail;
        if (source === 'autoplay' || source === 'touch') {
          this.swiperCur = e.detail.current;
          this.bgColor = this.imgUrls[e.detail.current]['img']
        }
      },
      textChange(e) {
        let {
          current,
          source
        } = e.detail;
        if (source === 'autoplay' || source === 'touch') {
          this.searchVal = this.hotWords[e.detail.current]['val']
        }
      },
      /**显示全部分类*/
      showCategory() {
        this.isCategory = true;
      },
      /*跳转为页面*/
      changeTab(item, index) {
        if (this.tabClick == index) return
        this.tabClick = index //设置导航点击了哪一个
        this.isLeft = index * this.isWidth + 16 //设置下划线位置
        this.tabId = item.info[1].value
        this.bgColor = this.tabId ? item.img : this.dataConfig.swiperConfig.list[0]['img']
        this.imgUrls = this.tabId ? [{
          img: item.img
        }] : this.dataConfig.swiperConfig.list
        this.$emit('changeDiy', this.tabId);
      }
    },
  }
</script>

<style lang="scss" scoped>
  .page_count {
    position: relative;
    overflow: hidden;

    .bg-img {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      /* #ifdef MP || APP-PLUS */
      z-index: -1;
      /* #endif */
      /* #ifdef H5 */
      z-index: 0;
      /* #endif */
      z-index: 0;
      filter: blur(0);
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        filter: blur(30rpx);
        transform: scale(1.5);
      }
    }
  }

  .my-main {
    background-color: #40AE36;

    .location {
      padding: 0 28rpx;

      .box {
        height: 98rpx;
      }

      .town_name {
        color: #fff;
        margin-left: 18rpx;
        font-size: 30rpx;
      }
    }
  }

  .swiperTxt {
    width: 300rpx;
    line-height: 64rpx;
    height: 64rpx;
    overflow: hidden;
  }

  .swiperTxt .text {
    width: 480rpx;
  }

  .swiperTxt .text .newsTitle {
    width: 300rpx;
    font-size: 24rpx;
    color: #ffffff;
  }

  .swiperTxt swiper {
    height: 100%;
  }

  .header {
    z-index: 99;
    position: fixed;
    left: 0;
    width: 100%;

    .btn {
      position: relative;
      margin-left: 30rpx;

      .iconfont {
        font-size: 45rpx;
      }
    }

    .iconnum {
      min-width: 14rpx;
      color: #E93323;
      background: #fff;
      border-radius: 15rpx;
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      font-size: 10px;
      padding: 0 5px;
    }

    .serch-wrapper {
      align-items: center;
      padding: 20rpx 30rpx 20rpx 30rpx;

      .logo {
        width: 133rpx;
        margin-right: 20rpx;
      }

      image {
        width: 133rpx;
        height: 66rpx;
      }

      .box {
        flex: 1;
      }

      .input,
      .uninput {
        line-height: 64rpx;
        height: 64rpx;
        padding: 0 0 0 30rpx;
        background: rgba(0, 0, 0, .2);
        color: #fff;
        border-radius: 30rpx;
        font-size: 28rpx;
        z-index: 2;
        position: relative;
        box-sizing: border-box;

        .iconfont {
          position: absolute;
          right: 20rpx;
          top: 0;
          color: #eeeeee;
        }
      }
    }
  }

  .mp-header {
    z-index: 99;
    position: fixed;
    left: 0;
    width: 100%;

    .box {
      flex: 1;
    }

    .serch-box {
      margin-top: 10rpx;
    }

    .serch-wrapper {
      display: flex;
      align-items: center;
      // padding: 0 50rpx 20rpx 30rpx;
      padding: 0 28rpx;
      height: 76rpx;

      .logo {
        width: 133rpx;
        margin-right: 20rpx;
        line-height: 0;
      }

      image {
        width: 118rpx;
        height: 42rpx;
      }

      .input,
      .uninput {
        display: flex;
        /* #ifdef MP */
        flex: 0;
        /* #endif */
        /* #ifdef APP-PLUS */
        flex: 1;
        /* #endif */
        flex: 1;
        align-items: center;
        height: 64rpx;
        line-height: 64rpx;
        padding: 0 50rpx 0 30rpx;
        background: rgba(0, 0, 0, .2);
        border-radius: 100rpx;
        color: #ffffff;
        font-size: 28rpx;
        position: relative;
        box-sizing: border-box;

        .iconfont {
          position: absolute;
          right: 20rpx;
          top: 0;
          color: #eeeeee;
        }
      }

      /* #ifdef MP */
      .uninput {
        max-width: 500rpx;
      }

      .input {
        max-width: 340rpx;
      }

      /* #endif */
    }
  }

  .tabNav {
    padding-top: 10rpx;
  }

  .navTabBox {
    color: rgba(255, 255, 255, 1);
    padding: 0 30rpx;
    z-index: 10;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    position: fixed;

    scroll-view {
      width: 100%;
      padding-right: 30rpx;
      height: 70rpx;
    }

    .click {
      color: white;
    }

    .longTab {
      .longItem {
        height: 50upx;
        display: inline-block;
        line-height: 50upx;
        text-align: center;
        font-size: 28rpx;
        color: #FFFFFF;
        max-width: 160rpx;
        margin-right: 30rpx;
        position: relative;

        &:last-child {
          margin-right: 0;
        }

        &.click {
          font-weight: bold;
          font-size: 30rpx;
          color: #FFFFFF;

          &::after {
            content: '';
            transition: .5s;
            width: 33rpx;
            height: 4rpx;
            background: #FFFFFF;
            position: absolute;
            bottom: -4rpx;
            left: 50%;
            margin-left: -16rpx;
          }
        }
      }
    }
  }

  .scrolled {
    z-index: 5000;
    position: fixed;
    min-height: 90rpx;
    left: 0;
    top: 0;
    width: 100%;
    // background: #fff!important;
    background-image: url('https://lihai001.oss-cn-chengdu.aliyuncs.com/def/23bd9202402271611232730.png');
    background-color: #f1f1f1;
    /* 设置背景色 */
    background-size: 100% 100%;
    /* 让背景图片铺满整个盒子 */
    background-repeat: no-repeat;
    /* 不重复 */
    transition: background-color .5s ease;

    .longItem,
    .click,
    .category text {
      color: #000000 !important;
    }

    .navTabBox,
    .mp-header,
    .header {
      // transition: background-color .5s ease;
      // background: #ffffff;
    }

    .btn .iconfont {
      color: #333333 !important;
    }

    .iconnum {
      background: #333333 !important;
    }

    .underline {
      background: #000000 !important;
    }

    .click {
      &::after {
        background-color: #fff !important;
      }
    }
  }

  .swiperBg {
    z-index: 1;

    .colorBg {
      position: absolute;
      left: 0;
      top: 0;
      height: 130rpx;
      width: 100%;
    }

    .page_swiper {
      position: relative;
      width: 100%;
      height: auto;
      margin: 0 auto;
      border-radius: 10rpx;
      overflow-x: hidden;
      z-index: 8;
      padding: 0 10rpx;

      swiper-item {
        border-radius: 10rpx;
      }

      .swiper-item,
      image,
      .acea-row.row-between-wrapper {
        width: 100%;
        margin: 0 auto;
        border-radius: 10rpx;
      }

      swiper {
        width: 100%;
        display: block;
        height: auto;

        &.scalex {
          /deep/.uni-swiper-slide-frame {
            transform: translate(0, 0) !important;
          }
        }
      }

      image {
        transform: scale(0.93);
        transition: all 0.6s ease;
      }

      swiper-item.active,
      swiper-item.scalex {
        image {
          transform: scale(1);
        }
      }

      /*用来包裹所有的小圆点  */
      .dots {
        width: 156rpx;
        height: 36rpx;
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 320rpx;
        bottom: 0;
      }

      /*未选中时的小圆点样式 */
      .dot {
        width: 16rpx;
        height: 6rpx;
        border-radius: 6rpx;
        margin-right: 6rpx;
        background-color: rgba(255, 255, 255, .4);

        /*选中以后的小圆点样式  */
        &.active {
          width: 32rpx;
          height: 6rpx;
          background-color: rgba(255, 255, 255, .4);
        }
      }
    }
  }

  /deep/.dot0 .uni-swiper-dots-horizontal {
    left: 10%;
  }

  /deep/.dot1 .uni-swiper-dots-horizontal {
    left: 50%;
  }

  /deep/.dot2 .uni-swiper-dots-horizontal {
    left: 90%;
  }
</style>