aishandong/qingdao_h5/src/views/home/Home.vue

<template>
  <van-pull-refresh
    v-model="state.loading"
    @refresh="init"
    :disabled="state.refreshDisabled"
  >
    <div id="home">
      <div class="home-title">
        <!-- <img src="@/assets/home/banner.jpg" alt="banner图片">
         -->
        <van-swipe
          style="height: 100%"
          :autoplay="3000"
          :show-indicators="false"
          :touchable="false"
        >
          <van-swipe-item v-for="(item, index) in state.bannerList">
            <img :src="item.photoUrl" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <van-row class="home-button" gutter="20">
        <!-- <van-col span="8" v-for="(item, index) in buttonList" :key="index" class="button-list" @click="gotoBank"> -->
        <van-col
          span="8"
          v-for="(item, index) in buttonList"
          :key="index"
          class="button-list"
          @click="goUrl(item, index)"
        >
          <div class="button-detail">
            <div class="button-title">{{ item.title }}</div>
          </div>
        </van-col>
      </van-row>
      <!--  <div class="home-action">
        <div class="action-title">
          <div class="action-left">
            <img src="@/assets/home/hangye.png" alt="行业动态">
          </div>
          <div class="action-news">
            <van-swipe style="height: 100%;" vertical :autoplay="3000" :show-indicators="false" :touchable="false">
              <van-swipe-item v-for="(item, index) in  state.actionList" @click="goUrl(item)">{{ item.name }}
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="action-more" @click="goUrl('industryNews')">更多</div>
        </div>
      </div> -->
      <van-row gutter="15" class="home-info">
        <van-col
          span="12"
          v-for="(item, index) in infoList"
          :key="index"
          class="info-list"
          @click="goUrl(item)"
        >
          <div class="info-content">
            <div class="info-detail">{{ item.title }}</div>
          </div>
        </van-col>
      </van-row>
      <div class="home-action">
        <div class="action-title">
          <div class="action-name">班型公示</div>
          <div class="action-more action-more1" @click="goUrl('classType')">
            更多
          </div>
        </div>
        <div class="action-publicity" @click.stop="goDetail()">
          <div class="publicity-info">
            <div class="publicity-image">
              <van-image :src="state.schoolType.photoUrl" />
            </div>
            <div class="publicity-des">
              <div class="des-name">
                {{ state.schoolType.schoolName }}
              </div>
              <div class="des-rate">
                通过率
                {{
                  parseFloat(state.schoolType.passRate) >= 0
                    ? state.schoolType.passRate + "%"
                    : "暂无"
                }}
                &nbsp;&nbsp;满意度
                {{
                  parseFloat(state.schoolType.satisfactionRate) >= 0
                    ? +state.schoolType.satisfactionRate * 20 + "%"
                    : "暂无"
                }}
              </div>
              <div class="des-phone">
                联系电话 {{ state.schoolType.contactPhone }}
              </div>
            </div>
          </div>
          <div class="publicity-detail">
            <div>
              <!-- <span class="publicity-subjcect">C1</span> -->
              <span class="publicity-course">{{
                state.classType?state.classType.vehicleKindName:''
              }}</span>
            </div>
            <span class="publicity-price">￥{{ state.classType?state.classType.price:'' }}</span>
          </div>
        </div>
      </div>
      <div class="home-action">
        <div class="action-title">
          <div class="action-name">星级驾校</div>
          <div
            class="action-more action-more1"
            @click="goUrl('findSchoolCoach', 1)"
          >
            更多
          </div>
        </div>
        <div class="action-content">
          <school-list :schoolList="state.schoolList"> </school-list>
        </div>
      </div>
      <div class="home-action home-action1">
        <div class="action-title">
          <div class="action-name">星级教练</div>
          <div
            class="action-more action-more1"
            @click="goUrl('findSchoolCoach', 2)"
          >
            更多
          </div>
        </div>
        <div class="action-content">
          <coach-list :coachList="state.coachList"></coach-list>
        </div>
      </div>

      <publish @confirmBtnChange="confirmBtnChange($event)" ></publish>
    </div>
  </van-pull-refresh>
</template>

<script>
import homeConfig from "./js/homeList";
import {
  getSysNewsList,
  getCoachInfo,
  getAllSchoolList,
  getSchoolDetailById,
  getBannerConfigList,
  getLearnPackageListByStudyModel,
} from "@/api/baseInfo";

import {
  ref,
  reactive,
  onMounted,
  defineComponent,
  defineEmits,
  provide,
} from "vue";
import { useRouter } from "vue-router";
import coachList from "@/components/coachList.vue";
import schoolList from "@/components/schoolList.vue";
import publish from "@/components/publish.vue";
import photoImage from "@/components/photoImage.vue";
import { createApp } from "vue";
import { Toast } from "vant";
const app = createApp();
app.use(Toast);
import "@/utils/tools";

