feat: 分享

README.md

@@ -1,5 +1,9 @@
-# Vue 3 + TypeScript + Vite
+# 家园共育APP思维芯报告
 
-node version 16.18.0
+## 项目介绍：Vue3 + vite + ts + pinia + vant4 开发的放在家园共育APP思维芯报告H5页面
 
-## 思维芯测评
+### 测试：https://nginx.test.luojigou.vip/report/#/customize/SemesterReport?b=1304672468777553921&c=1304705777133330433&l=0&s=0&o=1
+
+### 生产：https://luojigou.vip/report/#/customize/SemesterReport?b=1304672468777553921&c=1304705777133330433&l=0&s=0&o=1
+
+### node version 16.18.0

src/main.ts

@@ -6,7 +6,7 @@ import App from "./App.vue";
 import router from "@/router";
 import store from "@/store";
 import "vant/lib/index.css";
-// import vconsole from "vconsole";
-// new vconsole();
+import vconsole from "vconsole";
+new vconsole();
 
 createApp(App).use(router).use(store).mount("#app");

src/utils/index.ts

@@ -225,11 +225,12 @@ export function shareToFriendForReward(
  * @param scene 0微信好友 1微信朋友圈
  * @param description 分享描述
  */
-export function shareToWechatImage(
+export function shareToWechat(
   image: string,
   title: string,
   scene: 0 | 1,
   description: string,
+  url: string,
 ) {
-  callAppFc("shareToWechatImage", { image, title, scene, description });
+  callAppFc("shareToWechat", { image, title, scene, description, url });
 }

src/views/customize/SemesterReport.vue

@@ -25,6 +25,7 @@ const { getSemesterRecord, sendSemesterRecord } = customizeStore;
 
 const isShow = ref(false);
 const shareShow = ref(false);
+const opacity = ref(0);
 
 watch(isShow, (val) => {
   if (val) {
@@ -83,6 +84,13 @@ function share() {
   shareShow.value = true;
 }
 
+function handleScroll() {
+  const scrollTop =
+    document.documentElement.scrollTop || document.body.scrollTop;
+  const opacityVal = scrollTop / 88;
+  opacity.value = opacityVal > 1 ? 1 : opacityVal;
+}
+
 onMounted(async () => {
   if (
     typeof babyId === "string" &&
@@ -97,10 +105,13 @@ onMounted(async () => {
   //   downloadPDF("screenshot");
   //   downloadScreenshotFn("screenshot");
   // }, 1000);
+
+  document.addEventListener("scroll", handleScroll);
 });
 
 onUnmounted(() => {
   document.removeEventListener("click", handleClick);
+  document.removeEventListener("scroll", handleScroll);
 });
 
 /**
@@ -116,17 +127,13 @@ onUnmounted(() => {
 
 <template>
   <div class="report-detail rd">
+    <div class="rd-white" :style="{ opacity: opacity }"></div>
     <div class="rd-back" @click="back">
       <img :src="getImageUrl('back_solid')" alt="" class="rd-back-img" />
     </div>
     <div class="rd-more" @click="isShow = true">
       <img :src="getImageUrl('more')" alt="" class="rd-more-img" />
     </div>
-    <!--<div v-if="!isParent" class="rd-send" @click="send">-->
-    <!--  <div class="rd-send-btn flex-center">-->
-    <!--    {{ semesterReport.sendReport ? "已发送" : "发送家长" }}-->
-    <!--  </div>-->
-    <!--</div>-->
     <div class="rd-bgc"></div>
     <div
       class="rd-info"
@@ -290,6 +297,7 @@ onUnmounted(() => {
     </div>
 
     <div v-if="isShow" class="rd-modal">
+      <img :src="getImageUrl('small_triangle')" alt="" class="rd-modal-logo" />
       <div class="rd-modal-item flex-center" @click="share">分享</div>
       <div
         v-if="!semesterReport.sendReport && !isParent"
@@ -340,6 +348,18 @@ onUnmounted(() => {
     }
   }
 
+  &-white {
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    z-index: 9 !important;
+    width: 100vw;
+    height: 88px;
+    background: #ffffff;
+    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
+    opacity: 0;
+  }
+
   &-send {
     position: fixed !important;
     top: 45px;
@@ -583,6 +603,7 @@ onUnmounted(() => {
           width: 40px;
           height: 40px;
           object-fit: cover;
+          border-radius: 50%;
         }
 
         &-text {
@@ -736,6 +757,14 @@ onUnmounted(() => {
     box-shadow: 0 2px 15px 0 rgba(104, 136, 176, 0.2);
     border-radius: 4px 4px 4px 4px;
 
+    &-logo {
+      position: absolute;
+      top: -6px;
+      right: 8px;
+      width: 14px;
+      height: 6px;
+    }
+
     &-item {
       width: 91px;
       height: 30px;

src/views/customize/SingleReport.vue

@@ -3,16 +3,19 @@ import { getImageUrl, imagePreview } from "@/utils";
 import { useCustomizeStore } from "@/store";
 import { useRoute } from "vue-router";
 import HeaderPart from "@/views/customize/components/HeaderPart.vue";
-import { storeToRefs } from "pinia";
-import { IAbility } from "@/types/customize.d";
+// import { storeToRefs } from "pinia";
+import { IAbility, ISingleRecord } from "@/types/customize.d";
 import { computed, onMounted } from "vue";
 
 const { b: babyId, i: id, p: isParent, o: isMyRoute } = useRoute().query;
 const customizeStore = useCustomizeStore();
 
-const { singleRecord } = storeToRefs(customizeStore);
+// const { singleRecord } = storeToRefs(customizeStore);
 const { getSingleRecord, sendSingleRecord } = customizeStore;
 
+const singleRecord = computed<ISingleRecord>(() => {
+  return customizeStore.singleRecord;
+});
 const isImages = computed(() => {
   return singleRecord.value.story?.images.length !== 0;
 });

src/views/customize/components/HeaderPart.vue

@@ -64,6 +64,11 @@ onUnmounted(() => {
     <!--</div>-->
 
     <div v-if="isShow" class="header-modal">
+      <img
+        :src="getImageUrl('small_triangle')"
+        alt=""
+        class="header-modal-logo"
+      />
       <div class="header-modal-item flex-center" @click="share">分享</div>
       <div
         v-if="!singleRecord.sendReport && !props.isParent"
@@ -132,6 +137,14 @@ onUnmounted(() => {
     box-shadow: 0 2px 15px 0 rgba(104, 136, 176, 0.2);
     border-radius: 4px 4px 4px 4px;
 
+    &-logo {
+      position: absolute;
+      top: -6px;
+      right: 8px;
+      width: 14px;
+      height: 6px;
+    }
+
     &-item {
       width: 91px;
       height: 30px;

src/views/customize/components/ShareModal.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ActionSheet as VanActionSheet } from "vant";
 import { computed } from "vue";
-import { getImageUrl, shareToWechatImage } from "@/utils";
+import { getImageUrl, shareToWechat } from "@/utils";
+import { useRoute } from "vue-router";
 
 const list: {
   id: 0 | 1;
@@ -20,6 +21,8 @@ const list: {
   },
 ];
 
+const { title } = useRoute().meta;
+
 const emit = defineEmits(["close"]);
 
 const props = withDefaults(
@@ -35,9 +38,11 @@ const show = computed(() => props.show);
 
 function jump(id: 0 | 1) {
   const image = getImageUrl("single_logo");
-  const title = "行为记录";
-  const description = "ceshi";
-  shareToWechatImage(image, title, id, description);
+  const description = "";
+  const url = window.location.href;
+
+  if (typeof title === "string")
+    shareToWechat(image, title, id, description, url);
 }
 </script>
 

src/views/report/components/HeaderPart.vue

@@ -2,9 +2,39 @@
 import { getImageUrl, returnAppPage } from "@/utils/index.js";
 import { useReportStore } from "@/store";
 import { storeToRefs } from "pinia";
+import { onUnmounted, ref, watch } from "vue";
+import ShareModal from "@/views/customize/components/ShareModal.vue";
+
 const reportStore = useReportStore();
 const { isSendToParent, isTeacher } = storeToRefs(reportStore);
 const { sendToParent } = reportStore;
+
+const isShow = ref(false);
+const shareShow = ref(false);
+
+watch(isShow, (val) => {
+  if (val) {
+    setTimeout(() => {
+      document.addEventListener("click", handleClick);
+    }, 10);
+  } else {
+    document.removeEventListener("click", handleClick);
+  }
+});
+
+function share() {
+  console.log("share");
+  shareShow.value = true;
+}
+
+function handleClick() {
+  console.log("handleClick");
+  if (isShow.value) isShow.value = false;
+}
+
+onUnmounted(() => {
+  document.removeEventListener("click", handleClick);
+});
 </script>
 
 <template>
@@ -13,12 +43,33 @@ const { sendToParent } = reportStore;
     <div class="header-back" @click="returnAppPage">
       <img :src="getImageUrl('return_button')" alt="" class="header-back-img" />
     </div>
-    <div v-if="isTeacher" class="header-send" @click="sendToParent">
-      <div class="header-send-btn flex-center">
-        {{ isSendToParent ? "已发送" : "发送家长" }}
+    <div class="header-send" @click="isShow = true">
+      <img :src="getImageUrl('more')" alt="" class="header-send-more" />
+    </div>
+    <!--<div v-if="isTeacher" class="header-send" @click="sendToParent">-->
+    <!--  <div class="header-send-btn flex-center">-->
+    <!--    {{ isSendToParent ? "已发送" : "发送家长" }}-->
+    <!--  </div>-->
+    <!--</div>-->
+    <!--<div v-else></div>-->
+
+    <div v-if="isShow" class="header-modal">
+      <img
+        :src="getImageUrl('small_triangle')"
+        alt=""
+        class="header-modal-logo"
+      />
+      <div class="header-modal-item flex-center" @click="share">分享</div>
+      <div
+        v-if="!isSendToParent && isTeacher"
+        class="header-modal-item flex-center"
+        @click="sendToParent"
+      >
+        发送家长
       </div>
     </div>
-    <div v-else></div>
+
+    <ShareModal :show="shareShow" @close="shareShow = false" />
   </div>
 </template>
 
@@ -28,6 +79,7 @@ const { sendToParent } = reportStore;
   height: 44px;
 }
 .header {
+  position: relative;
   justify-content: space-between;
   width: 100%;
 
@@ -42,7 +94,13 @@ const { sendToParent } = reportStore;
   }
 
   &-send {
-    padding: 6px 19px;
+    //padding: 6px 19px;
+    padding: 12px 16px;
+
+    &-more {
+      width: 20px;
+      height: 20px;
+    }
 
     &-btn {
       width: 78px;
@@ -58,5 +116,41 @@ const { sendToParent } = reportStore;
       color: #233cd5;
     }
   }
+
+  &-modal {
+    position: absolute;
+    top: 36px;
+    right: 10px;
+    z-index: 20;
+    padding: 5px 0;
+    width: 91px;
+    background: #ffffff;
+    box-shadow: 0 2px 15px 0 rgba(104, 136, 176, 0.2);
+    border-radius: 4px 4px 4px 4px;
+
+    &-logo {
+      position: absolute;
+      top: -6px;
+      right: 8px;
+      width: 14px;
+      height: 6px;
+    }
+
+    &-item {
+      width: 91px;
+      height: 30px;
+      background: #ffffff;
+      font-size: 14px;
+      font-family:
+        PingFang SC-Regular,
+        PingFang SC;
+      font-weight: 400;
+      color: #333333;
+    }
+
+    &-item + &-item {
+      border-top: 1px solid rgba(182, 220, 255, 0.1);
+    }
+  }
 }
 </style>