YNUtdPlatform/pages/HealthExaminationApp/index/index.vue

<template>
  <view>
    <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-if="personnelType != 0" @click="handlePage(optList[0].url)">
          <div class="item">
            <u--image :showLoading="true" :src="optList[0].src" width="70px" height="60px" />
            <div class="name">{{ optList[0].name }}</div>
          </div>
        </div>
        <div class="opt-item" v-if="status != 0" @click="handlePage(optList[1].url)">
          <div class="item">
            <u--image :showLoading="true" :src="optList[1].src" width="70px" height="60px" />
            <div class="name">{{ optList[1].name }}</div>
          </div>
        </div>
        <div class="opt-item" @click="handlePage(optList[2].url)">
          <div class="item">
            <u--image :showLoading="true" :src="optList[2].src" width="70px" height="60px" />
            <div class="name">{{ optList[2].name }}</div>
          </div>
        </div>
        <div class="opt-item" @click="handlePage(optList[3].url)">
          <div class="item">
            <u--image :showLoading="true" :src="optList[3].src" width="70px" height="60px" />
            <div class="name">{{ optList[3].name }}</div>
          </div>
        </div>
      </div>
    </div>

    <div v-else>
      <div class="top-swiper avatar">
        <u--image :showLoading="true" :src="avatar" shape="circle" width="120px" height="120px" />
        <div style="margin-top: 20px; font-size: 18px">{{ userInfo.phyName }}</div>
      </div>

      <div class="user">
        <div class="item" @click="handleUserInfo">
          <u-icon name="/static/images-tijian/userInfo.png" size="16"></u-icon>
          <div>个人信息</div>
        </div>
        <u-line color="#F2F2F2"></u-line>
        <div class="item" @click="handleMsg">
          <u-icon name="/static/images-tijian/message.png" size="16"></u-icon>
          <div>消息通知</div>
        </div>
        <u-line color="#F2F2F2"></u-line>
        <div class="item" @click="handleLogout">
          <u-icon name="/static/images-tijian/logout.png" size="16"></u-icon>
          <div>退出登录</div>
        </div>
      </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'
import { decryptCBC } from '@/utils/aescbc'

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'
      ],
      personnelType: '',
      status: '',
      optList: [
        { name: '体检预约', src: '/static/images-tijian/preOrder.png', url: 'appointment' },
        { name: '职业预约', src: '/static/images-tijian/careerExam.png', url: 'jobAppointment' },
        { name: '我的预约', src: '/static/images-tijian/myPreOrder.png', url: 'myAppointment' },
        { name: '体检报告', src: '/static/images-tijian/report.png', url: 'report' }
      ],
      // 头像
      avatar:
        'https://img.zcool.cn/community/0104c958b69c23a801219c77ba5da2.png?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100'
    }
  },
  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) {
      if (url == 'appointment' || url == 'jobAppointment') {
        const params = {
          appoint: url == 'appointment' ? '2' : '3',
          token: this.token
        }
        console.log('🚀 ~ getStatus ~ params:', params)
        uni.request({
          url: config.tjBaseUrl + '/app/getphyappoint',
          method: 'post',
          data: params,
          header: {
            'content-type': 'application/x-www-form-urlencoded',
            token: this.token
          },
          success: res => {
            console.log('🚀 ~ getStatus ~ res:', res)
            res = res.data
            if (res.res == 1 && res.obj == 1) {
              uni.navigateTo({
                url: `/pages/HealthExaminationApp/${url}/${url}?params=${JSON.stringify(this.userInfo)}`
              })
            } else {
              uni.showToast({
                title: '您已经预约过，无法再次预约！',
                icon: 'none'
              })
            }
          },
          fail: err => {
            console.log('🚀 ~ getStatus ~ err:', err)
            uni.showToast({
              title: '系统异常，请联系管理员',
              icon: 'none'
            })
          }
        })
      } else {
        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)
          res = res.data
          if (res.res === 1) {
            this.personnelType = res.obj.personnelType || 0
            this.status = res.obj.status
            console.log('🚀 ~ getStatus ~ this.personnelType:', this.personnelType)
            console.log('🚀 ~ getStatus ~ this.status:', this.status)
          }
        },
        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]
            this.userInfo.phyName = decryptCBC(this.userInfo.phyName)
            this.userInfo.idcard = decryptCBC(this.userInfo.idcard)
            this.userInfo.telepNumber = decryptCBC(this.userInfo.telepNumber)
            console.log('🚀 ~ getAppLoginInfo ~ this.userInfo:', this.userInfo)
          }
        },
        fail: err => {
          console.log('🚀 ~ getapplogininfo ~ err:', err)
        }
      })
    },
    // 个人信息
    handleUserInfo() {
      const params = {
        name: this.userInfo.phyName,
        idcard: this.userInfo.idcard,
        age: this.userInfo.age,
        sex: this.userInfo.sex == '0' ? '男' : '女',
        phone: this.userInfo.telepNumber,
        departName: this.userInfo.departName
      }
      console.log('🚀 ~ handleUserInfo ~ params:', params)
      uni.navigateTo({
        url: '/pages/HealthExaminationApp/index/userInfo?params=' + JSON.stringify(params)
      })
    },
    // 消息通知
    handleMsg() {
      uni.navigateTo({
        url: '/pages/HealthExaminationApp/index/message'
      })
    },
    // 退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: res => {
          if (res.confirm) {
            uni.removeStorageSync('tjToken')
            uni.reLaunch({
              url: '/pages/login'
            })
          }
        }
      })
    }
  }
}
</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;
  }
}
.avatar {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.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;
      }
    }
  }
}

.user {
  margin: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 5px;

  .item {
    display: flex;
    align-items: center;
    margin: 10px 0;
    div {
      margin-left: 10px;
      font-size: 16px;
      color: #333;
    }
  }
}
</style>