改成左滑删除

src/pages/point-book-list.vue

@@ -37,7 +37,7 @@ const openSelector = (index) => {
   showModal.value = true;
 };
 
-const onLongPress = (item) => {
+const onRemoveRecord = (item) => {
   removeId.value = item.id;
   showTip.value = true;
 };
@@ -96,8 +96,9 @@ const onSelectOption = (itemIndex, value) => {
       </view>
       <view class="point-records">
         <ScrollList :onLoading="onListLoading">
-          <view v-for="(item, index) in list" :key="index">
-            <PointRecord :data="item" :longPress="onLongPress" />
+          <view v-for="item in list" :key="item.id">
+            <PointRecord :data="item" :onRemove="onRemoveRecord" />
+            <view :style="{ height: '25rpx' }"></view>
           </view>
           <view class="no-data" v-if="list.length === 0">暂无数据</view>
         </ScrollList>

src/pages/point-book.vue

@@ -14,6 +14,7 @@ import {
   getPointBookConfigAPI,
   getPointBookListAPI,
   getPointBookStatisticsAPI,
+  removePointRecord,
 } from "@/apis";
 
 import { getElementRect } from "@/util";
@@ -34,6 +35,7 @@ const isIOS = computed(() => {
 const loadImage = ref(false);
 const showModal = ref(false);
 const showTip = ref(false);
+const showTip2 = ref(false);
 const data = ref({
   weeksCheckIn: [],
 });
@@ -42,6 +44,7 @@ const list = ref([]);
 const bowTargetSrc = ref("");
 const heatMapImageSrc = ref(""); // 存储热力图图片地址
 const canvasVisible = ref(false); // 控制canvas显示状态
+const removeId = ref("");
 
 const toListPage = () => {
   uni.navigateTo({
@@ -63,6 +66,23 @@ const startScoring = () => {
   }
 };
 
+const onRemoveRecord = (item) => {
+  removeId.value = item.id;
+  showTip2.value = true;
+};
+
+const confirmRemove = async () => {
+  try {
+    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 () => {
   const result = await getPointBookListAPI(1);
   list.value = result.slice(0, 3);
@@ -312,8 +332,9 @@ onShareTimeline(() => {
       <view class="title" v-if="user.id">
         <image src="../static/point-book-title2.png" mode="widthFix" />
       </view>
-      <block v-for="(item, index) in list" :key="index">
-        <PointRecord :data="item" />
+      <block v-for="item in list" :key="item.id">
+        <PointRecord :data="item" :onRemove="onRemoveRecord" />
+        <view :style="{ height: '25rpx' }"></view>
       </block>
       <view
         class="see-more"
@@ -328,8 +349,22 @@ onShareTimeline(() => {
     <SModal :show="showModal" :onClose="() => (showModal = false)" :noBg="true">
       <Signin :onClose="() => (showModal = false)" :noBg="true" />
     </SModal>
-    <ScreenHint2 :show="showTip" :onClose="() => (showTip = false)">
-      <RewardUs :show="showTip" :onClose="() => (showTip = false)" />
+    <ScreenHint2
+      :show="showTip || showTip2"
+      :onClose="showTip ? () => (showTip = false) : null"
+    >
+      <RewardUs
+        v-show="showTip"
+        :show="showTip"
+        :onClose="() => (showTip = false)"
+      />
+      <view class="tip-content" :v-show="showTip2">
+        <text>确认删除该记录吗</text>
+        <view>
+          <button hover-class="none" @click="showTip2 = false">取消</button>
+          <button hover-class="none" @click="confirmRemove">确认</button>
+        </view>
+      </view>
     </ScreenHint2>
   </Container>
 </template>
@@ -479,4 +514,34 @@ onShareTimeline(() => {
   width: 100%;
   height: 100%;
 }
+.tip-content {
+  width: 100%;
+  padding: 25px;
+  display: flex;
+  flex-direction: column;
+  color: #000;
+}
+.tip-content > text {
+  width: 100%;
+  text-align: center;
+  font-size: 14px;
+  margin-top: 5px;
+}
+.tip-content > view {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.tip-content > view > button {
+  width: 48%;
+  background: linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%);
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 12px 0;
+  font-size: 14px;
+  color: #000;
+}
+.tip-content > view > button:last-child {
+  background: #fed847;
+}
 </style>