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>
|