改成左滑删除

package.json

@@ -23,6 +23,7 @@
     "@dcloudio/uni-mp-weixin": "3.0.0-4060620250520001",
     "@dcloudio/uni-mp-xhs": "3.0.0-4060620250520001",
     "@dcloudio/uni-quickapp-webview": "3.0.0-4060620250520001",
+    "@dcloudio/uni-ui": "^1.5.11",
     "pinia": "2.0.36",
     "vue": "^3.4.21",
     "vue-i18n": "^9.1.9"

src/components/PointRecord.vue

@@ -6,13 +6,16 @@ const props = defineProps({
     type: Object,
     default: () => {},
   },
-  longPress: {
+  onRemove: {
     type: Function,
     default: () => {},
   },
 });
 const bowOptions = ref({});
 const targetOptions = ref({});
+const rightOptions = [
+  { text: "删除", style: { backgroundColor: "#ff4d4f", color: "#fff" } },
+];
 
 const toDetailPage = () => {
   uni.navigateTo({
@@ -29,45 +32,54 @@ onMounted(() => {
     targetOptions.value[item.id] = item;
   });
 });
+
+const onSwipeActionClick = () => {
+  if (typeof props.onRemove === "function") props.onRemove(props.data);
+};
 </script>
 
 <template>
-  <view
+  <uni-swipe-action>
-    class="container"
+    <uni-swipe-action-item
-    @click="toDetailPage"
+      :right-options="rightOptions"
-    @longpress="longPress(props.data)"
+      @click="onSwipeActionClick"
-  >
+    >
-    <view class="left-part">
+      <view class="container" @click="toDetailPage">
-      <view class="labels">
+        <view class="left-part">
-        <view></view>
+          <view class="labels">
-        <text>{{
+            <view></view>
-          bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
+            <text>{{
-        }}</text>
+              bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
-        <text>{{ data.distance }} 米</text>
+            }}</text>
-        <text>{{
+            <text>{{ data.distance }} 米</text>
-          targetOptions[data.targetType]
+            <text>{{
-            ? targetOptions[data.targetType].name
+              targetOptions[data.targetType]
-            : ""
+                ? targetOptions[data.targetType].name
-        }}</text>
+                : ""
+            }}</text>
+          </view>
+          <view>
+            <text>{{ data.createAt }}</text>
+          </view>
+          <view>
+            <text
+              >黄心率：{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text
+            >
+            <text>10环数：{{ data.tenRings }}</text>
+            <text>平均：{{ data.averageRing }}</text>
+          </view>
+        </view>
+        <view class="right-part">
+          <image src="../static/bow-target.png" mode="widthFix" />
+          <view class="arrow-amount">
+            <text>{{ data.actualTotalRing }}</text>
+            <text>/</text>
+            <text>{{ data.totalRing }}</text>
+          </view>
+        </view>
       </view>
-      <view>
+    </uni-swipe-action-item>
-        <text>{{ data.createAt }}</text>
+  </uni-swipe-action>
-      </view>
-      <view>
-        <text>黄心率：{{ Number((data.yellowRate * 100).toFixed(2)) }}%</text>
-        <text>10环数：{{ data.tenRings }}</text>
-        <text>平均：{{ data.averageRing }}</text>
-      </view>
-    </view>
-    <view class="right-part">
-      <image src="../static/bow-target.png" mode="widthFix" />
-      <view class="arrow-amount">
-        <text>{{ data.actualTotalRing }}</text>
-        <text>/</text>
-        <text>{{ data.totalRing }}</text>
-      </view>
-    </view>
-  </view>
 </template>
 
 <style scoped>
@@ -76,7 +88,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   border-radius: 25rpx;
-  margin-bottom: 25rpx;
   height: 200rpx;
   border: 2rpx solid #fed848;
   padding-left: 30rpx;
@@ -109,6 +120,7 @@ onMounted(() => {
 }
 .right-part > image {
   width: 180rpx;
+  height: 180rpx;
 }
 .labels {
   align-items: flex-end !important;

src/pages.json

@@ -126,5 +126,11 @@
     "navigationStyle": "custom",
     "enablePullDownRefresh": false
   },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+    }
+  },
   "subPackages": []
 }

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">
+          <view v-for="item in list" :key="item.id">
-            <PointRecord :data="item" :longPress="onLongPress" />
+            <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">
+      <block v-for="item in list" :key="item.id">
-        <PointRecord :data="item" />
+        <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)">
+    <ScreenHint2
-      <RewardUs :show="showTip" :onClose="() => (showTip = false)" />
+      :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>