ccy_DIB/pages/summaryOfPortraits/components/components/sliderPage.vue

<template>
  <!--  <view class="sliderPage">-->
  <!--    <view class="slider">-->
  <!--      <view class="rate" :style="{left: (index*15) + 'rpx'}"></view>-->
  <!--    </view>-->
  <!--  </view>-->

  <view class="scrollPage">
    <scroll-view class="scrollBox" 	scroll-x="true" :scroll-into-view="'item'+isYD &&selectIndex===1?0:selectIndex" scroll-with-animation>
      <view :style="{display: isYD && i===0?'none':''}" :id="'item'+i" :class="selectIndex===i?`scrollItem selectScroll${selectIndex}`:'scrollItem'" v-for="(item,i) in pageList" :key="i"  @click="handleToDetail(i)">
        {{item}}
      </view>
    </scroll-view>
  </view>
</template>
<script>
export default {
  name: "sliderPage",
  data() {
    return {
      pageList: ["基础信息", "车流统计", "客群统计", "经营统计", "交易统计", "业态品牌", "考核考评", "日常巡检"],
      // pageList: [],
      urlList: [
        '/pages/map/detail',
        '/pages/commercialBINew/carPortrait',
        '/pages/commercialBI/guestPortrait',
        '/pages/commercialBI/managePortrait',
        '/pages/commercialBI/businessPortrait',
        '/pages/commercialBI/formatPortraitBI',
        `/pages/examine/detail?type=${1}`,
        `/pages/examine/detail?type=${2}`,
      ],// 跳转地址
      urlListYD: [
        '/pages/map/detail',
        '/pages/commercialBINew/carPortrait',
        '/pages/commercialBI/guestPortrait',
        '/pages/commercialBI/managePortrait',
        '/pages/commercialBI/businessPortrait',
        '/pages/commercialBI/formatPortraitBI',
        `/pages/newamine/index?type=${1}&comePage=slider`,
        `/pages/newamine/index?type=${2}&comePage=slider`,
      ],// 跳转地址YD
      selectIndex: 0,
      isYD:false,// 判断是不是安徽驿达
    }
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    name:{
      type: String,
      default: ''
    }
  },
  watch: {
    index: {
      handler(value) {
        console.log('dsjdisjdap',value)
        this.selectIndex = value

        // let storeServiceInfo = uni.getStorageSync('currentService')
        // if(value === 1 && storeServiceInfo.SERVERPART_NAME=== '安徽驿达'){
        //   this.selectIndex = 0
        // }else{
        //   this.selectIndex = value
        // }
      },
      immediate: true
    },
    name:{
      handler(value) {
        console.log('dsadjsakdajs',value)
        if(value==='安徽驿达'){
         this.isYD = true
        }else{
          this.isYD = false
        }
      },
      immediate: true
    }
  },
  // onLoad() {
  //
  // },
  onShow(){

  },
  methods: {
    handleToDetail(i) {
      console.log('i', i)
      this.$emit('handleChangeIndex',i)
      this.selectIndex = i
      // this.selectIndex = i
      // let storeServiceInfo = uni.getStorageSync('currentService')
      // if (storeServiceInfo.SERVERPART_NAME === '安徽驿达') {
      //   uni.navigateTo({
      //     url: this.urlListYD[i]
      //   })
      // } else {
      //   uni.redirectTo({
      //     url: this.urlList[i]
      //   })
      // }
    },
  }
}
</script>

<style scoped lang="scss">
.sliderPage {
  width: 100%;
  height: 16rpx;
  display: flex;
  justify-content: center;
  padding-top: 8rpx;
  background: #fff;

  .slider {
    width: 120rpx;
    height: 8rpx;
    background: #e0dfdf;
    border-radius: 4rpx;
    position: relative;

    .rate {
      position: absolute;
      top: 0;
      height: 100%;
      background: #786B6C;
      border-radius: 4rpx;
      width: calc(100% / 8);
    }
  }
}

.scrollPage {
  width: 100%;
  height: 56rpx;
  box-sizing: border-box;
  padding: 0 16rpx;

  .scrollBox {
    width: 100%;
    height: 100%;
    white-space: nowrap;

    .scrollItem {
      display: inline-block;
      height: 100%;
      box-sizing: border-box;
      padding: 8rpx 16rpx;
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #6F747A;
      line-height: 40rpx;
    }

    .selectScroll0 {
      font-size: 28rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      color: #006DF2;
      line-height: 40rpx;
      position: relative;
    }

    .selectScroll0:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #006DF2;
    }

    .selectScroll1 {
      color: #1E67FF;
      position: relative;
    }

    .selectScroll1:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #1E67FF;
    }

    .selectScroll2 {
      color: #008649;
      position: relative;
    }

    .selectScroll2:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #008649;
    }

    .selectScroll3 {
      color: #6146F8;
      position: relative;
    }

    .selectScroll3:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #6146F8;
    }

    .selectScroll4 {
      color: #E57B00;
      position: relative;
    }

    .selectScroll4:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #E57B00;
    }

    .selectScroll5 {
      color: #4C43FF;
      position: relative;
    }

    .selectScroll5:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #4C43FF;
    }

    .selectScroll6 {
      color: #EC4E00;
      position: relative;
    }

    .selectScroll6:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #EC4E00;
    }

    .selectScroll7 {
      color: #EC4E00;
      position: relative;
    }

    .selectScroll7:after {
      content: '';
      position: absolute;
      display: inline-block;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 48rpx;
      height: 6rpx;
      background: #EC4E00;
    }
  }
}
</style>