添加计分本草稿功能

src/canvas.js

@@ -86,7 +86,7 @@ const drawRoundImage = async (
 };
 
 function drawRingCircle(ctx, x, y, text, diameter = 9) {
-  const fillColor = "#ff4444";
+  const fillColor = "#00bf04";
   const borderColor = "#ffffff";
   const borderWidth = 1;
   const r = diameter / 2;

src/components/BowTarget.vue

@@ -306,10 +306,10 @@ onBeforeUnmount(() => {
 }
 .hit {
   position: absolute;
-  width: 22rpx;
+  width: 10px;
-  height: 22rpx;
+  height: 10px;
-  min-width: 22rpx;
+  min-width: 10px;
-  min-height: 22rpx;
+  min-height: 10px;
   border-radius: 50%;
   border: 1px solid #fff;
   z-index: 1;
@@ -324,12 +324,12 @@ onBeforeUnmount(() => {
   font-size: 16rpx;
   font-family: "DINCondensed", "PingFang SC", "Helvetica Neue", Arial,
     sans-serif;
-  line-height: 10px;
-  display: block;
-  width: 100%;
   text-align: center;
-  line-height: 22rpx;
+  position: absolute;
-  margin-top: 2px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  margin-top: 1px;
 }
 .header {
   width: 100%;

src/pages/point-book-create.vue

@@ -49,7 +49,7 @@ const toEditPage = () => {
       bowtargetType: bowtargetType.value,
       amountGroup: amountGroup.value,
     });
-    uni.navigateTo({
+    uni.redirectTo({
       url: "/pages/point-book-edit",
     });
   } else {

src/pages/point-book-edit.vue

@@ -55,6 +55,7 @@ const onSubmit = async () => {
       Object.values(arrowGroups.value)
     );
     if (res.record_id) {
+      uni.removeStorageSync("last-point-record");
       uni.redirectTo({
         url: `/pages/point-book-detail?id=${res.record_id}`,
       });
@@ -65,26 +66,25 @@ const onClickRing = (ring) => {
   if (arrowGroups.value[currentGroup.value]) {
     arrowGroups.value[currentGroup.value][currentArrow.value] = { ring };
     if (currentArrow.value < amount.value - 1) currentArrow.value++;
+    uni.setStorageSync("last-point-record", arrowGroups.value);
   }
 };
 const deleteArrow = () => {
+  const arrow = arrowGroups.value[currentGroup.value][currentArrow.value];
+  if (JSON.stringify(arrow) === "{}") {
+    currentArrow.value -= 1;
+  } else {
     arrowGroups.value[currentGroup.value][currentArrow.value] = {};
+  }
+  uni.setStorageSync("last-point-record", arrowGroups.value);
 };
 const onEditDone = (arrow) => {
   arrowGroups.value[currentGroup.value][currentArrow.value] = arrow;
   if (currentArrow.value < amount.value - 1) currentArrow.value++;
+  uni.setStorageSync("last-point-record", arrowGroups.value);
 };
 
-onLoad(() => {
+onLoad((options) => {
-  uni.enableAlertBeforeUnload({
-    message: "现在离开会导致未提交的数据丢失，是否继续？",
-    success: (res) => {
-      console.log("已启用离开提示");
-    },
-  });
-});
-
-onMounted(() => {
   const pointBook = uni.getStorageSync("last-point-book");
   if (pointBook.bowtargetType) {
     bowtarget.value = pointBook.bowtargetType;
@@ -102,6 +102,22 @@ onMounted(() => {
       arrowGroups.value[i] = new Array(amount.value).fill({});
     }
   }
+  if (options.withDraft) {
+    const draft = uni.getStorageSync("last-point-record");
+    if (draft) {
+      Object.values(draft).some((arrows, index1) =>
+        arrows.some((arrow, index2) => {
+          currentArrow.value = index2;
+          currentGroup.value = index1 + 1;
+          return JSON.stringify(arrow) === "{}";
+        })
+      );
+      arrowGroups.value = draft;
+    }
+  }
+  // uni.enableAlertBeforeUnload({
+  //   message: "现在离开会导致未提交的数据丢失，是否继续？",
+  // });
 });
 </script>
 
@@ -140,8 +156,8 @@ onMounted(() => {
               : arrow.ring
               ? arrow.ring + " 环"
               : ""
-          }}</view
+          }}
-        >
+        </view>
       </view>
       <text>推荐在靶纸上落点计分，这样可获得稳定性分析</text>
       <view class="bow-rings">

src/pages/point-book-list.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import SModal from "@/components/SModal.vue";
 import EditOption from "@/components/EditOption.vue";
@@ -16,6 +17,7 @@ const showModal = ref(false);
 const selectorIndex = ref(0);
 const list = ref([]);
 const removeId = ref("");
+const pointDraft = ref(null);
 
 const onListLoading = async (page) => {
   const result = await getPointBookListAPI(
@@ -64,6 +66,22 @@ const onSelectOption = (itemIndex, value) => {
   showModal.value = false;
   onListLoading(1);
 };
+
+const onRemoveDraft = () => {
+  pointDraft.value = null;
+  uni.removeStorageSync("last-point-record");
+};
+
+const toEditPage = () => {
+  uni.navigateTo({
+    url: "/pages/point-book-edit?withDraft=true",
+  });
+};
+
+onShow(() => {
+  const draft = uni.getStorageSync("last-point-record");
+  pointDraft.value = draft ? uni.getStorageSync("last-point-book") : null;
+});
 </script>
 
 <template>
@@ -97,6 +115,33 @@ const onSelectOption = (itemIndex, value) => {
       <view class="point-records">
         <ScrollList :onLoading="onListLoading">
           <uni-swipe-action>
+            <block v-if="pointDraft">
+              <uni-swipe-action-item>
+                <template v-slot:right>
+                  <view class="swipe-right" @click="onRemoveDraft">
+                    <image
+                      class="swipe-icon"
+                      src="../static/delete-white.png"
+                      mode="widthFix"
+                    />
+                  </view>
+                </template>
+                <view class="point-draft" v-if="pointDraft" @click="toEditPage">
+                  <text>{{ pointDraft.bowType.name }}</text>
+                  <text>{{ pointDraft.distance }}米</text>
+                  <text>{{ pointDraft.bowtargetType.name }}</text>
+                  <view>
+                    <image src="../static/draft-icon.png" mode="widthFix" />
+                    <text>本地草稿</text>
+                    <view>
+                      <text>计分待完成</text>
+                      <image src="../static/back.png" mode="widthFix" />
+                    </view>
+                  </view>
+                </view>
+              </uni-swipe-action-item>
+              <view :style="{ height: '25rpx' }" />
+            </block>
             <block v-for="(item, index) in list" :key="item.id">
               <uni-swipe-action-item>
                 <template v-slot:right>
@@ -113,7 +158,7 @@ const onSelectOption = (itemIndex, value) => {
               <view
                 v-if="index < list.length - 1"
                 :style="{ height: '25rpx' }"
-              ></view>
+              />
             </block>
           </uni-swipe-action>
           <view class="no-data" v-if="list.length === 0">暂无数据</view>
@@ -274,4 +319,54 @@ const onSelectOption = (itemIndex, value) => {
   width: 44rpx;
   height: 44rpx;
 }
+.point-draft {
+  height: 200rpx;
+  border-radius: 25rpx;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.point-draft > text {
+  font-weight: 500;
+  font-size: 40rpx;
+  color: #333333;
+  margin: 0 20rpx;
+}
+.point-draft > view:last-child {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: #000000b3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.point-draft > view:last-child > image {
+  width: 46rpx;
+  height: 38rpx;
+  margin-bottom: 10rpx;
+}
+.point-draft > view:last-child > text {
+  font-weight: 500;
+  font-size: 26rpx;
+  color: #ffffff;
+}
+.point-draft > view:last-child > view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22rpx;
+  color: #ffffff;
+  transform: translateX(8rpx);
+}
+.point-draft > view:last-child > view > image {
+  width: 30rpx;
+  height: 30rpx;
+  transform: rotate(180deg);
+}
 </style>

src/pages/point-book.vue

@@ -58,29 +58,33 @@ const onSignin = () => {
 
 const startScoring = () => {
   if (user.value.id) {
-    uni.navigateTo({
+    const draft = uni.getStorageSync("last-point-record");
-      url: "/pages/point-book-create",
+    if (draft) {
-    });
+      showTip2.value = true;
+      return;
+    }
+    toScorePage();
   } else {
     showModal.value = true;
   }
 };
 
-const onRemoveRecord = (item) => {
+const toScorePage = (withDraft) => {
-  removeId.value = item.id;
+  showTip2.value = false;
-  showTip2.value = true;
+  if (withDraft) {
+    return uni.navigateTo({
+      url: "/pages/point-book-edit?withDraft=true",
+    });
+  }
+  uni.removeStorageSync("last-point-record");
+  return uni.navigateTo({
+    url: "/pages/point-book-create",
+  });
 };
 
-const confirmRemove = async () => {
+const closeHint = () => {
-  try {
+  showTip.value = false;
   showTip2.value = false;
-    await removePointRecord(removeId.value);
-    const result = await getPointBookListAPI(1);
-    list.value = result.slice(0, 3);
-    uni.showToast({ title: "已删除", icon: "none" });
-  } catch (e) {
-    uni.showToast({ title: "删除失败，请重试", icon: "none" });
-  }
 };
 
 const loadData = async () => {
@@ -352,20 +356,21 @@ onShareTimeline(() => {
     <SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
       <Signin :onClose="() => (showModal = false)" :noBg="true" />
     </SModal>
-    <ScreenHint2
+    <ScreenHint2 :show="showTip || showTip2" :onClose="closeHint">
-      :show="showTip || showTip2"
-      :onClose="showTip ? () => (showTip = false) : null"
-    >
       <RewardUs
         v-if="showTip"
         :show="showTip"
         :onClose="() => (showTip = false)"
       />
       <view class="tip-content" v-if="showTip2">
-        <text>确认删除该记录吗？</text>
+        <text>发现未完成的记分，是否继续编辑？</text>
         <view>
-          <button hover-class="none" @click="showTip2 = false">取消</button>
+          <button hover-class="none" @click="toScorePage(false)">
-          <button hover-class="none" @click="confirmRemove">确认</button>
+            重新计分
+          </button>
+          <button hover-class="none" @click="toScorePage(true)">
+            继续编辑
+          </button>
         </view>
       </view>
     </ScreenHint2>