细节调整

src/components/PointRecord.vue

@@ -13,9 +13,7 @@ const props = defineProps({
 });
 const bowOptions = ref({});
 const targetOptions = ref({});
-const rightOptions = [
+// 使用插槽自定义右侧按钮为图标，若需要文字按钮可恢复 rightOptions
-  { text: "删除", style: { backgroundColor: "#ff4d4f", color: "#fff" } },
-];
 
 const toDetailPage = () => {
   uni.navigateTo({
@@ -41,9 +39,13 @@ const onSwipeActionClick = () => {
 <template>
   <uni-swipe-action>
     <uni-swipe-action-item
-      :right-options="rightOptions"
+      @change="() => {}"
-      @click="onSwipeActionClick"
     >
+      <template v-slot:right>
+        <view class="swipe-right" @click="onSwipeActionClick">
+          <image class="swipe-icon" src="../static/delete-white.png" mode="widthFix" />
+        </view>
+      </template>
       <view class="container" @click="toDetailPage">
         <view class="left-part">
           <view class="labels">
@@ -156,4 +158,18 @@ const onSwipeActionClick = () => {
   font-size: 30rpx;
   color: #fff;
 }
+
+/* 右侧滑动按钮（自定义宽度与图标） */
+.swipe-right {
+  width: 120rpx; /* 这里可按需调整按钮宽度 */
+  height: 100%;
+  background-color: #ff7c7c;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.swipe-icon {
+  width: 44rpx;
+  height: 44rpx;
+}
 </style>

src/pages/point-book-detail.vue

@@ -7,7 +7,7 @@ import ScreenHint2 from "@/components/ScreenHint2.vue";
 import RingBarChart from "@/components/RingBarChart.vue";
 
 import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
-import { generateShareCardImage } from "@/util";
+import { wxShare, generateShareCard, generateShareImage } from "@/util";
 
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -26,7 +26,9 @@ const notes = ref("");
 const draftNotes = ref("");
 const record = ref({
   groups: [],
+  user: {},
 });
+const shareType = ref(1);
 
 const openTip = (index) => {
   if (index === 1) showTip.value = true;
@@ -80,9 +82,19 @@ const ringRates = computed(() => {
   return rates.map((r) => r / arrows.value.length);
 });
 
+const loading = ref(false);
+const shareImage = async () => {
+  if (loading.value) return;
+  loading.value = true;
+  await generateShareImage("shareImageCanvas");
+  await wxShare("shareImageCanvas");
+  loading.value = false;
+};
+
 onLoad(async (options) => {
   if (options.id) {
     const result = await getPointBookDetailAPI(options.id || 194);
+    console.log(result);
     record.value = result;
     notes.value = result.remark || "";
     const config = uni.getStorageSync("point-book-config");
@@ -101,7 +113,7 @@ onLoad(async (options) => {
 
 onShareAppMessage(async () => {
   const imageUrl = await generateShareCardImage(
-    "shareCanvas",
+    "shareCardCanvas",
     record.value.recordDate,
     data.value.userTotalRing,
     data.value.totalRing
@@ -114,7 +126,7 @@ onShareAppMessage(async () => {
 });
 onShareTimeline(async () => {
   const imageUrl = await generateShareCardImage(
-    "shareCanvas",
+    "shareCardCanvas",
     record.value.recordDate,
     data.value.userTotalRing,
     data.value.totalRing
@@ -155,9 +167,14 @@ onShareTimeline(async () => {
       </view> -->
       <canvas
         class="share-canvas"
-        canvas-id="shareCanvas"
+        canvas-id="shareCardCanvas"
         style="width: 375px; height: 300px"
       ></canvas>
+      <canvas
+        class="share-canvas"
+        canvas-id="shareImageCanvas"
+        style="width: 375px; height: 860px"
+      ></canvas>
       <view class="detail-data">
         <view>
           <view
@@ -192,7 +209,7 @@ onShareTimeline(async () => {
         <button
           hover-class="none"
           @click="() => openTip(3)"
-          v-if="user.id === record.userId"
+          v-if="user.id === record.user.id"
         >
           <image src="../static/edit.png" mode="widthFix" />
           <text>备注</text>
@@ -268,18 +285,18 @@ onShareTimeline(async () => {
           class="btns"
           :style="{
             gridTemplateColumns: `repeat(${
-              user.id === record.userId ? 2 : 1
+              user.id === record.user.id ? 1 : 1
             }, 1fr)`,
           }"
         >
           <button hover-class="none" @click="goBack">关闭</button>
-          <button
+          <!-- <button
             hover-class="none"
-            @click="share"
+            @click="shareImage"
-            v-if="user.id === record.userId"
+            v-if="user.id === record.user.id"
           >
             分享
-          </button>
+          </button> -->
         </view>
       </view>
       <ScreenHint2

src/util.js

@@ -244,10 +244,10 @@ export async function generateCanvasImage(canvasId, type, user, data) {
   }
 }
 
-export const wxShare = async () => {
+export const wxShare = async (canvasId = "shareCanvas") => {
   try {
     const res = await uni.canvasToTempFilePath({
-      canvasId: "shareCanvas",
+      canvasId,
       fileType: "png", // 图片格式，可选 jpg 或 png
       quality: 1, // 图片质量，取值范围为 0-1
     });
@@ -455,7 +455,7 @@ export const calcRing = (bowtargetId, x, y, diameter, arrowRadius = 5) => {
   return 0;
 };
 
-export const generateShareCardImage = (canvasId, date, actual, total) => {
+export const generateShareCard = (canvasId, date, actual, total) => {
   try {
     const ctx = uni.createCanvasContext(canvasId);
     const imgUrl =
@@ -675,3 +675,5 @@ export const generateShareCardImage = (canvasId, date, actual, total) => {
     console.error("generateShareCardImage 绘制失败:", e);
   }
 };
+
+export const generateShareImage = (canvasId) => {};