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>
import config from '@/config'

export default {
  data() {
    return {
      token: uni.getStorageSync('tjToken'),
      isShow: true,
      userInfo: {},
      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' }
      ]
    }
  },
  mounted() {
    console.log('🚀 ~ mounted ~ mounted:', this.token)
    this.getStatus()
    this.getAppLoginInfo()
  },
  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}?params=${JSON.stringify(this.userInfo)}`
      })
    },
    //
    getStatus() {
      const params = {
        token: this.token,
        telephone: uni.getStorageSync('tjPhone')
      }
      console.log('🚀 ~ getStatus ~ params:', params)
      uni.request({
        url: config.tjBaseUrl + '/app/getStatus',
        method: 'post',
        data: params,
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          console.log('🚀 ~ getStatus ~ res:', res)
          // if (res.data.code === 200) {
          //   if (res.data.data.status === 1) {
          //     this.isShow = true
          //   } else {
          //     this.isShow = false
          //   }
          // }
        },
        fail: err => {
          console.log('🚀 ~ getStatus ~ err:', err)
        }
      })
    },
    // 获取app登录信息
    getAppLoginInfo() {
      const params = {
        token: this.token
      }
      console.log('🚀 ~ getapplogininfo ~ params:', params)
      uni.request({
        url: config.tjBaseUrl + '/app/getapplogininfo',
        method: 'post',
        data: params,
        header: {
          'content-type': 'application/x-www-form-urlencoded',
          token: this.token
        },
        success: res => {
          res = res.data
          console.log('🚀 ~ getapplogininfo ~ res:', res)
          if (res.res === 1) {
            this.userInfo = res.obj[0]
          }

        },
        fail: err => {
          console.log('🚀 ~ getapplogininfo ~ err:', err)
        }
      })
    }
  }
}
</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>