fix 分享海报功能逻辑调整

hookehuyr
Commit a18e910ba49f30f117b4556df7810518adfd7d88 a18e910b 1 parent 5d77b66b
Showing 2 changed files with 98 additions and 32 deletions
src/views/fxPark/index.vue
src/views/fxPark/poster.vue
--- a/src/views/fxPark/index.vue
View file @a18e910
+++ b/src/views/fxPark/index.vue
View file @a18e910
 <!--
  * @Date: 2024-04-07 10:15:55
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-04-12 12:16:24
+ * @LastEditTime: 2024-04-12 15:42:26
  * @FilePath: /fxPark/src/views/fxPark/index.vue
  * @Description: 文件描述
 -->
@@ -12,14 +12,17 @@
       <div class="quick-entrance-item" @click="goToAudio">
         <van-icon name="chat-o" />&nbsp;&nbsp;<span>植物之声</span>
       </div>
+      <div class="quick-entrance-item" @click="onShare">
+        <van-icon name="chat-o" />&nbsp;&nbsp;<span>分享海报</span>
+      </div>
     </div>
     <div class="container" v-for="(item, index) in data_list" :key="index" @click="onChipClick()">
       <img :src="item.chip_src" class="img">
     </div>
-    <div style="position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; z-index: 25;justify-content: space-evenly;">
+    <!-- <div style="position: fixed; bottom: 1rem; left: 0; right: 0; display: flex; z-index: 25;justify-content: space-evenly;"> -->
-      <div v-if="all_actived" @click="onShare" style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div>
+      <!-- <div v-if="all_actived" @click="onShare" style="display: inline-flex; padding: 0.6rem 2rem; color: #F68015; background-color: #fff; align-items: center; border-radius: 1.5rem;">分享海报</div> -->
       <!-- <div @click="commentsBtn" style="display: inline-flex; padding: 0.6rem 2rem; color: #fff; background-color: #F68015;align-items: center; border-radius: 1.5rem;">弹幕留言</div> -->
-    </div>
+    <!-- </div> -->
     <van-action-sheet v-model:show="show_danmu_message" title="留言" :round="false" :close-on-click-overlay="false" @cancel="onCancel">
       <div style="padding: 1rem 0; height: 10vh; display: flex; padding: 0.5rem;">
