YNUtdPlatform/pages/HealthExaminationApp/index/index.vue

<template>
  <view>
    <!-- <u-navbar title="首页" placeholder @leftClick="leftClick" /> -->
    <div v-if="isShow">
      <div class="top-swiper">
        <div class="swiper">
          <u-swiper :list="swiperList" indicator indicatorMode="dot" height="170" />
        </div>
      </div>

      <div class="title">体检服务</div>

      <div class="opt-list">
        <div class="opt-item" v-for="(item, index) in optList" :key="index" @click="handlePage(item.url)">
          <div class="item">
            <u--image :showLoading="true" :src="item.src" width="70px" height="60px" />
            <div class="name">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <div class="top-swiper">个人中心</div>
    </div>

    <!-- 底部导航 -->
    <u-tabbar :value="selectValue" @change="changeTab" fixed placeholder safeAreaInsetBottom activeColor="#1989fa">
      <u-tabbar-item text="首页" :icon="homeIcon"></u-tabbar-item>
      <u-tabbar-item text="我的" :icon="myIcon"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      selectValue: 0,
      homeIcon: '/static/images-tijian/home-selected.png',
      myIcon: '/static/images-tijian/my-unselected.png',
      swiperList: [
        '/static/images-tijian/swiper-1.png',
        '/static/images-tijian/swiper-2.png',
        '/static/images-tijian/swiper-3.png'
      ],
      optList: [
        { name: '体检预约', src: '/static/images-tijian/preOrder.png', url: 'appointment' },
        { name: '体检报告', src: '/static/images-tijian/report.png', url: 'report' },
        { name: '我的预约', src: '/static/images-tijian/myPreOrder.png', url: 'myAppointment' },
        { name: '职业预约', src: '/static/images-tijian/careerExam.png', url: 'jobAppointment' }
      ]
    }
  },
  methods: {
    changeTab(e) {
      console.log('🚀 ~ changeTab ~ e:', e)
      this.selectValue = e
      this.homeIcon = e === 0 ? '/static/images-tijian/home-selected.png' : '/static/images-tijian/home-unselected.png'
      this.myIcon = e === 1 ? '/static/images-tijian/my-selected.png' : '/static/images-tijian/my-unselected.png'
      this.isShow = !this.isShow
    },
    // 跳转页面
    handlePage(url) {
      uni.navigateTo({
        url: `/pages/HealthExaminationApp/${url}/${url}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-swiper {
  height: 300px;
  padding: 10px;
  background: url('/static/images-tijian/home-bg.png') no-repeat;
  background-size: 100% 100%;

  .swiper {
    margin-top: 130px;
  }
}

.title {
  margin: 20px 10px;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.opt-list {
  margin: 0 10px;
  padding: 10px;
  background: #fff;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .opt-item {
    width: 30%;
    margin: 10px 0;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .name {
        margin-top: 5px;
        font-size: 14px;
        color: #333;
      }
    }
  }
}
</style>