// 声明额外的选项
export default {
  // emits: ['getCoachList', 'getSchoolList'],
  setup(props, context) {
    const router = useRouter();
    const buttonList = homeConfig.buttonList;
    const infoList = homeConfig.infoList;
    let classTypeIndex = 0; //当前展示的索引
    let showSchoolIndex = 0; //当前展示驾校列表的索引
    let showCoachIndex = 0; //当前展示教练列表的索引
    const state = reactive({
      actionList: [],
      getSchoolList: [],
      getCoachList: [],
      schoolList: [],
      coachList: [],
      classType: {},
      schoolType: {},
      classTypeList: [],
      schoolId: "",
      loading: false,
      bannerList: [],
      timer: null,
      showDialog: false,
      message: "",
      refreshDisabled: true,
      scrollTop: 0,
      goPay:Request('goPay')
    });

    onMounted(async () => {
      if(state.goPay == 1) {
        router.push({
          path: "onlineRegist"
        });
      }else {
        init();
      }
    });
    function goUrl(item, index) {
      if (item.needLogin && !window.userInfo.studentId) {
        Toast("您不是正式学员， 无法使用该功能！");
        return;
      }
      if (item.fileUrl) {
        router.push({
          path: "newsPdf",
          query: {
            fileOssPath: item.fileUrl,
            type: 1,
          },
        });
      } else if (item.pathUrl) {
        if (item.pathUrl == 1) {
          Toast("暂未开放");
        } else {
          router.push({
            path: item.pathUrl,
            query: {
              ...item.query,
            },
          });
        }
      } else {
        router.push({
          path: item,
          query: {
            type: index,
          },
        });
      }
    }

    async function init() {
      state.bannerList = await getBannerConfigList({});
      state.actionList = await getSysNewsList({
        type: 1,
      });
      let getCoachData = await getCoachInfo({
        key: "",
        level: "",
        pageIndex: "1",
        pageSize: "200",
      });

      if (getCoachData) {
        state.getCoachList = getCoachData.coachVOList;
        state.coachList = state.getCoachList.slice(0, 3);
      } else {
        state.coachList = [];
      }
      state.getSchoolList = await getAllSchoolList({
        params: {
          distructId: "",
          level: "",
          schoolName: "",
        },
      });

      if (state.getSchoolList && state.getSchoolList.length > 0) {
        state.schoolList = state.getSchoolList.slice(0, 4);
      }

      //    async function getClassType() {
      state.classTypeList = await getLearnPackageListByStudyModel({
        schoolId: "",
        studyModel: "1",
        packageName: "",
        vehicleKindId: "",
      });

      state.classType =
        state.classTypeList.length > 0 ? state.classTypeList[0] : {};
        if(state.classType) {
          state.schoolType = await getSchoolDetailById({
            schoolId: state.classType.schoolId,
          });
        }

      state.loading = false;
    }

    async function changeAllData() {
      if (window.location.hash.indexOf("home") == -1) {
        clearTimeout(state.timer);
        return;
      }

      classTypeIndex++; //当前展示的索引
      showSchoolIndex++; //当前展示驾校列表的索引
      showCoachIndex++; //当前展示教练列表的索引

      state.classType =
        state.classTypeList[classTypeIndex % state.getSchoolList.length];
        if(state.classType) {
          state.schoolType = await getSchoolDetailById({
            schoolId: state.classType.schoolId,
            noCover: true,
          });
        }

      let schoolStart = 4 * showSchoolIndex;

      if (schoolStart + 4 > state.getSchoolList.length) {
        showSchoolIndex = 0;
        schoolStart = 0;
      }

      state.schoolList = state.getSchoolList.slice(
        schoolStart,
        schoolStart + 4
      );

      let coachStart = 3 * showCoachIndex;

      if (coachStart + 3 > state.getCoachList.length) {
        showCoachIndex = 0;
        coachStart = 0;
      }
      state.coachList = state.getCoachList.slice(coachStart, coachStart + 3);

      state.timer = setTimeout(() => {
        changeAllData();
      }, 10 * 1000);
    }

    state.timer = setTimeout(() => {
      changeAllData();
    }, 10 * 1000);

    function goDetail() {
      router.push({
        path: "classDetail",
        query: {
          packageId: state.classType.learnPackageId,
          schoolId: state.schoolType.schoolId,
          schoolName: state.schoolType.schoolName,
        },
      });
    }
    return { state, buttonList, infoList, goUrl, goDetail, init };
  },
  components: {
    coachList,
    schoolList,
    photoImage,
    publish,
  },

  // mounted() {
  //     console.log(this.state)
  //     // this.getData()
  // },
  methods: {
    // gotoBank() {
    //     let str = 'YmFua2FiYzovL0FHV1VlMXFVRzRadUgvREMzdS9lM0c0WFF5RHNDcW5pZm1ha2htVnhLUnpGY3JuTEptbTRQMHBmbjJpOXNJREI0S3IvUnFFQWxQWG9SYmNhWitaQzVRPT0=';
    //     let url = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.android.bankabc&ios_scheme=bankabc://{"method":"invokePayFromBrowser","param":"' + str + '"}&android_scheme=bankabc://{"method":"invokePayFromBrowser","param":"' + str + '"}'
    //    window.location.href = url;
    // }
    confirmBtnChange(event) {
      this.state.refreshDisabled = false
    }
  },
};
</script>
<style lang="scss">
@import "./scss/home.scss";
</style>