PDA/pages/home/home.vue

<template>
	<view class="home-wrap">
		<view class="home-title">
			<view class="title-bac">
				<view class="roomt">
					<span class="rom-spn">当前所在仓库</span>
					<span class="quit-spn" @click.stop="loginOff()"></span>
				</view>
				<view class="rom-set">
					<view class="park"></view>
					<view class="houseName">
						<uni-data-picker popup-title="请选择仓库" :localdata="houseData" @change="onchange">
							<span class='romtitle'>{{houseSelectData.houseName}}</span>
						</uni-data-picker>
					</view>
					<view class="down"></view>
				</view>
				<view class="section-view">
					<view class="user-cont">
						<span class="user-spn">欢迎</span>
						<span class="user-spn spnr">{{userData.userName}}</span>
					</view>
					<view class="sec-data">
						<view class="sec-item" v-for="(item,index) in romDetData" :key="index">
							<span class="item-spn spnVal">{{item.value}}</span>
							<span class="item-spn">{{item.name}}</span>
						</view>
					</view>
				</view>
				<view class="app-view">
					<view class="app-item">
						<view class="app-title">
							商品检索
						</view>
						<view class="app-item-mut">
							<view class="app-item-spn">
								商品所在位置及属性信息查询
							</view>
							<view class="app-item-img">

							</view>
						</view>
					</view>
					<view class="app-item">
						<view class="app-title">
							库存盘点
						</view>
						<view class="app-item-mut">
							<view class="app-item-spn">
								多种方式盘点核对库内商品
							</view>
							<view class="app-item-img">

							</view>
						</view>
					</view>
				</view>
				<view class="message-view">
					<view class="all-message">
						全部消息 >>
					</view>
					<view>
						<view class="message-item" v-for="(item,index) in messageData" :key="index">
							<span>{{item.text}}</span>
							<span>详情 >></span>
						</view>
					</view>
				</view>
				<view class="all-app">
					<view class="all-title">
						全部应用
					</view>
					<view class="all-app-view">
						<view class="app-view-item" v-for="(item,index) in appData" :key="index">
							<view class="app-item-img" :style="{background: item.bgColor}" @click.stop="appView(item)">
								<view class="app-item-svg" :style="{'background':`url(${item.iconUrl})`}">

								</view>
							</view>
							<view class="app-item-text">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="message" type="dialog">
			<uni-popup-dialog type="warn" cancelText="取消" confirmText="确定" content="确定退出当前账号？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		listData
	} from "./list.js";
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		components: {},
		mounted() {
			this.getHouseData();
		},
		computed: {
			...mapState(['houseData', 'houseSelectData', 'userData'])
		},
		data() {
			return {
				listData: listData,
				messageData: [{
					text: '通知：您有新的出库单【出库单号】待确认，请注意及时确认。'
				}, {
					text: '通知：您有新的出库单【出库单号】待确认，请注意及时确认。'
				}],
				romDetData: [{
						name: "待验收",
						value: 23,
					},
					{
						name: "待上架",
						value: 23,
					},
					{
						name: "待出库",
						value: 23,
					},
					{
						name: "待配送",
						value: 23,
					}
				],
				appData: [{
						iconUrl: "../../static/yanshou.svg",
						name: "验收",
						bgColor: "#F4CE98",
						path: "/pages/groundetials/groundetials"
					},
					{
						iconUrl: "../../static/shangjia.svg",
						name: "上架",
						bgColor: "#7DCEFF",
						path: "/pages/grounding/grounding"
					},
					{
						iconUrl: "../../static/peisong.svg",
						name: "配送",
						bgColor: "#FFB298",
						path: "/pages/grounding/grounding"
					},
					{
						iconUrl: "../../static/jianhuo.svg",
						name: "拣货",
						bgColor: "#2CE4BF",
						path: "/pages/Inventory/Inventory"
					},
					{
						iconUrl: "../../static/pandian.svg",
						name: "盘点",
						bgColor: "#2CE4BF",
						path: "/pages/Inventory/Inventory"
					},
					{
						iconUrl: "../../static/jiansuo.svg",
						name: "检索",
						bgColor: "#FFB867",
						path: "/pages/query/query"
					},
					{
						iconUrl: "../../static/xiaohao.svg",
						name: "商品消耗",
						bgColor: "#94BE5B",
						path: "/pages/consume/consume"
					},
				]
			}
		},
		onLoad() {

		},
		mounted() {
			this.getHouseData()
		},
		methods: {
			...mapActions(['getHouseData']),
			...mapMutations(['setHouseName']),
			//跳转页面
			appView(item) {
				uni.navigateTo({
					url: item.path,
					success: function(res) {}
				});
			},
			//退出当前账号
			dialogConfirm() {
				uni.redirectTo({
					url: '/pages/login/index',
					success: function(res) {}
				});
				uni.removeStorageSync('token')
			},
			dialogClose() {
				this.$refs.message.close();
			},
			//退出确认
			loginOff() {
				this.$refs.message.open();
			},
			onchange(e) {
				this.setHouseName({
					houseName: e.detail.value[0].text,
					houseId: e.detail.value[0].value
				})
			},
			//跳转更多页面
			moreView() {
				uni.navigateTo({
					url: '/pages/grounding/grounding',
					success: function(res) {}
				});
			},
			dateChange(slectd) {
				this.getDataList({
					type: slectd[0][0].value
				});
			},
			// 获取数据
			getDataList(data) {
				this.getGroundData(data);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-wrap {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background-color: #F5F5F5;

		.home-title {
			width: 100%;
			height: auto;

			.title-bac {
				width: 100%;
				height: 392rpx;
				border-radius: 0rpx 0rpx 40rpx 40rpx;
				background: linear-gradient(180deg, rgba(1, 169, 146, 1) 0%, rgba(1, 176, 164, 0.54) 46%, rgba(2, 181, 176, 0.24) 100%, rgba(2, 185, 185, 0) 100%);
				padding: 20rpx;
				box-sizing: border-box;

				.roomt {
					width: 100%;
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.rom-spn {
						color: rgba(255, 255, 255, 0.9);
						font-size: 36rpx;
						text-align: left;
						font-family: PingFangSC-bold;
					}

					.quit-spn {
						width: 48rpx;
						height: 48rpx;
						background: url('../../static/logout.svg');
						background-size: 100% 100%;
					}

				}

				.rom-set {
					width: 100%;
					height: 50rpx;
					display: flex;
					align-items: center;

					.park {
						width: 40rpx;
						height: 40rpx;
						background: url('../../static/iconPark.svg');
						background-size: 100% 100%;
					}

					.houseName {
						color: rgba(255, 255, 255, 0.9);
						font-size: 36rpx;
						text-align: left;
						font-family: OPPOSans-medium;
						margin-left: 20rpx;

						.romtitle {
							font-size: 36rpx;
							font-family: OPPOSans-medium;
						}
					}

					.down {
						width: 40rpx;
						height: 40rpx;
						background: url('../../static/down.svg');
						background-size: 100% 100%;
						margin-left: 20rpx;
					}
				}

				.section-view {
					width: 97%;
					margin: 70rpx auto 40rpx auto;
					height: 270rpx;
					background-color: rgba(255, 255, 255, 1);
					box-shadow: -2rpx 4rpx 10rpx 0rpx rgba(0, 0, 0, 0.4);
					border-radius: 20rpx;
					padding: 20rpx;
					box-sizing: border-box;

					.user-cont {
						width: 100%;
						height: 50rpx;

						.user-spn {
							color: rgba(0, 0, 0, 0.8);
							font-size: 36rpx;
							font-family: AlibabaPuHui-medium;
						}

						.spnr {
							margin-left: 20rpx;
							font-size: 35rpx;
							font-family: AlibabaPuHui-medium;
						}
					}

					.sec-data {
						width: 100%;
						height: 110rpx;
						display: flex;
						justify-content: space-around;
						margin-top: 60rpx;

						.sec-item {
							width: 130rpx;
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;

							.item-spn {
								font-size: 32rpx;
								font-family: PingFangSC-bold;
							}

							.spnVal {
								color: rgba(7, 190, 167, 1);
							}
						}
					}
				}

				.app-view {
					width: 100%;
					height: 200rpx;
					display: flex;
					justify-content: space-between;

					.app-item {
						width: 48%;
						height: 100%;
						border-radius: 16rpx;
						background-color: rgba(255, 255, 255, 1);
						border: 2rpx solid rgba(187, 187, 187, 0.5);
						padding: 20rpx;
						box-sizing: border-box;

						.app-title {
							font-size: 32rpx;
							font-family: SourceHanSansSC-bold;
							color: rgba(0, 0, 0, 1);
						}

						.app-item-mut {
							width: 100%;
							height: 120rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.app-item-spn {
								color: rgba(154, 154, 154, 0.8);
								font-size: 20rpx;
								font-family: AlibabaPuHui-medium;
								width: 140rpx;
								height: 50rpx;
							}

							.app-item-img {
								width: 140rpx;
								height: 106.68rpx;
								background: url('../../static/queryData.svg');
								background-size: 100% 100%;
							}
						}
					}
				}

				.message-view {
					width: 100%;
					height: 200rpx;
					margin-top: 20rpx;
					position: relative;
					padding-top: 20rpx;

					.all-message {
						position: absolute;
						right: 0rpx;
						top: 5rpx;
						width: 117rpx;
						height: 20rpx;
						color: rgba(1, 169, 146, 1);
						font-size: 20rpx;
						font-family: AlibabaPuHui-regular;
						display: flex;
						align-items: center;
					}

					.message-item {
						margin-top: 20rpx;
						width: 100%;
						height: 50rpx;
						border-radius: 25rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 20rpx;
						box-sizing: border-box;
						color: rgba(0, 0, 0, 0.8);
						font-size: 20rpx;
						text-align: left;
						font-family: AlibabaPuHui-regular;
						background-color: rgba(255, 255, 255, 1);
						box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.4);
					}
				}

				.all-app {
					width: 100%;

					.all-title {
						width: 100%;
						height: 46rpx;
						color: rgba(0, 0, 0, 0.8);
						font-size: 32rpx;
						text-align: left;
						font-family: AlibabaPuHui-bold;
					}

					.all-app-view {
						margin-top: 20rpx;
						width: 100%;
						height: auto;
						background-color: #fff;
						border-radius: 20rpx;
						display: flex;
						flex-wrap: wrap;
						align-content: flex-start;
						padding-bottom: 50rpx;

						.app-view-item {
							width: 24%;
							margin-left: 7rpx;
							height: 150rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-top: 20rpx;
							margin-bottom: 20rpx;
							justify-content: space-between;

							.app-item-img {
								width: 102rpx;
								height: 102rpx;
								border-radius: 20rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								.app-item-svg {
									width: 80rpx;
									height: 80rpx;
								}
							}

							.app-item-text {
								width: 100%;
								height: 34rpx;
								color: rgba(0, 0, 0, 0.8);
								font-size: 28rpx;
								text-align: center;
								font-family: AlibabaPuHui-bold;
							}
						}
					}
				}
			}
		}
	}

	uni-page-body {
		width: 100%;
		height: 100%;
	}

	uni-page-wrapper {
		width: 100%;
		height: 100%;
	}

	uni-page {
		width: 100%;
		height: 100%;
	}
</style>