template-project/pages/tabbar/pagehome/pagehome.vue

531 lines
20 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!=0">{{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 -->
<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 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" @tap="goMessage" 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">126</view>
</view>
<view class="bleft" style="height: 90rpx;"></view>
<view class="disjcac fc width50">
<view class="fon26 col9">实时故障</view>
<view class="fon60 bold">116</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">
</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-s30">
<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-s30">
<view @tap="dataQueryEv(index)" class="disjcac fc width25" v-for="(item,index) in dataQueryList" :key="index">
<view class="posir">
<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-s30">
<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-s30">
<view class="disjcac fc width25" v-for="(item,index) in projectRepairList" :key="index">
<view class="posir">
<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-s30">
<view class="disjcac fc width25" v-for="(item,index) in stayWorkOrderList" :key="index">
<view class="posir">
<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-s30">
<view class="disjcac fc width25" v-for="(item,index) in stayEventList" :key="index">
<view class="posir">
<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-s30">
<view class="disjcac fc width25" @click="goWorkOrder(index)" v-for="(item,index) in workOrderList" :key="index">
<view class="posir">
<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-s30">
<view @tap="dataQueryEv(index)" class="disjcac fc width25" v-for="(item,index) in dataQueryList" :key="index">
<view class="posir">
<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-s30">
<view class="disjcac fc width25" v-for="(item,index) in settlementList" :key="index">
<view class="posir">
<image :style="{width: [58,50,58][index]+'rpx',height:[54,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>
<!-- 其他 -->
<view class="home-fun-box">
<view class="fun-title col3 fon28 disac bold">其他</view>
<view class="disac mar-s30">
<view @tap="otherEv(index)" class="disjcac fc width25" v-for="(item,index) in otherList" :key="index">
<image :style="{width: [58,49,58][index]+'rpx',height:[51,58,55][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 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: 214rpx;" :style="{marginRight: solutionList.length != 4 ? '20rpx' : ''}">
<image style="width: 100%;height: 214rpx;" class="radius10 " :src="item.imgsrc" mode="widthFix"></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 footTabOne from '@/components/foot-tabs/foot-tab-one.vue';
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import { mapState,mapGetters,mapMutations } from 'vuex'//引入mapState
export default {
components:{
pitera,
statusNavSlot,
'foot-tab' :footTabOne,
containerSubgroupTwo
},
data() {
return {
role: 1, // 1业务员 2:表示客户 3:表示客服 4表示工程师
statusHeight: uni.getSystemInfoSync().statusBarHeight + 50,
messageNumber: 16 ,// 消息数量
noticeList:['2021年11月06日公司团建维修服务暂停一天服务暂停一天服务暂停一天。','51akslfj;dkpiojasdjf;j1ij'],//公告
// 故障报修
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:'/static/deleteImg/flying-img01.png',title:'控制室解决方案'},
{imgsrc:'/static/deleteImg/flying-img02.png',title:'户外屏解决方案'},
{imgsrc:'/static/deleteImg/flying-img03.png',title:'会议室解决方案'},
{imgsrc:'/static/deleteImg/flying-img04.png',title:'实体店解决方案'},
],
// 项目维修
projectRepairList:[
{imgsrc:'/static/public/icon-home-staySingle.png',title:'待接单',num:0},
{imgsrc:'/static/public/icon-home-stayImplement.png',title:'待执行',num:99},
{imgsrc:'/static/public/icon-home-repairIng.png',title:'维修中',num:6},
],
// 工单数据
workOrderList:[
{imgsrc:'/static/public/icon-home-abnormalSingle.png',title:'异常单',num:0},
{imgsrc:'/static/public/icon-home-overdueSingle.png',title:'逾期单',num:0},
{imgsrc:'/static/public/icon-home-overtime.png',title:'超时单 ',num:0},
{imgsrc:'/static/public/icon-home-workOrderPool.png',title:'工单池',num:6,},
],
// 结算情况
settlementList:[
{imgsrc:'/static/public/icon-home-stayCollection.png',title:'待收款',num:0},
{imgsrc:'/static/public/icon-home-received.png',title:'已收款',num:6},
{imgsrc:'/static/public/icon-home-commission.png',title:'佣金',num:0},
],
// 待办工单
stayWorkOrderList:[
{imgsrc:'/static/public/icon-home-stayImplement.png',title:'待受理',num:0},
{imgsrc:'/static/public/icon-home-stayAssign.png',title:'待指派',num:6},
{imgsrc:'/static/public/icon-home-stayRepair.png',title:'待维修',num:6},
{imgsrc:'/static/public/icon-home-returnVisit.png',title:'待回访',num:0},
],
// 待办事件
stayEventList:[
{imgsrc:'/static/public/icon-home-stayBatch.png',title:'待审批',num:0},
{imgsrc:'/static/public/icon-home-stayCollection.png',title:'待收款',num:0},
{imgsrc:'/static/public/icon-home-received.png',title:'已收款',num:0},
],
// 数据查询
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:[],
}
},
// computed:{
// tokenEv() {
// return this.$store.state.token;
// }
// },
// computed:mapState({
// // 从state中拿到数据 箭头函数可使代码更简练
// token: state => state.token,
// }),
// computed:mapState(['token']),
// computed: {
// ...mapState({
// token: function (state) {
// return '追加的' + state.token
// },
// userInfo: state => state.userInfo,
// })
// },
// computed: {
// todos() {
// return this.$store.getters.doneTodos
// }
// },
// computed: {
// doneTodosCount() {
// return this.$store.getters.doneTodosCount
// }
// },
// computed: {
// getTodoById() {
// return this.$store.getters.getTodoById(1)
// }
// },
// computed: {
// // 使用对象展开运算符将 getter 混入 computed 对象中
// ...mapGetters([
// 'doneTodos',
// 'doneTodosCount',
// 'getTodoById'
// // ...
// ])
// },
// computed:{
// ...mapState([
// 'token',
// 'userInfo',
// 'count',
// 'obj'
// ])
// },
computed: {
...mapState({
token: state => state.moduleA.token,
count: state => state.moduleB.count
}),
},
onLoad(options) {
// 获取当前页面url
this.$toolAll.tools.obtainUrl();
// 调用解决方案类型事件
this.getPlanType();
// 调用增值服务类型
// this.getIncrementServiceType();
// 调用获取常见故障列表事件
this.getFaultsList();
// this.$store.commit('setToken', 'token已改变');
// this.$store.commit('updateUserInfo',{userInfo:'用户信息'})
// this.$store.commit({
// type: 'updateUserInfo',
// userInfo: '新方式更新用户信息'
// })
// console.log(this.userInfo,374);
// this.add();
// console.log(this.obj);
// this.$store.commit('newProp',{c:'吃火锅'})
// console.log(this.obj,382);
// this.$store.dispatch('addCountAction')
// this.$store.dispatch('addCountAction2',{amount:10})
// this.$store.dispatch('addCountAction3',{amount:30})
// setTimeout(()=>{
// console.log(this.count,388);
// },3000)
// console.log(this.count,390);
console.log(this.token,397);
console.log(this.count,398);
},
methods: {
// ...mapMutations(['add']),//对象展开运算符直接拿到add
// 工单跳转
goWorkOrder(index){
if(index==0){
}else if(index==1){
}
else if(index==2){
}
else if(index==3){
uni.navigateTo({
url:'/pages/workOrder/workOrderLlsit'
})
}
},
goNoticeDetail(e){
console.log(e);
},
// 前往增值服务页面
goIncrement(index) {
uni.navigateTo({
url:`/pages/appreciationServe/appreciationServe?index=${index}`
})
},
// 查询增值服务类型
getIncrementServiceType(){
this.$requst.post('/universal/api.vas/vas_type').then(res=>{
if(res.code) {
}
})
},
// 数据查询事件
dataQueryEv(index){
uni.navigateTo({
url:`/pages/dataQuery/queryFunction?index=${index}`
})
},
// 查询解决方案类型
getPlanType(){
this.$requst.post('/universal/api.solution/solution_type').then(res=>{
if(res.code) {
res.data.forEach(item=>{
let obj = {
id:item.id,
title:item.name,
imgsrc: uni.getStorageSync('hostapi') + '/' + item.cover_img,
}
this.solutionList.push(obj);
})
console.log(this.solutionList,340);
}
})
},
// 故障报修分类下的点击事件
goFaultRepair(index){
if(index!=2) {
let faultRepairUrls = [
'/pages/repairsPage/repairsPage',
'/pages/workOrder/workOrderLlsit',
];
uni.navigateTo({
url:faultRepairUrls[index]
})
} else {
this.$toolAll.tools.showToast('已催单成功')
}
},
// 获取常见故障推荐列表
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: getApp().globalData.hostapi + '/' + item.cover_img,
content:item.summary,
views:item.reading
}
this.faultsList.push(obj);
})
}
})
},
// 其他分类下的点击事件
otherEv(index) {
let otherUrls = [
'/pages/faultStatistics/faultStatistics',
'/pages/faultStatistics/projectOverview',
'/pagesB/new-product/new-product',
];
uni.navigateTo({
url:otherUrls[index]
})
},
// 前往解决方案、常见故障列表
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}`
})
},
// 前往消息列表页面
goMessage(){
uni.navigateTo({
url:`/pagesB/message-center/message-center`
})
},
// 拨打电话事件
callEv(){
uni.makePhoneCall({
phoneNumber: '15616330510'
})
}
}
}
</script>
<style>
page{background-color: #f7f7f7;}
</style>