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">
						<picker mode="selector" @change="homeRomDate" :range="houseData" range-key='text'>
							<view class="date c-flex-align" :style="{ height:'100rpx'}">
								<view>{{ houseSelectData.houseName }}</view>
								<view class="down">
								</view>
							</view>
						</picker>

					</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,key,index) in homeAwaitData" :key="index">
							<span class="item-spn spnVal">{{item}}</span>
							<span class="item-spn">{{romDetData[key]}}</span>
						</view>
					</view>
				</view>
				<view class="app-view">
					<view class="app-item" @click="queryData()">
						<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" @click="invenyData()">
						<view class="app-title">
							库存盘点
						</view>
						<view class="app-item-mut">
							<view class="app-item-spn">
								多种方式盘点核对库内耗材
							</view>
							<view class="app-item-img-pan">

							</view>
						</view>
					</view>
				</view>
				<view class="message-view">
					<view class="all-message" @click.stop="allMessage()">
						全部消息 >>
					</view>
					<view>
						<view class="message-item" v-for="(item,index) in msData" :key="index">
							<view class="item-mesage" v-html="messItem(item)">
							</view>
							<view class="fot-btn" @click="jumpDetails(item)">
								查看详情>>
							</view>
						</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)">
								<image class="app-item-svg" :src="item.iconUrl">
								</image>
							</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 {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		components: {},
		computed: {
			...mapState(['houseData', 'houseSelectData', 'userData', 'homeAwaitData', 'messData']),
		},
		data() {
			return {
				listData: [],
				msData: [],
				outRoom: "请选择仓库",
				romDetData: {
					acpCnt: '待验收',
					groundCnt: '待上架',
					stooutCnt: "待出库",
					stostrCnt: "待配送"

				},
				appData: [{
						iconUrl: "../../static/yanshou.svg",
						name: "验收",
						bgColor: "#F4CE98",
						path: "/pages/acceptance/index"
					},
					{
						iconUrl: "../../static/shangjia.svg",
						name: "上架",
						bgColor: "#7DCEFF",
						path: "/pages/grounding/grounding"
					},
					{
						iconUrl: "../../static/peisong.svg",
						name: "配送",
						bgColor: "#FFB298",
						path: "/pages/delivery/index"
					},
					{
						iconUrl: "../../static/jianhuo.svg",
						name: "拣货",
						bgColor: "#2CE4BF",
						path: "/pages/outbound/outbound"
					},
					{
						iconUrl: "../../static/pandian.svg",
						name: "盘点",
						bgColor: "#2CE4BF",
						path: "/pages/Inventory/index"
					},
					{
						iconUrl: "../../static/jiansuo.svg",
						name: "检索",
						bgColor: "#FFB867",
						path: "/pages/query/query"
					},
					{
						iconUrl: "../../static/xiaohao.svg",
						name: "耗材出库",
						bgColor: "#94BE5B",
						path: "/pages/consume/consume"
					},
					{
						iconUrl: "../../static/gentaiq.svg",
						name: "跟台清台",
						bgColor: "#7DCEFF",
						path: "/pages/followplat/index"
					},
					{
						iconUrl: "../../static/shousb.svg",
						name: "手术包清台",
						bgColor: "#66DEC3",
						path: "/pages/surgical/index"
					},
				]
			}
		},
		onLoad() {

		},
		mounted() {
			this.getHouseData();
			this.getUserData();
			this.getMessData({
				spdId: "SPDID",
				msgStas: 0
			}).then((res) => {
				if (res.data.records.length > 0) {
					let newData = res.data.records.splice(0, 2);
					this.msData = newData;
				}
			})
		},
		watch: {
			messData(newOld) {

			}
		},
		methods: {
			...mapActions(['getHouseData', 'getUserData', 'getHomeAwaitData', 'getMessData']),
			...mapMutations(['setHouseName']),
			messItem(itm) {
				let newMessage = itm.msgText;
				itm.msgColumnList.forEach((item) => {
					newMessage = newMessage.replace(
						item.msgColumnNo,
						`<span style='color:${
				      item.msgColumnColor
				    }'>【${item.msgColumn}】</span>`
					);
				});
				return newMessage;
			},
			//跳转页面
			appView(item) {
				uni.navigateTo({
					url: item.path,
					success: function(res) {}
				});
			},
			//退出当前账号
			dialogConfirm() {
				uni.redirectTo({
					url: '/pages/login/index',
					success: function(res) {}
				});
				uni.removeStorageSync('token');
			},
			//检索跳转
			queryData() {
				uni.navigateTo({
					url: '/pages/query/query',
					success: function(res) {}
				});
			},
			//盘点跳转
			invenyData() {
				uni.navigateTo({
					url: '/pages/Inventory/index',
					success: function(res) {}
				});
			},
			// 查看全部消息
			allMessage() {
				uni.navigateTo({
					url: '/pages/messgecont/index',
					success: function(res) {}
				});
			},
			dialogClose() {
				this.$refs.message.close();
			},
			//退出确认
			loginOff() {
				this.$refs.message.open();
			},
			homeRomDate(e) {
				let idx = e.detail.value;
				this.setHouseName({
					houseName: this.houseData[idx].text,
					houseId: this.houseData[idx].value
				})
				this.getHomeAwaitData({
					stroomId: this.houseData[idx].value
				})
				this.outRoom = this.houseData[idx].text;
			},
			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);
			},
			jumpDetails(item) {
				this.$http('home.readData', [{
					id: item.id,
					msgStas: "1"
				}], '加载中', true).then((res) => {
					if (res.success == true) {

					}
				})
				this.$http(item.msgColumnList[0].url, {
					[item.msgColumnList[0].msgKey]: item.msgColumnList[0].msgColumn
				}, '加载中', true).then((res) => {
					if (res.success == true) {
						uni.setStorage({
							key: item.msgColumnList[0].msgRoutePath,
							data: res.data.records[0] || {}
						});
						uni.navigateTo({
							url: `/pages/${item.msgColumnList[0].msgRoutePath}/index`,
							success: function(res) {
								console.log(res, "res")
							}
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home-wrap {
		width: 100%;
		height: 100%;
		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;
						}

						.c-flex-align {
							display: flex;
							align-items: center;
							color: #fff;
						}

						.icon-triangle {
							width: 16rpx;
							height: 16rpx;
							margin-left: 10rpx;
						}
					}

					.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%;
							}

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

				.message-view {
					width: 100%;
					margin-top: 20rpx;
					position: relative;
					padding-top: 20rpx;
					margin-bottom: 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);

						.item-mesage {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.fot-btn {
							width: 170rpx;
							margin-left: 20rpx;
						}
					}
				}

				.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;
									background-size: 100% 100%;
								}
							}

							.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>