parentNew/src/pages/mine/mine.vue

<template>
  <view>
    <cu-custom :isBack="false"></cu-custom>
    <view class="main">
      <view class="main-top">
        <view class="title flex justify-between">
          <view>{{ user.nickName || '未更新用户信息' }}</view>
          <text class="cuIcon-settings lg text-gray" @tap="goto('setting')"></text>
        </view>
        <view class="user">
          <view class="user-info flex">
            <image mode="scaleToFill" :src="user.avatarUrl || defaultAvatar" class="avatar"></image>
            <view class="study-info">
              <view class="user-name" @tap="switchStudent" v-if="isLogin && user.nickName">
                {{ kid_info.name + '-' + kid_info.school_name }}
                <text class="iconfont margin-left-xs" style="font-size: 18px;">&#xe600;</text>
              </view>
              <view class="user-name" @tap="login" v-else>
                切换学生
                <text class="iconfont margin-left-xs" style="font-size: 18px;">&#xe716;</text>
              </view>
              <view class="user-learn">已学习{{ info.parent_data.learn_day }}天</view>
            </view>
          </view>
          <view class="user-relative flex justify-between" v-if="isLogin">
            <view v-for="(relate, index) in courseRelates" :key="index" class="course-item" :style="'background:' + relate.background" @tap="goto(relate.page)">
              <text class="iconfont back-img" style="font-size: 32px;">{{ relate.icon }}</text>
              <view class="text-df">{{ relate.name }}</view>
            </view>
          </view>
          <view class="user-relative flex justify-between" v-else>
            <view class="course-item relate-item" v-for="(course, index) in courses" :key="index" :style="'background:' + course.background">
              <text class="iconfont back-img" style="font-size: 40px;">{{ course.icon }}</text>
              <view class="text-lg">{{ course.title }}</view>
              <view class="text-xxl margin-top-xs">{{ course.name }}</view>
            </view>
          </view>
        </view>
        <view class="order">
          <view class="order-title solid-bottom">我的订单</view>
          <view class="order-info flex justify-between">
            <view v-for="(order, index) in menuList" :key="index" @tap="toOrder(index)">
              <view class="order-image">
                <text class="iconfont text-student" style="font-size: 32px;">{{ order.icon }}</text>
              </view>
              {{ order.title }}
            </view>
          </view>
        </view>
      </view>
      <view class="margin cu-list box-shadow menu margin-top-lg bg-white">
        <view class="cu-item arrow" @tap="goto('classCart')">
          <text class="cuIcon-cart lg text-gray" style="font-size: 18px;"></text>
          <view class="content margin-left-sm">
            <text class="text-black">购物车</text>
          </view>
          <view class="action"></view>
        </view>
        <view class="cu-item arrow" @tap="goto('message')">
          <text class="cuIcon-message lg text-gray" style="font-size: 18px;"></text>
          <view class="content margin-left-sm">
            <text class="text-black">消息中心</text>
          </view>
          <view class="action"></view>
        </view>
        <view class="cu-item arrow" @tap="goto('courseFiles')">
          <text class="cuIcon-file lg text-gray" style="font-size: 18px;"></text>
          <view class="content margin-left-sm">
            <text class="text-black">课程档案</text>
          </view>
          <view class="action"></view>
        </view>
        <view class="cu-item arrow" @tap="goto('onlineService')">
          <text class="iconfont text-gray" style="font-size: 18px;">&#xe726;</text>
          <view class="content margin-left-sm">
            <text class="text-black">在线客服</text>
          </view>
        </view>
      </view>
    </view>
    <mp-tabbar :outerSelected="2" />
    <view class="cu-modal drawer-modal justify-start" :class="modalName == 'showStudent' ? 'show' : ''" @tap="hideModal">
      <scroll-view :scroll-y="true" class="cu-dialog basis-lg" @tap.stop="" :style="[{ top: topHeader + 'px', height: 'calc(100vh - 48px - ' + topHeader + 'px)' }]">
        <view class="student-list padding-left">
          <view class="student margin-top-sm" v-for="(student, index) in students" :key="index" @tap="chooseKid(student.id)">
            <view class="flex align-center">
              <image mode="scaleToFill" :src="defaultAvatar" class="avatar md"></image>
              <view class="margin-left-sm">{{ student.name }}</view>
              <text class="cuIcon-check text-student margin-left" style="font-size: 22px;" v-if="kid === student.id"></text>
            </view>
            <view class="flex">
              <view class="cu-tag line-green margin-top-xs"> {{ student.school_name ? student.school_name : '' }}-{{ student.grade_name }}-{{ student.class_name }} </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'
