zdxtLawEnforcementCodeView/src/views/enterprise/compaint/compaintDetailIndex.vue

<template>
  <div class="home app_content">
      <!-- 中间 -->
      <!--        <div class="warp_body">-->
      <!--            <div class="white-body">-->
      <!--                <div class="tabs">-->
      <!--                    <ul>-->
      <!--                        <li v-for='(item,index) in data.list' @click='check(index)'-->
      <!--                            :class="{ active: index === data.TabId }">-->
      <!--                            <span v-if="index === 0"> {{item.title}}</span>-->
      <!--                            <span v-else-if="index === 1" class="warn-tab"> {{item.title}}</span>-->
      <!--                        </li>-->
      <!--                    </ul>-->
      <!--                </div>-->
      <!--                <div v-if="data.TabId == 0">-->
      <!--                    <enterpriseInspectionList isReg="0"></enterpriseInspectionList>-->
      <!--                </div>-->
      <!--                <div v-if="data.TabId == 1">-->
      <!--                    <enterpriseInspectionList isReg="1"></enterpriseInspectionList>-->
      <!--                </div>-->
      <!--            </div>-->
      <!--        </div>-->

      <van-tabs v-model:active="active" sticky @click-tab="onClickTab">
          <van-tab v-for="(item, index) in data.list" :title="item.title">
              <div v-if="data.TabId == 0" style="height: calc(100vh - 1.5rem);">
                  <complaintDetailView isReg="0" :id="data.id" />
              </div>
              <!-- 处置流程页面 -->
              <div v-if="data.TabId == 1" style="height: calc(100vh - 1.5rem);">
                  <compaintFlowView isReg="1" :id="data.id" />
              </div>
          </van-tab>
      </van-tabs>
      <!-- <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab title="标签 1">内容 1</van-tab>
        <van-tab title="标签 2">内容 2</van-tab>
      </van-tabs> -->
  </div>
</template>

<script setup name="complaintBase">
    import complaintDetailView from '@/views/enterprise/complaintDetailView.vue';
    import compaintFlowView from '@/views/enterprise/compaint/compaintFlowView.vue';
    

    const {useCommon} = $globalStore;
    //路由参数
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
        id: ref(""),
        status: 0,
        TabId: 0,
        list: [
            {
                title: '诉求详情',
                value: '0'
            },
            {
                title: '处置进度',
                value: '1'
            },
        ],
    });

    const check = (index) => {
        console.log("点击切换tab", index);
        data.TabId = index;
    };
    const active = ref(0);
    const onClickTab = ({ title }) => {
      if(title == '诉求详情'){
        data.TabId = 0;
      }else{
        data.TabId = 1;
      }
    };

    onMounted(() => {
      // let id  = route?.query?.id;
      data.id = route?.query?.id;

    })

</script>

<style lang="less" scoped>
    .home {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        background-color: #ebf3fb;

        .warp_body {
            position: relative;
            background-image: linear-gradient(to bottom, #ebf3fb, transparent);
        }

        .white-body {
            margin: 0 3%;
            width: 94%;
            height: 99%;
            background-color: #fff;
            border-radius: 0.27rem;
        }
    }

    .tohome {
        position: absolute;
        top: 1.25%;
        right: 5%;
        font-size: 0.5rem;
    }

    .tabs {
        padding: 3% 3% 0;
        width: 94%;
        height: 1.25rem;
        box-sizing: content-box;
    }

    .tabs ul {
        display: flex;
        width: 100%;
        height: 100%;
        font-size: 0.4rem;
        line-height: 1.25rem;
        text-align: center;
        align-content: center;
        justify-items: center;
    }

    .tabs ul li {
        float: left;
        width: 50%;
        height: 100%;
    }

    .tabs ul li span {
        display: block;
        width: 100%;
        height: 100%;
        color: #4aa1f9;
        background: url("src/assets/images/tab_bg1_1.png") no-repeat;
        background-size: 100% 100%;
    }

    .tabs ul li.active span {
        background: url("src/assets/images/tab_bg1.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }

    .tabs ul li span.warn-tab {
        margin-left: -2%;
        background: url("src/assets/images/tab_bg.png") no-repeat;
        background-size: 100% 100%;
    }

    .tabs ul li.active span.warn-tab {
        background: url("src/assets/images/tab_bg_1.png") no-repeat;
        background-size: 100% 100%;
        color: #fff;
    }

    .tabs ul li span.level1 {
        background: url("src/assets/images/tab_shine_red.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .tabs ul li span.level2 {
        background: url("src/assets/images/tab_shine_org.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .tabs ul li span.level3 {
        background: url("src/assets/images/tab_shine_yel.gif") no-repeat !important;
        background-size: 100% 100% !important;
        color: #fff !important;
    }

    .addinfo {
        position: absolute;
        bottom: 3%;
        right: 2%;
        z-index: 99999;
        width: 1.5rem;
        height: 1.5rem;
        background-color: #1367fe;
        border-radius: 50%;
        box-shadow: 0 0 0.27rem #1367fe;
        color: #fff;
        font-size: 0.4rem;
        text-align: center;
        vertical-align: middle;
        padding-top: 0.45rem;
        box-sizing: border-box;
    }

</style>