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