YNUtdPlatform/pages/YNEduApp/index/index.vue

<template>
	<view class="page">
    <view class="search">
      <uni-icons
          type="scan"
          size="24"
          style="margin-right: 2vw;
          color: #BABABA"
          @click="toggleScan"
      ></uni-icons>
      <uni-easyinput
          suffixIcon="search"
          v-model="searchIpt"
          placeholder="请输入搜索关键词"
          @iconClick="toggleSearch"
      ></uni-easyinput>
    </view>
    <view class="opt-grids">
      <view
          v-for="(part, index) in opts"
          :key="index"
          @click="jumpUrl(part.url)"
      >
        <image :src="part.src" mode=""></image>
        <span>{{ part.name }}</span>
      </view>
    </view>
    <view class="swipe-area">
        <swiper class="swiper-box" autoplay interval="2000" indicator-dots="true">
          <swiper-item v-for="(item ,index) in imgList" :key="index">
            <img :src="item.image" alt="" style="width: 100%; height: 100%">
          </swiper-item>
        </swiper>
    </view>
    <uni-notice-bar
        show-icon
        scrollable
        color="#808080"
        background-color="transparent"
        text="uni-app 版正式发布，开发一次，同时发布iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等7大平台。"
    />
    <view class="my-task">
      <h3 style="margin-bottom: 1vh">我的任务</h3>
      <view class="task-list">
        <view
            class="no-task"
            v-show="taskList.length === 0"
        >
          <view class="no-task-img">
            <image src="/static/eduImg/no-task.png"></image>
            <span>可联系管理员发布</span>
          </view>
        </view>
      </view>
    </view>
    <m-tabbar fixed fill :current="0" :tabbar="tabbar"></m-tabbar>
  </view>
</template>

<script>
	import TabbarConfig from '@/tabbar.js'
  // import face from '../../../uni_modules/mcc-face/index'
  import {
    getNoticeAnnoByUserId
  } from '@/api/eduApp/index.js'
	export default {
		data() {
			return {
			  tabbar: TabbarConfig,
				searchIpt: '',
        opts: [
          { name: '学习项目', src: '/static/eduImg/learnProj.png', url: 'learnProj' },
          { name: '学习', src: '/static/eduImg/learn.png', url: 'learn' },
          { name: '考试', src: '/static/eduImg/exam.png', url: 'exam' },
          { name: '练习', src: '/static/eduImg/prac.png', url: 'prac' },
        ],
        imgList: [
          {
            image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
            title: '昨夜星辰昨夜风，画楼西畔桂堂东'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
            title: '身无彩凤双飞翼，心有灵犀一点通'
          },
          {
            image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
            title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
          }
        ],
        taskList: []
			}
		},
		onLoad() {

		},
		methods: {
      toggleSearch() {
        console.log(this.searchIpt)
      },
      toggleScan() {
        uni.scanCode({
          success: (res) => {
            console.log(res.result)
          }
        })
      },
      jumpUrl(path) {
        uni.navigateTo({
          url: `/pages/YNEduApp/${path}/${path}`
        })
      },
      openFaceScan() {
        face.open(['a', 'c'], function(e) {
          face.close()
        })
      }
		},
    onShow() {
      getNoticeAnnoByUserId({
        status: 0
      }).then(res => {
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
      /*uni.showModal({
        title: '人脸识别',
        content: '开启人脸识别？',
        success:(res) => {
          if(res.confirm) this.openFaceScan()
        }
      })*/
    },
	}
</script>

<style lang="scss">

  .page{

    width: 100vw;
    height: 100vh;
    background-color: #F8F8F8;
    box-sizing: border-box;
    padding: 0 20px;

    .search{

      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;

    }

    .opt-grids{

      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin: 3vh auto;

      view{

        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        //margin-bottom: 2vh;

        image{
          width: 60%;
          height: 7vh;
          margin-bottom: 10px;
        }

        span{
          font-size: 26rpx;
          font-weight: bold;
        }

      }

    }

    .swipe-area{

      width: 100%;
      height: 20vh;
      border-radius: 15rpx;
      overflow: hidden;
      margin-bottom: 10rpx;

    }

    .my-task{

      width: 100%;
      height: 40vh;
      background-color: #fff;
      border-radius: 15rpx;
      box-shadow: 3px 3px 3px #F4F4F4;
      box-sizing: border-box;
      padding: 15rpx;
      display: flex;
      flex-direction: column;

      .task-list{

        flex: 1;
        overflow-y: auto;

        .no-task{

          width: 100%;
          height: 100%;
          display: flex;

          .no-task-img{

            width: 80%;
            height: 80%;
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            image{

              width: 100%;
              height: 90%;

            }

            span{

              font-size: 14px;
              color: #C2C2C2;

            }

          }

        }

      }

    }

  }

</style>