pda_uniapp/pages/work/index.vue

<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
			:autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
				<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover"
					v-if="item.type=='video'"></video>
			</swiper-item>
		</swiper>
		<uni-section title="请选择业务操作 >>>" type="line"></uni-section>
		<view>
			<scroll-view scroll-y class="page">
				<view class="grid-body">
					<uni-grid :column="4" :showBorder="true">
						<uni-grid-item v-for="(item,index) in wmsRouter" :key="index">
							<view class="grid-item-box" @click="navChange(item)">
								<uni-icons :class='item.icon' size="30"></uni-icons>
								<text class="text">{{item.title}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</scroll-view>
		</view>
		<template v-if="userRoutes.length>0">
			<template v-for="oneMenuList in userRoutes">
				<uni-section :title='oneMenuList.title' type="line"></uni-section>
				<view>
					<scroll-view scroll-y class="page">
						<view class="grid-body">
							<uni-grid :column="4" :showBorder="true">
								<uni-grid-item v-for="(item,index) in oneMenuList.children" :key="index">
									<view class="grid-item-box" @click="navChange(item)">
										<uni-icons :class='item.icon' size="30" :color='item.color'></uni-icons>
										<text class="text">{{item.title}}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
					</scroll-view>
				</view>
			</template>
		</template>

	
	</view>
</template>

<script>
	import store from '@/store'
	import {
		data as wmsRouter
	} from "@/static/json/dynamicRouter.json";
	export default {
		data() {
			return {
				wmsRouter,
				
				swiperList: [
				// {
				// 	id: 0,
				// 	type: 'image',
				// 	url: '/static/images/banner/banner01.jpg'
				// }, {
				// 	id: 1,
				// 	type: 'image',
				// 	url: '/static/images/banner/banner02.jpg',
				// }, {
				// 	id: 2,
				// 	type: 'image',
				// 	url: '/static/images/banner/banner03.jpg'
				// }, 
				{
					id: 3,
					type: 'image',
					url: '/static/images/banner/banner04.jpg'
				}, {
					id: 4,
					type: 'image',
					url: '/static/images/banner/banner05.jpg'
				}, {
					id: 5,
					type: 'image',
					url: '/static/images/banner/banner06.jpg'
				}, {
					id: 6,
					type: 'image',
					url: '/static/images/banner/banner07.jpg'
				}, ],
				towerStart: 0,
				direction: '',
				dotStyle: true,
				userRoutes: []
			}
		},
		onLoad() {
			this.TowerSwiper('swiperList');
			this.direction = 'left';
			// 初始化towerSwiper 传已有的数组名即可
			//获取缓存内容
			console.log(store)
			console.log(store.getters.userRoutes)
			this.userRoutes = store.getters.userRoutes;
		},
		methods: {
			changeGrid(e) {
				this.$modal.showToast('模块建设中~')
				console.log(e)
			},
			navChange(e) {
				console.log("navChange", e)
				//todo 校验是否有权限
				var path = e.path;
				console.log(path)
				//this.PageCur = e.currentTarget.dataset.cur
				this.$tab.navigateTo(path)
			},
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				console.log(list)
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},
			// towerSwiper触摸开始
			TowerStart(e) {
				console.log(e)
				this.towerStart = e.touches[0].pageX
			},
			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
			// towerSwiper计算滚动
			TowerEnd(e) {
				let direction = this.direction;
				let list = this.swiperList;
				if (direction == 'right') {
					let mLeft = list[0].mLeft;
					console.log(list[0])
					let zIndex = list[0].zIndex;
					for (let i = 1; i < this.swiperList.length; i++) {
						this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
						this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
					}
					this.swiperList[list.length - 1].mLeft = mLeft;
					this.swiperList[list.length - 1].zIndex = zIndex;
				} else {
					let mLeft = list[list.length - 1].mLeft;
					let zIndex = list[list.length - 1].zIndex;
					for (let i = this.swiperList.length - 1; i > 0; i--) {
						this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
						this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
					}
					this.swiperList[0].mLeft = mLeft;
					this.swiperList[0].zIndex = zIndex;
				}
				this.direction = ""
				this.swiperList = this.swiperList
			},
		}
	}
</script>

<style lang="scss">
	@import url("../../components/colorui/main.css");
	@import url("../../components/colorui/icon.css");

	/* #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%;
		}
	}

	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>