改成左滑删除

2025-11-04 14:38:16 +08:00
parent aa4fe1babd
commit 3f6d8cb821
7 changed files with 13239 additions and 949 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/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"
--- a/src/components/PointRecord.vue
+++ b/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
-    class="container"
-    @click="toDetailPage"
-    @longpress="longPress(props.data)"
-  >
-    <view class="left-part">
-      <view class="labels">
-        <view></view>
-        <text>{{
-          bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
-        }}</text>
-        <text>{{ data.distance }} 米</text>
-        <text>{{
-          targetOptions[data.targetType]
-            ? targetOptions[data.targetType].name
-            : ""
-        }}</text>
+  <uni-swipe-action>
+    <uni-swipe-action-item
+      :right-options="rightOptions"
+      @click="onSwipeActionClick"
+    >
+      <view class="container" @click="toDetailPage">
+        <view class="left-part">
+          <view class="labels">
+            <view></view>
+            <text>{{
+              bowOptions[data.bowType] ? bowOptions[data.bowType].name : ""
+            }}</text>
+            <text>{{ data.distance }} 米</text>
+            <text>{{
+              targetOptions[data.targetType]
+                ? targetOptions[data.targetType].name
+                : ""
+            }}</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>
-        <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>
+    </uni-swipe-action-item>
+  </uni-swipe-action>
 </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;
--- a/src/pages.json
+++ b/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": []
 }
--- a/src/pages/point-book-list.vue
+++ b/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>
--- a/src/pages/point-book.vue
+++ b/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>
--- a/yarn.lock
+++ b/yarn.lock