[JavaScript知识库]滑动屏幕导航栏高亮

<template>
  <pa-flex-layout class="body-color">
    <template  slot="header">
      <pa-header white back :prevBack="prevBack">
        <img
          @click="openPopup"
          slot="right"
          class="header-img"
          src="@assets/images/complaint_share.png"
        />
      </pa-header>
      <div class="examine-flex" v-if="backData && backData.auditStatus !== '已退回'">
        <div class="examine-auto">
          <div
            class="examine-box"
            v-for="(item, index) in examineList"
            :key="index"
            @click="tabClick(item, index)"
          >
            <div
              :class="active === index ? 'addBox' : ''"
              class="examine-index"
            >
              {{ item.index }}
            </div>
            <p class="examine-title">{{ item.title }}</p>
            <div :class="active === index ? 'addSplit' : ''"></div>
          </div>
        </div>
      </div>
    </template>
    <div class="tool-bj" v-if="backData.auditStatus === '已退回'">
      <div class="tool-box">
        <img class="tool-img" src="@assets/images/complaint_opinion.png" />
        <span class="tool-title">上次退回意见</span>
        <p class="tool-text">
          {{backData.auditRemark}}
        </p>
      </div>
    </div>
    <div class="split"></div>
    <ComExamineView id="id0" :ReplayList="ReplayList" />

    <!--审核案件复盘信息-->
    <CaseResumption id="id1" :PortalList="PortalList" />
    <!--审核解决建议评估-->
    <CaseAssessMent id="id2" :ReplayList="ReplayList" :PortalList="PortalList" @PortalList="suggestionResult" />
    <!--审核-综合评审意见-->
    <CaseComprehensive id="id3" :ReplayList="ReplayList" :backData="backData"  @auditStatus="auditStatus" @auditRemark="auditRemark" />
    <pa-footer slot="footer" class="foot-height">
      <div class="footer-flex">
        <div v-if="ReplayList && ReplayList.taskStatus === '1'"  @click="submit" class="footer-btn not-btn">已发送</div>
        <div v-else @click="submit" class="footer-btn yes-btn">发送</div>
      </div>
    </pa-footer>
  </pa-flex-layout>
</template>

