<template> <view class="content"> <!-- 轮播图 --> <swiper class="top-ad-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="600" :circular="true"> <swiper-item v-for="(item,index) in imageTopList" :key="index"> <div class="swiper-item uni-bg-red"> <!-- <image class="swiper-item-imgse" :fade-show='true' :src="item.photo"></image> --> <u-image mode="scaleToFill" width="750upx" height="400upx" :src="item.photoPath"></u-image> </div> </swiper-item> </swiper> <!-- 导航按钮 --> <div class="nav-items"> <iconItemsList :list="navList"></iconItemsList> </div> <u-gap height="10" bg-color="#f8f8f8"></u-gap> <!-- 待办单 --> <div class="panel-box" v-if="$hasPermissions('M_homeTodoList_mobile')"> <div class="panel-title"> <span class="texts">待办单</span> <span v-if="$hasPermissions('M_todoList_mobile')" class="btns" @click="toDoList">更多 <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="24" color="#4eacfe"></u-icon> </span> </div> <div class="panel-body"> <div class="order-list"> <div v-for="item in toDoData" :key="item.id" @click="viewToDo(item)"> <span>{{item.createDate.split(' ')[0]}}</span> <span>{{item.sourceTypeDictValue}}</span> <span :class="item.status">{{item.statusDictValue}}</span> </div> </div> <div class="nodata" v-if="toDoData.length==0">{{notoDoDataText}}</div> </div> </div> </view> </template> <script> import iconItemsList from '@/components/icon-items-list/icon-items-list.vue' import { bannerList } from "@/api/banner.js" import { getBackLogList } from '@/api/backLog' import { getLookUpDatas } from "@/api/data.js" import moment from 'moment' export default { components: { iconItemsList }, data() { return { // 顶部轮播图片 imageTopList: [], notoDoDataText: '数据加载中,请稍后...', toDoData: [], // 快捷导航 navList: [{ id: 'SPXD', icon: 'xundian', color: '#00aaff', name: '视频巡店', url: '/pages/videoShopTour/videoShopTour', target: 'page', auth: this.$hasPermissions("M_videoTour_mobile") }, { id: 'DJZX', icon: 'dianjian', color: '#ff8b3e', name: '点检中心', url: '/pages/spotCheckCenter/spotChecking', target: 'page', auth: this.$hasPermissions("M_spotCheckCenter_mobile") }, { id: 'XCXD', icon: 'xianchangqiandao', color: '#00aa7f', name: '现场巡店', url: '/pages/siteInspection/siteInspection', target: 'page', auth: this.$hasPermissions("M_siteInspection_mobile") }, { id: 'XDJL', icon: 'tubiaokuwenjian-gengxin-', color: '#55aaff', name: '巡店记录', url: '/pages/shopTourRecord/shopTourRecord', target: 'page', auth: this.$hasPermissions("M_shopTourRecord_mobile") } ], }; }, onLoad() { // 获取周 this.getLookUpList('WEEK', 'vuex_weeks'); // 获取点检任务状态 this.getLookUpList('POINT_TASK_STATUS', 'vuex_spotCheckStatus') // 获取巡店任务状态 this.getLookUpList('TASK_STATUS','vuex_taskStatus') }, onShow() { this.getBanner('HOME_TOP') this.gettoDoData() }, methods: { // 或某一项字典列表,参数code getLookUpList(code, vuexKey) { getLookUpDatas({ type: code }).then(res => { if (res.status == 200) { this.$store.state[vuexKey] = res.data || []; } }); }, openVideo() { uni.navigateTo({ url: "/pages/shopTour/shopTour" }) }, // 消息提示 showTotast(title) { uni.showToast({ icon: 'none', title: title }) }, // 获取顶部与中部轮播图片 getBanner() { bannerList({ position: 'HOME_TOP', bannerType: 'app' }).then(res => { if (res.status == 200) { this.imageTopList = res.data || [] } }) }, // 获取待办单 gettoDoData() { let _this = this let toDoData = { pageNo: 1, pageSize: 10, queryLabel: 'ALL', // endDate: moment().format('YYYY-MM-DD'), // beginDate: moment().subtract(7, 'days').format('YYYY-MM-DD') } getBackLogList(toDoData).then(res => { console.log(res) if (res.status == 200) { let data = res.data.list if (data.length) { _this.toDoData = data.slice(0, 10) } else { _this.toDoData = [] _this.notoDoDataText = '暂无数据' } } else { this.showTotast(res.message ? res.message : '网络似乎出错了,请稍后再试') this.notoDoDataText = res.message ? res.message : '网络似乎出错了,请稍后再试' } }) }, // 更多待办 toDoList() { uni.navigateTo({ url: '/pages/toDoList/toDoList' }) }, // 详细页 viewToDo(item){ uni.navigateTo({ url: "/pages/toDoList/backlogDetail?id="+item.id }) }, } }; </script> <style lang="scss"> .content { .top-ad-swiper { height: 340upx; } .swiper-item-imgse { width: 750upx; height: 340upx; } .panel-box { .panel-title { display: flex; align-items: center; padding:20upx 25upx; border-bottom: 2upx solid #eee; .texts { font-size: 28upx; flex-grow: 1; padding-left: 15upx; } .btns { font-size: 24upx; color: #999; } } .panel-body { padding: 20upx 0; .nodata { text-align: center; font-size: 24upx; width: 100%; color: #999999; padding: 30upx 0; } } } .order-list { >div { display: flex; align-items: center; font-size: 30upx; padding: 15upx 0; span { flex-grow: 1; text-align: center; color: #666; width: 33.3%; } span.PENDING{ color: #ff736e; } span.EXPIRED{ color: #999; } span.FINISHED{ color: #bbec82; } } } } </style>