nk-shop2.0/components/zbpSwiper.vue

<template>
  <view class="zbp-head-wrapper">
    <view class="color-lump"></view>
    <view class="bg-img">
      <img :src="bgColor" alt="">
    </view>
    <view class="site-box flex_a_c_j_sb">
      <view class="place_wrapper flex_a_c">
        <view class="iconfont icon-weizhi"></view>
        <view class="town_name">{{street}}</view>
      </view>
      <navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
        <view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
      </navigator>
    </view>
    <!-- 搜索栏 -->
    <navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
      <view class="flex_a_c">
        <view class="iconfont icon-sousuo"></view>
        <input type="text" v-model="keyword" placeholder="搜索产品或店铺">
      </view>
      <button class="search_btn">搜索</button>
    </navigator>
    <!-- 轮播图 -->
    <view class="supply_chains-head">
      <swiper class="swiper l_center" @change="swiperChange" :indicator-dots="swiper.indicatorDots"
        :autoplay="swiper.autoplay" :interval="swiper.interval" :duration="swiper.duration"
        indicator-active-color="#fff">
        <block v-for="(item,i) in swiper['url']" :key="i">
          <swiper-item class="swi_item">
            <u--image radius="15" :showLoading="true" :src="item.img" width="694.74rpx" height="242.11rpx"
              mode="aspectFill">
            </u--image>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
</template>

<script>
  import { getIndexData, getDiy } from '@/api/api.js'
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        keyword: '',
        street: '',
        bgColor: '',
        swiper: {
          url: [{
            img: ''
          }],
          indicatorDots: true, // 显示面板指示点
          vertical: false, // 滑动方向是否为纵向
          autoplay: true, // 是否自动切换
          interval: 2000, // 自动切换时间间隔
          duration: 400 // 滑动动画时长
        },
      }
    },
    computed: mapGetters(['location']),
    watch: {},
    created() {
      const loca = JSON.parse(this.location)
      this.street = loca.address_component.street
      this.getBanner()
    },
    methods: {
      swiperChange(e) {
        let { current, source } = e.detail;
        if (source === 'autoplay' || source === 'touch') {
          this.bgColor = this.swiper.url[e.detail.current]['img']
        }
      },
      async getBanner() {
        this.swiper.url = [{
            img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/db8c4202304281456295061.png'
          },
          {
            img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/dbefb202304281456319848.png'
          },
          {
            img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/2219c202304281456309025.png'
          },
          {
            img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/b4f86202304281456307136.png'
          },
          {
            img: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/def/3b6ae202304281456327858.png'
          }
        ]
        // const { data } = await getDiy({ id: 0 })
        // if (data.value['1683638943100000']) {
        //   this.swiper.url = data.value['1683638943100000'].swiperConfig.list
        // } else {
        //   this.swiper.url = data.value['1683875164005000'].swiperConfig.list
        // }
        this.bgColor = this.swiper.url[0].img
      },
    }
  }
</script>

<style lang="scss">
  .zbp-head-wrapper {
    position: relative;
    padding-top: 78.95rpx;
    overflow: hidden;

    .color-lump {
      z-index: 1;
      position: absolute;
      bottom: -86px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 102%;
      height: 133px;
      border-radius: 30px 30px 0 0;
      background-color: #fff;
    }

    .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);
      }
    }

    .site-box {
      margin: 0 auto;
      width: 694.74rpx;
      height: 66.67rpx;
      margin-bottom: 26.32rpx;
      position: relative;

      // 位置
      .place_wrapper {
        color: #fff;
        margin-right: 24.56rpx;
        font-size: 31.58rpx;

        .town_name {
          margin-left: 10.53rpx;
        }
      }

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

    .my-main {
      transition: background-color .5s ease;
    }

    .search_content {
      margin: 0 auto;
      width: 694.74rpx;
      height: 61.4rpx;
      padding: 2px 2px 2px 21.05rpx;
      border-radius: 100px;
      background: #fff;
      margin-bottom: 17.54rpx;
      position: relative;
      box-sizing: border-box;

      .icon-sousuo {
        font-size: 26.32rpx;
        font-weight: bold;
        color: #c8c7c6;
        margin-right: 17.54rpx;
      }

      .search_btn {
        color: #fff;
        width: 105.26rpx;
        height: 52.63rpx;
        line-height: 52.63rpx;
        background: #f84221;
        border-radius: 100px;
        font-size: 28.07rpx;
      }
    }

    .supply_chains-head {
      margin-bottom: 17.54rpx;
      position: relative;
      z-index: 2;

      .swiper {
        width: 694.74rpx;
        height: 242.11rpx;
        margin: 0 auto;

        .swi_item {
          width: 100%;
          height: 242.11rpx;
        }
      }
    }
  }
</style>