397 lines
11 KiB
Vue
397 lines
11 KiB
Vue
<template>
|
||
<view class="uni-container" style="height: 100%; overflow: auto">
|
||
<view class="news_area">
|
||
<view class="news_icon"></view>
|
||
<view class="news_line">
|
||
<view class="marquee_list" :class="{ anim: animate }">
|
||
<view
|
||
class="news_text"
|
||
v-for="(item, index) in marqueeList"
|
||
:key="index"
|
||
@click="linkToNews(item)"
|
||
>
|
||
{{ item.title }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="red"></view>
|
||
<view class="iconfont icon-you news_more_icon"></view>
|
||
</view>
|
||
<view style="padding-bottom: 15px">
|
||
<!-- <view class="items_area" v-for="(menuItem, index) in menus" :key="index">
|
||
<view class="items_name">{{menuItem.text}}</view>
|
||
<view class="items_container">
|
||
<uni-grid :column="4" :show-border="false" :square="false" :highlight="false" >
|
||
<uni-grid-item v-for="(item, indey) in (menuItem.children||[])" :key="indey" @click="linkTo(item)">
|
||
<image :src="config.imgURL+'/'+item.iconUrl" class="items_icon" mode="aspectFill" />
|
||
<text class="items_text">{{ item.text }}</text>
|
||
</uni-grid-item>
|
||
</uni-grid>
|
||
</view>
|
||
</view> -->
|
||
<view class="items_area" v-for="(menuItem, index) in menus" :key="index">
|
||
<view class="items_name">{{ menuItem.text }}</view>
|
||
<view class="items_container">
|
||
<!-- <view class="items_out" v-for="(item, indey) in (menuItem.children||[])" :key="Math.random()" @click="linkTo(item.routePath)"> -->
|
||
<view
|
||
class="items_out"
|
||
v-for="(item, indey) in menuItem.children || []"
|
||
:key="indey"
|
||
@click="linkTo(index, indey)"
|
||
>
|
||
<!-- :src="'../../static/' + item.iconUrl" -->
|
||
<image
|
||
class="items_icon"
|
||
:src="'../../static/' + item.iconUrl"
|
||
@load="onoff = '1'"
|
||
></image>
|
||
<!-- 角标 -->
|
||
<view class="grid-dot">
|
||
<uni-badge :text="item.dealNum" type="error" />
|
||
</view>
|
||
<!-- <img :src="'../../static/'+item.iconUrl" alt=""> -->
|
||
<!-- <image class="items_icon" :src="config.imgURL+item.iconUrl +'?t='+ new Date().getTime()"></image> -->
|
||
<view class="items_text">{{ item.text }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { config } from "../../request/js/config.js";
|
||
var time = "";
|
||
var t = "";
|
||
import uniGrid from "@/components/uni-grid/uni-grid.vue";
|
||
import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue";
|
||
export default {
|
||
components: {
|
||
uniGrid,
|
||
uniGridItem,
|
||
},
|
||
data() {
|
||
return {
|
||
config: config,
|
||
menus: [],
|
||
animate: false,
|
||
marqueeList: [],
|
||
};
|
||
},
|
||
//这里为什么不用onload,因为我发现，只有第一次调用了，后面没有调用。
|
||
onShow() {
|
||
var _this = this;
|
||
console.log(config);
|
||
var userInfo = uni.getStorageSync("userInfo");
|
||
|
||
//针对自动登陆的用户，进行判断，判断当前用户的tokne是否过期，如果过期就
|
||
const automatic_logon = uni.getStorageSync("automatic_logon");
|
||
const loginInfo = uni.getStorageSync("admin_info");
|
||
|
||
if (automatic_logon && loginInfo) {
|
||
this.$http
|
||
.request({
|
||
url: "/apis/user/checkToken",
|
||
params: {
|
||
token: userInfo.token,
|
||
username: loginInfo.username,
|
||
password: loginInfo.password,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res.statusCode == "200") {
|
||
if (res.data.isLate == "true") {
|
||
//表示过期
|
||
uni.setStorage({
|
||
key: "userInfo",
|
||
data: res.data.userInfo,
|
||
success: function () {
|
||
//保存成功后，调用菜单接口和新闻金额口。
|
||
// _this.getNews();
|
||
_this.getMenu();
|
||
},
|
||
});
|
||
} else {
|
||
// this.getNews();
|
||
this.getMenu();
|
||
}
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
//任何异常都跳转到登陆界面。
|
||
uni.showModal({
|
||
content: "您未登录，需要登录后才能继续",
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "../login/login",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
});
|
||
} else if (!userInfo) {
|
||
uni.showModal({
|
||
content: "您未登录，需要登录后才能继续",
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "../login/login",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
//没有自动登陆，但是已经登陆的用户，正常。
|
||
// this.getNews();
|
||
this.getMenu();
|
||
}
|
||
},
|
||
methods: {
|
||
getNews() {
|
||
//ajax 获取当前的新闻列表
|
||
this.$http
|
||
.request({
|
||
url: "/apis/news/list",
|
||
method: "GET",
|
||
params: {
|
||
pageno: 1,
|
||
pagesize: 6,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
if (res) {
|
||
if (!res.data.data.datas || res.data.data.datas.length == 0) {
|
||
//没有数据
|
||
this.marqueeList = [];
|
||
return;
|
||
}
|
||
if (res.data.code == 0) {
|
||
this.marqueeList = res.data.data.datas;
|
||
//开始轮播滚动
|
||
clearInterval(time);
|
||
time = setInterval(this.scroll, 2000);
|
||
}
|
||
}
|
||
});
|
||
},
|
||
getMenu() {
|
||
//调用ajax 获取当前目录的菜单。
|
||
this.$http
|
||
.request({
|
||
url: "/apis/sys/getMenus",
|
||
params: {
|
||
terminal: 1,
|
||
},
|
||
})
|
||
.then((res) => {
|
||
console.log(res);
|
||
if (res.data && res.data.menus) {
|
||
this.menus = res.data.menus;
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.showModal({
|
||
content: "您未登录，需要登录后才能继续",
|
||
showCancel: false,
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.navigateTo({
|
||
url: "../login/login",
|
||
});
|
||
}
|
||
},
|
||
});
|
||
});
|
||
},
|
||
scroll() {
|
||
this.animate = true;
|
||
clearTimeout(t);
|
||
t = setTimeout(() => {
|
||
this.marqueeList.push(this.marqueeList[0]);
|
||
this.marqueeList.shift();
|
||
this.animate = false;
|
||
}, 500);
|
||
},
|
||
|
||
//点击跳转到相应页面
|
||
linkTo(index, indey) {
|
||
let urlLink = "/" + this.menus[index].children[indey].routePath;
|
||
// //所有任务需要特殊处理，因为是toolbar 里面的页签
|
||
// if(item.routePath == 'pages/task/task'){
|
||
// var url = item.routePath.split('/');
|
||
// this.switchTo('../'+url[1]+'/'+url[2]);
|
||
// }else{
|
||
//这边的url 这样处理好像也不太好。
|
||
let item_routePath = this.menus[index].children[indey].routePath;
|
||
var url = item_routePath.split("/");
|
||
console.log(url, "urlLink");
|
||
if (
|
||
JSON.stringify(url) ==
|
||
JSON.stringify(["pages", "startWorking", "startWorking"])
|
||
) {
|
||
var filterRes = {};
|
||
this.$http
|
||
.request({
|
||
url: "apis/mes/dispatch/getOneStartWorking",
|
||
params: filterRes,
|
||
})
|
||
.then((res) => {
|
||
if (res.data.data) {
|
||
uni.navigateTo({
|
||
url: urlLink,
|
||
// url: '/pages/'+url[1]+'/'+url[2]
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "不存在在制工单",
|
||
duration: 2000,
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
});
|
||
} else {
|
||
console.log(urlLink, "-----");
|
||
uni.navigateTo({
|
||
// url: item.routePath
|
||
url: urlLink,
|
||
});
|
||
}
|
||
|
||
// }
|
||
},
|
||
linkToNews(item) {
|
||
//"../schedule/news"
|
||
uni.navigateTo({
|
||
url: "/pages/schedule/newsDetail?id=" + item.id,
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.grid-dot {
|
||
position: absolute;
|
||
top: 0px;
|
||
right: 15px;
|
||
}
|
||
.content {
|
||
/* padding-bottom: var(--window-bottom); */
|
||
margin-bottom: 20upx;
|
||
margin-top: var(--status-bar-height);
|
||
}
|
||
.news_area {
|
||
position: relative;
|
||
width: 90%;
|
||
margin: auto;
|
||
background-color: #fff;
|
||
padding: 30upx 10upx;
|
||
box-sizing: border-box;
|
||
margin-top: 20upx;
|
||
height: 150upx;
|
||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.news_icon {
|
||
position: absolute;
|
||
width: 60upx;
|
||
height: 60upx;
|
||
left: 20upx;
|
||
margin: auto;
|
||
top: 0;
|
||
bottom: 0;
|
||
background-image: url(../../static/img/xw@3x.png);
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
border-radius: 60upx;
|
||
}
|
||
.news_line {
|
||
position: absolute;
|
||
left: 100upx;
|
||
right: 90upx;
|
||
height: 90upx;
|
||
overflow: hidden;
|
||
}
|
||
.news_text {
|
||
font-size: 28upx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.red {
|
||
position: absolute;
|
||
width: 12upx;
|
||
height: 12upx;
|
||
border-radius: 12upx;
|
||
background-color: red;
|
||
margin: auto;
|
||
top: 0;
|
||
bottom: 0;
|
||
right: 60upx;
|
||
}
|
||
.news_more_icon {
|
||
position: absolute;
|
||
right: 20upx;
|
||
margin: auto;
|
||
top: 0;
|
||
bottom: 0;
|
||
height: 32upx;
|
||
font-size: 32upx;
|
||
}
|
||
.items_area {
|
||
position: relative;
|
||
width: 95%;
|
||
margin: auto;
|
||
}
|
||
.items_name {
|
||
font-size: 32upx;
|
||
line-height: 90upx;
|
||
}
|
||
.items_container {
|
||
position: relative;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 6upx;
|
||
padding: 22upx 0px;
|
||
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
|
||
|
||
display: block;
|
||
overflow: hidden;
|
||
}
|
||
.items_out {
|
||
float: left;
|
||
position: relative;
|
||
width: 25%;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
margin: 18upx 0px;
|
||
}
|
||
.items_icon {
|
||
width: 60upx;
|
||
height: 60upx;
|
||
margin: auto;
|
||
display: block;
|
||
}
|
||
.items_text {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 28upx;
|
||
line-height: 40upx;
|
||
color: #444;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.marquee_list {
|
||
width: 100%;
|
||
transition: top 0.5s;
|
||
}
|
||
.anim {
|
||
transition: all 0.5s;
|
||
margin-top: -40upx; //高度等于行高
|
||
}
|
||
</style>
|