import { _getStudents, _getUserInfo } from '@/api/auth'
export default {
  data() {
    return {
      topHeader: this.globalCustomBarHeight,
      info: {},
      modalName: null,
      students: [],
      kid_info: {}, // 当前学生
      menuList: [
        {
          title: '全部订单',
          img: '/static/imgs/mine/qbdd.png',
          icon: '\ue897'
        },
        {
          title: '待付款',
          img: '/static/imgs/mine/dfk.png',
          icon: '\ue896'
        },
        {
          title: '已付款',
          img: '/static/imgs/mine/yfk.png',
          icon: '\ue656'
        },
        {
          title: '退课售后',
          img: '/static/imgs/mine/tksh.png',
          icon: '\ue61e'
        }
      ],
      courses: [
        {
          title: '启蒙教育',
          name: '我的机构',
          img: '/static/imgs/mine/wdjg.png',
          background: '#f8be32',
          icon: '\ue661'
        },
        {
          title: '启蒙教育',
          name: '我的老师',
          img: '/static/imgs/mine/wdls.png',
          background: '#67d2a9',
          icon: '\ue603'
        }
      ],
      courseRelates: [
        {
          name: '我的学生',
          img: '/static/imgs/mine/wdjhr.png',
          background: '#5FCFE0',
          page: 'myStudents',
          icon: '\ue604'
        },
        {
          name: '我的监护人',
          img: '/static/imgs/mine/wdjhr.png',
          background: '#f8be32',
          page: 'myParents',
          icon: '\ue60a'
        },
        {
          name: '我的老师',
          img: '/static/imgs/mine/wdjg.png',
          background: '#67d2a9',
          page: 'myTeachers',
          icon: '\ue603'
        },
        {
          name: '我的机构',
          img: '/static/imgs/mine/wdls.png',
          background: '#FF676E',
          page: 'myInstitution',
          icon: '\ue661'
        }
      ],
      loginIcon: '/static/imgs/mine/login.png',
      switchIcon: '/static/imgs/mine/login1.png',
      defaultAvatar: 'http://parent.kehoubaike.com/static/img/7f4e775d2e04234d1e1994b13146f6b.e5c47f3.png'
    }
  },
  computed: {
    ...mapGetters({
      user: 'user',
      isLogin: 'token',
      kid: 'kid'
    })
  },
  onShow() {
    this.get_info()
  },
  methods: {
    login() {
      this.globalNavigateTo('login')
    },
    get_info() {
      _getUserInfo().then(res => {
        this.info = res.data
        this.get_students()
      })
    },
    get_students() {
      _getStudents().then(res => {
        if (res.data.length < 1) {
          this.globalNavigateTo('myStudents')
          return false
        }
        this.students = res.data.student_data
        let kid = this.kid
        if (!kid) {
          kid = this.students[0].id
          this.$store.dispatch('setKid', this.students[0].id)
        }
        this.setkidInfo(kid)
      })
    },
    hideModal(e) {
      this.modalName = null
    },
    setkidInfo(kid) {
      // 设置学生信息
      this.kid_info = this.students.find(item => item.id === kid)
    },
    switchStudent() {
      this.modalName = 'showStudent'
    },
    goto(page) {
      if (!this.isLogin) {
        this.globalNavigateTo('login')
      } else {
        this.globalNavigateTo(page)
      }
    },
    toOrder(index) {
      this.globalNavigateTo('order', { type: index })
    },
    chooseKid(id) {
      uni.showModal({
        title: '',
        content: '确定选择该学生?',
        success: res => {
          if (res.confirm) {
            this.$store.dispatch('setKid', id).then(res => {
              this.setkidInfo(res)
              this.hideModal()
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
@import '~@/common/css/mixin.scss';
.title {
  @include title(10px, 22px);
}
.main {
  padding-top: 10px;
}
.main-top {
  padding: 0 30rpx;
}
.user {
}
.user-info {
  margin-bottom: 10px;
}
.study-info {
  margin-left: 40rpx;
  padding-top: 6px;
}
.user-name {
  @include title(10px, 16px);
}
.user-learn {
  margin-top: 20px;
}
.user-relative {
  width: 100%;
}
.course-item {
  position: relative;
  border-radius: 10px;
  padding: 16rpx;
  width: 24%;
  min-height: 52px;
  color: #fff;
}
.course-item.relate-item {
  width: 48%;
}
.back-img {
  position: absolute;
  bottom: 8px;
  right: 6px;
  opacity: 0.4;
}
.order {
  margin-top: 10px;
}
.order-info {
  padding: 0 30rpx;
}
.order-image {
  margin: 10rpx auto;
  width: 30px;
  height: 30px;
  image {
    width: 100%;
    height: 100%;
  }
}
.order-title {
  padding-bottom: 10px;
  @include title(10px, 16px);
}
.switch-icon {
  margin-left: 10rpx;
  width: 1em;
  height: 1em;
}
</style>