103 lines
2.4 KiB
Vue
103 lines
2.4 KiB
Vue
<template>
|
||
<view class="info">
|
||
<div class="left">
|
||
<div class="icon">
|
||
<image
|
||
style="width: 100%; height: 100%; border-radius: 50%"
|
||
:src="default_src"
|
||
mode="aspectFill"
|
||
></image>
|
||
</div>
|
||
<div class="info_name">
|
||
<div v-if="userList.data">{{ userList.data.userName }}</div>
|
||
<div v-if="userList.data">
|
||
{{ userList.data.orgList[0].orgName || "" }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div>{{ monthDay }}</div>
|
||
<div>{{ dataType[dayOfWeek] }}</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
const dataType = {
|
||
Monday: "星期一",
|
||
Tuesday: "星期二",
|
||
Wednesday: "星期三",
|
||
Thursday: "星期四",
|
||
Friday: "星期五",
|
||
Saturday: "星期六",
|
||
Sunday: "星期天",
|
||
};
|
||
|
||
import moment from "moment";
|
||
export default {
|
||
data() {
|
||
return {
|
||
monthDay: "",
|
||
dayOfWeek:"",
|
||
dataType,
|
||
default_src: uni.getStorageSync("avatar"),
|
||
userList: {},
|
||
};
|
||
},
|
||
methods: {
|
||
async getSwiperList() {
|
||
try {
|
||
const res = await uni.$http.get("/gunshiApp/xfflood/getLoginInfo");
|
||
console.log("--c-", res.data);
|
||
this.userList = res.data;
|
||
|
||
console.log("--cb-", this.userList);
|
||
} catch (e) {
|
||
uni.$showMsg();
|
||
}
|
||
},
|
||
getDataTime() {
|
||
this.monthDay = moment().format("MM月DD日");
|
||
this.dayOfWeek = moment().format("dddd");
|
||
},
|
||
},
|
||
// 在组件实例被创建后立即调用。此时可以访问到 data 和 methods，但模板还未被渲染成 HTML，$el 属性不可用。适合做数据初始化
|
||
created() {
|
||
this.getSwiperList();
|
||
this.getDataTime();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.info {
|
||
height: 100rpx;
|
||
background-color: #007afd;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px;
|
||
color: #fff;
|
||
}
|
||
.left {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
.icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
text-align: center;
|
||
color: #007afd;
|
||
line-height: 50px;
|
||
}
|
||
.info_name {
|
||
margin-left: 16rpx;
|
||
}
|
||
.right {
|
||
text-align: center;
|
||
}
|
||
</style>
|
||
|