whx 1 月之前
父节点
当前提交
12357cb843

二进制
virgo.wzfrontend/workark/public/assets/ma.png


+ 96 - 0
virgo.wzfrontend/workark/src/layout/components/share.vue

@@ -0,0 +1,96 @@
+<template>
+	<div class="share-box">
+		<div class="left hui-detail">
+			<div class="hui-detail-box">
+				<div class="hui-detail-content">
+					<div class="hui-detail-item">
+						<div class="hui-detail-label">已邀请人数</div>
+						<div class="hui-detail-value">1</div>
+					</div>
+					<div class="hui-detail-item">
+						<div class="hui-detail-label">邀请码</div>
+						<div class="hui-detail-value">2</div>
+					</div>
+					<div class="hui-detail-item">
+						<div class="hui-detail-label">分享链接</div>
+						<div class="hui-detail-value color-danger">3</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="right">
+			<div class="qr-code-image">
+				<img src="/assets/ma.png" />
+			</div>
+			<el-button type="primary" size="small">下载二维码</el-button>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {};
+		},
+		onLoad() {},
+		methods: {},
+	}
+</script>
+
+<style lang="scss">
+	.share-box {
+		width: 100%;
+		height: 100%;
+		display: flex;
+
+		.left {
+			flex: 1;
+			width: 0;
+			display: flex;
+			flex-direction: column;
+			padding: 20px;
+		}
+
+		.right {
+			padding: 10px 0;
+			width: 260px;
+			border-left: 1px solid $--border-color-light;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+		}
+
+		.share-information-box {
+			border-radius: 4px;
+			box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.1);
+			padding: 10px 15px;
+			display: flex;
+			margin-top: 20px;
+			align-items: center;
+
+			.name {
+				width: 80px;
+				color: $--color-text-secondary;
+			}
+
+			.label {
+				flex: 1;
+				width: 0;
+			}
+
+			.btn {
+				color: $--color-primary;
+				font-size: $--font-size-small;
+			}
+		}
+
+		.qr-code-image {
+			width: 150px;
+			margin-bottom: 10px;
+
+			img {
+				width: 100%;
+			}
+		}
+	}
+</style>

+ 20 - 9
virgo.wzfrontend/workark/src/layout/components/topNav.vue

@@ -36,6 +36,10 @@
 						<i class="iconfont huifont-tubiaozhizuomoban-1"></i>
 						<span>个人信息</span>
 					</el-dropdown-item>
+					<el-dropdown-item command="share">
+						<i class="iconfont huifont-tubiaozhizuomoban-5"></i>
+						<span>邀请码</span>
+					</el-dropdown-item>
 					<el-dropdown-item command="changePassword">
 						<i class="iconfont huifont-tubiaozhizuomoban-4"></i>
 						<span>修改密码</span>
@@ -55,10 +59,11 @@
 			:append-to-body="true">
 			<user-detail v-if="drawer"></user-detail>
 		</el-drawer>
-		<el-dialog :close-on-click-modal="false" :title="logType === 1?'切换组织':'修改密码'" :visible.sync="visible"
-			width="900px" :append-to-body="true">
-			<select-organization v-if="visible && logType === 1"></select-organization>
-			<change-password v-if="visible && logType === 2"></change-password>
+		<el-dialog :close-on-click-modal="false" :title="logTitle" :visible.sync="visible" width="900px"
+			:append-to-body="true">
+			<select-organization v-if="visible && logTitle === '切换组织'"></select-organization>
+			<change-password v-if="visible && logTitle === '修改密码'"></change-password>
+			<share v-if="visible && logTitle === '分享邀请'"></share>
 		</el-dialog>
 	</div>
 </template>
@@ -75,7 +80,8 @@
 	} from 'vuex';
 	const userDetail = () => import('./userDetail');
 	const changePassword = () => import('./changePassword');
-	const selectOrganization = () => import('./selectOrganization');
+	const selectOrganization = () => import('./selectOrganization');
+	const share = () => import('./share');
 	export default {
 		data() {
 			return {
@@ -85,7 +91,7 @@
 				drawer: false,
 				visible: false,
 				organization: {},
-				logType: 1
+				logTitle: '',
 			}
 		},
 		mounted() {
@@ -115,7 +121,7 @@
 						this.drawer = true;
 						break;
 					case 'changePassword':
-						this.logType = 2;
+						this.logTitle = '修改密码';
 						this.visible = true;
 						break;
 					case 'logout':
@@ -125,7 +131,11 @@
 						this.$router.push('/work/discount/userCoupon');
 						break;
 					case 'changeOrganization':
-						this.logType = 1;
+						this.logTitle = '切换组织';
+						this.visible = true;
+						break;
+					case 'share':
+						this.logTitle = '分享邀请';
 						this.visible = true;
 						break;
 					default:
@@ -160,7 +170,8 @@
 		components: {
 			userDetail,
 			changePassword,
-			selectOrganization
+			selectOrganization,
+			share
 		}
 	}
 </script>