106 lines
4.5 KiB
Vue
106 lines
4.5 KiB
Vue
<template>
|
|
<div>
|
|
<el-dropdown @command="handleCommand">
|
|
<div class="ele-admin-header-avatar el-dropdown-selfdefine">
|
|
<span class="el-avatar el-avatar--circle">
|
|
<img
|
|
v-if="!$store.state.user.sex || $store.state.user.sex === '男'"
|
|
src="/assets/platform/img/home/avatar_boy.png"
|
|
style="object-fit: cover"
|
|
/>
|
|
<img v-else alt="" src="/assets/platform/img/home/avatar_girl.png" />
|
|
</span>
|
|
<span class="hidden-xs-only" style="color: var(--color-white)">
|
|
{{ $store.state.user.username }}
|
|
</span>
|
|
<i class="el-icon-arrow-down" style="color: var(--color-white)"></i>
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item command="userInfo">个人信息</el-dropdown-item>
|
|
<el-dropdown-item command="signature">我的签名</el-dropdown-item>
|
|
<el-dropdown-item command="logout">退出</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
|
|
<el-dialog :visible.sync="memberInfoDialogVisible" title="我的信息" width="70%" append-to-body>
|
|
<user-info ref="userInfoRef"></user-info>
|
|
</el-dialog>
|
|
|
|
<el-dialog :visible.sync="signatureDialogVisible" title="我的电子签名" width="35%" append-to-body>
|
|
<div class="flx">
|
|
<div v-if="!showSignature" class="p10" style="width: calc(100% - 125px)">
|
|
<el-image style="width: 100%; height: 189px; border: 1px dashed #000" :src="userSignatureUrl">
|
|
<template slot="error">
|
|
<div style="height: 100%; display: flex; justify-content: center; align-items: center">暂无签名信息</div>
|
|
</template>
|
|
</el-image>
|
|
</div>
|
|
<div class="flx-center-center" style="flex-direction: column">
|
|
<qrcode :options="{ width: 126 }" :value="signatureAddress" class="signature-qrcode"></qrcode>
|
|
<el-button icon="el-icon-refresh" size="small" type="primary" @click="getUserSignature(true)">刷新</el-button>
|
|
</div>
|
|
</div>
|
|
<el-alert title="扫描二维码可重新签名，手机上签名成功后可点击刷新查看。" type="success"></el-alert>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "HeaderUserAvatar",
|
|
store,
|
|
components: {
|
|
"user-info": httpVueLoader("/components/module/userInfo/index.vue")
|
|
},
|
|
data() {
|
|
return {
|
|
memberInfoDialogVisible: false,
|
|
showSignature: false,
|
|
userSignatureUrl: null,
|
|
signatureDialogVisible: false,
|
|
signatureAddress: window.location.origin + "/platform/signature/scanPcCode?origin=user",
|
|
userInfoDialogVisible: false
|
|
}
|
|
},
|
|
methods: {
|
|
handleCommand(command) {
|
|
if (command === "logout") {
|
|
window.location.href = base + "/platform/login/logout"
|
|
} else if (command === "userInfo") {
|
|
this.memberInfoDialogVisible = true
|
|
this.$nextTick(() => {
|
|
this.$refs.userInfoRef.onOpen(this.$store.state.user.id)
|
|
})
|
|
} else if (command === "signature") {
|
|
this.signatureDialogVisible = true
|
|
this.getUserSignature()
|
|
console.log(this.signatureAddress)
|
|
}
|
|
},
|
|
getUserSignature(isRefresh = false) {
|
|
this.$axios.post("/platform/signature/get").then((res) => {
|
|
if (res.code === 0) {
|
|
if (isRefresh) {
|
|
this.$message.success("刷新成功")
|
|
} else {
|
|
if (!res.data || !res.data.signature) {
|
|
this.$message.warning("未获取到签名信息")
|
|
}
|
|
}
|
|
this.userSignatureUrl = res.data && res.data.signature
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
webSocketPubSub.subscribe("pc-scan-code-manage-signature", (data) => {
|
|
console.info("ws:收到pc端我的电子签名扫描二维码返回结果:", data)
|
|
this.userSignatureUrl = data.url
|
|
this.$message.success("获取成功")
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|