添加计分本草稿功能

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>