@@ -138,9 +141,9 @@ const onChipClick = () => { // 点击碎片回调
     needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
     scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
     success: function (res) {
-      // let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
+      let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
       // 跳转到相应植被介绍页
-      let result = 'http://oa.allforlove.org.cn/f/carbon/#/intro?revision=1';
+      // let result = 'http://oa.allforlove.org.cn/f/carbon/#/intro?revision=1';
       let revision = parseQueryString(result).revision;
       go('/intro', { revision });
     },
@@ -176,11 +179,13 @@ const sendMessage = async () => {
 const onDanmuBlur = (evt) => {
   show_danmu_message.value = false;
   spaceDiv.value = false;
+  document.body.scrollIntoView({behavior: 'smooth'});
 }
 const handleEnterPress = (evt) => {
   if (evt.keyCode === 13) {
     sendMessage();
+    document.body.scrollIntoView({behavior: 'smooth'});
   }
 }
@@ -193,7 +198,15 @@ const onCancel = () => {
 }
 const onShare = () => { // 分享海报按钮
-  go('/finish')
+  // go('/finish')
+  let raw_data = data_list.value.filter(item => item.is_light === '1'); // 获取所有已点亮的植被
+  //
+  $router.push({
+    path: '/poster',
+    query: {
+      revision: raw_data.length ? raw_data[0].revision : -1
+    }
+  });
 }
 const goToAudio = () => {
@@ -209,17 +222,18 @@ const onCloseDanmu = () => {
 .fxPark-page {
   position: relative;
   .quick-entrance-wrapper {
+    position: absolute;
+    right: 0;
+    top: 1.5rem;
+    z-index: 20;
     .quick-entrance-item {
-      position: absolute;
-      right: 0;
-      top: 1.5rem;
       color: white;
       background-color: green;
       border-top-left-radius: 1rem;
       border-bottom-left-radius: 1rem;
-      z-index: 20;
       font-size: 0.9rem;
       padding: 0.5rem;
+      margin-bottom: 1rem;
     }
   }
   .container {
--- a/src/views/fxPark/poster.vue
View file @a18e910
+++ b/src/views/fxPark/poster.vue
View file @a18e910
@@ -4,14 +4,13 @@
       <div v-if="flag" ref="canvasRef" style="position: relative; padding: 1rem; background-color: #fff;">
         <div style="position: absolute; top: 3rem; left: 2rem; color: #FFF; writing-mode: vertical-lr; text-orientation: upright;">
           <div style="position: relative;">
-            <span style="font-size: 2.5rem; font-weight: bolder; letter-spacing: 5px;">悬铃木</span>
+            <span style="font-size: 2.5rem; font-weight: bolder; letter-spacing: 5px;">{{ tree_data?.name }}</span>
-            <div style="position: absolute; bottom: -1rem; letter-spacing: 5px;">智者长老</div>
+            <div style="position: absolute; bottom: -1rem; letter-spacing: 5px;">{{ tree_data?.nickname }}</div>
           </div>
         </div>
         <img :src="imgSrc" style="width: 100%; height: 67vh;">
         <div style="color: #CCCCCC; margin-top: 1rem;">
-          <div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">自带咖啡杯</div>
+          <div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">{{ tree_data?.mission_title }}</div>
-          <div style="font-size: 0.9rem;">去咖啡店时自带咖啡杯，代替一次性纸杯。</div>
         </div>
       </div>
       <div v-if="imgUrl">
@@ -21,12 +20,12 @@
     <div class="poster-control-wrapper">
       <p class="save-text">长按保存到相册</p>
       <div class="poster-control">
-        <div class="poster-prev">上一个</div>
+        <div @click="posterPrev" class="poster-prev">上一个</div>
-        <van-uploader :before-read="beforeRead" :after-read="afterRead" :max-size="1000 * 1024" accept="file">
+        <van-uploader v-if="tree_data?.is_tree === 1" :before-read="beforeRead" :after-read="afterRead" accept="file">
           <div v-if="!upload_loading" class="poster-upload-btn" style="">上传图片</div>
-          <van-loading v-else size="24px" color="#E82D2D" text-color="#E82D2D" vertical>上传中...</van-loading>
+          <van-loading v-else size="24px" color="#fff" text-color="#fff" vertical>上传中...</van-loading>
         </van-uploader>
-        <div class="poster-next">下一个</div>
+        <div @click="posterNext" class="poster-next">下一个</div>
       </div>
     </div>
   </div>
@@ -37,7 +36,9 @@ import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { v4 as uuidv4 } from 'uuid';
 import { qiniuTokenAPI, qiniuUploadAPI, saveFileAPI } from '@/api/common';
+import { getTreeAPI, savePosterAPI } from '@/api/carbon.js';
 import html2canvas from "html2canvas";
+import { showToast } from 'vant';
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
@@ -48,22 +49,64 @@ useTitle($route.meta.title);
 const canvasRef = ref(null);
 const imgUrl = ref('');
-const imgSrc = ref('https://picsum.photos/800');
+const imgSrc = ref('');
 const flag = ref(true);
 const ref_width = ref('');
 const ref_height = ref('');
+const revision = $route.query.revision; // revision 植被编号
+const raw_data = ref([]);
+const tree_data = ref({});
+
+const posterIndex = ref(0);
+
 onMounted(async () => {
+  const { code, data } = await getTreeAPI();
+  if (code) {
+    raw_data.value = data.filter(item => item.is_light === '1'); // 获取所有已点亮的植被
+    let index = raw_data.value.findIndex(item => item.revision == revision); // 植被信息index
+    tree_data.value = raw_data.value[index];
+    imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic;
+  }
   nextTick(() => {
     let canvasDom = canvasRef.value;
     ref_width.value = canvasDom.offsetWidth + 'px';
     ref_height.value = canvasDom.offsetHeight + 'px';
-    // const screenWidth = window.innerWidth;
-    // alert(screenWidth); // 输出移动设备屏幕的宽度
   });
   createImage();
 });
+const resizePoster = () => {
+  tree_data.value = raw_data.value[posterIndex.value];
+  flag.value = true;
+  imgUrl.value = '';
+  imgSrc.value = tree_data.value.user_poster !== null ? tree_data.value.user_poster : tree_data.value.poster_pic;
+  nextTick(() => {
+    let canvasDom = canvasRef.value;
+    ref_width.value = canvasDom.offsetWidth + 'px';
+    ref_height.value = canvasDom.offsetHeight + 'px';
+  });
+  createImage();
+};
+
+const posterPrev = () => {
+  if (posterIndex.value > 0) {
+    posterIndex.value--;
+  } else {
+    posterIndex.value = raw_data.value.length - 1;
+  }
+  resizePoster();
+};
+
+const posterNext = () => {
+  if (posterIndex.value < raw_data.value.length - 1) {
+    posterIndex.value++;
+  } else {
+    posterIndex.value = 0;
+  }
+  resizePoster();
+};
+
 // 获取像素比
 const DPR = () => {
   // 获取设备dpi
@@ -112,10 +155,14 @@ const createImage = () => {
 const upload_loading = ref(false);
 const beforeRead = (file) => {
-  // if (file.type.indexOf('audio') < 0) {
+  if (file.type.indexOf('image') < 0) {
-  //   showToast('请上传音频格式');
+    showToast('请上传图片格式');
-  //   return false;
+    return false;
-  // }
+  }
+  if (file.size > 1000 * 1024) {
+    showToast('图片大小超过1M');
+    return false;
+  }
   return true;
 };
@@ -138,12 +185,17 @@ const afterRead = async (res) => {
     const { filekey, hash, image_info } = await qiniuUploadAPI('http://upload.qiniup.com/putb64/-1/key/' + key, base64url, config)
     if (filekey) {
       // 保存图片
-      const { data } = await saveFileAPI({ filekey, hash, format: '0', height: '0', width: '0' });
+      const { code, data } = await saveFileAPI({ filekey, hash, format: '0', height: '0', width: '0' });
-      flag.value = true;
+      if (code) {
-      imgUrl.value = '';
+        const { code: tree_code, data: tree_data } = await savePosterAPI({ tree_revision: revision, poster_pic: data.src })
-      imgSrc.value = data.src;
+        if (tree_code) {
-      upload_loading.value = false;
+          flag.value = true;
-      createImage();
+          imgUrl.value = '';
+          imgSrc.value = data.src;
+          upload_loading.value = false;
+          createImage();
+        }
+      }
     }
   }
 };