bigdata_WX/pages/cb/shuifeizs/components/rotationBottom.vue

<template>
  <view
    class="rotation-wraper"
    :style="{
      height:
        tktype == 1
          ? `calc(100% - 256rpx - 168rpx)`
          : `calc(100% - 256rpx - 440rpx)`,
    }"
  >
    <view class="rotation-wraper-left">
      <view
        class="rotation-wraper-left__item"
        v-for="(item, index) in listData"
        :key="item.sfBid"
        @click="clickHandler(item, index)"
        :class="{ active: index === currentIndex }"
        >{{ item.sfDisplayname || item.sfName }}
        <image
          :src="borderBottomGray"
          class="border-bottom-gray"
          v-if="index === currentIndex"
        />
      </view>
    </view>
    <view class="rotation-wraper-right">
      <scroll-view
        scroll-y="true"
        enable-flex="true"
        scroll-with-animation
        class="server-page__list-scroll"
        :scroll-into-view="activeMenuId"
      >
        <rotationCard
          v-for="item in listData"
          :item="item"
          :tktype="tktype"
          :key="item.sfBid"
          @actionChecked="actionCheckedHandler"
          @changeTi="changeTiHandler"
          :id="'tab' + item.sfBid"
        />
      </scroll-view>
    </view>
  </view>
</template>
<script>
import rotationCard from './rotationCard.vue';
export default {
  name: 'rotationBottom',
  props: {
    alreadyList: {
      type: Array,
      default: () => [],
    },
    tktype: {
      type: Number,
      default: 1,
    },
    activeIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      listData: [],
      borderBottomGray:'https://s3.hnyfwlw.com/webstaticimg/bigdata_app/deviceIcons/shuifei/borderBottomGray.png',
      currentIndex: 0,
      currentItem: {},
      activeMenuId: '',
    };
  },
  watch: {
    activeIndex() {
      this.currentIndex = 0;
      const firstItem = this.alreadyList[0];
      this.activeMenuId = `tab${firstItem?.sfBid}`;
    },
    alreadyList(value) {
      this.listData = value;
    },
  },
  components: {
    rotationCard,
  },
  methods: {
    changeTiHandler(item) {
      const index = this.getItemBySfBid(item.sfBid);
      this.$set(this.listData, index, {
        ...item,
        ti: item.ti,
      });
      this.$emit('updateList', this.listData);
    },
    // 通过sfBid查到某个item的index
    getItemBySfBid(sfBid) {
      return this.listData.findIndex((item) => item.sfBid === sfBid);
    },
    actionCheckedHandler(item) {
      const index = this.getItemBySfBid(item.sfBid);
      this.$set(this.listData, index, {
        ...item,
        isChecked: !item.isChecked,
      });
      this.$emit('updateList', this.listData);
    },

    clickHandler(item, index) {
      this.currentItem = item;
      this.currentIndex = index;
      this.activeMenuId = `tab${item.sfBid}`;
    },
  },
};
</script>
<style scoped lang="scss">
.server-page__list-scroll {
  height: 100%;
  overflow: hidden;
}
.rotation-wraper {
  display: flex;
  justify-content: space-between;
  position: relative;
  height: calc(100% - 256rpx - 168rpx);
  padding-bottom: 128rpx;
  overflow-y: hidden;
  .rotation-wraper-left {
    width: 240rpx;
    border-radius: 16rpx;
    background-color: #ffffff;
    height: 100%;
    background: #ffffff;
    overflow-y: auto;
    padding-top: 12rpx;
    &__item {
      height: 96rpx;
      line-height: 96rpx;
      padding: 0 32rpx;
      color: #364d46;
      font-family: 'Source Han Sans CN VF';
      font-size: 28rpx;
      font-weight: 400;
      position: relative;
      .border-bottom-gray {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        bottom: -30rpx;
        right: 0;
      }
    }
  }
  .active {
    background: #f5f6fa;
    color: #14a478;
    font-family: 'Source Han Sans CN VF';
    font-size: 28rpx;
    font-weight: 700;
  }
  .rotation-wraper-right {
    width: calc(100% - 240rpx - 64rpx);
    margin-right: 32rpx;
    overflow-y: scroll;
  }
}
</style>