ReedawFoodApp/components/bodyIndex/drawer.vue

<template>
	<view class="wrapper" v-if="isDrawe">
		<view class="bg" @click="clear"></view>
		<view class="wrapper_box">
			<view class="top">
				<image class="headimage mt-10" v-if="userinfo.head_pic" :src="userinfo.head_pic"></image>
				<view class="overflow">{{userinfo.nickname}}</view>
			</view>
			<view class="drawerList">
				<view class="drawerList_item" v-for="(item, index) in List" :key="index" @click="toggle(item)"
					v-if="List.length">
					<image v-if="item.head_pic" :src="item.head_pic" class="image1"></image>
					<view class="right">
						<view class="name">
							<view class="overflow">
								{{item.nickname}}
							</view>
							<view class="dangqian" v-if="item.id == userinfo.aud_id">当前</view>
						</view>
						<view class="info">
							<view>{{item.gender==1?'男':'女'}}</view>
							<view>{{item.age}}岁</view>
						</view>
					</view>
				</view>
				<view class="add" @click="addInfo()">
					+
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {};
		},
		computed: {
			...mapState(["user", "familayList", "isDrawe"]),
			userinfo() {
				return this.user
			},
			List() {
				return this.familayList
			},
		},
		methods: {
			// 切换用户
			toggle(val) {
				let that = this
				console.log("11111", val)
				uni.setStorageSync('userid', val.id)
				uni.setStorageSync('gender', val.gender)
				that.$store.dispatch('getUserInfo', {
					aud_id: val.id
				})
				that.$store.dispatch("getCountFoodInfo", {
					aud_id: val.id,
					time: that.$tools.getDate("start")
				})
				that.$store.dispatch("getResult", {
					aud_id: val.id,
				})
				that.$store.dispatch("getPublicRecord", {
					aud_id: val.id,
				})
				that.$store.commit("changehomeCard", 0);
				that.$store.commit("changeDrawe", false);
			},
			//添加
			addInfo() {
				let that = this
				uni.navigateTo({
					url: "/body/my/userInfo"
				})
				that.$store.commit("changeDrawe", false);
			},
			clear() {
				this.$store.commit("changeDrawe", false);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 999;

		.bg {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.4);
			z-index: 99;
		}

	}

	.headimage {
		width: 50px;
		height: 50px;
		margin: auto;
		border-radius: 50%;
		margin-bottom: 16rpx;
	}

	.dangqian {
		font-size: 24upx !important;
	}

	@keyframes wrapper_box {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0%);
		}
	}
</style>