kunshan-bzfm-pda-uniapp/pages/index.vue

<template>
	<view class="container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="bannerList" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)">
						<image :src="item.image" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 宫格组件 -->
		<uni-section title="半导体阀门生产线" type="line"></uni-section>
		<view class="grid-body">
			<uni-grid :column="4" :showBorder="false" @change="changeProduceGrid">
				<uni-grid-item v-for="(item, index) in produceOptions" :key="index" :index="index">
					<view class="grid-item-box">
						<uni-icons :type="item.icon" size="30"></uni-icons>
						<text class="text">{{ item.name }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<uni-section title="涂装线" type="line"></uni-section>
		<view class="grid-body">
			<uni-grid :column="4" :showBorder="false" @change="changePaintingGrid">
				<uni-grid-item v-for="(item, index) in paintingOptions" :key="index" :index="index">
					<view class="grid-item-box">
						<uni-icons :type="item.icon" size="30"></uni-icons>
						<text class="text">{{ item.name }}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
import { fail } from 'assert';
export default {
	onShow() {
		uni.hideLoading();
	},
	data() {
		return {
			current: 0,
			swiperDotIndex: 0,
			bannerList: [
				{
					image: '/static/images/door/1.jpg'
				},
				{
					image: '/static/images/door/2.jpg'
				},
				{
					image: '/static/images/door/3.jpg'
				}
			],
			// 生产模块
			produceOptions: [
				{
					name: '物料领用',
					icon: 'download-filled',
					url: ''
				},
				{
					name: '机械加工',
					icon: 'star-filled',
					url: ''
				},
				{
					name: '加工检查',
					icon: 'star-filled',
					url: ''
				},
				{
					name: '手工研磨',
					icon: 'star-filled',
					url: ''
				},
				{
					name: '机械研磨',
					icon: 'star-filled',
					url: ''
				},
				{
					name: '精研磨',
					icon: 'star-filled',
					url: ''
				},
				{
					name: '出货',
					icon: 'upload-filled',
					url: ''
				},
				{
					name: '制程检验\n（不良跟踪）',
					icon: 'folder-add-filled',
					url: ''
				}
			],
			// 涂装模块
			paintingOptions: [
				{
					name: '扫码报工',
					icon: 'scan',
					url: ''
				},
			],
			// 物料模块
			materialOptions: [
				{
					name: '产线备料',
					icon: 'upload-filled',
					url: ''
				},
				{
					name: '产线备料',
					icon: 'upload-filled',
					url: ''
				},
			]
		};
	},
	methods: {
		clickBannerItem(item) {
			console.info(item);
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		// 产线功能
		changeProduceGrid(e) {
			const _url = this.produceOptions[e.detail.index].url;
			uni.navigateTo({
				url: _url,
				fail: () => {
					this.$modal.showToast('模块建设中~');
				}
			});
		},
		// 涂装线功能
		changePaintingGrid(e) {
			const _url = this.paintingOptions[e.detail.index].url;
			uni.navigateTo({
				url: _url,
				fail: () => {
					this.$modal.showToast('模块建设中~');
				}
			});
		},
		// 物料功能
		changeMaterialGrid(e) {
			const _url = this.materialOptions[e.detail.index].url;
			uni.navigateTo({
				url: _url,
				fail: () => {
					this.$modal.showToast('模块建设中~');
				}
			});
		}
	}
};
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

/* #endif */

.text {
	text-align: center;
	font-size: 26rpx;
	margin-top: 10rpx;
}

.grid-item-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}

.swiper {
	height: 300rpx;
}

.swiper-box {
	height: 150px;
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	height: 300rpx;
	line-height: 300rpx;
}

@media screen and (min-width: 500px) {
	.uni-swiper-dot-box {
		width: 400px;
		/* #ifndef APP-NVUE */
		margin: 0 auto;
		/* #endif */
		margin-top: 8px;
	}

	.image {
		width: 100%;
	}
}
</style>