consumoption/pages/platform/index.vue

<template>
	<view class="home-wrap">
		<view class="home-title">
			<view class="title-bac">
				<view class="roomt">
					<span class="rom-spn">当前所在机构</span>
					<image class="quit-spn" @click.stop="loginOff()" src="../../static/logout.svg"></image>
				</view>
				<view class="rom-set">
					<image class="park" src="../../static/iconPark.svg"></image>
					<view class="houseName">
						<view>{{ instData.spdName }}</view>
					</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">
							<span class="item-spn spnVal">待受理</span>
							<span class="item-spn">{{userType=='mcs'?instData.wslnum:instData.unAcpNum}}</span>
						</view>
						<view class="sec-item">
							<span class="item-spn spnVal">待出库</span>
							<span class="item-spn">{{userType=='mcs'?instData.wcknum:instData.unStoOutNum}}</span>
						</view>
						<view class="sec-item">
							<span class="item-spn spnVal">待退货</span>
							<span class="item-spn">{{userType=='mcs'?instData.wqrnum:instData.unRetnNum}}</span>
						</view>
						<view class="sec-item">
							<span class="item-spn spnVal">采购单</span>
							<span class="item-spn">{{userType=='mcs'?instData.cgdcx:instData.sumPurcNum}}</span>
						</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[userType]" :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>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex';
	export default {
		components: {},
		computed: {
			...mapState(['houseData', 'houseSelectData', 'userData', 'homeAwaitData', 'messData', 'instData']),
		},
		data() {
			return {
				listData: [],
				msData: [],
				outRoom: "请选择仓库",
				romDetData: {
					unAcpNum: '待受理',
					unStoOutNum: '待出库',
					unRetnNum: "待退货",
					sumPurcNum: "采购单查询"
				},
				userType: "mcs",
				appData: {
					drug: [{
							iconUrl: "../../static/shangjia.svg",
							name: "订单受理",
							bgColor: "#F4CE98",
							path: "/durgsubpkg/pages/order-taking/index"
						},
						{
							iconUrl: "../../static/shangjia.svg",
							name: "订单明细出库",
							bgColor: "#FFB298",
							path: "/subpkg/pages/outbond-detal/details"
						},
						{
							iconUrl: "../../static/shangjia.svg",
							name: "退货管理",
							bgColor: "#2CE4BF",
							path: "/durgsubpkg/pages/depart-return/index"
						},
						{
							iconUrl: "../../static/shangjia.svg",
							name: "采购单查询",
							bgColor: "#2CE4BF",
							path: "/subpkg/pages/puhse-order/index"
						},
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "数据监测",
						// 	bgColor: "#F4CE98",
						// 	path: "/subpkg/pages/mintir/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "验收管理",
						// 	bgColor: "#2CE4BF",
						// 	path: "/subpkg/pages/acceptance/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "采购计划审批",
						// 	bgColor: "#2CE4BF",
						// 	path: "/subpkg/pages/proplanconfirm/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "目录管理",
						// 	bgColor: "#2CE4BF",
						// 	path: "/subpkg/pages/dire-manment/index"
						// },
					],
					mcs: [
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "订单受理",
						// 	bgColor: "#F4CE98",
						// 	path: "/subpkg/pages/mcs-order-taking/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "订单出库",
						// 	bgColor: "#7DCEFF",
						// 	path: "/subpkg/pages/order-outbond/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "退货管理",
						// 	bgColor: "#2CE4BF",
						// 	path: "/subpkg/pages/mcs-depart-return/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "采购单查询",
						// 	bgColor: "#2CE4BF",
						// 	path: "/subpkg/pages/mcs-puhse-order/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "数据监测",
						// 	bgColor: "#F4CE98",
						// 	path: "/subpkg/pages/mintir/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "验收管理",
						// 	bgColor: "#2CE4BF",
						// 	path: "/subpkg/pages/acceptance/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "采购计划审批",
						// 	bgColor: "#2CE4BF",
						// 	path: "/subpkg/pages/proplanconfirm/index"
						// },
						// {
						// 	iconUrl: "../../static/shangjia.svg",
						// 	name: "目录管理",
						// 	bgColor: "#2CE4BF",
						// 	path: "/subpkg/pages/dire-manment/index"
						// },
					]
				}
			}
		},
		onLoad() {

		},
		onShow() {
			let userType = uni.getStorageSync('userType') || "mcs";
			this.userType = userType;
		},
		mounted() {
			this.setInst();
			this.getUserData({
				sysType: "2"
			}).then(res => {
				if (res  && res.data) {
					const menus = res.data.permission.menus;
					const colorMap = {
						'mcs-order-taking': '#F4CE98',
						'order-outbond': '#7DCEFF',
						'mcs-depart-return': '#2CE4BF',
						'mcs-puhse-order': '#2CE4BF',
						'mintir': '#F4CE98'
					};
					this.appData.mcs = menus.map(menu => ({
						iconUrl: "../../static/shangjia.svg",
						name: menu.menuName,
						bgColor: colorMap[menu.menuId] || '#F4CE98',
						path: `/subpkg/pages/${menu.menuId}/index`
					}));
				}
			});
		},
		watch: {
			messData(newOld) {

			}
		},
		methods: {
			...mapActions(['getHouseData', 'getUserData', 'getHomeAwaitData', 'getMessData']),
			...mapMutations(['setHouseName', 'setInst']),
			onPullDownRefresh() {
				this.setInst();
				this.getUserData({
					sysType: "2"
				});
				setTimeout(function() {
					uni.stopPullDownRefresh(); //停止下拉刷新动画
				}, 1000);
			},
			//跳转页面
			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() {
				uni.redirectTo({
					url: '/subpkg/pages/home/home',
					success: function(res) {}
				});
			},
			//跳转更多页面
			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-size: 100% 100%;
					}

				}

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

					.park {
						width: 40rpx;
						height: 40rpx;
						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);
							}
						}
					}
				}


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