flying-monkey/pages/tabbar/pagehome/pagehome.vue

487 lines
19 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="pad-x50">
<status-nav-slot>
<view slot="leftContent" @tap="goMessage" style="width: 70px;">
<view class="home-message-box posir disac">
<image src="/static/public/icon-home-message.png" mode=""></image>
<view v-if="messageNumber">{{messageNumber}}</view>
</view>
</view>
<view slot="centerContent" class="disjcac">
<image style="width: 156rpx;height: 38rpx;" src="/static/public/icom-home-logo.png" mode="widthFix"></image>
</view>
<!-- #ifdef APP-PLUS || H5 -->
<view slot="rightContent" class="disac" @tap="callEv">
<image class="mar-y10" style="width: 26rpx;height: 26rpx;" src="/static/public/icon-home-phone.png" mode=""></image>
<view class="fon26 col3">拨打电话</view>
</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view slot="rightContent" style="width: 70px;"></view>
<!-- #endif -->
</status-nav-slot>
<!-- <view :style="{paddingTop: statusHeight +'px'}"> -->
<!-- banner图 -->
<container-subgroup-two>
<view slot="content" style="margin: 0 -30rpx;">
<image class="width100" src="/static/public/icon-home-banner.png" mode="widthFix"></image>
<view class="pad-zy20">
<!-- 项目总数、实时故障、公告 -->
<view class="project-notice-box">
<view class="disjcac pad-sx20 bbot">
<view class="disjcac fc width50">
<view class="fon26 col9">项目总数</view>
<view class="fon60 bold">{{project_count || 0}}</view>
</view>
<view class="bleft" style="height: 90rpx;"></view>
<view class="disjcac fc width50">
<view class="fon26 col9">实时工单</view>
<view class="fon60 bold">{{fault_count || 0}}</view>
</view>
</view>
<view class="disac pad-s30 pad-x10">
<image class="mar-zy20" style="width: 64rpx;height: 27rpx;" src="/static/public/icon-home-notice.png" mode=""></image>
<view class="fon24 color6 mar-y20 width100 bleft pad-z20">
<!-- <lwNotice @dangGao="goNoticeDetail" :list="noticeList" :backgroundColor="'#FFFFFF'"></lwNotice> -->
<notice-one direction="row" :list="noticeList"></notice-one>
</view>
</view>
</view>
<!-- 客户可见 -->
<view v-if="role==2 || role==1">
<!-- 故障报修 -->
<view class="home-fun-box">
<view class="fun-title col3 fon28 disac bold">故障报修</view>
<view class="disac mar-s60 mar-x20" style="height: 58rpx;">
<view @tap="goFaultRepair(index)" class="disjcac fc width25" v-for="(item,index) in repairList" :key="index">
<image :style="{width: [58,58,50][index]+'rpx',height:[53,56,58][index] + 'rpx'}" style="width: 58rpx;height: 53rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
<!-- 数据查询 -->
<view class="home-fun-box" v-if="role==1">
<view class="fun-title col3 fon28 disac bold">数据查询</view>
<view class="disac mar-s40">
<view @tap="dataQueryEv(index)" class="disjcac fc width25" v-for="(item,index) in dataQueryList" :key="index">
<view class="posir" style="height: 56rpx;">
<image :style="{width: [58,58,58][index]+'rpx',height:[46,56,50][index] + 'rpx'}" style="width: 58rpx;height: 53rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="engineer-num" v-if="item.num!=0">{{item.num}}</view>
</view>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
<!-- 增值服务 -->
<view class="home-fun-box">
<view class="fun-title col3 fon28 disac bold">增值服务</view>
<view class="disac mar-s60 mar-x20" style="height: 56rpx;">
<view @tap="goIncrement(index)" class="disjcac fc width25" v-for="(item,index) in incrementList" :key="index">
<image :style="{width: [57,52,58,51][index]+'rpx',height:[56,56,50,56][index] + 'rpx'}" style="width: 58rpx;height: 53rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
</view>
<!-- 工程师可见 -->
<view v-if="role==4 || role==3">
<!-- 项目维保 -->
<view class="home-fun-box" v-if="role==4">
<view class="fun-title col3 fon28 disac bold">项目维保</view>
<view class="disac mar-s40">
<view @tap="stayEv(item.title,item.id)" class="disjcac fc width25" v-for="(item,index) in projectRepairList" :key="index">
<view class="posir" style="height: 58rpx;">
<image :style="{width: [53,52,51][index]+'rpx',height:[58,58,58][index] + 'rpx'}" style="width: 58rpx;height: 53rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="engineer-num" v-if="item.num!=0">{{item.num}}</view>
</view>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
<view v-if="role==3">
<!-- 待办工单 -->
<view class="home-fun-box">
<view class="fun-title col3 fon28 disac bold">待办工单</view>
<view class="disac mar-s40">
<view @tap="stayEv(item.title,item.id)" class="disjcac fc width25" v-for="(item,index) in stayWorkOrderList" :key="index">
<view class="posir" style="height: 58rpx;">
<image :style="{width: [53,48,51,58][index]+'rpx',height:[58,58,58,53][index] + 'rpx'}" style="width: 58rpx;height: 53rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="engineer-num" v-if="item.num!=0">{{item.num}}</view>
</view>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
<!-- 待办事件 -->
<view class="home-fun-box">
<view class="fun-title col3 fon28 disac bold">待办事件</view>
<view class="disac mar-s40">
<view @tap="stayEv(item.title,item.id)" class="disjcac fc width25" v-for="(item,index) in stayEventList" :key="index">
<view class="posir" style="height: 58rpx;">
<image :style="{width: [58,58,50][index]+'rpx',height:[58,54,58][index] + 'rpx'}" style="width: 58rpx;height: 53rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="engineer-num" v-if="item.num!=0">{{item.num}}</view>
</view>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
</view>
<!-- 工单数据 -->
<view class="home-fun-box">
<view class="fun-title col3 fon28 disac bold">工单数据</view>
<view class="disac mar-s40">
<view @tap="stayEv(item.title,item.id)" class="disjcac fc width25" v-for="(item,index) in workOrderList" :key="index">
<view class="posir" style="height: 60rpx;">
<image :style="{width: [59,56,58,58][index]+'rpx',height:[49,58,58,60][index] + 'rpx'}" style="width: 58rpx;height: 53rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="engineer-num" v-if="item.num!=0">{{item.num}}</view>
</view>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
<!-- 数据查询 -->
<view class="home-fun-box" v-if="role==3">
<view class="fun-title col3 fon28 disac bold">数据查询</view>
<view class="disac mar-s40">
<view @tap="dataQueryEv(index)" class="disjcac fc width25" v-for="(item,index) in dataQueryList" :key="index">
<view class="posir" style="height: 56rpx;">
<image :style="{width: [58,58,58][index]+'rpx',height:[46,56,50][index] + 'rpx'}" style="width: 58rpx;height: 53rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="engineer-num" v-if="item.num!=0">{{item.num}}</view>
</view>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
<!-- 结算情况 -->
<view class="home-fun-box" v-if="role==4">
<view class="fun-title col3 fon28 disac bold">结算情况</view>
<view class="disac mar-s40">
<view @tap="stayEv(item.title,item.id)" class="disjcac fc width25" v-for="(item,index) in settlementList" :key="index">
<view class="posir" style="height: 58rpx;">
<image :style="{width: [58,50,58][index]+'rpx',height:[54,58,58][index] + 'rpx'}" style="width: 58rpx;" :src="item.imgsrc" mode="widthFix"></image>
<view class="engineer-num" v-if="item.num!=0">{{item.num}}</view>
</view>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
</view>
<!-- 其他 -->
<view class="home-fun-box">
<view class="fun-title col3 fon28 disac bold">其他</view>
<view class="disac mar-s60 mar-x20">
<view @tap="otherEv(index)" class="disjcac fc width25" v-for="(item,index) in otherList" :key="index">
<view class="posir" style="height: 58rpx;">
<image :style="{width: [58,49,58][index]+'rpx',height:[51,58,55][index] + 'rpx'}" style="width: 58rpx;" :src="item.imgsrc" mode="widthFix"></image>
</view>
<view class="fon24 col3 mar-s10">{{item.title}}</view>
</view>
</view>
</view>
</view>
<!-- 解决方案 -->
<view class="home-solution mar-x20 pad30">
<view class="disjbac" @tap="goPlant(0)">
<view>
<view class="fon30 bold" style="color: #00a2e9;">畅想智能-场景化设计</view>
<view class="fon34 bold col3 mar-s10">解决方案<text class="col9 mar-z10">Solution</text></view>
</view>
<image style="width: 50rpx;height: 50rpx;" src="/static/public/icon-home-solution.png" mode=""></image>
</view>
<view class="mar-s30">
<scroll-view scroll-x>
<view :class="[solutionList.length == 4 ? 'disjbac' : 'disac']">
<view @tap="goDetail(0,item.id)" class="posir flexs" v-for="(item,index) in solutionList" :key="index" style="width: 23%;height: 110px;" :style="{marginRight: solutionList.length != 4 ? '20rpx' : ''}">
<image style="width: 100%;height: 110px;" class="radius10 " :src="item.imgsrc" mode="aspectFill"></image>
<view class="posia solution-title clips1">{{item.title}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 常见故障 -->
<view class="bacf mar-zy20 pad-sx30 pad-zy10 radius10">
<view class="fon34 bold col3" @tap="goPlant(1)">常见故障<text class="col9 mar-z10">Common faults</text></view>
<view @tap="goDetail(1,item.id)" class="pad-sx20 bbot disjb" v-for="(item,index) in faultsList" :key="index">
<view class="fon28 line-h38 disjb fc" style="min-height: 160rpx;">
<view>
<view class="col3 clips1">{{item.title}}</view>
<view class="fon22 col6 clips3 mar-sx10">{{item.content}}</view>
</view>
<view class="col9">{{item.views}}人看过</view>
</view>
<image class="flexs mar-z20" :src="item.imgsrc" style="width: 280rpx;height: 160rpx;" mode="aspectFill" lazy-load></image>
</view>
</view>
</view>
</container-subgroup-two>
<!-- 底部tab -->
<foot-tab></foot-tab>
</view>
</template>
<script>
import statusNavSlot from '@/components/status-navs/status-nav-slot.vue';
// 暂无更多组件
import pitera from '@/components/nothing/pitera.vue';
// 公告
import lwNotice from '@/components/lw-notice/lw-notice.vue';
import noticeOne from '@/components/notices/notice-one/notice-one.vue';
import footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import {getPlanType} from '@/jsFile/public-api.js';
export default {
components:{
pitera,
statusNavSlot,
lwNotice,
'foot-tab' :footTabOne,
containerSubgroupTwo,
noticeOne
},
data() {
return {
// role: 1, // 1业务员 2:表示客户 3:表示客服 4表示工程师
role: uni.getStorageSync('type_id'), // 1业务员 2:表示客户 3:表示客服 4表示工程师
statusHeight: uni.getSystemInfoSync().statusBarHeight + 50,
messageNumber: 0 ,// 消息数量
noticeList:[{id:1,title:'系统正在维护中...'}],//公告
// 故障报修
repairList:[
{imgsrc:'/static/public/icon-home-repair.png',title:'报修'},
{imgsrc:'/static/public/icon-home-dealt.png',title:'待办'},
{imgsrc:'/static/public/icon-home-urge.png',title:'催一催'},
],
// 增值服务
incrementList:[
{imgsrc:'/static/public/icon-home-patrol.png',title:'巡检'},
{imgsrc:'/static/public/icon-home-maintain.png',title:'保养'},
{imgsrc:'/static/public/icon-home-movingScreen.png',title:'移屏'},
{imgsrc:'/static/public/icon-home-screeRemoval.png',title:'拆屏'},
],
// 其他
otherList:[
{imgsrc:'/static/public/icon-home-largeScreen.png',title:'维保统计'},
{imgsrc:'/static/public/icon-home-reportForm.png',title:'数据看板'},
{imgsrc:'/static/public/icon-home-product.png',title:'新产品'},
],
// 解决方案
solutionList:[
{imgsrc:'',title:'控制室解决方案'},
{imgsrc:'',title:'户外屏解决方案'},
{imgsrc:'',title:'会议室解决方案'},
{imgsrc:'',title:'实体店解决方案'},
],
// 项目维保
projectRepairList:[
{imgsrc:'/static/public/icon-home-staySingle.png',title:'待接单',num:0,id:2},
{imgsrc:'/static/public/icon-home-stayImplement.png',title:'待执行',num:0,id:0},
{imgsrc:'/static/public/icon-home-repairIng.png',title:'维保中',num:0,id:4},
],
// 工单数据
workOrderList:[
{imgsrc:'/static/public/icon-home-abnormalSingle.png',title:'异常单',num:0,id:100},
{imgsrc:'/static/public/icon-home-overdueSingle.png',title:'逾期单',num:0,id:101},
{imgsrc:'/static/public/icon-home-overtime.png',title:'超时单 ',num:0,id:0},
{imgsrc:'/static/public/icon-home-workOrderPool.png',title:'工单池',num:0,id:0},
],
// 结算情况
settlementList:[
{imgsrc:'/static/public/icon-home-stayCollection.png',title:'待收款',num:0,id:5},
{imgsrc:'/static/public/icon-home-received.png',title:'已收款',num:0,id:7},
{imgsrc:'/static/public/icon-home-commission.png',title:'佣金',num:0,id:5},
],
// 待办工单
stayWorkOrderList:[
{imgsrc:'/static/public/icon-home-stayImplement.png',title:'待受理',num:0,id:0},
{imgsrc:'/static/public/icon-home-stayAssign.png',title:'待指派',num:0,id:0},
{imgsrc:'/static/public/icon-home-stayRepair.png',title:'待维保',num:0,id:3},
{imgsrc:'/static/public/icon-home-returnVisit.png',title:'待回访',num:0,id:8},
],
// 待办事件
stayEventList:[
{imgsrc:'/static/public/icon-home-stayBatch.png',title:'待审批',num:0,id:6},
{imgsrc:'/static/public/icon-home-stayCollection.png',title:'待收款',num:0,id:5},
{imgsrc:'/static/public/icon-home-received.png',title:'已收款',num:0,id:7},
],
// 数据查询
dataQueryList:[
{imgsrc:'/static/public/icon-home-checkCustomer.png',title:'查客户',num:0},
{imgsrc:'/static/public/icon-home-checkProject.png',title:'查项目',num:0},
{imgsrc:'/static/public/icon-home-checkSparePart.png',title:'查备件',num:0},
],
// 常见故障
faultsList:[],
locationstr:'',
contactPhone:'',//客服联系电话
project_count:0,//项目数量
fault_count:0,//实时工单数量
}
},
onShow() {
// 调用首页信息查询事件
this.checkHome();
},
onLoad(options) {
// 获取当前页面url
this.$toolAll.tools.obtainUrl();
// 调用解决方案类型事件
this.getPlanTypeEv();
// 调用增值服务类型
this.getIncrementServiceType();
// 调用获取常见故障列表事件
this.getFaultsList();
},
methods: {
// 首页信息查询
checkHome(){
this.$requst.get('/universal/api.home/home').then(res=>{
if(res.code) {
let homeObj = res.data;
this.messageNumber = homeObj.message;//消息数量
this.contactPhone = homeObj.contact;//客服联系电话
this.project_count = homeObj.project_count;//项目数量
this.fault_count = homeObj.fault_count;//实时工单数量
// 重构公告列表
if(homeObj.notice.length) {
homeObj.notice.forEach(item=>{
let obj = {
id:1,
title:`${item.name}${item.content}`
}
this.noticeList.push(obj);
})
}
}
})
},
goNoticeDetail(e){
console.log(e);
},
// 前往增值服务页面
goIncrement(index) {
uni.navigateTo({
url:`/pagesA/appreciationServe/appreciationServe?index=${index}`
})
},
// 待办事件
stayEv(title,statusId) {
let url = '';
if(title=='佣金') {
url = `/pagesB/my-account/my-account?index=1`
} else {
url = `/pagesA/workOrder/workOrderLlsit?status=${title}&statusId=${statusId}`
}
uni.navigateTo({
url:url
})
},
// 查询增值服务类型
getIncrementServiceType(){
this.$requst.get('/universal/api.vas/vas_type').then(res=>{
if(res.code) {
}
})
},
// 数据查询事件
dataQueryEv(index){
uni.navigateTo({
url:`/pagesA/dataQuery/queryFunction?index=${index}`
})
},
// 故障报修分类下的点击事件
goFaultRepair(index){
if(index!=2) {
let faultRepairUrls = [
'/pagesA/repairsPage/repairsPage',
'/pagesA/workOrder/workOrderLlsit',
];
uni.navigateTo({
url:faultRepairUrls[index]
})
} else {
this.$toolAll.tools.showToast('已催单成功')
}
},
// 查询解决方案的推荐方案
getPlanTypeEv(){
let params = {
is_recommend:1,
list_rows:200,
page:1
}
getPlanType(params).then(res=>{
if(res.code) {
this.solutionList = [];
res.data.data.forEach(item=>{
let obj = {
id:item.id,
title:item.title,
imgsrc: item.cover_img,
}
this.solutionList.push(obj);
})
}
})
},
// 获取常见故障推荐列表
getFaultsList(){
this.$requst.post('/universal/api.question/question').then(res=>{
if(res.code) {
res.data.forEach(item=>{
let obj = {
id:item.id,
title:item.title,
imgsrc: item.cover_img,
content:item.summary,
views:item.reading
}
this.faultsList.push(obj);
})
}
})
},
// 前往解决方案、常见故障列表
goPlant(index){
uni.navigateTo({
url:`/pagesB/plan-fault/plan-fault?index=${index}`
})
},
// 前往解决方案详情、常见故障详情
goDetail(index,id) {
uni.navigateTo({
url:`/pagesB/plan-fault-product-detail/detail?index=${index}&id=${id}`
})
},
// 其他分类下的点击事件
otherEv(index) {
let otherUrls = [
'/pagesA/faultStatistics/faultStatistics',
'/pagesA/faultStatistics/projectOverview',
'/pagesB/new-product/new-product',
];
uni.navigateTo({
url:otherUrls[index]
})
},
// 前往消息列表页面
goMessage(){
uni.navigateTo({
url:`/pagesB/message-center/message-center`
})
},
// 拨打电话事件
callEv(){
// this.$toolAll.tools.countCustomer('15616330510');
this.$toolAll.tools.countCustomer('17366921088');
}
}
}
</script>
<style>
page{background-color: #f7f7f7;}
</style>