|
@@ -0,0 +1,156 @@
|
|
|
+<template>
|
|
|
+ <div class="sidebar-qrcode-container" :class="{ 'collapse': collapse }">
|
|
|
+ <transition name="sidebarLogoFade">
|
|
|
+ <div v-if="collapse" key="collapse" class="sidebar-qrcode-link" @click="openDialog">
|
|
|
+ <img v-if="logo" :src="logo" class="sidebar-qrcode" />
|
|
|
+ <h1 v-else class="sidebar-title">生成邀请码</h1>
|
|
|
+ </div>
|
|
|
+ <div v-else key="expand" class="sidebar-qrcode-link" @click="openDialog">
|
|
|
+ <img v-if="logo" :src="logo" class="sidebar-qrcode" />
|
|
|
+ <h1 class="sidebar-title">生成邀请码</h1>
|
|
|
+ </div>
|
|
|
+ </transition>
|
|
|
+
|
|
|
+ <el-dialog v-model="centerDialogVisible" title="二维码" width="500" align-center>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <el-image :src="qrBase64" />
|
|
|
+ <el-button type="primary" round @click="downloadBase64Image">图片下载</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import logo from '@/assets/logo/logo.png'
|
|
|
+import useSettingsStore from '@/store/modules/settings'
|
|
|
+import variables from '@/assets/styles/variables.module.scss'
|
|
|
+import { getInviteQrCode } from '@/api/system/user'
|
|
|
+import useUserStore from '@/store/modules/user'
|
|
|
+import { ref } from 'vue'
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const userStore = useUserStore();
|
|
|
+const areaType = ref(userStore.user.dept.areaType);// 0: 平台 3:区域公司 4:服务中心
|
|
|
+
|
|
|
+defineProps({
|
|
|
+ collapse: {
|
|
|
+ type: Boolean,
|
|
|
+ required: true
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const settingsStore = useSettingsStore();
|
|
|
+const sideTheme = computed(() => settingsStore.sideTheme);
|
|
|
+const centerDialogVisible = ref(false)
|
|
|
+const qrBase64 = ref('');
|
|
|
+
|
|
|
+// 获取Logo背景色
|
|
|
+const getLogoBackground = computed(() => {
|
|
|
+ if (settingsStore.isDark) {
|
|
|
+ return 'var(--sidebar-bg)';
|
|
|
+ }
|
|
|
+ return sideTheme.value === 'theme-dark' ? variables.menuBg : variables.menuLightBg;
|
|
|
+});
|
|
|
+
|
|
|
+// 获取Logo文字颜色
|
|
|
+const getLogoTextColor = computed(() => {
|
|
|
+ if (settingsStore.isDark) {
|
|
|
+ return 'var(--sidebar-text)';
|
|
|
+ }
|
|
|
+ return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
|
|
|
+});
|
|
|
+
|
|
|
+const openDialog = async () => {
|
|
|
+ try {
|
|
|
+ const res = await getInviteQrCode({
|
|
|
+ referrerType: areaType.value === '3' ? '2' : '3',//推荐者类型 1用户 2区域公司 3服务中心
|
|
|
+ referrerId: userStore.user.userId,//推荐者id(用户id/区域id/服务中心id)
|
|
|
+ });
|
|
|
+ console.log("TCL: openDialog -> res", res)
|
|
|
+
|
|
|
+ if (res.code === 200) {
|
|
|
+ qrBase64.value = "data:image/png;base64," + res.data;
|
|
|
+ centerDialogVisible.value = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ throw res.msg
|
|
|
+ } catch (error) {
|
|
|
+ proxy.$modal.msgError(error);
|
|
|
+ console.log("TCL: openDialog -> error", error)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+const downloadBase64Image = async () => {
|
|
|
+ try {
|
|
|
+ const link = document.createElement('a');
|
|
|
+ link.href = qrBase64.value;
|
|
|
+ link.download = '推广二维码(金邻助家).png';
|
|
|
+ document.body.appendChild(link);
|
|
|
+ link.click();
|
|
|
+ document.body.removeChild(link);
|
|
|
+ } catch (error) {
|
|
|
+ console.log("TCL: imageDown -> error", error)
|
|
|
+ proxy.$modal.msgError('二维码图片下载失败!');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import '@/assets/styles/variables.module.scss';
|
|
|
+
|
|
|
+.sidebarLogoFade-enter-active {
|
|
|
+ transition: opacity 1.5s;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebarLogoFade-enter,
|
|
|
+.sidebarLogoFade-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-qrcode-container {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background: v-bind(getLogoBackground);
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ & .sidebar-qrcode-link {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ & .sidebar-qrcode {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .sidebar-title {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0;
|
|
|
+ color: v-bind(getLogoTextColor);
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 50px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.collapse {
|
|
|
+ .sidebar-qrcode {
|
|
|
+ margin-right: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|