fix 海报页面整理

hookehuyr
Commit 63b442556fe7b42d3f2283a361ef6c3ea68c81f1 63b44255 1 parent 9320c6f0
Showing 1 changed file with 59 additions and 16 deletions
src/views/fxPark/poster.vue
--- a/src/views/fxPark/poster.vue
View file @63b4425
+++ b/src/views/fxPark/poster.vue
View file @63b4425
 <template>
   <div class="poster-page">
-    <div style="height: calc(83vh - 2rem); padding: 1rem;">
+    <div class="poster-contain-wrapper">
-      <div v-if="flag" ref="canvasRef" style="position: relative; padding: 1rem; background-color: #fff;">
+      <div v-if="flag" ref="canvasRef" class="poster-contain">
-        <div style="position: absolute; top: 3rem; left: 2rem; color: #FFF; writing-mode: vertical-lr; text-orientation: upright;">
+        <div class="poster-text-boxer">
-          <div style="position: relative;">
+          <div class="poster-text">
-            <span style="font-size: 2.5rem; font-weight: bolder; letter-spacing: 5px;">{{ tree_data?.name }}</span>
+            <span class="name">{{ tree_data?.name }}</span>
-            <div style="position: absolute; bottom: -1rem; letter-spacing: 5px;">{{ tree_data?.nickname }}</div>
+            <div class="nickname">{{ tree_data?.nickname }}</div>
           </div>
         </div>
-        <img :src="imgSrc" style="width: 100%; height: 67vh;">
+        <img :src="imgSrc">
-        <div style="color: #CCCCCC; margin-top: 1rem;">
+        <div class="poster-mission">
-          <div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">{{ tree_data?.mission_title }}</div>
+          <div style="font-weight: bold; text-decoration: underline; margin-bottom: 0.5rem;">
+            {{ tree_data?.mission_title }}
+          </div>
         </div>
       </div>
       <div v-if="imgUrl">
-        <img :src="imgUrl" alt="" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
+        <img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
       </div>
     </div>
     <div class="poster-control-wrapper">
@@ -22,7 +24,7 @@
       <div class="poster-control">
         <div @click="posterPrev" class="poster-prev">上一个</div>
         <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>
+          <div v-if="!upload_loading" class="poster-upload-btn">上传图片</div>
           <van-loading v-else size="24px" color="#fff" text-color="#fff" vertical>上传中...</van-loading>
         </van-uploader>
         <div @click="posterNext" class="poster-next">下一个</div>
@@ -65,7 +67,7 @@ onMounted(async () => {
   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];
+    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(() => {
@@ -76,7 +78,7 @@ onMounted(async () => {
   createImage();
 });
-const resizePoster = () => {
+const resizePoster = () => { // 重置海报
   tree_data.value = raw_data.value[posterIndex.value];
   flag.value = true;
   imgUrl.value = '';
@@ -89,7 +91,7 @@ const resizePoster = () => {
   createImage();
 };
-const posterPrev = () => {
+const posterPrev = () => { // 上一个
   if (posterIndex.value > 0) {
     posterIndex.value--;
   } else {
@@ -98,7 +100,7 @@ const posterPrev = () => {
   resizePoster();
 };
-const posterNext = () => {
+const posterNext = () => { // 下一个
   if (posterIndex.value < raw_data.value.length - 1) {
     posterIndex.value++;
   } else {
@@ -140,7 +142,6 @@ const createImage = () => {
         try {
           // 生成图片地址
           imgUrl.value = canvas.toDataURL("image/png");
-          // console.log("canvas.toDataURL('image/png')", this.imgUrl);
           flag.value = false;
         } catch (e) {
           alert("图片跨域,保存失败");
@@ -154,15 +155,18 @@ const createImage = () => {
 }
 const upload_loading = ref(false);
+
 const beforeRead = (file) => {
   if (file.type.indexOf('image') < 0) {
     showToast('请上传图片格式');
     return false;
   }
+
   if (file.size > 1000 * 1024) {
     showToast('图片大小超过1M');
     return false;
   }
+
   return true;
 };
@@ -187,6 +191,7 @@ const afterRead = async (res) => {
       // 保存图片
       const { code, data } = await saveFileAPI({ filekey, hash, format: '0', height: '0', width: '0' });
       if (code) {
+        // 保存海报图片
         const { code: tree_code, data: tree_data } = await savePosterAPI({ tree_revision: revision, poster_pic: data.src })
         if (tree_code) {
           flag.value = true;
@@ -205,6 +210,44 @@ const afterRead = async (res) => {
 .poster-page {
   height: 100vh;
   background-color: green;
+  .poster-contain-wrapper {
+    height: calc(83vh - 2rem);
+    padding: 1rem;
+    .poster-contain {
+      position: relative;
+      padding: 1rem;
+      background-color: #fff;
+      .poster-text-boxer {
+        position: absolute;
+        top: 3rem;
+        left: 2rem;
+        color: #FFF;
+        writing-mode: vertical-lr;
+        text-orientation: upright;
+        .poster-text {
+          position: relative;
+          .name {
+            font-size: 2.5rem;
+            font-weight: bolder;
+            letter-spacing: 5px;
+          }
+          .nickname {
+            position: absolute;
+            bottom: -1rem;
+            letter-spacing: 5px;
+          }
+        }
+      }
+      img {
+        width: 100%;
+        height: 70vh;
+      }
+      .poster-mission {
+        color: #CCCCCC;
+        margin-top: 1rem;
+      }
+    }
+  }
   .poster-control-wrapper {
     .save-text {
       text-align: center;