<script>
import { mapState } from 'vuex';
import { Field, Popup, Dialog, field, Cascader } from 'vant';
import panel from './component/panel';
import ComExamineView from './component/ComExamineView';
import CaseAssessMent from './component/CaseAssessMent';
import CaseResumption from './component/CaseResumption';
import CaseComprehensive from './component/CaseComprehensive';
import ContactModalBase from '~comp/contactModalBase/contactModalBase';
import fetch from '~api';
const { getComplaintReplayTaskInfo, auditComplaintReplay } = fetch;
export default {
  name: 'complaintExamineDetail',
  components: {
  },
  data() {
    return {
      examineList: [
        {
          index: 1,
          title: '了解投诉信息'
        },
        {
          index: 2,
          title: '查看复盘概述'
        },
        {
          index: 3,
          title: '评论采纳建议'
        },
        {
          index: 4,
          title: '填写综合意见'
        }
      ],
      active: 0,
    };
  },
  mounted() {
  },
  methods: {
    tabClick(item, index) {
      this.$dtTracker('customerTrack', 'LP_H01100138', {});
      this.active = index;
      this.$el.querySelector(`#id${index}`).scrollIntoView({
        behavior: 'smooth',
        block: 'start'
      });
      this.$nextTick(() => {
        let offsetTop = this.$el.querySelector(`#id${index}`).offsetTop;
        setTimeout(() => {
          document.getElementsByClassName('pa-flex-layout-bd')[0].scrollTop = offsetTop - 120;
        }, 150);
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import '@/assets/less/px2px';

.body-color {
  background: #f6f7f9;
}
.header-img {
  .p73(width, 48px);
  .p73(height, 48px);
  .p73(margin-left, 40px);
}

//审核
.examine-flex {
  overflow: hidden;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  .px7to3(height, 144px);
  position: relative;
}
.examine-auto {
  background: #ffffff;
  .px7to3(height, 144px);
  .p73(width, 855px);
  position: relative;
  overflow: hidden;
  .examine-box {
    background: #ffffff;
    .p73(width, 213px);
    float: left;
    text-align: center;
    position: relative;
    .p73(padding-top, 26px);
    .p73(padding-bottom, 12px);
    .examine-index {
      .p73(width, 44px);
      .p73(height, 44px);
      background: #ebedf0;
      border-radius: 50%;
      font-family: PingFangSC-Medium;
      .p73(font-size, 28px);
      color: #596473;
      text-align: center;
      font-weight: 500;
      margin: 0 auto;
    }
    .examine-title {
      font-family: PingFangSC-Medium;
      .p73(padding-top, 12px);
      .p73(font-size, 28px);
      .p73(height, 40px);
      color: #23262a;
      font-weight: 500;
    }
    // 点击高亮
    .addBox {
      background: #0570ff;
      color: #ffffff;
    }
    .addSplit {
      position: absolute;
      .px7to3(width, 32px);
      .px7to3(height, 6px);
      bottom: 0;
      top: 63px;
      right: 42px;
      display: inline-block;
      background: #0570ff;
      border-radius: 3px;
    }
  }
}

.tool-bj {
  background: #ffffff;
  .p73(padding-top, 20px);
  .p73(padding-left, 24px);
  .p73(padding-right, 24px);
  .p73(padding-bottom, 24px);
  .tool-box {
    .px7to3(width, 702px);
    .px7to3(min-height, 176px);
    .p73(padding-top, 24px);
    .p73(padding-bottom, 24px);
    .p73(padding-right, 24px);
    .p73(padding-left, 24px);
    background: #ffeada;
    border-radius: 8px;
    .tool-img {
      .px7to3(width, 40px);
      .px7to3(height, 40px);
    }
    .tool-title {
      font-family: PingFangHK-Medium;
      .p73(font-size, 28px);
      color: #ff6300;
      font-weight: 500;
    }
    .tool-text {
      font-family: PingFangHK-Regular;
      .p73(font-size, 28px);
      color: #ff6300;
      font-weight: 400;
      word-break: break-all;
    }
  }
}

// 间隔线
.split {
  .p73(height, 20px);
}
::-webkit-scrollbar {
  display: none;
}
// 问题分析与建议
.question-title {
  background: #ffffff;
  .p73(height, 100px);
  .p73(padding-top, 28px);
  .p73(padding-left, 24px);
  .p73(padding-bottom, 28px);
 position: relative;
    &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #E5E5E5;
    bottom: 0;
    left: 0;
    transform: scaleY(0.5);
  }
}
/deep/ .pa-header.b-bottom {
  border-bottom: inherit;
}
.group-list {
  .p73(padding-top, 29px);
  .p73(padding-left, 24px);
  .p73(padding-bottom, 5px);
  .p73(margin-bottom, 20px);
  background: #ffffff;
  .group-name {
    font-family: PingFangSC-Medium;
    .p73(font-size, 30px);
    color: #222222;
    font-weight: 500;
  }
  .group-flex {
    display: flex;
    align-items: center;
    .group-img {
      .p73(width, 26px);
      .p73(height, 28px);
      .p73(margin-left, 34px);
    }
  }
  .group-field {
    .p73(padding-top, 29px);
    .p73(padding-left, 0px);
    .p73(padding-right, 24px);
    .p73(padding-bottom, 29px);
    border-bottom: 1px solid #e8e8e8;
    &:first-child {
      border-top: 1px solid #e8e8e8;
    }
  }
  .not-border {
    .p73(padding-bottom, 0px);
    border-bottom: inherit;
  }
  .not-right {
    .p73(padding-right, 24px);
  }
  .group-flex {
    display: flex;
    float: right;
  }
  .solution-list {
    .solution-flex {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e8e8e8;
      .p73(padding-right, 24px);
      .p73(height, 100px);
      .p73(line-height, 100px);
      .solution-title {
        font-family: PingFangSC-Regular;
        .p73(font-size, 30px);
        color: #222222;
        font-weight: 400;
      }
      .solution-space {
        display: flex;
        align-items: center;
        .solution-center {
          display: flex;
          align-items: center;
          .solution-img {
            .p73(width, 30px);
            .p73(height, 30px);
          }
          .solution-text {
            .p73(margin-left, 8px);
            font-family: PingFangSC-Regular;
            .p73(font-size, 28px);
            color: #0570ff;
            text-align: right;
            color: #0570ff;
            font-weight: 400;
          }
        }
        .solution-delete {
          .p73(margin-left, 34px);
          .p73(width, 26px);
          .p73(height, 28px);
        }
      }
    }
    .solution-field {
      .p73(padding-top, 29px);
      .p73(padding-left, 0px);
      .p73(padding-right, 24px);
      .p73(padding-bottom, 29px);
    }
    .solution-area {
      .p73(padding-top, 17px);
      .p73(padding-left, 0px);
      .p73(padding-right, 24px);
      .p73(padding-bottom, 29px);
    }
  }
}

.tool-add {
  .p73(padding-top, 29px);
  .p73(padding-bottom, 29px);
  .p73(height, 100px);
  display: flex;
  align-items: center;
  background: #ffffff;
  justify-content: center;
  img {
    .p73(width, 30px);
    .p73(height, 30px);
  }
  span {
    .p73(margin-left, 8px);
    font-family: PingFangSC-Regular;
    .p73(font-size, 30px);
    color: #0570ff;
    font-weight: 400;
  }
}

.solution-van-area {
  background: #f6f8fa;
  .p73(border-radius, 8px);
  .p73(margin-top, 20px);
  .p73(padding-top, 28px);
  .p73(padding-left, 24px);
  .p73(padding-bottom, 20px);
  .p73(padding-right, 24px);
  .p73(padding-left, 24px);
  .p73(min-height, 252px);
  font-family: PingFangSC-Regular;
  .p73(font-size, 30px);
  color: #cccccc;
  .p73(line-height, 44px);
  font-weight: 400;
}

.foot-height {
  .p73(height, 120px);
  background: #ffffff;
  .footer-flex {
    display: flex;
    .p73(padding-top, 20px);
    .p73(padding-left, 24px);
    .footer-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      .p73(width, 702px);
      .p73(height, 80px);
      .p73(border-radius, 45px);
      font-family: PingFangSC-Medium;
      .p73(font-size, 32px);
      color: #ffffff;
      background: #0570ff;
      text-align: center;
      font-weight: 500;
    }
    // .yes-btn {
    //   border: inherit;
    //   color: #ffffff;
    //   background: #0570ff;
    // }
    .not-btn {
      background: rgb(139, 183, 249);
      color: rgb(198, 223, 254);
    }
  }
}

// popup
.popup-box {
  .p73(padding-top, 56px);
  .popup-title {
    .p73(padding-left, 32px);
    font-family: PingFangSC-Medium;
    .p73(font-size, 30px);
    color: #23262a;
    font-weight: 500;
  }
  .popup-flex {
    display: flex;
    .p73(padding-top, 44px);
    // flex-direction: column;
    .popup-space {
      .p73(width, 160px);
      .p73(height, 110px);
      text-align: center;
    }
  }
  .popup-img {
    .p73(width, 48px);
    .p73(height, 48px);
  }
  .popup-label {
    .p73(margin-top, 16px);
    .p73(font-size, 24px);
    font-family: PingFangSC-Regular;
    color: #666666;
    font-weight: 400;
  }
}

::v-deep .van-popup--right.van-popup--round {
  border-radius: 12px 0 0 12px;
}
//
::v-deep .pa-fieldItem-group .title {
  padding: 0px;
  // border-bottom: 1px solid #e8e8e8;
  .p73(padding-bottom, 28px);
  .p73(padding-right, 24px);
}
::v-deep .pa-field-item__label {
  font-family: PingFangSC-Regular;
  .p73(font-size, 30px);
  color: #222222;
  font-weight: 400;
}
// vant-field
::v-deep .van-field__control {
  .p73(font-size, 30px);
  color: #23262A;
  font-weight: 400;
  .p73(min-height, 160px);
}
::v-deep .van-field__word-limit {
  font-family: PingFangSC-Regular;
  .p73(font-size, 28px);
  color: #989fac;
  font-weight: 400;
}
::v-deep .van-field__word-num {
  color: #23262a;
}
//textarea边框
::v-deep .cell-textarea-content {
  background-color: #f6f8fa;
  border: inherit;
}

::v-deep .pa-footer-box .pa-footer {
  height: auto;
  border-top: inherit;
  justify-content: inherit;
}
</style>
<style lang="less">
.van-dialog {
  border-radius: 8px;
  width: 280px;
}
.van-dialog__header--isolated {
  padding: 24px 20px 24px 20px;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #23262a;
  font-weight: 400;
}
.van-dialog__confirm {
  color: #0570ff;
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
}
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: #0570ff;
}
</style>

// pa-flex-layout
<style lang="less">
@import "~@assets/less/utils";

.pa-flex-layout {
  display: flex;
  flex-direction: column;
  height: 100%;

  .pa-flex-layout-bd {
    flex: 1;
    -webkit-overflow-scrolling: touch;
    overflow-y: scroll;
  }
}
</style>

<template>
  <div class="pa-flex-layout">
    <div class="pa-flex-layout-hd">
      <slot name="header"></slot>
    </div>
    <div class="pa-flex-layout-bd" ref="content">
      <template v-if="refresh">
        <pa-loadmore :top-method="reload" ref="loadmore" :topPullText="topPullText" :topDropText="topDropText">
          <slot></slot>
        </pa-loadmore>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </div>
    <div class="pa-flex-layout-ft">
      <slot name="footer"></slot>
    </div>
    <slot name="more"></slot>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { setTimeout } from 'timers';

export default {
  name: 'pa-flex-layout',

  props: {
    refresh: {
      type: Boolean,
      default: false
    },

    topPullText: String,
    topDropText: String
  },

  components: {
  },

  data() {
    return {
      scrollTop: 0,
      scrollHandle: this.debounce(this.scroll, 100)
    };
  },

  computed: {
    ...mapState({
      historyList: state => state.common.historyList
    })
  },

  methods: {
    reload() {
      const MIN = 500;
      const start = Date.now();
      this.$emit('reload', () => {
        const now = Date.now();
        setTimeout(() => {
          this.$refs.loadmore.onTopLoaded();
        }, now - start > MIN ? 0 : MIN - (now - start));
      });
    },

    scroll() {
      this.scrollTop = this.$refs.content.scrollTop;
    }
  },

  mounted() {
    this.$refs.content.addEventListener('scroll', this.scrollHandle, false);
  },

  beforeDestroy() {
    this.$refs.content.removeEventListener('scroll', this.scrollHandle, false);
  },

  activated() {
    const { historyList } = this;
    setTimeout(() => {
      try {
        let len = historyList.length;
        if (len) {
          const self = historyList[len - 1];
          //! self.hasParams &&
          if (historyList[len - 1].path === self.path) {
            this.$refs.content.scrollTop = this.scrollTop;
          }
        }
      } catch (e) {
        console.error('get this.historyList error in pa-layout');
      }
    }, 50);
  }
};
</script>

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