consumoption/pages/home/home.vue

<template>
	<view class="home-wrap">
		<view class="home-title">
			<view class="title-bac">
				<view class="section-view">
					<view class="user-cont">
						<span class="user-spn">欢迎</span>
						<span class="user-spn spnr">{{userData.userName}}</span>
					</view>
					<view class="curent-cont">
						<span class="current-spn">当前所在医疗机构：</span>
						<span class="user-spn spnr">{{userData.userName}}</span>
					</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/pandian.svg",
						name: "大同市人民医院",
						bgColor: "#2CE4BF",
					},
					{
						iconUrl: "../../static/pandian.svg",
						name: "太原市人民医院",
						bgColor: "#2CE4BF",
					},

				]
			}
		},
		onLoad() {

		},
		mounted() {
			this.getUserData();
		},
		watch: {
			messData(newOld) {

			}
		},
		methods: {
			...mapActions(['getUserData']),
			...mapMutations(['setHouseName']),
			//跳转页面
			appView(item) {
				uni.switchTab({
					url: '/pages/mintir/index',
					success: function(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;
					}

				}

				.section-view {
					width: 97%;
					margin: 70rpx auto 40rpx auto;
					height: 210rpx;
					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;
					margin-top: 130rpx;

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

					.curent-cont {
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;

						.current-spn {
							font-size: 32rpx;
							color: #5AB7A5;
						}
					}

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

							.app-item-img-pan {
								width: 140rpx;
								height: 106.68rpx;
								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>