287 lines
7.3 KiB
Vue
287 lines
7.3 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 主体内容 -->
|
||
<div class="main">
|
||
<!-- 左侧 -->
|
||
<div class="main-left">
|
||
<!-- 班级详情 -->
|
||
<div class="left-one">
|
||
<div class="left-content">
|
||
<div class="left-title">
|
||
<div class="pultitle">班级详情</div>
|
||
</div>
|
||
<div class="second-title">中二班</div>
|
||
<div class="line"></div>
|
||
<div class="three-content">
|
||
<div>老师：罗敏 宋春雪 王愉</div>
|
||
<div>班级人数：21</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div class="left-last">
|
||
<div>
|
||
<div>0</div>
|
||
<div>实到</div>
|
||
</div>
|
||
<div>
|
||
<div>0</div>
|
||
<div>未到</div>
|
||
</div>
|
||
<div>
|
||
<div>0</div>
|
||
<div>请假</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 宝宝食谱 -->
|
||
<div class="left-one">
|
||
<div class="left-content">
|
||
<div class="left-title">
|
||
<div class="pultitle">宝宝食谱</div>
|
||
</div>
|
||
<block v-if="threeMeals.length!=0">
|
||
<div class="eat-three">
|
||
<div :class="threeMealIndex == index ? 'threeMealActive' : ''"
|
||
v-for="(item, index) in threeMeals" :key="index" @click="chooseMeal(index)">
|
||
{{ item.Type }}
|
||
</div>
|
||
</div>
|
||
<div class="line"></div>
|
||
<div v-for="(item, index) in threeMeals" :key="index">
|
||
<div v-if="index == threeMealIndex" class="meal-box">
|
||
<img :src="item.Images" />
|
||
<div class="clips2">{{ item.FoodName }}</div>
|
||
</div>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
</div>
|
||
<!-- 通知公告 -->
|
||
<div class="left-one">
|
||
<div class="left-content">
|
||
<div class="left-title">
|
||
<div class="pultitle">通知公告</div>
|
||
</div>
|
||
<div class="second-title">中二班</div>
|
||
<div class="line"></div>
|
||
<div class="three-content left-notice">
|
||
<div class="clips2">老师：罗敏 宋春</div>
|
||
</div>
|
||
<div class="notice-time">
|
||
<div>2021-11-15</div>
|
||
<div><img src="../../static/img/home/slices.png" />15</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 中部 -->
|
||
<div class="main-center">
|
||
<!-- 班级动态图文 -->
|
||
<div class="center-img-box">
|
||
<div class="center-title">班级动态</div>
|
||
<div class="img-box">
|
||
<img src="../../static/img/seconds/tu-01.png" style="object-fit: cover" />
|
||
</div>
|
||
</div>
|
||
<!-- 提醒 -->
|
||
<div class="remind-box">
|
||
<div class="msg-box">
|
||
<img src="../../static/img/home/icon-notice.png" />
|
||
<div>{{ noticeData }}</div>
|
||
</div>
|
||
<div class="msg-box">
|
||
<div>宝宝提醒</div>
|
||
<div>1</div>
|
||
</div>
|
||
<div class="msg-box">
|
||
<div>生日提醒</div>
|
||
<div>1</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 右侧 -->
|
||
<div class="main-right">
|
||
<div class="left-title">
|
||
<div class="pultitle">今日活动</div>
|
||
</div>
|
||
<div class="right-content">
|
||
<block v-if="noonArr.length!=0">
|
||
<div v-for="(item, index) in noonArr" :key="index">
|
||
<div class="right-title">{{ item.Ampm }}</div>
|
||
<div class="line" style="margin: 0 6px"></div>
|
||
<div class="right-item-box" v-for="(itemc, indexc) in item.Content"
|
||
:class="indexc % 2 != 0 ? 'oddActive' : ''" :key="indexc">
|
||
<div>{{ itemc.TimePart }}</div>
|
||
<div class="clips3">{{ itemc.Name }}</div>
|
||
</div>
|
||
</div>
|
||
</block>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: "homepage",
|
||
data() {
|
||
return {
|
||
threeMeals: ["早餐", "午餐", "晚餐"],
|
||
threeMealIndex: 0,
|
||
noticeData: [],
|
||
babyBirthdayData: "",
|
||
dynamicPictureData: "",
|
||
noonArr: [],
|
||
};
|
||
},
|
||
methods: {
|
||
// 早中晚餐切换事件
|
||
chooseMeal(e) {
|
||
this.threeMealIndex = e;
|
||
},
|
||
// 宝宝食谱
|
||
async babyRecipeEv() {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.babyRecipe,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: "yaohaotest001",
|
||
},
|
||
});
|
||
this.threeMeals = data.data.data;
|
||
},
|
||
|
||
async notice() {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.notice,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: "yaohaotest001",
|
||
},
|
||
});
|
||
this.noticeData = data.data.count;
|
||
},
|
||
async schedulingWeb() {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.schedulingWeb,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: "yaohaotest001",
|
||
},
|
||
});
|
||
this.noonArr = data.data.data[0].WeekData;
|
||
|
||
},
|
||
async babyBirthday() {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.babyBirthday,
|
||
methods: "get",
|
||
params: {
|
||
EquipmentID: "yaohaotest001",
|
||
},
|
||
});
|
||
this.babyBirthdayData = data.data;
|
||
|
||
},
|
||
async dynamicPicture() {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.getupdatestudentlist,
|
||
methods: "post",
|
||
params: {
|
||
EquipmentID: "yaohaotest001",
|
||
},
|
||
});
|
||
},
|
||
// 获取当日宝宝生日
|
||
async babyBirthdayEv() {
|
||
let data = await this.$axios({
|
||
// 调用 serviceAPI
|
||
url: this.$https.babyBirthday,
|
||
methods: "post",
|
||
params: {
|
||
EquipmentGuid: "yaohaotest001",
|
||
},
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
this.babyRecipeEv();
|
||
this.schedulingWeb();
|
||
this.babyBirthday()
|
||
this.dynamicPicture()
|
||
// 引用mobile-detect文件
|
||
var MobileDetect = require('../utils/mobile-detect.js');
|
||
console.log(navigator.language, '当前系统语言');
|
||
// 判断是不是手机
|
||
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
|
||
// this.is_telephone = "是";
|
||
console.log("是手机");
|
||
} else {
|
||
// this.is_telephone = "不是";
|
||
console.log("不是手机");
|
||
}
|
||
// 检测是浏览器端还是微信端
|
||
let ua = navigator.userAgent.toLowerCase();
|
||
// 微信端
|
||
if (String(ua.match(/MicroMessenger/i)) === 'micromessenger') {
|
||
console.log('是微信');
|
||
// this.isWechat = true
|
||
} else {
|
||
// this.isWechat = false
|
||
console.log('不是微信');
|
||
}
|
||
var md = new MobileDetect(navigator.userAgent);
|
||
// 品牌
|
||
console.log(md.mobile(), '手机品牌');
|
||
// 操作系统
|
||
console.log(md.os(), '操作系统');
|
||
var device_type = navigator.userAgent; //获取userAgent信息
|
||
var networkStr = device_type.match(/NetType\/\w+/) ? device_type.match(/NetType\/\w+/)[0] : 'NetType/other';
|
||
networkStr = networkStr.toLowerCase().replace('nettype/', '');
|
||
var networkType;
|
||
switch (networkStr) {
|
||
case 'wifi':
|
||
networkType = 'wifi';
|
||
break;
|
||
case '4g':
|
||
networkType = '4g';
|
||
break;
|
||
case '3g':
|
||
networkType = '3g';
|
||
break;
|
||
case '3gnet':
|
||
networkType = '3g';
|
||
break;
|
||
case '2g':
|
||
networkType = '2g';
|
||
break;
|
||
default:
|
||
networkType = 'other';
|
||
}
|
||
// this.device_network_type = networkType;
|
||
console.log(networkType, '网络类型');
|
||
var os = md.os(); //获取系统
|
||
var model = "";
|
||
if (os == "iOS") { //ios系统的处理
|
||
model = md.mobile();
|
||
} else if (os == "AndroidOS") { //Android系统的处理
|
||
var sss = device_type.split(";");
|
||
var i = sss.contains("Build/");
|
||
if (i > -1) {
|
||
model = sss[i].substring(0, sss[i].indexOf("Build/"));
|
||
}
|
||
}
|
||
console.log(model, '手机型号');
|
||
|
||
},
|
||
created() {
|
||
this.notice();
|
||
},
|
||
};
|
||
</script>
|