细节优化

src/pages/point-book-rank.vue

@@ -1,14 +1,17 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import ScrollList from "@/components/ScrollList.vue";
 import PointRankItem from "@/components/PointRankItem.vue";
 import { getPointBookRankListAPI } from "@/apis";
 import { capsuleHeight } from "@/util";
+import { wxShare } from "@/util";
+import { sharePractiseData } from "@/canvas";
 
 const list = ref([]);
 const mine = ref({
   averageRing: 0,
 });
+const loading = ref(false);
 
 const onLoad = async (page) => {
   const result = await getPointBookRankListAPI(page);
@@ -17,6 +20,20 @@ const onLoad = async (page) => {
   else list.value = list.value.concat(result.list);
   return result.list.length;
 };
+
+const shareImage = async () => {
+  if (loading.value || !mine.value.id) return;
+  loading.value = true;
+  await sharePractiseData("shareCanvas", mine.value);
+  await wxShare("shareCanvas");
+  loading.value = false;
+};
+
+// onMounted(() => {
+//   setTimeout(() => {
+//     shareImage();
+//   }, 1000);
+// });
 </script>
 
 <template>
@@ -82,6 +99,15 @@ const onLoad = async (page) => {
         <PointRankItem v-for="item in list" :key="item.id" :data="item" />
       </ScrollList>
     </view>
+    <button hover-class="none" class="share-btn" @click="shareImage">
+      <image src="../static/share-icon.png" mode="widthFix" />
+    </button>
+    <canvas
+      class="share-canvas"
+      id="shareCanvas"
+      type="2d"
+      style="width: 375px; height: 460px"
+    ></canvas>
   </scroll-view>
 </template>
 
@@ -151,7 +177,8 @@ const onLoad = async (page) => {
   line-height: 80rpx;
 }
 .rank-title-bar > text:nth-child(1) {
-  width: 15%;
+  width: calc(15% - 30rpx);
+  padding-left: 30rpx;
 }
 .rank-title-bar > text:nth-child(2) {
   flex: 1;
@@ -167,4 +194,13 @@ const onLoad = async (page) => {
   border-radius: 25rpx;
   margin: 0 25rpx;
 }
+.share-btn {
+  position: fixed;
+  right: 25rpx;
+  bottom: 25rpx;
+}
+.share-btn > image {
+  width: 116rpx;
+  height: 116rpx;
+}
 </style>

src/pages/point-book.vue

@@ -481,7 +481,7 @@ onShareTimeline(() => {
   margin-right: 10rpx;
 }
 .statistics-item > text:nth-child(2) {
-  line-height: 62rpx;
+  transform: translateY(16rpx);
 }
 .statistics-item > text:nth-child(3) {
   width: 100%;
@@ -658,7 +658,7 @@ onShareTimeline(() => {
   flex: 1;
 }
 .rank-title-bar > text:nth-child(3) {
-  width: 18%;
+  width: 16%;
 }
 .rank-title-bar > text:nth-child(4) {
   width: 27%;
@@ -669,8 +669,8 @@ onShareTimeline(() => {
   border-radius: 8rpx;
   border: 1rpx solid #777777;
   height: 20rpx;
-  line-height: 20rpx !important;
   padding: 8rpx;
-  transform: translateY(8rpx);
+  line-height: 20rpx;
+  transform: translateY(6rpx) !important;
 }
 </style>