workorder-front/pages/index/index.vue

<template>
	<view class="page">

		<navbar bgColor="#169bd5"/>
		
		<view class="Carousel-image">
			<view class="imgs">
				<uv-swiper 
				:list="bannerList" 
				indicator indicatorMode="dot" 
				keyName="image"
				circular height="420">
				</uv-swiper>
			</view>


			<view class="search">
				<uv-search 
				placeholder="请输入搜索任务号" 
				bgColor="#fff"
				@search="getData"
				@custom="getData"
				v-model="queryParams.taskNo"></uv-search>
			</view>
			
		</view>

		<view class="festival">
			<uv-notice-bar
			@click="toNotice"
			:text="text" direction="column" ></uv-notice-bar>
		</view>

		<view class="task">
			
			<uv-grid :border="false">
				<uv-grid-item 
				@click="$utils.navigateTo(item.url)"
				v-for="(item,index) in baseList" :key="index">
					<uv-icon
					:name="item.name" 
					size="50rpx"></uv-icon>
					<text style="font-size: 28rpx;">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
			
		</view>

		<view class="Urgent-Work-Order">
			<view class="Urgent-Work">
				紧急工单
			</view>
			
			<WorkOrderitem
			v-for="(item,index) in list"
			:obj="item"
			isShowCollect
			@getData="getData"
			:key="index"
			@click="$utils.navigateTo('/pages_order/order/WorkOrders?id=' + item.id)"
			/>
			
		</view>
		
		<PrivacyAgreementPoup/>
			
		<tabber select="0"/>
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import tabber from '@/components/base/tabbar.vue'
	import WorkOrderitem from '@/components/work/WorkOrderitem.vue'
	import mixinsList from '@/mixins/list.js'
	import { mapGetters } from 'vuex'
	export default {
		mixins: [mixinsList],
		components: {
			tabber,
			PrivacyAgreementPoup,
			WorkOrderitem,
			
		},
		data() {
			return {
				bannerList: [],
				CollectionList:[],
				mixinsListApi : 'queryTemplateList',
				baseList: [
					{
						name: 'photo',
						title: '全部工单',
						url : '/pages_order/order/WorkOrderList',
					}, 
					{
						name: 'lock',
						title: '汇总列表',
						url : '/pages_order/order/WorkOrderTotalList',
					},
				],
				NewsList : [],//公告列表
				text : [],//公告列表标题
			}
		},
		computed: {
		},
		onLoad() {
			this.queryParams.isEmergency = 1
			this.queryBannerList()
		    this.queryNewsList()
			this.$store.commit('getUserInfo')
		},
		methods: {
			//轮播图
			queryBannerList(){
				this.$api('queryBannerList', res =>{
					if(res.code == 200){
						this.bannerList = res.result.records
					}
				})
			},
			//公告列表
			queryNewsList(){
				this.$api('queryNewsList', res =>{
					if(res.code == 200){
						this.NewsList = res.result.records
						res.result.records.forEach(n => {
							this.text.push(n.title)
						})
					}
				})
			},
			toNotice(index){
				uni.navigateTo({
					url: '/pages_order/order/Worknotice?id=' + this.NewsList[index].id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.Carousel-image {
		position: relative;
		display: inline-block;
		width: 100%;

		.search {
			height: 82rpx;
			width: 710rpx;
			background: #FFFFFF;
			margin: 20rpx auto;
			border-radius: 41rpx;
			box-sizing: border-box;
			padding: 0 15rpx;
			display: flex;
			align-items: center;
			position: absolute;
			top: 10px;
			left: 10px;
		}
	}
	
	.Urgent-Work-Order{
		padding: 20rpx;
	}

	.festival {
		padding: 20rpx;
	}

	.task {
		padding: 20rpx 0;
		background-color: #FFFFFF;
		margin: 20rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 10rpx 10rpx #00000005;
	}
</style>