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

<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 -->
			<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">{{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;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-s60 mar-x20" style="height: 58rpx;">
							<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: 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';
	const app = getApp();
	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:'2021年11月06日公司团建，维保服务暂停一天服务暂停一天服务暂停一天。一天服务暂停一天服务暂停一天。'}],//公告
				// 故障报修
				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,id:2},
					{imgsrc:'/static/public/icon-home-stayImplement.png',title:'待执行',num:99,id:0},
					{imgsrc:'/static/public/icon-home-repairIng.png',title:'维保中',num:6,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:6,id:0},
				],
				// 结算情况
				settlementList:[
					{imgsrc:'/static/public/icon-home-stayCollection.png',title:'待收款',num:0,id:5},
					{imgsrc:'/static/public/icon-home-received.png',title:'已收款',num:6,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:6,id:0},
					{imgsrc:'/static/public/icon-home-stayRepair.png',title:'待维保',num:6,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:`/pages/appreciationServe/appreciationServe?index=${index}`
				})
			},
			// 待办事件
			stayEv(title,statusId) {
				let url = '';
				if(title=='佣金') {
					url = `/pagesB/my-account/my-account?index=1`
				} else {
					url = `/pages/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:`/pages/dataQuery/queryFunction?index=${index}`
				})
			},
			// 故障报修分类下的点击事件
			goFaultRepair(index){
				if(index!=2) {
					let faultRepairUrls = [
						'/pages/repairsPage/repairsPage',
						'/pages/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 = [
					'/pages/faultStatistics/faultStatistics',
					'/pages/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');
			}
		}
	}
</script>

<style>
	page{background-color: #f7f7f7;}
</style>