feat:新增社招新员工项目欢迎页与学习页面

src/components/NewEmployeeGuideDialog.vue

@@ -0,0 +1,183 @@
+<template>
+  <el-dialog
+    :visible.sync="innerVisible"
+    :close-on-click-modal="false"
+    class="custom-strategy-dialog"
+    width="880px"
+    @close="handleClose"
+  >
+    <div class="strategy-container">
+      <div class="strategy-content">
+        <div class="strategy-title">转正攻略</div>
+        <div class="strategy-body">
+          <RichTextEditor v-model="modalContent" />
+        </div>
+      </div>
+      <div class="strategy-footer-btns">
+        <el-button
+          class="footer-btn"
+          type="primary"
+          :loading="processing"
+          @click="handleConfirmClick"
+        >
+          立即学习
+        </el-button>
+        <el-button class="footer-btn" type="text" @click="handleCancelClick">
+          取消
+        </el-button>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import RichTextEditor from "@/components/RichTextEditor.vue";
+import { getSzxygProjectInfo } from "@/api/new-employee/newEmployee";
+
+export default {
+  name: "NewEmployeeGuideDialog",
+  components: { RichTextEditor },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+    processing: {
+      type: Boolean,
+      default: false,
+    },
+    onConfirm: {
+      type: Function,
+      default: null,
+    },
+    onCancel: {
+      type: Function,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      modalContent: "",
+      innerVisible: this.visible,
+      hasLoadedOnce: false,
+    };
+  },
+  watch: {
+    visible(val) {
+      this.innerVisible = val;
+      if (val) {
+        this.fetchContent();
+      }
+    },
+    innerVisible(val) {
+      if (val !== this.visible) {
+        this.$emit("update:visible", val);
+      }
+    },
+  },
+  mounted() {
+    if (this.visible) {
+      this.fetchContent();
+    }
+  },
+  methods: {
+    async fetchContent() {
+      if (this.hasLoadedOnce) return;
+      try {
+        const res = await getSzxygProjectInfo();
+        this.modalContent =
+          (res && res.data && res.data.learningGuideConfig) || "";
+        this.hasLoadedOnce = true;
+      } catch (e) {
+        // 保底：避免影响弹窗展示
+        this.modalContent = "";
+      }
+    },
+    handleConfirmClick() {
+      if (typeof this.onConfirm === "function") {
+        this.onConfirm();
+      } else {
+        // 默认行为：关闭并派发事件
+        this.innerVisible = false;
+        this.$emit("confirm");
+      }
+    },
+    handleCancelClick() {
+      if (typeof this.onCancel === "function") {
+        this.onCancel();
+      } else {
+        this.innerVisible = false;
+        this.$emit("cancel");
+      }
+    },
+    handleClose() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.custom-strategy-dialog >>> .el-dialog {
+  background: url("../assets/images/bg_yd.png");
+  background-size: cover;
+  border-radius: 18px;
+  overflow: hidden;
+  padding: 0;
+  box-shadow: 0 8px 32px rgba(0, 43, 121, 0.14);
+}
+.strategy-container {
+  position: relative;
+  min-height: 360px;
+  padding: 0px 40px 28px 40px;
+  border-radius: 18px;
+}
+.strategy-content {
+  position: relative;
+  z-index: 1;
+}
+.strategy-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: #1e7cfa;
+  line-height: 32px;
+  margin-bottom: 18px;
+  text-align: left;
+  letter-spacing: 1px;
+}
+.strategy-body {
+  color: #444;
+  font-size: 15px;
+  min-height: 200px;
+  line-height: 2;
+  margin-bottom: 16px;
+  text-align: left;
+}
+.strategy-footer-btns {
+  display: flex;
+  margin-top: 18px;
+  z-index: 1;
+  position: relative;
+  gap: 14px;
+}
+.footer-btn {
+  min-width: 115px;
+  font-size: 16px;
+  border-radius: 6px;
+  height: 40px;
+}
+.footer-btn.el-button--primary {
+  background: linear-gradient(
+    90deg,
+    rgba(48, 116, 239, 1) 0%,
+    rgba(81, 146, 238, 1) 100%
+  );
+  border-color: #278cff;
+  color: #fff;
+  font-weight: bold;
+  width: 210px;
+  border-radius: 58px;
+}
+</style>
+
+