nml_mobile/src/pages/_home/index.vue

<script setup>
import user from '~/store/user';
import { child, setChild } from '~/store/child';

import img_bg from '~/assets/home/bg.png';
import img_banner1 from '~/assets/home/banner1.png';
import img_banner2 from '~/assets/home/banner2.jpg';
import img_banner3 from '~/assets/home/banner3.png';
import img_djzl from '~/assets/home/djzl.png';
import img_qzzx from '~/assets/home/qzzx.png';
import img_xskt from '~/assets/home/xskt.png';
import img_stxk from '~/assets/home/stxk.png';
import img_jscz from '~/assets/home/jscz.png';
import img_yshd from '~/assets/home/yshd.png';
import img_xzxx from '~/assets/home/xzxx.png';
import img_qbyy from '~/assets/home/qbyy.png';

import request from '~/utils/request';
import router from '../../router';
import { showToast } from 'vant';


const images = [
  // img_banner1,
  img_banner2,
];
let itemRoute = $ref('');
function gridHandle(item) {
  console.log(item);
  if (
    item.text == '线上课堂' ||
    item.text == '云尚活动' ||
    item.text == '校长信箱') {
    showToast('该模块正在开发中~');
  };
  if (item.text == '社团选课') {
    if (user._role == 'others') {
      window.open('https://nmlm.bozedu.net/login.html?redirect=/stxk', '_self')
    } else {
      switch (user._role) {
        case 'jz':
          if(!child){
            return showToast('家长需绑定孩子方可进入')
          }
          // window.open('https://nmlm.bozedu.net/#/stxk/jz', '_self')
          router.push('/stxk/jz')
          return
        // return itemRoute = '/stxk/jz'
        case 'js':
          // window.open('https://nmlm.bozedu.net/#/stxk_teacher', '_self')
          router.push('/stxk_teacher')
          return
        // return itemRoute = '/stxk_teacher'
        case 'xz':
          //  window.open('https://nmlm.bozedu.net/#/stxkjsd', '_self')
          router.push('/stxkjsd')
          return
        // return itemRoute = '/stxkjsd'
      }
    }
  }

}
const gridList = [
  { icon: img_djzl, text: '党建专栏', to: () => '/djzl' },
  { icon: img_qzzx, text: '求真在线', to: () => '/qzzx' },
  { icon: img_xskt, text: '线上课堂', to: () => '' },
  { icon: img_stxk, text: '社团选课', to: () => '' },
  { icon: img_jscz, text: '教师成长', to: () => '/jscz', permission: ['js', 'xz'].includes(user._role) },
  { icon: img_yshd, text: '云尚活动', to: () => '' },
  { icon: img_xzxx, text: '校长信箱', to: () => '' },
  { icon: img_qbyy, text: '全部应用', to: () => '' },
]

let searchText = $ref('')

let cateData = $ref([])
let cateLoading = $ref(true)
let nic_id;
request({
  url: '/news/info_cate/api_tree',
  data: {
    token: user._role === 'jz' ? (child ? child.token : "") : user.token
  }
}).then(res => {
  cateData = res.data;
  nic_id = res.data[0]?.nic_id;
  cateLoading = false;
})
let notice = $ref({});
request({
  url: '/news/info/index',
  data: {
    nic_id: nic_id,
    urltype: 1,
    token: user._role === 'jz' ? (child ? child.token : "") : user.token
  }
}).then(res => {
  notice = res.data.page_data[0];
})


function handleClickCard(row) {
  // router.push(`/qzzx/qzzxxq/${row.id}`)
  if (row.ni_type == '1') {
    window.open(row.brief)
  } else {
    router.push(`/qzzx/qzzxxq/${row.id}`)
  }
}

let childrenList = $ref([]);

