shanghaiganxiangtuzhuangworkshop_WMS_PDA/pages/index/index.vue

<template>
	<view class="home-container">
		<!-- 顶部图片 -->
		<view class="home-banner-box">
			<u--image :showLoading="true" src="/static/images/ui/home-banner.png" width="360px"
				height="180px"></u--image>
		</view>
		<!-- 按钮区域 -->
		<view class="home-button-box">
			<u-row>
				<u-col span="3">
					<u-row>
						<view :style="[$u.addStyle(buttonData[0].style)]" class="box-1 home-button-action"
							@click="toMenuChouse(0)">
							<u-icon :name="buttonData[0].icon" :color="buttonData[0].style.color" size="100"></u-icon>
							<text>{{buttonData[0].text}}</text>
						</view>
						<view class="gap-10"></view>
					</u-row>
				</u-col>
				<u-col span="9">
					<view>
						<u-row>
							<u-col span="6">
								<view :style="[$u.addStyle(buttonData[1].style)]" class="box-1 home-button-action"
									@click="toMenuChouse(1)">
									<u-icon :name="buttonData[1].icon" :color="buttonData[1].style.color"
										size="100"></u-icon>
									<text>{{buttonData[1].text}}</text>
								</view>
							</u-col>
							<u-col span="6">
								<view :style="[$u.addStyle(buttonData[2].style)]" class="box-1 home-button-action"
									@click="toMenuChouse(2)">
									<u-icon :name="buttonData[2].icon" :color="buttonData[2].style.color"
										size="100"></u-icon>
									<text>{{buttonData[2].text}}</text>
								</view>
							</u-col>
						</u-row>
						<view class="gap-10"></view>
						<u-row>
							<u-col span="12">
								<view :style="[$u.addStyle(buttonData[3].style)]" class="box-2 home-button-action"
									@click="toMenuChouse(3)">
									<u-icon :name="buttonData[3].icon" :color="buttonData[3].style.color"
										size="100"></u-icon>
									<view class="gap-10"></view>
									<text>{{buttonData[3].text}}</text>
								</view>
							</u-col>
						</u-row>
					</view>

				</u-col>
			</u-row>
			<view class="gap-10"></view>
			<u-row>
				<u-col span="12">
					<view :style="[$u.addStyle(buttonData[4].style)]" class="box-2 home-button-action"
						@click="toMenuChouse(4)">
						<u-icon :name="buttonData[4].icon" :color="buttonData[4].style.color" size="100"></u-icon>
						<view class="gap-10"></view>
						<text>{{buttonData[4].text}}</text>
					</view>
				</u-col>
			</u-row>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				// 页面按钮参数
				buttonData: [{
						index: 0,
						text: '入库',
						icon: '/static/images/icon/rk.svg',
						style: {
							width: '80px',
							height: '180px',
							fontSize: '20px',
							backgroundImage: 'linear-gradient(to bottom right, #fe9a9c 0%, #fe7a7c 100%)',
							color: 'white',
							borderRadius: '10px'
						}
					},
					{
						index: 1,
						text: '移库',
						icon: '/static/images/icon/yk.svg',
						style: {
							width: '110px',
							height: '90px',
							fontSize: '20px',
							backgroundImage: 'linear-gradient(to bottom right, #fdb886 0%, #fdad6d 100%)',
							color: 'white',
							borderRadius: '10px'
						}
					},
					{
						index: 2,
						text: '盘点',
						icon: '/static/images/icon/pd.svg',
						style: {

							width: '110px',
							height: '90px',
							fontSize: '20px',
							backgroundImage: 'linear-gradient(to bottom right, #67e5f5 0% , #52cee2 100%)',
							color: 'white',
							borderRadius: '10px'
						}
					},
					{
						index: 3,
						text: '出库',
						icon: '/static/images/icon/ck.svg',
						style: {
							width: '100%',
							height: '80px',
							fontSize: '20px',
							backgroundImage: 'linear-gradient(to bottom right, #a4a1f9 0%, #8180f9 100%)',
							color: 'white',
							borderRadius: '10px'
						}
					},
					{
						index: 4,
						text: '仓库管理',
						icon: '/static/images/icon/ckgl.svg',
						style: {
							width: '100%',
							height: '80px',
							fontSize: '20px',
							backgroundImage: 'linear-gradient(to bottom right, #59affe 0%, #4d92fe 100%)',
							color: 'white',
							borderRadius: '10px'
						}
					}
				]
			};
		},
		onLoad: function() {
			this.GetInfo();
		},
		mounted() {
			// console.log('屏幕宽度', uni.getWindowInfo().screenWidth)
			// console.log('可用高度', uni.getWindowInfo().windowHeight)
		},

		methods: {
			...mapActions([
				'LogOut',
				'GetInfo'
			]),
			toMenuChouse(type) {
				uni.navigateTo({
					url: '/pages/menuChouse/menuChouse',
					success: function(res) {
						// 向按钮列表页传递消息
						res.eventChannel.emit('setMenuType', {
							data: type
						})
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import url('index.scss');
</style>