计分本细节更新

src/pages/point-book-detail.vue

@@ -7,25 +7,40 @@ import ScreenHint2 from "@/components/ScreenHint2.vue";
 import SButton from "@/components/SButton.vue";
 import RingBarChart from "@/components/RingBarChart.vue";
 
-import { getPointBookDetailAPI } from "@/apis";
+import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
 
 const selectedIndex = ref(0);
 const showTip = ref(false);
 const showTip2 = ref(false);
+const showTip3 = ref(false);
 const groups = ref([]);
 const data = ref({});
 const targetId = ref(0);
 const targetSrc = ref("");
 const arrows = ref([]);
+const notes = ref("");
+const draftNotes = ref("");
+const recordId = ref("");
 
 const openTip = (index) => {
   if (index === 1) showTip.value = true;
   else if (index === 2) showTip2.value = true;
+  else if (index === 3) showTip3.value = true;
 };
 
 const closeTip = () => {
   showTip.value = false;
   showTip2.value = false;
+  showTip3.value = false;
+};
+
+const saveNote = async () => {
+  notes.value = draftNotes.value;
+  draftNotes.value = "";
+  showTip3.value = false;
+  if (recordId.value) {
+    await addNoteAPI(recordId.value, notes.value);
+  }
 };
 
 const onSelect = (index) => {
@@ -54,6 +69,8 @@ const ringRates = computed(() => {
 onLoad(async (options) => {
   if (options.id) {
     const result = await getPointBookDetailAPI(options.id || 164);
+    recordId.value = result.id;
+    notes.value = result.remark || "";
     const config = uni.getStorageSync("point-book-config");
     config.targetOption.some((item) => {
       if (item.id === result.targetType) {
@@ -132,6 +149,10 @@ onLoad(async (options) => {
           <view>总环数</view>
           <text>{{ data.userTotalRing }}/{{ data.totalRing }}</text>
         </view>
+        <button hover-class="none" @click="() => openTip(3)">
+          <image src="../static/edit.png" mode="widthFix" />
+          <text>备注</text>
+        </button>
       </view>
       <view class="title-bar">
         <view />
@@ -168,14 +189,21 @@ onLoad(async (options) => {
         </view>
         <view class="ring-text-groups">
           <view v-for="(item, index) in groups" :key="index">
-            <text v-if="selectedIndex === 0 && index !== 0">{{
-              `第${index}组`
-            }}</text>
+            <view v-if="selectedIndex === 0 && index !== 0">
+              <text>{{ index }}：</text>
+              <text>{{
+                item.list.reduce((acc, cur) => acc + cur.ring, 0)
+              }}</text>
+              <text>环</text>
+            </view>
             <view
               v-if="
                 (selectedIndex === 0 && index !== 0) ||
                 (selectedIndex !== 0 && index === selectedIndex)
               "
+              :style="{
+                marginLeft: selectedIndex === 0 && index !== 0 ? '20rpx' : '0',
+              }"
             >
               <text
                 v-for="(arrow, index2) in item.list"
@@ -186,11 +214,7 @@ onLoad(async (options) => {
                 }"
               >
                 {{
-                  arrow.ring === 0
-                    ? "X"
-                    : arrow.ring === -1
-                    ? "M"
-                    : arrow.ring + "环"
+                  arrow.ring === 0 ? "X" : arrow.ring === -1 ? "M" : arrow.ring
                 }}
               </text>
             </view>
@@ -200,7 +224,10 @@ onLoad(async (options) => {
           <SButton :onClick="goBack" :rounded="50">关闭</SButton>
         </view>
       </view>
-      <ScreenHint2 :show="showTip || showTip2" :onClose="closeTip">
+      <ScreenHint2
+        :show="showTip || showTip2 || showTip3"
+        :onClose="!notes && showTip3 ? null : closeTip"
+      >
         <view class="tip-content">
           <block v-if="showTip">
             <text>落点稳定性说明</text>
@@ -212,6 +239,22 @@ onLoad(async (options) => {
             <text>落点分布说明</text>
             <text>展示用户某次练习中射箭的点位</text>
           </block>
+          <block v-if="showTip3">
+            <text>笔记</text>
+            <text v-if="notes">{{ notes }}</text>
+            <textarea
+              v-if="!notes"
+              v-model="draftNotes"
+              rows="4"
+              class="notes-input"
+              placeholder="写下本次射箭的补充信息与心得"
+              placeholder-style="color: #ccc;"
+            />
+            <view v-if="!notes">
+              <button hover-class="none" @click="showTip3 = false">取消</button>
+              <button hover-class="none" @click="saveNote">保存备注</button>
+            </view>
+          </block>
         </view>
       </ScreenHint2>
     </view>
@@ -265,7 +308,8 @@ onLoad(async (options) => {
   column-gap: 3vw;
   margin: 10rpx 30rpx;
 }
-.detail-data > view {
+.detail-data > view,
+.detail-data > button {
   border-radius: 10px;
   background-color: #fff;
   margin-bottom: 20rpx;
@@ -283,6 +327,18 @@ onLoad(async (options) => {
   font-weight: 500;
   color: #000;
 }
+.detail-data > button {
+  display: flex;
+  align-items: center;
+  font-size: 26rpx;
+  color: #999999;
+}
+.detail-data > button > image {
+  width: 28rpx;
+  height: 28rpx;
+  margin-right: 10rpx;
+  margin-left: 20rpx;
+}
 .question-mark {
   width: 28rpx;
   height: 28rpx;
@@ -326,6 +382,33 @@ onLoad(async (options) => {
   margin-top: 20px;
   opacity: 0.8;
 }
+.tip-content > view {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.tip-content > view > input {
+  width: 80%;
+  height: 44px;
+  border-radius: 22px;
+  border: 1px solid #eeeeee;
+  padding: 0 12px;
+  font-size: 14px;
+  color: #000;
+}
+.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;
+}
 .ring-text-groups {
   display: flex;
   flex-direction: column;
@@ -338,22 +421,43 @@ onLoad(async (options) => {
   display: flex;
   justify-content: center;
 }
-.ring-text-groups > view > text {
+.ring-text-groups > view > view:first-child:nth-last-child(2) {
   width: 82rpx;
   text-align: center;
-  font-size: 27rpx;
+  font-size: 20rpx;
+  display: flex;
+  color: #999;
 }
-.ring-text-groups > view > view {
+.ring-text-groups > view > view:first-child:nth-last-child(2) > text {
+  line-height: 30rpx;
+}
+.ring-text-groups
+  > view
+  > view:first-child:nth-last-child(2)
+  > text:nth-child(2) {
+  font-size: 40rpx;
+  color: #666;
+  margin-right: 6rpx;
+}
+.ring-text-groups > view > view:last-child {
   flex: 1;
   display: grid;
   grid-template-columns: repeat(6, auto);
   grid-gap: 10rpx;
   margin-bottom: 30rpx;
-  margin-left: 20rpx;
 }
-.ring-text-groups > view > view > text {
+.ring-text-groups > view > view:last-child > text {
   width: 1fr;
   text-align: center;
   margin-bottom: 10rpx;
 }
+.notes-input {
+  width: calc(100% - 40rpx);
+  margin: 25rpx 0;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  padding: 5px;
+  color: #000;
+  padding: 20rpx;
+}
 </style>

src/pages/point-book-list.vue

@@ -5,14 +5,17 @@ import SModal from "@/components/SModal.vue";
 import EditOption from "@/components/EditOption.vue";
 import PointRecord from "@/components/PointRecord.vue";
 import ScrollList from "@/components/ScrollList.vue";
-import { getPointBookListAPI } from "@/apis";
+import ScreenHint2 from "@/components/ScreenHint2.vue";
+import { getPointBookListAPI, removePointRecord } from "@/apis";
 
+const showTip = ref(false);
 const bowType = ref({});
 const distance = ref(0);
 const bowtargetType = ref({});
 const showModal = ref(false);
 const selectorIndex = ref(0);
 const list = ref([]);
+const removeId = ref("");
 
 const onListLoading = async (page) => {
   const result = await getPointBookListAPI(
@@ -34,6 +37,22 @@ const openSelector = (index) => {
   showModal.value = true;
 };
 
+const onLongPress = (item) => {
+  removeId.value = item.id;
+  showTip.value = true;
+};
+
+const confirmRemove = async () => {
+  try {
+    showTip.value = false;
+    await removePointRecord(removeId.value);
+    list.value = list.value.filter((it) => it.id !== removeId.value);
+    uni.showToast({ title: "已删除", icon: "none" });
+  } catch (e) {
+    uni.showToast({ title: "删除失败，请重试", icon: "none" });
+  }
+};
+
 const onSelectOption = (itemIndex, value) => {
   if (itemIndex === 0) {
     bowType.value = value.name === bowType.value.name ? {} : value;
@@ -78,7 +97,7 @@ const onSelectOption = (itemIndex, value) => {
       <view class="point-records">
         <ScrollList :onLoading="onListLoading">
           <view v-for="(item, index) in list" :key="index">
-            <PointRecord :data="item" />
+            <PointRecord :data="item" :longPress="onLongPress" />
           </view>
           <view class="no-data" v-if="list.length === 0">暂无数据</view>
         </ScrollList>
@@ -119,6 +138,15 @@ const onSelectOption = (itemIndex, value) => {
           />
         </view>
       </SModal>
+      <ScreenHint2 :show="showTip">
+        <view class="tip-content">
+          <text>确认删除该记录吗</text>
+          <view>
+            <button hover-class="none" @click="showTip = false">取消</button>
+            <button hover-class="none" @click="confirmRemove">确认</button>
+          </view>
+        </view>
+      </ScreenHint2>
     </view>
   </Container>
 </template>
@@ -186,4 +214,34 @@ const onSelectOption = (itemIndex, value) => {
   color: #999999;
   font-size: 14px;
 }
+.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>