function initData() {
  request({
    baseURL: window.GLOBAL_CONFIG.uc,
    timeout: 10 * 1000,
    url: "/index.php?mod=user&action=main&do=my_child",
    data: {}
  }).then((res) => {
    if (res.code == "1") {
      childrenList = res.data.info;
      localStorage.setItem("children", JSON.stringify(res.data.info));
      // setChild(res.data.info[0]);
    }
  });
}
initData();

function register() {
  if (user.token) {
    router.push('/xszc')
  } else {
    router.push('/zcdl');
  }
}


function routerLink() {
  if (notice.ni_type == '1') {
    window.open(notice.brief)
  } else {
    router.push(`/qzzx/qzzxxq/${notice.id}`)
  }
}
</script>

<template>
  <div class="flex flex-col justify-center p-4 relative bg-no-repeat bg-contain"
    :style="{ backgroundImage: `url(${img_bg})` }">
    <!-- <van-config-provider :theme-vars="{ 'search-padding': 0 }">
          <van-search v-model="searchText" placeholder="" />
        </van-config-provider> -->
    <van-swipe :autoplay="3000" lazy-render class="rounded-md shadow-md mt-4 min-w-270px">
      <van-swipe-item v-for="image in images" :key="image">
        <img :src="image" class="w-full" />
      </van-swipe-item>
      <van-swipe-item>
        <img @click="register()" src="../../assets/home/banner3.png" style="height:100%" class="w-full" alt="">
      </van-swipe-item>
    </van-swipe>

  </div>
  <van-grid :gutter="0" class="" icon-size="65px">
    <template v-for="item in gridList" :key="item.text">
      <van-grid-item v-if="item.permission || item.permission === undefined" :icon="item.icon" :text="item.text"
        :to="item.to()" @click="gridHandle(item)" />
    </template>
  </van-grid>
  <div class="px-4 flex w-full notice">
    <div class="w-40 h-full">
      <img class="w-19 mt-5.4" src="../../assets/images/-s-6.png" alt="">
    </div>
    <div class="text truncate cursor-pointer" @click="routerLink">
      {{ notice.name }}
    </div>
  </div>
  <van-tabs sticky swipeable>
    <van-tab v-for="cate in cateData" :title="cate.nic_name">
      <remote-list url="/news/info/index"
        :d="{ nic_id: cate.nic_id, urltype: 1, token: user._role === 'jz' ? (child ? child.token : '') : user.token }"
        class="mt-2">
        <template #default="{ row: item }">
          <van-card :title="item.name" :thumb="item.img" @click="handleClickCard(item)">
            <template #price>
              <van-tag plain type="primary">{{ item.nic_name }}</van-tag>
            </template>
            <template #num>
              {{ item.datetime }}
            </template>
          </van-card>
        </template>
      </remote-list>
    </van-tab>
  </van-tabs>

  <van-tabbar route placeholder>
    <van-tabbar-item replace icon="home-o" to="/home">首页</van-tabbar-item>
    <van-tabbar-item replace icon="chat-o" to="/chat">消息</van-tabbar-item>
    <van-tabbar-item replace icon="user-o" to="/user">我的</van-tabbar-item>
  </van-tabbar>
</template>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
<style lang="scss" scoped>
.van-grid {
  width: 100%;
}

.van-grid-item {
  width: 100px;
}

.van-tabs {
  padding: 0 10px !important;
  background-color: #fff;
}

.van-card {
  background-color: #fff;
}

.notice {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  border-top: 1.19px solid #D8E2F0;
  border-bottom: 1.19px solid #D8E2F0;

  img {
    line-height: 60px;
  }

  .text {
    height: 60px;
    line-height: 65px;
  }
}

.tz {
  width: 40%;
  vertical-align: middle;
  font-size: 26px;
  font-family: Regular;
  text-align: center;
  color: #747474;
  letter-spacing: 0px;
}

.gg {
  vertical-align: text-top;
  display: inline-block;
  width: 30%;
  height: 23px;
  line-height: 23px;
  text-align: center;
  background: #ff8700;
  border-radius: 4px;
  font-size: 3vw;
  color: #fff;
}
</style>