examTeamApp/element/drawer.vue

136 lines
2.7 KiB
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.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
uni.setStorageSync('userid', val.id)
uni.setStorageSync('gender', val.gender)
that.$store.dispatch("getUserInfo", {
aud_id: val.id
});
that.$store.dispatch("getResult", {
aud_id: val.id
})
that.$store.commit("changeDrawe", false);
that.handlePublicRecord(val.id)
},
// 公共手动记录内容
handlePublicRecord(id) {
let that = this
that.$model.getPublicRecord({
aud_id: id
}).then(res => {
console.log("公共手动记录", res)
if (res.code == 0) {
that.$store.commit('changePublicRecord', res.data)
}
})
},
//添加
addInfo() {
let that = this
uni.navigateTo({
url: "/pageTwo/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>