feat: 增加发邮件功能

2025-10-16 19:15:42 +08:00
parent 617f4f6acf
commit 728dc5e559
4 changed files with 625 additions and 219 deletions
@@ -0,0 +1,186 @@
+<template>
+  <div class="dialog" v-if="visible && info">
+    <div class="dialog-main">
+      <div class="dialog-title">{{ info.name }}</div>
+
+      <div class="dialog-body">
+        <!-- <div class="dialog-score" v-if="info.result">
+          <div class="text" :style="{ color: info.color }">
+            {{ info.result }}
+          </div>
+          <div class="count">{{ info.userValue }}</div>
+        </div> -->
+
+        <!-- <div class="dialog-text" v-if="info.text">
+          {{ info.text }}
+        </div>
+
+        <div class="dialog-box" v-if="!info.text">
+          <div
+            v-for="(item, index) in [
+              info.explanationAnalyzeResult.advicesList,
+              info.explanationAnalyzeResult.detailsList,
+            ].flat(Infinity)"
+            :key="index"
+          >
+            <div class="dialog-box-title" :style="{ margin: 0 }">
+              {{ item.name }}
+            </div>
+            <div
+              class="dialog-box-item"
+              v-for="(value, idx) in item.valuesList"
+              :key="idx + value"
+            >
+              {{ value }}
+            </div>
+          </div>
+        </div> -->
+
+
+        <div class="dialog-text">xxxxxxxxxxxxxxx</div>
+      </div>
+
+      <div class="dialog-btn" @click="onClose">知道了</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+
+    info: {
+      type: Object,
+      default: null,
+    },
+  },
+
+  methods: {
+    onClose() {
+      console.log("onClose: xxxxxxxxx", this.info);
+      this.$emit("update:visible", false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.dialog {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+
+  .dialog-main {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    flex-direction: column;
+    // background-color: red;
+
+    width: 380rpx;
+    // height: 548rpx;
+    // min-height: 363rpx;
+    // max-height: 548rpx;
+    background: #f5f7fb;
+    border-radius: 25rpx;
+    box-sizing: border-box;
+    padding: 25rpx;
+
+    .dialog-title {
+      color: #000000;
+      font-size: 20rpx;
+      text-align: center;
+      font-weight: bolder;
+      padding-bottom: 25rpx;
+      border-bottom: 1rpx solid #d9d9d9;
+    }
+
+    .dialog-body {
+      //   padding: 25rpx;
+      margin-top: 25rpx;
+      padding-bottom: 25rpx;
+      // overflow-y: scroll;
+      flex: 1;
+
+      .dialog-score {
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        margin-bottom: 25rpx;
+        // margin-top: 25rpx;
+        // display: none;
+
+        .text {
+          font-size: 23rpx;
+          color: #5ea2f0;
+          font-weight: bold;
+          line-height: 1;
+        }
+
+        .count {
+          font-size: 18rpx;
+          color: #343434;
+          line-height: 1;
+          margin-top: 3rpx;
+        }
+      }
+
+      .dialog-text {
+        font-size: 16rpx;
+        color: #343434;
+        line-height: 21rpx;
+        // margin: 25rpx 0;
+        letter-spacing: 3rpx;
+        // margin-top: 25rpx;
+        // background-color: red;
+      }
+
+      .dialog-box {
+        overflow-y: scroll;
+        max-height: 600rpx;
+        // padding-top: 25rpx;
+        // background-color: red;
+        .dialog-box-title {
+          font-size: 18rpx;
+          color: #000000;
+          font-weight: bolder;
+          margin-top: 25rpx;
+        }
+
+        .dialog-box-item {
+          font-size: 16rpx;
+          color: #515f65;
+          line-height: 21rpx;
+          letter-spacing: 3rpx;
+          margin-top: 6rpx;
+        }
+      }
+    }
+
+    .dialog-btn {
+      height: 50rpx;
+      background: #5ea2f0;
+      border-radius: 15rpx;
+      font-size: 16rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      &:active {
+        opacity: 0.4;
+      }
+    }
+  }
+}
+</style>